/* ============================================================
   TRACEFORM ANALYTICS — HARP v2.2
   Stylesheet · Romulan configuration

   SOVRA-FCL-MHCE-v2.5© · DS4-KES-109© · NFIE Compliant · O_f = 0

   ------------------------------------------------------------
   DESIGN NOTE

   Every class name from the previous stylesheet is preserved.
   This is a visual change only — no markup or script depends on
   anything being renamed.

   Palette discipline: only TWO colours carry meaning.

     --mode-api    green   catalogue retrieval
     --mode-disc   amber   discovery, not retrieval

   Everything else is substrate — teals, slates, and a single
   structural green. The previous sheet had cyan, warm blue,
   yellow, red and green all competing at similar weight, which
   is why the mode distinction did not read. Here the substrate
   is desaturated so the two meaningful colours are the only
   bright things on the page.

   Angularity is chevron-based rather than box-based: swept
   corners, left-edge rules, and diagonal notches. Sharp, not
   merely rectangular.
   ============================================================ */

:root {
  /* --- substrate ------------------------------------------- */
  --void:        #05090b;   /* page ground */
  --hull:        #0a1316;   /* panel ground */
  --hull-lit:    #0e1b1f;   /* raised panel */
  --hull-edge:   #16313a;   /* panel border */
  --hull-edge-2: #1d4550;   /* emphasised border */

  /* --- structural accent (non-semantic) --------------------- */
  --rom:         #2f9e8f;   /* primary teal-green */
  --rom-dim:     #1c5f57;
  --rom-bright:  #4fd6c1;
  --rom-ghost:   rgba(47,158,143,.12);

  /* --- semantic. these two mean something. ------------------ */
  --mode-api:    #4ade80;   /* API — catalogue retrieval */
  --mode-disc:   #fbbf24;   /* DISCOVERY — located, not retrieved */

  /* --- alert ------------------------------------------------ */
  --alert:       #d94f4f;

  /* --- type ------------------------------------------------- */
  --txt:         #c4d8d6;
  --txt-dim:     #7e9a97;
  --muted:       #4e6b68;

  /* --- legacy aliases: older rules may still reference these - */
  --navy:        var(--hull);
  --navy-mid:    var(--rom-dim);
  --navy-light:  var(--txt);
  --query-bg:    var(--hull-lit);
  --query-acct:  var(--rom-bright);
  --warn-bg:     #1a1405;
  --warn-acct:   var(--mode-disc);
  --green-acct:  var(--mode-api);
  --red-acct:    var(--alert);
  --card-bg:     var(--hull);
  --card-border: var(--hull-edge);

  --radius:      0;         /* Romulan: no rounded corners */
  --gap:         10px;
  --font-mono:   "SF Mono", "Consolas", "DejaVu Sans Mono", monospace;
}

/* ============================================================
   BASE
   ============================================================ */

html, body {
  margin: 0;
  padding: 0;
  background: var(--void);
  color: var(--txt);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
}

/* Faint horizontal scan structure. Very low contrast — texture,
   not decoration. Disabled under reduced-motion preferences is
   unnecessary (it does not animate), but it is disabled at high
   contrast. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(47,158,143,.022) 0px,
    rgba(47,158,143,.022) 1px,
    transparent 1px,
    transparent 3px
  );
  z-index: 1;
}

@media (prefers-contrast: more) {
  body::before { display: none; }
}

.hidden { display: none !important; }

::selection { background: var(--rom-dim); color: #eafffb; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb {
  background: var(--hull-edge-2);
  border: 1px solid var(--void);
}
::-webkit-scrollbar-thumb:hover { background: var(--rom-dim); }

/* ============================================================
   BANNER
   Swept top-left corner — the single strongest Romulan cue.
   ============================================================ */

.banner {
  position: relative;
  background: linear-gradient(135deg, var(--hull-lit) 0%, var(--hull) 60%);
  border-bottom: 1px solid var(--rom-dim);
  padding: 18px 26px 14px 34px;
  z-index: 2;
  clip-path: polygon(0 14px, 14px 0, 100% 0, 100% 100%, 0 100%);
}

.banner::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--rom-bright), transparent);
}

.banner h1 {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rom-bright);
}

.banner h2 {
  margin: 3px 0 0;
  font-size: .76rem;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--txt-dim);
}

