/* Admin trace pages: filter form, dense scrolling tables, round timeline. Tokens only (scripts/ci/check-css-tokens.sh). */

.admin {
    box-sizing: border-box;
    width: 100%;
    max-width: calc(var(--col-max) * 1.6);
    min-width: 0;
    margin: 0 auto;
    padding: var(--s-6) var(--s-5);
}

.admin__head {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    margin-bottom: var(--s-5);
}

.admin__head h1 {
    overflow-wrap: anywhere;
}

.admin__lede,
.admin__muted {
    color: var(--paper-lo);
    font-size: var(--t-sm);
    line-height: var(--lh-sm);
    overflow-wrap: anywhere;
}

.admin__crumb {
    margin-bottom: var(--s-3);
    font: 400 var(--t-xs) / var(--lh-xs) var(--font-mono);
    color: var(--paper-lo);
}

.admin__chips,
.admin__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}

.admin__count {
    margin-left: var(--s-2);
    font: 400 var(--t-sm) / var(--lh-sm) var(--font-mono);
    color: var(--paper-lo);
}

.admin-section {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    margin-top: var(--s-6);
    min-width: 0;
}

.admin-section__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
}

.admin-filter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--s-3);
    align-items: end;
    padding: var(--s-4);
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
}

.admin-filter__field {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    min-width: 0;
    font-size: var(--t-xs);
    color: var(--paper-lo);
}

.admin-filter__field--wide {
    grid-column: span 2;
}

.admin-filter__flags {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    grid-column: 1 / -1;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: var(--t-sm);
}

.admin-filter__legend {
    padding: 0;
    margin-bottom: var(--s-1);
    font-size: var(--t-xs);
    color: var(--paper-lo);
}

.admin-filter__actions {
    display: flex;
    gap: var(--s-2);
}

/* Filters fold away on narrow screens; from 900 px the form is always shown (where ::details-content is supported). */
.admin-filters > summary {
    font-size: var(--t-sm);
    padding: var(--s-2) 0;
    cursor: pointer;
}

.admin-filters[open] > summary {
    margin-bottom: var(--s-2);
}

@media (min-width: 900px) {
    @supports selector(::details-content) {
        .admin-filters > summary {
            display: none;
        }

        .admin-filters::details-content {
            content-visibility: visible;
            display: block;
        }
    }
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 44rem), 1fr));
    gap: var(--s-5);
    min-width: 0;
}

.admin-grid > * {
    min-width: 0;
}

.admin-scroll {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    scrollbar-width: thin;
    scrollbar-color: var(--rule-strong) transparent;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-sm);
    line-height: var(--lh-sm);
}

.admin-table th,
.admin-table td {
    padding: var(--s-1) var(--s-3);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--rule);
}

.admin-table th {
    font: 500 var(--t-xs) / var(--lh-xs) var(--font-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--paper-lo);
    white-space: nowrap;
}

.admin-table tbody tr:last-child td {
    border-bottom: 0;
}

.admin-table .num {
    text-align: right;
    white-space: nowrap;
}

.admin-table .mono,
.mono {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
}

.admin-table .nowrap {
    white-space: nowrap;
}

.admin-table__question {
    min-width: 16rem;
}

.admin-table__wrap {
    overflow-wrap: anywhere;
    min-width: 12rem;
}

.admin-pager {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}

.admin-meta {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--s-1) var(--s-4);
    margin: 0;
    font-size: var(--t-sm);
}

.admin-meta dt {
    color: var(--paper-lo);
}

.admin-meta dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.admin-details {
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    padding: var(--s-2) var(--s-3);
    min-width: 0;
}

.admin-details > summary {
    font-size: var(--t-sm);
}

.admin-details[open] > summary {
    margin-bottom: var(--s-2);
}

.admin-conv {
    margin: 0;
    padding-left: var(--s-5);
    font-size: var(--t-sm);
}

.admin-round {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    min-width: 0;
    padding: var(--s-4);
    border: 1px solid var(--rule-strong);
    border-left: .1875rem solid var(--accent);
    border-radius: var(--r-2);
}

.admin-msg__role {
    margin-top: var(--s-2);
    font: 500 var(--t-xs) / var(--lh-xs) var(--font-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--paper-lo);
}

.admin-call {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    min-width: 0;
    padding: var(--s-3);
    background-color: var(--ink-2);
    border-radius: var(--r-2);
}

.admin-call__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
}

/* --ok (brand lime) and the light --caution are too pale for 12 px text on the light paper: keep them for border and glyph. */
.admin .chip--ok,
.admin .chip--caution {
    color: var(--paper-hi);
}

.admin .chip--ok::before {
    color: var(--ok);
}

.admin .chip--caution::before {
    color: var(--caution);
}

.admin-note {
    padding: var(--s-1) var(--s-3);
    font-size: var(--t-sm);
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-1);
    overflow-wrap: anywhere;
}

.admin-note--caution {
    color: var(--caution);
    border-color: var(--caution);
}

.admin-note--fault {
    color: var(--fault);
    border-color: var(--fault);
}

/* Prompts and tool results can be huge: they scroll inside the block, never the page. */
.trace-pre {
    max-height: 28rem;
    padding: var(--s-2) var(--s-3);
    overflow: auto;
    color: var(--paper);
    background-color: var(--code-bg);
    border: 1px solid var(--rule);
    border-radius: var(--r-1);
    font: 400 var(--t-xs) / var(--lh-xs) var(--font-mono);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    scrollbar-width: thin;
    scrollbar-color: var(--rule-strong) transparent;
}

.trace-pre--short {
    max-height: 10rem;
}

.trace-pre .k { color: var(--code-keyword); }
.trace-pre .t { color: var(--code-type); }
.trace-pre .s { color: var(--code-string); }
.trace-pre .n { color: var(--code-number); }
.trace-pre .c { color: var(--code-comment); }
.trace-pre .a { color: var(--code-attr); }

@media (max-width: 599.98px) {
    .admin {
        padding: var(--s-5) var(--s-4);
    }

    .admin-filter__field--wide {
        grid-column: auto;
    }

    .admin-meta {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-round {
        padding: var(--s-3);
    }

    /* Each turn becomes a card: labelled cells in two columns, the question across both. */
    .admin-table--cards,
    .admin-table--cards tbody {
        display: block;
    }

    .admin-table--cards thead {
        position: absolute;
        width: .0625rem;
        height: .0625rem;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .admin-table--cards tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--s-1) var(--s-3);
        padding: var(--s-3);
        border-bottom: 1px solid var(--rule);
    }

    .admin-table--cards tbody tr:last-child {
        border-bottom: 0;
    }

    .admin-table--cards td,
    .admin-table--cards tbody tr:last-child td {
        padding: 0;
        border-bottom: 0;
        min-width: 0;
        text-align: left;
        overflow-wrap: anywhere;
    }

    .admin-table--cards td.num {
        text-align: left;
    }

    .admin-table--cards td::before {
        content: attr(data-label);
        display: block;
        font: 500 var(--t-xs) / var(--lh-xs) var(--font-mono);
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--paper-lo);
    }

    .admin-table--cards .admin-table__question {
        grid-column: 1 / -1;
        min-width: 0;
    }
}