/*!
 * Confetti — styles for module markup (BlockSuite).
 *
 * Module stylesheets are not in cascade layers, so rules in Confetti's
 * layered stylesheet cannot override what they set. This file loads after
 * them (and after the engine's integrations.css), outside the layers, so its
 * rules win; an admin's custom CSS still comes later. Colors come from the
 * engine's tokens and Confetti's --cf-* values (confetti.css).
 */

/* --------------------------------------------------------------------------
   Buttons and stats
   -------------------------------------------------------------------------- */
.bst-button { border-radius: 999px; font-family: var(--v-font-heading); font-weight: 600; box-shadow: 0 4px 0 color-mix(in srgb, var(--v-primary) 55%, #000); }
.bst-button:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--v-primary) 55%, #000); }
.bst-button--outline { box-shadow: 0 4px 0 currentColor; }
.bst-stats[data-style="cards"] .bst-stats__item {
    border: var(--cf-line) solid var(--v-text);
    border-radius: var(--cf-radius);
    box-shadow: var(--cf-pop) var(--cf-pop) 0 var(--v-primary);
}
.bst-stats[data-style="cards"] .bst-stats__item:nth-child(3n + 2) { box-shadow: var(--cf-pop) var(--cf-pop) 0 var(--v-secondary); }
.bst-stats[data-style="cards"] .bst-stats__item:nth-child(3n + 3) { box-shadow: var(--cf-pop) var(--cf-pop) 0 var(--v-accent); }
.bst-stats__value { font-family: var(--v-font-heading); font-weight: 600; }

/* --------------------------------------------------------------------------
   Sliders: cards sit in a clipping viewport, so an outline and no offset
   shadow
   -------------------------------------------------------------------------- */
.card-slider-block__inner { border: var(--cf-line) solid var(--v-text); border-radius: var(--cf-radius); overflow: hidden; }
.card-slider-block__title { font-family: var(--v-font-heading); font-weight: 600; }
.card-slider-block__prev, .card-slider-block__next { border: 2px solid var(--v-text); box-shadow: none; }

/* --------------------------------------------------------------------------
   Tabs: outlined pills, the selected one filled, over a sticker panel
   -------------------------------------------------------------------------- */
.bst-tabs-block__tablist {
    gap: 0.6rem;
    margin-block-end: 1rem;
    border-bottom: 0;
}
.bst-tabs-block__tab {
    margin: 0;
    padding: 0.45rem 1.2rem;
    border: 2px solid var(--v-border-strong);
    border-radius: 999px;
    background: var(--v-surface);
    color: var(--v-text);
    font-family: var(--v-font-heading);
    font-weight: 600;
    box-shadow: none;
    transform: none;
}
.bst-tabs-block__tab:hover {
    border-color: var(--v-text);
    background: var(--v-surface-alt);
    color: var(--v-text);
    text-decoration: none;
    transform: none;
    box-shadow: none;
}
.bst-tabs-block__tab[aria-selected="true"],
.bst-tabs-block__tab[aria-selected="true"]:hover {
    border-color: var(--v-primary);
    background: var(--v-primary);
    color: var(--v-on-primary);
    box-shadow: 0 4px 0 color-mix(in srgb, var(--v-primary) 55%, #000);
}
.bst-tabs-block__tab:active { transform: none; }
.bst-tabs-block__panel {
    padding: 1.25rem 1.5rem;
    border: var(--cf-line) solid var(--v-text);
    border-radius: var(--cf-radius);
    background: var(--v-surface);
    box-shadow: var(--cf-pop) var(--cf-pop) 0 var(--v-secondary);
}
.bst-tabs-block__panel > :first-child { margin-block-start: 0; }
.bst-tabs-block__panel > :last-child { margin-block-end: 0; }

/* --------------------------------------------------------------------------
   Accordions: each item a rounded box with room inside; the open one gets
   a colored shadow
   -------------------------------------------------------------------------- */
.bst-accordion__item,
.bst-accordion__item:first-of-type {
    border: 2px solid var(--v-border-strong);
    border-radius: var(--cf-radius-sm);
    background: var(--v-surface);
}
.bst-accordion__item + .bst-accordion__item { margin-block-start: 0.75rem; }
.bst-accordion__item:has(> .bst-accordion__header > .bst-accordion__trigger[aria-expanded="true"]) {
    border-color: var(--v-text);
    box-shadow: 4px 4px 0 var(--v-accent);
}
.bst-accordion__header { font-size: var(--v-step-1); }
.bst-accordion__trigger {
    padding: 0.85rem 1.25rem;
    border-radius: calc(var(--cf-radius-sm) - 2px);
    background: none;
    color: var(--v-text);
    font-family: var(--v-font-heading);
    font-weight: 600;
    box-shadow: none;
    transform: none;
}
.bst-accordion__trigger:hover { background: var(--v-surface-alt); color: var(--v-text); box-shadow: none; transform: none; }
.bst-accordion__trigger:active { transform: none; }
.bst-accordion__trigger[aria-expanded="true"] { border-end-start-radius: 0; border-end-end-radius: 0; }
.bst-accordion__content { padding: 0.25rem 1.25rem 1.25rem; }

/* --------------------------------------------------------------------------
   Other BlockSuite blocks
   -------------------------------------------------------------------------- */
.bst-cta { border-radius: var(--cf-radius); }
.bst-hero {
    border-radius: var(--cf-radius);
    -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--cf-wave-h) + 1px) no-repeat, var(--cf-wave-down) bottom / var(--cf-wave-w) var(--cf-wave-h) repeat-x;
    mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--cf-wave-h) + 1px) no-repeat, var(--cf-wave-down) bottom / var(--cf-wave-w) var(--cf-wave-h) repeat-x;
}
.bst-timeline__date { font-family: var(--v-font-heading); font-weight: 600; }