/* =================================================================
   PAGE HEADER (v0.25.2.0) — js/page-header.js
   The header every non-activity screen shares: back link, group,
   title, actions, Help. Tokens only.
   ================================================================= */

.ph {
    display: grid;
    gap: 6px;
    margin: 0 0 16px;
    color: var(--as-ink);
}

.ph-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ph-titles { flex: 1 1 240px; min-width: 0; display: grid; gap: 2px; }

.ph-group {
    font-size: var(--as-fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--as-ink3);
}

.ph-title {
    margin: 0;
    font-size: var(--as-fs-xl);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}
.ph-title i { color: var(--as-brand); margin-right: 4px; }

.ph-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ph-actions .btn,
.ph-actions .ph-help { min-height: var(--as-tap); }

.ph-desc {
    margin: 0;
    font-size: var(--as-fs-sm);
    color: var(--as-ink2);
    max-width: 72ch;
}

.ph-back {
    justify-self: start;
    min-height: var(--as-tap);
    padding: 0 10px 0 4px;
    border: 0;
    background: transparent;
    color: var(--as-brand);
    font: 600 var(--as-fs-sm) inherit;
    cursor: pointer;
    border-radius: var(--as-r-ctl);
}
.ph-back:hover { background: var(--as-brand-wash); }

@media (max-width: 600px) {
    .ph-title { font-size: var(--as-fs-lg); }
    .ph-actions { width: 100%; }
    .ph-actions .btn { flex: 1 1 auto; }
}

/* =================================================================
   LIST → CARDS (v0.25.2.0)
   Put .wsol-cardlist on a <table>, and data-label="Column" on each
   <td>. Under 600px each row becomes a card: the label on the left, the
   value on the right, actions along the bottom. No horizontal scroll,
   and the controls stay on screen instead of in the ninth column.
   ================================================================= */

@media (max-width: 600px) {
    table.wsol-cardlist,
    table.wsol-cardlist tbody,
    table.wsol-cardlist tr,
    table.wsol-cardlist td { display: block; width: 100%; }

    table.wsol-cardlist thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

    table.wsol-cardlist tr {
        margin: 0 0 12px;
        padding: 8px 12px;
        background: var(--as-surface);
        border: 1px solid var(--as-line);
        border-radius: var(--as-r-ctl);
        box-shadow: var(--as-shadow-1);
    }

    table.wsol-cardlist td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 6px 0;
        border: 0;
        border-bottom: 1px solid var(--as-line);
        text-align: right;
        font-size: var(--as-fs-sm);
        overflow-wrap: anywhere;
    }
    table.wsol-cardlist td:last-child { border-bottom: 0; }

    table.wsol-cardlist td[data-label]::before {
        content: attr(data-label);
        flex: none;
        max-width: 45%;
        text-align: left;
        font-size: var(--as-fs-xs);
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--as-ink3);
    }

    /* The row's primary cell (a name, a title) reads as the card's heading. */
    table.wsol-cardlist td.wsol-card-title { display: block; text-align: left; font-size: var(--as-fs-md); font-weight: 700; }
    table.wsol-cardlist td.wsol-card-title::before { display: none; }

    /* Actions cell: buttons along the bottom, full width between them. */
    table.wsol-cardlist td.wsol-card-actions { justify-content: flex-end; flex-wrap: wrap; }
    table.wsol-cardlist td.wsol-card-actions::before { display: none; }

    /* A row the table uses for "No results" or "Loading…" spans the card. */
    table.wsol-cardlist td[colspan] { display: block; text-align: center; }
}