/* line-height:1 — a badge is a label, not body text. Without it the badge inherits
   the 1.6 body line-height (19.2px), inflating its box above the row's text line so it
   drives badge rows ~5px taller than text rows. The td already owns the row's vertical
   rhythm; the badge's padding only shapes the pill. */
.badge { display: inline-flex; align-items: center; line-height: 1; padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-control); font-size: var(--fs-1); font-weight: var(--fw-600); text-transform: uppercase; letter-spacing: 0.025em; }
/* A clickable badge is a <button class="badge …"> (e.g. the folders guest/visit count
   that expands the guest list). Reset only the UA button chrome — NOT the box — so the
   .badge background/border/padding stand (don't add .unbutton, which out-specifies
   .badge and would flatten the pill to plain text). */
button.badge { appearance: none; -webkit-appearance: none; font-family: inherit; cursor: pointer; }
.badge-success { background: var(--surface); color: var(--success-text); border: 1px solid var(--success-border); }
.badge-warning { background: var(--surface); color: var(--warning-text); border: 1px solid var(--warning-border); }
.badge-danger { background: var(--surface); color: var(--danger-text); border: 1px solid var(--danger-border); }
/* The neutral badge IS the "pill" — the single low-emphasis tag (Format tags,
   type tags, counts, etc.). Subtle sunken surface + border outline, sharp
   corners, content-width with a square minimum (1-char tags read as a square).
   --surface-sunken is theme-adaptive. There is NO separate .pill class — this
   is it, so don't reintroduce one. */
.badge-neutral { background: var(--surface-sunken); color: var(--text-muted); border: 1px solid var(--border); min-width: var(--sp-5); justify-content: center; }
/* Count badge with a value (folder Files/Guests/Visits): boxed like neutral, accent-tinted. */
.badge-accent { background: var(--accent-surface); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); min-width: var(--sp-5); justify-content: center; }
.badge-accent.cursor-pointer:hover { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.badge-primary { background: var(--accent-surface); color: var(--accent); }
.expiry-badge-card {
    background: rgba(15, 23, 42, 0.05);
    border: 1px solid var(--border);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--radius-control);
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}
.expiry-badge-text {
    font-size: var(--fs-2);
    font-weight: var(--fw-500);
}
.expiry-badge-timer {
    color: var(--text);
}
.badge-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 50%;
}
.large-icon-badge {
    width: 80px;
    height: 80px;
    background: var(--accent-surface);
    color: var(--accent);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--sp-4) auto;
}