/* ==========================================================================
   ACXPA Member Bytes — shared component layer
   File: /wp-content/themes/kleo-child/member-bytes-system/css/member-bytes-core.css
   Loaded on BOTH the single byte and the library archive.

   WHY THIS FILE EXISTS
   Before 25.0, member-bytes.css and member-bytes-archive.css each carried their
   own copy of the buttons, the gate CTA, the form controls and the focus rules.
   26 selectors were duplicated across the two files, 16 of them byte-identical.
   Fixing a button meant remembering to fix it twice, and nothing enforced that.

   The two markup prefixes (.mbrt- single, .mbrta- archive) are kept as they are
   — renaming classes across two templates is a separate, riskier change — so the
   shared rules simply address both prefixes in one grouped selector.

   ---------------------------------------------------------------------------
   DESIGN SYSTEM COMPLIANCE (§10 type scale, §19/21 tokens)

   Every size, colour, space and radius here is a token. Nothing is a raw px
   except drawn geometry that must NOT scale with the reader's font-size
   preference (hairline borders, icon boxes, control heights).

   The type scale is the published one, root-corrected by acxpa-tokens.css:
       display 36→52 | h1 30→40 | h2 30 | h3 22 | h4 18
       lead 20 | body 16 | small 14 | caption 12 | eyebrow 13

   Text on the teal-900 and teal-800 grounds uses the measured on-dark ROLES
   (--acxpa-ds-text-on-dark / --acxpa-ds-text-muted-on-dark), not a hand-picked
   tint. Solid colour, never white at reduced opacity — §17.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Theme chrome suppression — both views are full-bleed, no sidebar.
   -------------------------------------------------------------------------- */

.single-member_bytes .kleo-page-title,
.single-member_bytes .page-title,
.single-member_bytes .page-title-wrap,
.single-member_bytes .titlebar,
.single-member_bytes #page-title,
.single-member_bytes .section-title,
.single-member_bytes .sidebar,
.single-member_bytes #sidebar,
.single-member_bytes .kleo-sidebar,
.single-member_bytes aside.sidebar,
.post-type-archive-member_bytes .kleo-page-title,
.post-type-archive-member_bytes .page-title,
.post-type-archive-member_bytes .page-title-wrap,
.post-type-archive-member_bytes .titlebar,
.post-type-archive-member_bytes #page-title,
.post-type-archive-member_bytes .section-title,
.post-type-archive-member_bytes .sidebar,
.post-type-archive-member_bytes #sidebar,
.post-type-archive-member_bytes .kleo-sidebar,
.post-type-archive-member_bytes aside.sidebar { display: none !important; }

.single-member_bytes .content-area,
.single-member_bytes .main-content,
.single-member_bytes .with-sidebar,
.single-member_bytes .right_sidebar,
.single-member_bytes .left_sidebar,
.post-type-archive-member_bytes .content-area,
.post-type-archive-member_bytes .main-content,
.post-type-archive-member_bytes .with-sidebar,
.post-type-archive-member_bytes .right_sidebar,
.post-type-archive-member_bytes .left_sidebar {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* --------------------------------------------------------------------------
   Page shell

   These four rules used to be inline style attributes on the template markup
   (style="width:100%;max-width:100%;float:none;" and
    style="max-width:1200px;margin:0 auto;padding:32px 20px;"). Inline styles
   beat any stylesheet without !important, so nothing here could be adjusted
   without editing PHP. They are ordinary CSS now.
   -------------------------------------------------------------------------- */

.acxpa-mbrt-primary,
.acxpa-mbrta-primary {
    width: 100%;
    max-width: 100%;
    float: none;
}

.acxpa-mbrt-wrap,
.acxpa-mbrta-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--acxpa-ds-space-xl) var(--acxpa-ds-space-md);
}

/* --------------------------------------------------------------------------
   Roots
   -------------------------------------------------------------------------- */

.mbrt,
.mbrta {
    font-family: var(--acxpa-ds-font);
    font-size: var(--acxpa-ds-text-body);
    line-height: var(--acxpa-ds-leading-body);
    color: var(--acxpa-ds-text);
}

.mbrt *,
.mbrt *::before,
.mbrt *::after,
.mbrta *,
.mbrta *::before,
.mbrta *::after { box-sizing: border-box; }

/* Kleo forces body{line-height:20px}. Restore a ratio inside the components. */
.mbrt p, .mbrt li, .mbrt label,
.mbrta p, .mbrta li, .mbrta label { line-height: var(--acxpa-ds-leading-body); }

