/* osys-loc.css — sysadmin LoC view.
 *
 * Layered on top of osys.css (terminal green-on-black). Adds the
 * page-specific layout for the LoC tables, bars, and matrix.
 */

main {
  max-width: 1500px;
  margin: 0 auto;
  padding: 14px 18px 80px;
}

/* TOTALS grid */
.ol-totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin: 6px 0 4px;
}
.ol-stat {
  border: 1px dashed var(--ink-2);
  padding: 8px 10px;
  background: var(--bg-tile);
  display: grid;
  gap: 2px;
}
.ol-stat-key {
  color: var(--dim);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ol-stat-val {
  color: var(--ink);
  font-size: 1.45rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.ol-stat .delta-plus { color: var(--warn); }
.ol-stat .delta-zero { color: var(--dim); }
.ol-stat .delta-minus { color: var(--critical); }

/* generic bars */
.ol-bars {
  display: grid;
  gap: 3px;
  font-size: 13px;
}
.ol-bar-row {
  display: grid;
  grid-template-columns: 180px 1fr 110px 70px;
  align-items: center;
  gap: 8px;
}
.ol-bar-label { color: var(--ink); letter-spacing: 0.02em; }
.ol-bar-track {
  height: 13px;
  background: rgba(0, 255, 102, 0.06);
  border: 1px solid var(--rule);
  position: relative;
}
.ol-bar-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--ink-2), var(--ink));
}
.ol-bar-count {
  text-align: right;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.ol-bar-pct {
  text-align: right;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

/* top-dir table */
.ol-table {
  display: grid;
  gap: 2px;
  font-size: 12.5px;
}
.ol-table-row {
  display: grid;
  grid-template-columns: 32px 1fr 100px 90px;
  gap: 10px;
  padding: 3px 6px;
  border-bottom: 1px dotted var(--rule);
}
.ol-table-rank { color: var(--dim); text-align: right; }
.ol-table-path { color: var(--ink); }
.ol-table-count { text-align: right; color: var(--ink-2); }
.ol-table-pct { text-align: right; color: var(--dim); }

/* matrix */
.ol-matrix {
  overflow-x: auto;
}
.ol-matrix table {
  border-collapse: collapse;
  font-size: 12px;
  width: 100%;
  font-variant-numeric: tabular-nums;
}
.ol-matrix th,
.ol-matrix td {
  border: 1px solid var(--rule);
  padding: 4px 7px;
  text-align: right;
  color: var(--ink);
}
.ol-matrix th {
  background: var(--bg-tile);
  color: var(--ink-2);
  font-weight: 500;
  text-align: left;
}
.ol-matrix tr th:first-child,
.ol-matrix tr td:first-child {
  text-align: left;
  color: var(--ink-2);
}
.ol-matrix td.heat-1 { background: rgba(0, 255, 102, 0.04); }
.ol-matrix td.heat-2 { background: rgba(0, 255, 102, 0.08); }
.ol-matrix td.heat-3 { background: rgba(0, 255, 102, 0.14); }
.ol-matrix td.heat-4 { background: rgba(0, 255, 102, 0.22); color: var(--bg); font-weight: 600; }
.ol-matrix td.zero { color: var(--dim); }

/* history canvas */
.ol-canvas {
  display: block;
  width: 100%;
  height: 360px;
  background: rgba(0, 255, 102, 0.02);
  border: 1px solid var(--rule);
  margin: 8px 0 6px;
}
.ol-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 4px 16px;
  font-size: 12px;
  color: var(--ink-2);
}
.ol-legend--inline {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}
.ol-legend .li {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ol-legend .sw {
  width: 11px;
  height: 11px;
  border: 1px solid var(--rule);
  flex-shrink: 0;
}
.ol-note {
  color: var(--dim);
  font-size: 12px;
  margin-top: 6px;
}

/* raw paths */
.ol-raw {
  display: grid;
  gap: 4px;
  font-size: 12px;
}
.ol-raw code {
  display: block;
  padding: 3px 8px;
  border-left: 2px solid var(--ink-2);
  background: var(--bg-tile);
  color: var(--ink);
  font-family: var(--font-mono);
}

/* faux prompt footer with blinking caret (reuse osys.css patterns) */
.prompt-footer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--bg-line);
  border-top: 1px solid var(--ink-2);
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  display: flex;
  gap: 8px;
  z-index: 100;
}
.prompt-footer .pl-prompt { color: var(--ink); font-weight: 600; }
.prompt-footer .pl-cmd { color: var(--ink-2); }
.prompt-footer .pl-caret {
  color: var(--ink);
  animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.prompt-line {
  margin: 14px 0 18px;
  font-size: 13.5px;
}
.prompt-line .pl-prompt { color: var(--ink); font-weight: 600; }
.prompt-line .pl-cmd { color: var(--ink-2); margin-left: 8px; }
.prompt-line .pl-arg { color: var(--dim); margin-left: 6px; }