.banner h3 {
  margin: 6px 0 0;
  font-size: .64rem;
  font-weight: 400;
  letter-spacing: .1em;
  color: var(--muted);
}

/* ============================================================
   TAB NAVIGATION
   Chevron leading edge on the active tab.
   ============================================================ */

.tab-nav {
  display: flex;
  gap: 1px;
  background: var(--void);
  border-bottom: 1px solid var(--hull-edge);
  padding: 0 20px;
  position: relative;
  z-index: 2;
}

.tab-btn {
  appearance: none;
  border: none;
  border-top: 2px solid transparent;
  background: var(--hull);
  color: var(--muted);
  font-family: inherit;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 11px 20px 10px;
  cursor: pointer;
  transition: color .12s, background .12s, border-color .12s;
}

.tab-btn:hover {
  color: var(--txt-dim);
  background: var(--hull-lit);
}

.tab-btn.active {
  color: var(--rom-bright);
  background: var(--hull-lit);
  border-top-color: var(--rom-bright);
  position: relative;
}

.tab-btn.active::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -1px;
  transform: translateX(-50%) rotate(45deg);
  width: 6px; height: 6px;
  background: var(--hull-lit);
  border-right: 1px solid var(--rom-bright);
  border-bottom: 1px solid var(--rom-bright);
}

.tab-btn .tab-num {
  color: var(--rom-dim);
  margin-right: 7px;
  font-weight: 700;
}

.tab-btn.active .tab-num { color: var(--rom-bright); }

/* ============================================================
   PANELS
   ============================================================ */

.tab-panel { display: none; padding: 22px 26px 40px; position: relative; z-index: 2; }
.tab-panel.active { display: block; }

.section-hdr {
  background: linear-gradient(90deg, var(--rom-dim) 0%, transparent 92%);
  border-left: 3px solid var(--rom-bright);
  color: #dff7f2;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 7px 14px;
  margin: 22px 0 0;
}

.section-hdr.dark {
  background: linear-gradient(90deg, var(--hull-edge) 0%, transparent 92%);
  border-left-color: var(--rom-dim);
  color: var(--txt-dim);
}

.section-body {
  background: var(--hull);
  border: 1px solid var(--hull-edge);
  border-top: none;
  padding: 4px 0;
}

/* ============================================================
   FIELD ROWS
   ============================================================ */

.field-row {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--gap);
  align-items: center;
  padding: 7px 16px;
  border-bottom: 1px solid rgba(22,49,58,.5);
}

.field-row:last-child { border-bottom: none; }
.field-row.alt { background: rgba(14,27,31,.6); }

.field-label {
  font-size: .72rem;
  color: var(--txt-dim);
  letter-spacing: .04em;
}

.field-value,
.field-value input[type="text"],
.field-value input[type="number"],
.field-value textarea,
.field-value select {
  width: 100%;
  box-sizing: border-box;
  background: var(--void);
  border: 1px solid var(--hull-edge-2);
  border-radius: 0;
  color: var(--rom-bright);
  font-family: inherit;
  font-size: .74rem;
  padding: 5px 9px;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}

.field-value:focus,
.field-value input[type="text"]:focus,
.field-value input[type="number"]:focus,
.field-value textarea:focus,
.field-value select:focus {
  border-color: var(--rom);
  box-shadow: 0 0 0 1px var(--rom-ghost);
}

.field-value select option {
  background: var(--hull);
  color: var(--txt);
}

/* ============================================================
   FILTER GRID
   ============================================================ */

.filter-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hull-edge);
  border: 1px solid var(--hull-edge);
  margin: 10px 16px;
}

.filter-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--hull);
  padding: 8px 12px;
  font-size: .71rem;
  color: var(--txt-dim);
  cursor: pointer;
  transition: background .12s, color .12s;
}

.filter-cell:nth-child(3n) { border-right: none; }
.filter-cell:nth-last-child(-n+3) { border-bottom: none; }

.filter-cell:hover { background: var(--hull-lit); color: var(--txt); }

.filter-cell input[type="checkbox"] {
  appearance: none;
  width: 12px; height: 12px;
  flex: 0 0 12px;
  background: var(--void);
  border: 1px solid var(--hull-edge-2);
  cursor: pointer;
  position: relative;
}