/* --------------------------------------------------------------------------
   Eyebrow — §10 defines this role. Never hand-roll 11px uppercase again.
   -------------------------------------------------------------------------- */

.mbrt-gate-cta__kicker,
.mbrta-gate-cta__kicker,
.mbrt-hero__tag,
.mbrta-tag,
.mbrta-cat-title,
.mbrt-moment__speaker,
.mbrta-featured__kicker,
.mbrta-featured__label,
.mbrt-gate-preview__label,
.mbrta-filter-label,
.mbrt-hero__speaker-badge,
.mbrta-card__cat-tag,
.mbrta-card__access-pill-top,
.mbrta-result-card__bite {
    font-size: var(--acxpa-ds-text-eyebrow);
    letter-spacing: var(--acxpa-ds-tracking-eyebrow);
    line-height: var(--acxpa-ds-leading-eyebrow);
    text-transform: uppercase;
    font-weight: 800;
}

/* --------------------------------------------------------------------------
   Buttons — one definition, both prefixes.
   -------------------------------------------------------------------------- */

.mbrt-btn,
.mbrta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--acxpa-ds-space-sm) var(--acxpa-ds-space-lg);
    border: 2px solid transparent;
    border-radius: var(--acxpa-ds-radius-pill);
    font-family: var(--acxpa-ds-font);
    font-size: var(--acxpa-ds-text-small);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color .12s, border-color .12s, color .12s, transform .12s;
}

.mbrt-btn-primary,
.mbrta-btn-primary {
    background: var(--acxpa-ds-teal-700);
    color: var(--acxpa-ds-text-on-dark) !important;
    border-color: var(--acxpa-ds-teal-700);
}
.mbrt-btn-primary:hover,
.mbrta-btn-primary:hover {
    background: var(--acxpa-ds-teal-900);
    border-color: var(--acxpa-ds-teal-900);
    color: var(--acxpa-ds-text-on-dark) !important;
    transform: translateY(-1px);
}

.mbrt-btn-secondary,
.mbrta-btn-secondary {
    background: var(--acxpa-ds-bg);
    color: var(--acxpa-ds-teal-700) !important;
    border-color: var(--acxpa-ds-teal-700);
}
.mbrt-btn-secondary:hover,
.mbrta-btn-secondary:hover {
    background: var(--acxpa-ds-teal-700);
    color: var(--acxpa-ds-text-on-dark) !important;
    transform: translateY(-1px);
}

.mbrt-btn:focus-visible,
.mbrta-btn:focus-visible {
    outline: 3px solid var(--acxpa-ds-focus);
    outline-offset: 3px;
}

/* Attention pulse on the primary conversion action. */
.mbrt-btn--pulse,
.mbrta-btn-pulse { animation: acxpa-mb-pulse 2s ease-in-out infinite; }

@keyframes acxpa-mb-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(15, 79, 92, .45); }
    50%      { box-shadow: 0 0 0 8px rgba(15, 79, 92, 0); }
}

/* --------------------------------------------------------------------------
   Gate / upsell CTA — the paywall block. Identical on both views.
   -------------------------------------------------------------------------- */

.mbrt-gate-cta,
.mbrta-gate-cta {
    padding: var(--acxpa-ds-space-xl);
    border: 2px solid var(--acxpa-ds-gold);
    border-radius: var(--acxpa-ds-radius-xl);
    background: var(--acxpa-ds-gold-tint);
    box-shadow: var(--acxpa-ds-shadow-md);
}
.mbrt-gate-cta { margin-top: var(--acxpa-ds-space-lg); }

.mbrt-gate-cta__kicker,
.mbrta-gate-cta__kicker {
    color: var(--acxpa-ds-warning-deep);
    margin: 0 0 var(--acxpa-ds-space-2xs);
}

.mbrt-gate-cta__heading,
.mbrta-gate-cta__heading {
    font-size: var(--acxpa-ds-text-h3);
    font-weight: 800;
    line-height: var(--acxpa-ds-leading-tight);
    color: var(--acxpa-ds-ink);
    margin: 0 0 var(--acxpa-ds-space-xs);
    text-wrap: balance;
}

.mbrt-gate-cta__desc,
.mbrta-gate-cta__desc {
    font-size: var(--acxpa-ds-text-body);
    line-height: var(--acxpa-ds-leading-body);
    color: var(--acxpa-ds-ink);
    margin: 0 0 var(--acxpa-ds-space-md);
}

