/*
 * Card — the one surface. Radius 16, 1px border, header + body.
 *
 *   <article class="card">
 *     <header class="card__header">
 *       <h2 class="card__title">Providers</h2>
 *       <span class="card__meta">8</span>
 *       <div class="card__actions">…</div>
 *     </header>
 *     <div class="card__body">…</div>
 *   </article>
 *
 * Cards never set their own width — the grid does. `.card--flush`
 * removes body padding so a .table-wrap fills edge to edge.
 */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.card__header {
    display: flex;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    flex-wrap: wrap;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--color-border);
    min-height: 48px;
}
.card__title {
    margin: 0;
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--color-text-muted);
    white-space: nowrap;
    line-height: var(--lh-tight);
}
/* Optional line under the title ("Last 30 days · fixed window"). */
.card__subtitle {
    flex-basis: 100%;
    margin: 0;
    font-size: var(--fs-xs);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-dim);
    white-space: normal;
}
/* Count pill next to the title (row totals, unread counts). */
.card__meta {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 var(--sp-2);
    border-radius: var(--radius-pill);
    background: var(--color-surface-hi);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-xxs);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
/* Trailing controls (range seg, filter, "View all"). */
.card__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-left: auto;
}
.card__actions .seg { flex-shrink: 0; }
.card__actions-total { font-size: var(--fs-sm); color: var(--color-text-muted); white-space: nowrap; }
.card__link {
    margin-left: auto;
    color: var(--color-primary-hi);
    font-size: var(--fs-xs);
    font-weight: 500;
}
.card__link:hover { text-decoration: underline; }

.card__body { padding: var(--sp-4); min-width: 0; overflow-wrap: anywhere; }
.card__body--scroll-x { overflow-x: auto; }
.card--flush .card__body { padding: 0; }
.card--flush .table-wrap { border: 0; border-radius: 0; }
.card__footer {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--color-border);
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

/* Inline notes / states inside a body. Prefer .empty for empty data. */
.card__empty { color: var(--color-text-dim); font-style: italic; font-size: var(--fs-sm); }
.card__error { color: var(--color-danger); font-size: var(--fs-sm); margin: 0 0 var(--sp-2); }
.card__hint  { color: var(--color-text-dim); font-size: var(--fs-xs); margin: var(--sp-2) 0 0; }
.card__note  { margin: var(--sp-3) 0 0; font-size: var(--fs-xs); color: var(--color-text-dim); }
.card__note--warn { color: var(--color-warning); }

/* Grid spans. Only widen where the grid actually has that many
   tracks — a `span 2` in a one-column grid creates an implicit column
   and overflows the phone. */
.card--wide { grid-column: 1 / -1; }
@media (min-width: 720px)  { .card--span-2 { grid-column: span 2; } }
@media (min-width: 1080px) { .card--span-3 { grid-column: span 3; } }

/* Generic vertical list (notifications, recent items). */
.list      { display: flex; flex-direction: column; gap: var(--sp-3); list-style: none; padding: 0; margin: 0; }
.list__item{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-1) var(--sp-3); }
.list__title{ grid-column: 1 / 2; min-width: 0; overflow-wrap: anywhere; }
.list__time { grid-column: 2 / 3; color: var(--color-text-dim); font-size: var(--fs-xs); white-space: nowrap; }
.list__body { grid-column: 1 / -1; color: var(--color-text-muted); font-size: var(--fs-sm); margin: 0; }
.list--linked .list__item { padding: 0; }
.list__link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sp-1) var(--sp-3);
    color: inherit;
    padding: var(--sp-2);
    margin: calc(-1 * var(--sp-2));
    border-radius: var(--radius);
    transition: background var(--t-fast);
}
.list__link:hover { background: var(--color-surface-hi); color: inherit; }
.list__link .list__title { font-weight: 500; }
.list__link .list__time  { grid-column: 2 / 3; }
.list__link .list__body  { grid-column: 1 / -1; }

/* Disk cleaner rows (System → Infrastructure). Page-owned; kept here
   until the infrastructure view moves to .kv + .switch. */
.cleaner { list-style: none; margin: 0; padding: 0; }
.cleaner__row { padding: var(--sp-2) 0; border-top: 1px solid var(--color-border); }
.cleaner__row--locked { opacity: 0.6; }
.cleaner__label { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; }
.cleaner__row--locked .cleaner__label { cursor: default; }
.cleaner__name { font-weight: 600; }
.cleaner__risk { font-size: var(--fs-xxs); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.cleaner__risk--safe { color: var(--color-success); }
.cleaner__risk--careful { color: var(--color-warning); }
.cleaner__risk--destructive { color: var(--color-danger); }
.cleaner__size { margin-left: auto; color: var(--color-text-dim); font-size: var(--fs-xs); white-space: nowrap; }
.cleaner__desc { margin: var(--sp-half) 0 0 var(--sp-5); color: var(--color-text-dim); font-size: var(--fs-xs); }
.cleaner__blocked { color: var(--color-warning); }
.cleaner__item { margin: var(--sp-quarter) 0 0 var(--sp-5); color: var(--color-text-dim); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cleaner__actions { margin-top: var(--sp-3); display: flex; justify-content: flex-end; }
.cleaner__glyph { width: 1rem; text-align: center; color: var(--color-text-dim); }

/* A filter strip inside a card header takes its own full-width line. */
.card__header > .chips { flex-basis: 100%; margin: var(--sp-2) 0 0; }

/* Collapsible card: <details class="card"><summary class="card__header">.
   The settings and notification-template lists both group long content
   this way, so the behaviour lives on the component, not the page. */
details.card > summary.card__header { cursor: pointer; list-style: none; user-select: none; }
details.card > summary.card__header::-webkit-details-marker { display: none; }
details.card > summary.card__header:hover { background: var(--color-surface-hi); }
details.card > summary.card__header:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.card__chevron { margin-left: auto; flex: none; transition: transform 0.15s ease; }
details.card[open] > summary.card__header .card__chevron { transform: rotate(180deg); }