.filter-cell input[type="checkbox"]:checked {
  background: var(--rom);
  border-color: var(--rom-bright);
}

.filter-cell input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 3px; top: 0px;
  width: 3px; height: 7px;
  border: solid var(--void);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

.filter-cell.checked {
  background: var(--rom-ghost);
  color: var(--rom-bright);
}

/* ============================================================
   EXECUTION DIRECTIVE
   ============================================================ */

.directive-body {
  background: var(--hull);
  border: 1px solid var(--hull-edge);
  padding: 6px 0;
}

.directive-rule {
  padding: 13px 18px;
  border-bottom: 1px solid rgba(22,49,58,.5);
  border-left: 2px solid transparent;
  transition: border-color .12s, background .12s;
}

.directive-rule:hover {
  border-left-color: var(--rom-dim);
  background: rgba(14,27,31,.5);
}

.directive-rule:last-child { border-bottom: none; }

.directive-rule-title {
  color: var(--rom-bright);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.directive-rule-body {
  color: var(--txt-dim);
  font-size: .74rem;
  line-height: 1.62;
}

/* The NFIE block is the constitutional statement of the
   instrument. It gets the strongest structural treatment on the
   page — notched corners, both edges ruled. */
.nfie-block {
  margin: 18px 0;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(28,95,87,.20), rgba(10,19,22,.9));
  border: 1px solid var(--rom-dim);
  border-left: 3px solid var(--rom-bright);
  color: var(--txt);
  font-size: .75rem;
  line-height: 1.68;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

.nfie-block strong { color: var(--rom-bright); letter-spacing: .06em; }

.parse-order-block {
  margin: 18px 0 0;
  padding: 14px 18px;
  background: var(--hull-lit);
  border: 1px solid var(--hull-edge);
}

.parse-order-block .po-title {
  color: var(--rom);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.parse-order-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 6px 0;
}

.po-num {
  flex: 0 0 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rom-dim);
  color: #eafffb;
  font-size: .68rem;
  font-weight: 700;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%);
}

.po-text { color: var(--txt-dim); font-size: .73rem; line-height: 1.55; }
.po-text strong { color: var(--txt); }

/* ============================================================
   REPOSITORY REGISTRY
   ============================================================ */

.repo-region-hdr {
  background: linear-gradient(90deg, var(--hull-edge) 0%, transparent 88%);
  border-left: 3px solid var(--rom);
  color: var(--rom-bright);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 6px 14px;
  margin: 18px 0 0;
}

.repo-col-hdr span:first-child,
.repo-col-hdr span:nth-child(3) { text-align: left; padding-left: 10px; }

.repo-table {
  background: var(--hull);
  border: 1px solid var(--hull-edge);
  border-top: none;
}

