/*
 * System operations pages — page-only tweaks for the System hub views
 * (overview, activity, chat outcomes, errors, trace, memory, tools, MCP,
 * sandboxes, identity, infrastructure, docs). Every surface comes from
 * components/; this file only covers markup the shared partials and
 * helpers emit that no component styles yet:
 *
 *   .pager         partials/_pager.php — Prev / "1–50 of N" / Next, or
 *                  a single "Show 50 more" link under a table.
 *   details.clamp  clamp_details() — the helper renders
 *                  <details class="clamp"><summary class="clamp__summary">
 *                  head… <span class="clamp__more">Show more</span></summary>
 *                  <pre class="clamp__full">…</pre></details>, and the
 *                  bare `.clamp` rule in components/_clamp.css is the
 *                  3-line box clamp, which would also clamp the opened
 *                  <pre>. Reset the box here and style the two parts.
 *   .doc-body      a markdown body shown verbatim (docs detail).
 */

/* ── Pager ─────────────────────────────────────────────────────── */
.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--color-border);
    font-size: var(--fs-sm);
}
.pager__status { font-variant-numeric: tabular-nums; }

/* ── clamp_details() ───────────────────────────────────────────── */
details.clamp {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
    white-space: normal;
    min-width: 0;
}
.clamp__summary {
    cursor: pointer;
    list-style: none;
    overflow-wrap: anywhere;
}
.clamp__summary::-webkit-details-marker { display: none; }
.clamp__more { color: var(--color-primary-hi); font-weight: 500; white-space: nowrap; }
details.clamp[open] > .clamp__summary .clamp__more { display: none; }
.clamp__full {
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-xs);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 60vh;
}

/* ── Docs detail body ──────────────────────────────────────────── */
.doc-body {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 70vh;
}

/* ── Trace step payloads ───────────────────────────────────────── */
/* The step header wraps on a phone instead of pushing the time off
   the card; _trace.css keeps it on one line for the desktop case. */
.trace__step-head { flex-wrap: wrap; }