/* =========================================================================
   "After the meeting" preview — a single card: meeting title + a list of
   one-tap follow-up actions over a warm poster backdrop. Light/dark via
   prefers-color-scheme. Scoped to .actions-stage. Source: "Boswell Actions[
   Light].html" (the .hero/.stage wrapper is collapsed into .actions-stage).
   Text + spacing in cqi so the card scales with its own width (container
   query) — content stays proportional and clips cleanly via overflow:hidden.
   ========================================================================= */
.actions-stage {
    position: relative;
    width: 100%; max-width: 480px;
    margin-top: var(--s8);
    aspect-ratio: 1 / 1.04;
    border-radius: 30px; overflow: hidden;
    border: 1px solid var(--border-hi);
    box-shadow: var(--stage-shadow);
    user-select: none;
    container-type: inline-size;

    /* dark (default) palette */
    --surface: #17110b;
    --sheet: #1e1710;
    --border-hi: rgba(255, 240, 220, 0.14);
    --hairline: rgba(255, 240, 220, 0.09);
    --text: #f3e8d4;
    --text-dim: rgba(243, 232, 212, 0.66);
    --text-faint: rgba(243, 232, 212, 0.42);
    --tile: rgba(232, 185, 106, 0.13);
    --tile-icon: #e8b96a;
    --stage-shadow: 0 40px 90px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
    --poster-bg:
        radial-gradient(60% 40% at 30% 12%, rgba(232,185,106,0.28) 0%, transparent 60%),
        linear-gradient(165deg, #3a2a14 0%, #4a3618 45%, #2c2010 100%);
    --dot-bg: rgba(255,240,220,0.16);
    --header-shadow: 0 14px 24px -10px rgba(0,0,0,0.5);
}

@media (prefers-color-scheme: light) {
    .actions-stage {
        --surface: #f1ede4;
        --sheet: #ffffff;
        --border-hi: rgba(40, 30, 18, 0.14);
        --hairline: rgba(40, 30, 18, 0.10);
        --text: #2a2018;
        --text-dim: rgba(42, 32, 24, 0.70);
        --text-faint: rgba(42, 32, 24, 0.46);
        --tile: #e7e7cf;
        --tile-icon: #3a3326;
        --stage-shadow: 0 40px 90px rgba(70,52,24,0.24), inset 0 1px 0 rgba(255,255,255,0.7);
        --poster-bg:
            radial-gradient(60% 42% at 30% 12%, rgba(244,222,180,0.70) 0%, transparent 60%),
            linear-gradient(165deg, #e8b96a 0%, #d8a44e 45%, #c89236 100%);
        --dot-bg: rgba(40,30,18,0.18);
        --header-shadow: 0 14px 22px -12px rgba(50,40,20,0.28);
    }
}

/* poster backdrop, peeking on left + top */
.actions-stage .poster { position: absolute; inset: 0; z-index: 0; background: var(--poster-bg); }

/* app panel — bleeds to right + bottom, inset top-left */
.actions-stage .panel {
    position: absolute; left: 5%; top: 5%; right: 0; bottom: 0; z-index: 1;
    border-top-left-radius: 22px; overflow: hidden;
    display: flex; flex-direction: column;
    background: var(--sheet);
}

/* header over the poster */
.actions-stage .header {
    flex-shrink: 0; padding: 3.75cqi 5.83cqi 4.58cqi;
    background: var(--surface);
    box-shadow: var(--header-shadow);
    position: relative; z-index: 2;
}
.actions-stage .dots { display: flex; gap: 1.67cqi; }
.actions-stage .dots span { width: 2.5cqi; height: 2.5cqi; border-radius: 50%; background: var(--dot-bg); }
.actions-stage .h-title { font-family: var(--font-serif); font-size: 7.5cqi; letter-spacing: -0.25cqi; line-height: 1; margin-top: 5.42cqi; color: var(--text); }
.actions-stage .h-chips { display: flex; align-items: center; gap: 1.88cqi; margin-top: 4.17cqi; }
.actions-stage .chip {
    display: inline-flex; align-items: center; gap: 1.46cqi; min-height: 6.67cqi; padding: 0 2.71cqi;
    border-radius: 999px; border: 1px solid var(--hairline);
    font-size: 2.92cqi; color: var(--text-dim);
}
.actions-stage .chip svg { width: 3.33cqi; height: 3.33cqi; color: var(--text-faint); }
.actions-stage .chip b { color: var(--text); font-weight: 500; }

/* action list */
.actions-stage .acts { flex: 1; min-height: 0; padding: 1.25cqi 0 0; background: var(--sheet); }
.actions-stage .act {
    display: flex; align-items: center; gap: 3.33cqi;
    padding: 2.92cqi 5.83cqi; border-bottom: 1px solid var(--hairline);
}
.actions-stage .act-tile {
    flex-shrink: 0; width: 10.42cqi; height: 10.42cqi; border-radius: 2.71cqi;
    background: var(--tile); display: grid; place-items: center;
}
.actions-stage .act-tile svg { width: 5cqi; height: 5cqi; color: var(--tile-icon); }
.actions-stage .act-label { font-size: 3.75cqi; letter-spacing: -0.2px; color: var(--text); }