.repo-col-hdr {
  display: grid;
  grid-template-columns: 92px 1fr 116px 78px 62px 70px;
  gap: 8px;
  padding: 7px 14px;
  background: var(--hull-lit);
  border-bottom: 1px solid var(--hull-edge-2);
  color: var(--muted);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.repo-row {
  display: grid;
  grid-template-columns: 92px 1fr 116px 78px 62px 70px;
  gap: 8px;
  align-items: center;
  padding: 6px 14px;
  border-bottom: 1px solid rgba(22,49,58,.4);
  border-left: 2px solid transparent;
  transition: background .1s, border-color .1s;
}

.repo-row:last-child { border-bottom: none; }
.repo-row:nth-child(odd) { background: rgba(14,27,31,.45); }
.repo-row:hover { background: var(--hull-lit); border-left-color: var(--rom-dim); }

.repo-row.selected {
  background: var(--rom-ghost);
  border-left-color: var(--rom-bright);
}

.repo-cell { font-size: .69rem; color: var(--txt-dim); overflow: hidden; text-overflow: ellipsis; }
.repo-cell.code { color: var(--rom-bright); font-weight: 700; letter-spacing: .04em; }
.repo-cell.name { color: var(--txt); }
.repo-cell.center { text-align: center; }

.repo-cell.access-full, .repo-cell .access-full { color: var(--rom); font-weight: 700; }
.repo-cell.access-part, .repo-cell .access-part { color: var(--txt-dim); }
.repo-cell.access-none, .repo-cell .access-none { color: var(--muted); }

/* api-yes / api-no are NOT given the semantic mode colours.
   They report a registry assertion, not a probe result. Keeping
   them neutral prevents a hand-entered "Yes" from reading with
   the same authority as an API-mode retrieval. */
.repo-cell.api-yes, .repo-cell .api-yes { color: var(--txt-dim); }
.repo-cell.api-no,  .repo-cell .api-no  { color: var(--muted); }

.repo-select-toggle {
  appearance: none;
  width: 100%;
  background: var(--void);
  border: 1px solid var(--hull-edge-2);
  color: var(--muted);
  font-family: inherit;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 3px 0;
  cursor: pointer;
  transition: all .12s;
}

.repo-select-toggle:hover { border-color: var(--rom); color: var(--txt-dim); }

.repo-select-toggle.active {
  background: var(--rom-dim);
  border-color: var(--rom-bright);
  color: #eafffb;
}

.repo-row.fillable .repo-cell input {
  width: 100%;
  box-sizing: border-box;
  background: var(--void);
  border: 1px solid var(--hull-edge);
  color: var(--rom-bright);
  font-family: inherit;
  font-size: .68rem;
  padding: 3px 6px;
  outline: none;
}

/* ============================================================
   QUERY GATE
   ============================================================ */

.query-gate-hdr {
  background: linear-gradient(90deg, var(--rom-dim), transparent 88%);
  border-left: 3px solid var(--rom-bright);
  color: #dff7f2;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 8px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.query-gate-body {
  background: var(--hull-lit);
  border: 1px solid var(--rom-dim);
  border-top: none;
  padding: 16px 18px;
}

.query-label {
  color: var(--txt-dim);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 7px;
}

#actual-query {
  width: 100%;
  box-sizing: border-box;
  min-height: 78px;
  background: var(--void);
  border: 1px solid var(--rom-dim);
  color: var(--rom-bright);
  font-family: inherit;
  font-size: .82rem;
  line-height: 1.55;
  padding: 11px 13px;
  outline: none;
  resize: vertical;
  transition: border-color .12s, box-shadow .12s;
}

#actual-query:focus {
  border-color: var(--rom-bright);
  box-shadow: 0 0 0 1px var(--rom-ghost);
}

.query-warn {
  margin-top: 11px;
  padding: 9px 13px;
  background: rgba(251,191,36,.06);
  border-left: 2px solid var(--mode-disc);
  color: #d6bd82;
  font-size: .69rem;
  line-height: 1.55;
}

.gate-actions { display: flex; gap: 12px; align-items: center; margin-top: 15px; }

.btn-execute {
  appearance: none;
  background: var(--rom-dim);
  border: 1px solid var(--rom-bright);
  color: #eafffb;
  font-family: inherit;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 10px 26px;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  transition: background .12s, color .12s;
}

.btn-execute:hover { background: var(--rom); }

.btn-execute:disabled {
  background: var(--hull-lit);
  border-color: var(--hull-edge);
  color: var(--muted);
  cursor: not-allowed;
}

.btn-download {
  appearance: none;
  background: transparent;
  border: 1px solid var(--hull-edge-2);
  color: var(--txt-dim);
  font-family: inherit;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 10px 20px;
  cursor: pointer;
  transition: all .12s;
}

.btn-download:hover { border-color: var(--rom); color: var(--rom-bright); }

.execute-note { color: var(--muted); font-size: .66rem; font-style: italic; }

/* ============================================================
   DASHBOARD TABLE
   ============================================================ */

.dash-table {
  background: var(--hull);
  border: 1px solid var(--hull-edge);
  margin-top: 0;
}