.mbrt-gate-cta__list,
.mbrta-gate-cta__list {
    list-style: none;
    margin: 0 0 var(--acxpa-ds-space-lg);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--acxpa-ds-space-xs);
}
.mbrt-gate-cta__list li,
.mbrta-gate-cta__list li {
    padding: var(--acxpa-ds-space-xs) var(--acxpa-ds-space-sm);
    border: 1px solid var(--acxpa-ds-gold);
    border-radius: var(--acxpa-ds-radius-md);
    background: var(--acxpa-ds-bg);
    font-size: var(--acxpa-ds-text-small);
    color: var(--acxpa-ds-ink);
}

.mbrt-gate-cta__resource-note,
.mbrta-gate-cta__resource-note {
    font-size: var(--acxpa-ds-text-small);
    line-height: var(--acxpa-ds-leading-body);
    color: var(--acxpa-ds-ink);
    margin: 0 0 var(--acxpa-ds-space-md);
}
.mbrt-gate-cta__resource-note a,
.mbrta-gate-cta__resource-note a {
    color: var(--acxpa-ds-link);
    font-weight: 700;
}

.mbrt-gate-actions,
.mbrta-gate-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--acxpa-ds-space-xs);
}

.mbrt-gate-cta__subscribe-link,
.mbrta-gate-cta__subscribe-link {
    display: block;
    width: 100%;
    margin-top: var(--acxpa-ds-space-2xs);
    font-size: var(--acxpa-ds-text-small);
    font-weight: 700;
    color: var(--acxpa-ds-link) !important;
    text-decoration: underline !important;
}
.mbrt-gate-cta__subscribe-link:hover,
.mbrta-gate-cta__subscribe-link:hover { color: var(--acxpa-ds-link-hover) !important; }

/* --------------------------------------------------------------------------
   Form controls — one height, one border, one focus ring.
   48px control height is drawn geometry, deliberately not a type token.
   -------------------------------------------------------------------------- */

.mbrt input.mbrt-ts-input,
.mbrta input.mbrta-search,
.mbrt select.mbrt-ts-speaker,
.mbrta select.mbrta-filter-select {
    box-sizing: border-box;
    height: 48px;
    min-height: 48px;
    margin: 0;
    border-radius: var(--acxpa-ds-radius-md);
    font-family: var(--acxpa-ds-font);
    font-size: var(--acxpa-ds-text-body);
    line-height: 1.2;
    color: var(--acxpa-ds-text);
    background-color: var(--acxpa-ds-bg);
    display: block;
}

.mbrt input.mbrt-ts-input,
.mbrta input.mbrta-search {
    width: 100%;
    padding: 0 var(--acxpa-ds-space-md);
    border: 2px solid var(--acxpa-ds-bg);
    font-weight: 500;
}
.mbrt input.mbrt-ts-input::placeholder,
.mbrta input.mbrta-search::placeholder { color: var(--acxpa-ds-text-muted); opacity: 1; }

/* padding carries !important because app.css sets `select { padding: 0 30px 0 9px
   !important }` on the bare element — !important is the only thing that beats
   !important. Everything else is won on specificity by the .mbrt/.mbrta scope. */
.mbrt select.mbrt-ts-speaker,
.mbrta select.mbrta-filter-select {
    appearance: none;
    -webkit-appearance: none;
    padding: 0 40px 0 var(--acxpa-ds-space-sm) !important;
    text-indent: 0;
    border: 2px solid var(--acxpa-ds-border-strong);
    font-weight: 600;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230F4F5C' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
}
.mbrt select.mbrt-ts-speaker option,
.mbrta select.mbrta-filter-select option {
    color: var(--acxpa-ds-text);
    background: var(--acxpa-ds-bg);
}
.mbrta select.mbrta-filter-select:hover { border-color: var(--acxpa-ds-teal-700); }

/* On a dark ground the control border is white so the field reads as a chip. */
.mbrt-ts-section select.mbrt-ts-speaker,
.mbrta-transcript-section select.mbrta-filter-select { border-color: var(--acxpa-ds-bg); }

.mbrt input.mbrt-ts-input:focus-visible,
.mbrta input.mbrta-search:focus-visible,
.mbrt select.mbrt-ts-speaker:focus-visible,
.mbrta select.mbrta-filter-select:focus-visible {
    outline: none;
    border-color: var(--acxpa-ds-focus-on-dark);
    box-shadow: 0 0 0 3px var(--acxpa-ds-focus-on-dark);
}

/* --------------------------------------------------------------------------
   Search-result heads and highlight — shared between the two transcript UIs.
   -------------------------------------------------------------------------- */

