/* ──────────────────────────────────────────────────────────────────────────
 * Card Chrome — the single composable primitive that every card on the page
 * descends from. Outcome envelope, announcement post, comment thread,
 * confirmation modal, empty-state placeholder, inline alert, invite message,
 * notification panel, newsletter preview — every persistent UI artifact the
 * user creates or receives composes from this token set + the .chrome-card
 * class.
 *
 * Tokens are CSS custom properties so they can be inspected at runtime by
 * the token-fidelity guard (scripts/check-card-chrome.sh), overridden per
 * theme, and traced by maintainers from any rendering back to one source.
 *
 * Contract documentation: docs/features/card-chrome-contract.md
 * Loaded once globally from functions.php displayHeader().
 * ────────────────────────────────────────────────────────────────────────── */

:root {
    /* ── Radius and shadow tier ─────────────────────────────────────────── */
    --chrome-radius:        6px;
    --chrome-radius-sm:     4px;
    --chrome-shadow:        0 2px 4px rgba(0,0,0,0.08);
    --chrome-shadow-hover:  0 4px 10px rgba(0,0,0,0.12);

    /* ── Spacing scale ──────────────────────────────────────────────────── */
    --chrome-card-padding:    14px 20px 16px;
    --chrome-header-padding:  14px 20px;
    --chrome-actions-padding: 14px 20px 16px;
    --chrome-actions-gap:     8px;

    /* ── Surface ─────────────────────────────────────────────────────── */
    --chrome-bg:              #ffffff;
    --chrome-fg:              #333333;
    --chrome-fg-muted:        #555555;
    --chrome-border:          1px solid #ececec;

    /* ── Header variants ────────────────────────────────────────────────── */
    /* Mirror the w3-* tints renderOutcomeInto / confirmAction already use,
       declared here so other surfaces don't re-pick adjacent shades. */
    --chrome-variant-success-bg:  #4caf50;
    --chrome-variant-success-fg:  #ffffff;
    --chrome-variant-warning-bg:  #ffc107;
    --chrome-variant-warning-fg:  #1a1a1a;
    --chrome-variant-danger-bg:   #ffcdd2;
    --chrome-variant-danger-fg:   #1a1a1a;
    --chrome-variant-info-bg:     #e3f2fd;
    --chrome-variant-info-fg:     #1a1a1a;
    --chrome-variant-neutral-bg:  #f5f5f5;
    --chrome-variant-neutral-fg:  #333333;

    /* ── Close button geometry ─────────────────────────────────────────── */
    --chrome-close-font-size: 1.4em;
    --chrome-close-padding:   0 8px;
    --chrome-close-line:      1;

    /* ── Expander affordance ───────────────────────────────────────────── */
    --chrome-expander-color:     #888888;
    --chrome-expander-size:      0.85em;
    --chrome-detail-bg:          #f7f7f7;
    --chrome-detail-fg:          #555555;
    --chrome-detail-font:        ui-monospace, SFMono-Regular, Consolas, monospace;
    --chrome-detail-size:        0.8em;

    /* ── Typographic ladder ────────────────────────────────────────────── */
    --chrome-title-size:        1.05em;
    --chrome-title-weight:      700;
    --chrome-body-size:         1em;
    --chrome-meta-size:         0.85em;
    --chrome-meta-color:        #888;

    /* ── Avatar slot reservation ───────────────────────────────────────── */
    --chrome-avatar-size:        40px;
    --chrome-avatar-fallback-bg: #dfe6ec;
    --chrome-avatar-fallback-fg: #3a4855;
}

/* ── Card root ──────────────────────────────────────────────────────────────
 * Every persistent UI artifact roots here. No overflow:hidden — children
 * may legitimately overflow (e.g. the ⋯ dropdown on an announcement card).
 * Variants that NEED clipped corners (modal sheet over backdrop) opt in
 * via .chrome-card--clipped.
 * ────────────────────────────────────────────────────────────────────────── */
.chrome-card {
    background:    var(--chrome-bg);
    color:         var(--chrome-fg);
    border-radius: var(--chrome-radius);
    box-shadow:    var(--chrome-shadow);
    margin:        0;
    padding:       0;
}
.chrome-card--clipped { overflow: hidden; }
.chrome-card--bordered { border: var(--chrome-border); }