.dash-col-hdr {
  display: grid;
  grid-template-columns: 1fr 100px 100px 100px;
  padding: 7px 15px;
  background: var(--hull-lit);
  border-bottom: 1px solid var(--hull-edge-2);
  color: var(--muted);
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.dash-row {
  display: grid;
  grid-template-columns: 1fr 100px 100px 100px;
  padding: 6px 15px;
  border-bottom: 1px solid rgba(22,49,58,.4);
}

.dash-row:last-child { border-bottom: none; }
.dash-row.alt { background: rgba(14,27,31,.45); }

.dash-row.total-row {
  background: var(--rom-ghost);
  border-top: 1px solid var(--rom-dim);
  border-bottom: none;
  font-weight: 700;
}

.dash-cell { font-size: .7rem; color: var(--txt-dim); }
.dash-cell.label { color: var(--txt); }
.dash-cell.center { text-align: center; }
.dash-cell.green { color: var(--mode-api); }
.dash-cell.yellow { color: var(--mode-disc); }
.dash-cell.red { color: var(--alert); }

/* ============================================================
   RESULTS — SECTIONS A / B / C
   ============================================================ */

.results-area { margin-top: 26px; }

.results-section-hdr {
  background: linear-gradient(90deg, var(--hull-edge) 0%, transparent 90%);
  border-left: 3px solid var(--rom);
  color: var(--rom-bright);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 8px 15px;
  margin-top: 18px;
}

.results-section-body {
  background: var(--hull);
  border: 1px solid var(--hull-edge);
  border-top: none;
  padding: 13px 16px;
  font-size: .73rem;
}

/* A result card carries no mode colour of its own. Mode is
   declared by the block heading above it, written in harp.js.
   Colouring the card too would let a reader mistake styling for
   provenance. */
.result-card {
  background: var(--hull-lit);
  border: 1px solid var(--hull-edge);
  border-left: 2px solid var(--hull-edge-2);
  padding: 11px 14px;
  margin-bottom: 9px;
  transition: border-color .12s;
}

.result-card:hover { border-left-color: var(--rom); }

.result-card-title { font-size: .78rem; margin-bottom: 4px; }

.result-card-title a {
  color: var(--rom-bright);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.result-card-title a:hover { border-bottom-color: var(--rom-bright); }

.result-card-source {
  color: var(--muted);
  font-size: .65rem;
  word-break: break-all;
  margin-bottom: 6px;
}

.result-card-snippet { color: var(--txt-dim); font-size: .72rem; line-height: 1.6; }

.result-card-provenance {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid rgba(22,49,58,.6);
  color: var(--muted);
  font-size: .65rem;
}

.result-card-provenance strong { color: var(--txt-dim); }

/* ============================================================
   STATUS BADGES
   ============================================================ */

.status-badge {
  display: inline-block;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 2px 7px;
  border: 1px solid;
  clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px));
}

.badge-ok       { color: var(--mode-api);  border-color: var(--mode-api);  background: rgba(74,222,128,.08); }
.badge-empty    { color: var(--txt-dim);   border-color: var(--hull-edge-2); background: transparent; }
.badge-gap      { color: var(--mode-disc); border-color: var(--mode-disc); background: rgba(251,191,36,.08); }
.badge-inactive { color: var(--muted);     border-color: var(--hull-edge); background: transparent; }

/* ============================================================
   STATUS BAR
   ============================================================ */

.status-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 20px;
  background: var(--hull);
  border-top: 1px solid var(--rom-dim);
  font-size: .65rem;
  z-index: 20;
}

.status-bar .status-left  { color: var(--muted); letter-spacing: .06em; }
.status-bar .status-right { color: var(--txt-dim); }

#status-active-repos { color: var(--rom-bright); font-weight: 700; }

/* ============================================================
   SPINNER
   ============================================================ */

.spinner {
  display: inline-block;
  width: 11px; height: 11px;
  border: 2px solid var(--hull-edge-2);
  border-top-color: var(--rom-bright);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: -1px;
  margin-right: 6px;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2.4s; }
  * { transition-duration: .01ms !important; }
}

/* ============================================================
   FOOTER
   ============================================================ */

footer {
  text-align: center;
  padding: 26px 0 46px;
  color: var(--muted);
  font-size: .63rem;
  letter-spacing: .09em;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
  .field-row { grid-template-columns: 1fr; gap: 4px; }
  .filter-grid { grid-template-columns: repeat(2, 1fr); }
  .repo-col-hdr, .repo-row { grid-template-columns: 80px 1fr 66px; }
  .repo-col-hdr span:nth-child(n+4),
  .repo-row .repo-cell:nth-child(n+4):not(:last-child) { display: none; }
  .dash-col-hdr, .dash-row { grid-template-columns: 1fr 62px 62px 62px; }
  .tab-nav { overflow-x: auto; padding: 0 8px; }
  .tab-panel { padding: 16px 12px 60px; }
}