.mbrt-ts-results-head,
.mbrta-search-results__head {
    display: flex;
    align-items: baseline;
    gap: var(--acxpa-ds-space-xs);
    margin-bottom: var(--acxpa-ds-space-sm);
}
.mbrt-ts-results-title,
.mbrta-search-results__title {
    font-size: var(--acxpa-ds-text-body);
    font-weight: 800;
    margin: 0;
}
.mbrt-ts-results-meta,
.mbrta-search-results__meta {
    font-size: var(--acxpa-ds-text-small);
    font-weight: 600;
    margin: 0;
}

.mbrt-ts-card__snippet mark,
.mbrta-result-card__snippet mark {
    background: var(--acxpa-ds-gold);
    color: var(--acxpa-ds-ink);
    border-radius: var(--acxpa-ds-radius-sm);
    padding: 0 3px;
    font-weight: 700;
}

/* Time badge — gold chip with tabular figures, used by both result cards. */
.mbrt-ts-card__time,
.mbrt-moment__time-btn,
.mbrta-result-card__time-badge,
.mbrta-featured__duration,
.mbrta-card__duration {
    display: inline-flex;
    align-items: center;
    gap: var(--acxpa-ds-space-2xs);
    padding: var(--acxpa-ds-space-2xs) var(--acxpa-ds-space-sm);
    border-radius: var(--acxpa-ds-radius-sm);
    background: var(--acxpa-ds-gold);
    color: var(--acxpa-ds-ink);
    font-size: var(--acxpa-ds-text-caption);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Empty states
   -------------------------------------------------------------------------- */

.mbrt-ts-empty,
.mbrta-empty-state {
    text-align: center;
    padding: var(--acxpa-ds-space-xl) var(--acxpa-ds-space-lg);
    color: var(--acxpa-ds-text-muted);
}
.mbrt-ts-empty__icon,
.mbrta-empty-state__icon { font-size: var(--acxpa-ds-text-h2); margin-bottom: var(--acxpa-ds-space-sm); }
.mbrt-ts-empty__title,
.mbrta-empty-state__title {
    font-size: var(--acxpa-ds-text-body);
    font-weight: 700;
    color: var(--acxpa-ds-ink);
    margin: 0 0 var(--acxpa-ds-space-2xs);
}
.mbrt-ts-empty__desc,
.mbrta-empty-state__desc {
    font-size: var(--acxpa-ds-text-small);
    color: var(--acxpa-ds-text-muted);
    margin: 0 0 var(--acxpa-ds-space-md);
}

/* Inside the dark transcript panels the empty state flips to on-dark roles. */
.mbrt-ts-section .mbrt-ts-empty,
.mbrta-transcript-section .mbrta-empty-state { color: var(--acxpa-ds-text-muted-on-dark); }
.mbrt-ts-section .mbrt-ts-empty__title,
.mbrta-transcript-section .mbrta-empty-state__title { color: var(--acxpa-ds-text-on-dark); }
.mbrt-ts-section .mbrt-ts-empty__desc,
.mbrta-transcript-section .mbrta-empty-state__desc { color: var(--acxpa-ds-text-muted-on-dark); }

/* --------------------------------------------------------------------------
   Icons — every inline SVG in this system is an icon. Without an explicit size
   a viewBox-only SVG expands to its container. That is exactly the fault that
   put ~1160px person icons on the library page and ~950px ones in the
   roundtable transcript search. One rule, no exceptions.
   -------------------------------------------------------------------------- */

.mbrt svg,
.mbrta svg {
    width: 1em;
    height: 1em;
    flex: none;
    display: inline-block;
    vertical-align: middle;
}

.mbrta-quicklink svg { width: 14px; height: 14px; }
.mbrt-ts-card__time svg,
.mbrta-result-card__time-badge svg,
.mbrta-result-card__speaker svg { width: 12px; height: 12px; }

/* Belt and braces: anything that ships without dimensions is capped rather
   than allowed to fill its container. A rule that sets a deliberate size still
   wins on specificity. */
.mbrt svg:not([width]),
.mbrta svg:not([width]) { max-width: 1.5em; max-height: 1.5em; }

/* --------------------------------------------------------------------------
   Motion + forced colours
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .mbrt *, .mbrt *::before, .mbrt *::after,
    .mbrta *, .mbrta *::before, .mbrta *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .mbrt-btn:hover, .mbrta-btn:hover,
    .mbrta-card:hover, .mbrta-quicklink:hover,
    .mbrta-speaker-tag:hover, .mbrta-cat-nav-btn:hover { transform: none; }
}

@media (forced-colors: active) {
    .mbrt-btn, .mbrta-btn,
    .mbrt-card, .mbrta-card,
    .mbrt-gate-cta, .mbrta-gate-cta { border: 1px solid CanvasText; }
}