/* ── Header band ───────────────────────────────────────────────────────── */
.chrome-card__header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         var(--chrome-header-padding);
    border-top-left-radius:  var(--chrome-radius);
    border-top-right-radius: var(--chrome-radius);
}
.chrome-card__header--success { background: var(--chrome-variant-success-bg); color: var(--chrome-variant-success-fg); }
.chrome-card__header--warning { background: var(--chrome-variant-warning-bg); color: var(--chrome-variant-warning-fg); }
.chrome-card__header--danger  { background: var(--chrome-variant-danger-bg);  color: var(--chrome-variant-danger-fg);  }
.chrome-card__header--info    { background: var(--chrome-variant-info-bg);    color: var(--chrome-variant-info-fg);    }
.chrome-card__header--neutral { background: var(--chrome-variant-neutral-bg); color: var(--chrome-variant-neutral-fg); }
.chrome-card__title {
    font-size:   var(--chrome-title-size);
    font-weight: var(--chrome-title-weight);
    line-height: 1.3;
}

/* ── Close button geometry (single canonical × across every card) ──────── */
.chrome-card__close {
    background:  transparent;
    border:      none;
    color:       inherit;
    font-size:   var(--chrome-close-font-size);
    line-height: var(--chrome-close-line);
    padding:     var(--chrome-close-padding);
    cursor:      pointer;
    opacity:     0.7;
}
.chrome-card__close:hover { opacity: 1; }

/* ── Body ───────────────────────────────────────────────────────────────── */
.chrome-card__body {
    padding:   var(--chrome-card-padding);
    font-size: var(--chrome-body-size);
}
/* When the header is absent, the body's top padding doubles for visual
   balance — used by post cards which don't carry a colored band. */
.chrome-card--headerless .chrome-card__body { padding-top: 16px; }

/* ── Meta line (byline, timestamp, etc.) ───────────────────────────────── */
.chrome-card__meta {
    color:     var(--chrome-meta-color);
    font-size: var(--chrome-meta-size);
    padding:   8px 0;
}

/* ── Expander (Show / Hide details) ─────────────────────────────────────── */
.chrome-card__expander {
    color:           var(--chrome-expander-color);
    font-size:       var(--chrome-expander-size);
    text-decoration: underline;
    cursor:          pointer;
    background:      transparent;
    border:          none;
    padding:         0;
}
.chrome-card__detail {
    display:        none;
    margin-top:     6px;
    padding:        8px 10px;
    background:     var(--chrome-detail-bg);
    border-radius:  var(--chrome-radius-sm);
    font-family:    var(--chrome-detail-font);
    font-size:      var(--chrome-detail-size);
    color:          var(--chrome-detail-fg);
    white-space:    pre-wrap;
    word-break:     break-all;
}
.chrome-card__detail--open { display: block; }

/* ── Action bar (flex row of buttons at the bottom) ────────────────────── */
.chrome-card__actions {
    display:         flex;
    justify-content: flex-end;
    gap:             var(--chrome-actions-gap);
    padding:         var(--chrome-actions-padding);
}
.chrome-card__actions--inline {
    /* For cards where the action row lives inside the body padding rather
       than as a separate band — the announcement card uses this. */
    padding:    0;
    margin-top: 12px;
}

/* ── Avatar slot (fixed-size, prevents layout shift) ───────────────────── */
.chrome-avatar {
    display:        inline-flex;
    width:          var(--chrome-avatar-size);
    height:         var(--chrome-avatar-size);
    border-radius:  50%;
    object-fit:     cover;
    vertical-align: middle;
    align-items:    center;
    justify-content: center;
    flex-shrink:    0;
}
.chrome-avatar--fallback {
    background:  var(--chrome-avatar-fallback-bg);
    color:       var(--chrome-avatar-fallback-fg);
    font-weight: 600;
    font-size:   16px;
}

/* ── Modal backdrop (centered card overlay) ────────────────────────────── */
.chrome-modal-backdrop {
    position:        fixed;
    inset:           0;
    background:      rgba(0,0,0,0.45);
    z-index:         10000;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         24px;
}
.chrome-modal {
    max-width: 480px;
    width:     100%;
}