/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* ============================================================
   SOVEREIGN CORE — BRICKS ELEMENT OVERRIDES ONLY
   style.css loads after post-14.min.css (Bricks-generated CSS).
   ============================================================ */

/* --- CLOSE BUTTON POSITIONS ---

/* --- CLOSE BUTTON POSITIONS + PANEL PADDING — MOBILE ONLY ---
   On desktop the panels have space and don't need repositioning.
   On mobile (≤767px) the header overlaps content so we push
   close buttons below it and add matching top padding. */
@media (max-width: 767px) {

  #brxe-uadnzn {
    top: 100px !important;
    margin-top: 0 !important;
  }

  #portfolio-terminal .close-button,
  #portfolio-terminal .sovereign-close-btn {
    top: 100px !important;
    margin-top: 0 !important;
  }

  #archive-offcanvas .sovereign-close-btn {
    top: 100px !important;
    margin-top: 0 !important;
  }

  #support-terminal .sovereign-close-btn,
  #support-terminal .js-close-terminal {
    top: 100px !important;
    margin-top: 0 !important;
  }

  #webdesign-terminal .sovereign-close-btn {
    top: 100px !important;
    margin-top: 0 !important;
  }

  #sla-terminal .sovereign-close-btn {
    top: 100px !important;
    margin-top: 0 !important;
  }

  #privacy-terminal .sovereign-close-btn,
  #gc-terminal .sovereign-close-btn {
    top: 100px !important;
    margin-top: 0 !important;
  }

  #portfolio-terminal .brx-offcanvas-inner,
  #provisioning-terminal .brx-offcanvas-inner,
  #archive-offcanvas .brx-offcanvas-inner {
    padding-top: 150px !important;
  }

  #support-terminal .brx-offcanvas-inner {
    padding-top: 150px !important;
  }

  #webdesign-terminal .brx-offcanvas-inner {
    padding-top: 150px !important;
  }

  #sla-terminal .brx-offcanvas-inner {
    padding-top: 150px !important;
  }

  #privacy-terminal .brx-offcanvas-inner,
  #gc-terminal .brx-offcanvas-inner {
    padding-top: 150px !important;
  }

}

/* --- ZAMMAD SUBMIT BUTTON — natural content width (all screens) --- */
#support-terminal .zammad-form button[type="submit"],
#support-terminal .zammad-form .btn,
#support-terminal .zammad-form .btn-primary {
  align-self: flex-start !important;
  width: auto !important;
}

/* --- NAV CLOSE BUTTON — fixed overlay injected by Master Engine (all screens) --- */
.sovereign-nav-close-fixed {
  top: auto !important;
  right: auto !important;
  height: auto !important;
  width: max-content !important;
  display: inline-flex !important;
  margin-top: 0 !important;
  align-self: auto !important;
  flex: none !important;
}
.sovereign-nav-close-fixed.is-visible {
  opacity: 1 !important;
  pointer-events: auto !important;
}



/* ============================================================
   SOVEREIGN FOOTER — see style.css for footer CSS
   Footer rebuild in progress — styles pending.
   ============================================================ */
#brxe-gdlkoy {
  background: rgba(4, 4, 5, 0.98) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  padding: 10px 0 !important;
}





/* ============================================================
   MEETERGO IFRAME — MIN-HEIGHT OVERRIDE
   Meetergo injects min-height: 600px inline on .meetergo-iframe
   which prevents our postMessage resize from working correctly.
   The !important here beats their inline style.
   ============================================================ */
.meetergo-wrapper .meetergo-iframe,
.meetergo-wrapper .mg-inline,
#wd-booking-step .meetergo-iframe,
#wd-booking-step .mg-inline,
#booking-step .meetergo-iframe,
#booking-step .mg-inline {
  min-height: 0 !important;
  min-width: 0 !important;
}

.meetergo-wrapper iframe,
#wd-booking-step iframe,
#booking-step iframe {
  min-height: 0 !important;
}


/* ============================================================
   SOVEREIGN HEADER — MOBILE LAYOUT FIX
   .brxe-code has width:100% (Bricks core) causing overflow.
   The logo wrapper also has transform:scale(0.75) at mobile
   which crushes the SVG icon. Fix:
   - Logo block: auto width, allow shrink
   - SVG icon: explicit 44px, protected from shrink
   - Wordmark + system-id: scaled down via font-size
   - Wrapper: remove scale transform, tighten gap/padding
   - Trigger: right margin for screen-edge breathing room
   ============================================================ */
@media (max-width: 768px) {
  #brxe-d61bde .brxe-code {
    width: auto !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
  .sovereign-logo-wrapper {
    transform: none !important;
    gap: 10px !important;
    padding: 6px !important;
  }
  .sovereign-node {
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
  }
  .logo-wordmark {
    font-size: 1.3rem !important;
  }
  .system-id {
    font-size: 8px !important;
  }
  .sovereign-nav-trigger {
    flex-shrink: 0 !important;
    margin-right: var(--space-s) !important;
  }
}


/* =================================================================
   SOVEREIGN NAV — MOBILE REDESIGN
   Terminal command-row layout for screens ≤768px.
   Each item: index prefix · link text · status label · arrow
   Replaces the basic centred list with a full-width tap interface.
   All rules scoped to @media (max-width: 768px).
   Zero !important except where overriding Bricks inline styles.
   CSS audit target: migrate to automatic-custom-css.css pre-launch.
   ================================================================= */
@media (max-width: 768px) {

  /* ── Offcanvas shell: full screen, scrollable, clears bottom bar ── */
  #sovereign-nav .x-offcanvas_inner,
  #x-offcanvas_inner-xemjbs {
    justify-content: flex-start !important;
    padding-top: 80px !important;
    padding-bottom: 72px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* ── Inner block: stretch full width ─────────────────────────── */
  #sovereign-nav .brxe-block,
  #sovereign-nav .brx-offcanvas-inner {
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding: 0 !important;
  }

  /* ── Menu list: full width column ────────────────────────────── */
  #sovereign-nav .bricks-nav-menu,
  #sovereign-nav .bricks-mobile-menu {
    width: 100% !important;
    gap: 0 !important;
    align-items: stretch !important;
    padding: 0 !important;
  }

  /* ── Each list item: full-width row with separator ───────────── */
  #sovereign-nav .bricks-nav-menu > li,
  #sovereign-nav .bricks-mobile-menu > li {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 0 !important;
    width: 100% !important;
    border-bottom: 1px solid rgba(204, 255, 0, 0.08) !important;
    position: relative !important;
    list-style: none !important;
    /* Tap highlight flash */
    -webkit-tap-highlight-color: rgba(204, 255, 0, 0.05);
  }
  #sovereign-nav .bricks-nav-menu > li:first-child,
  #sovereign-nav .bricks-mobile-menu > li:first-child {
    border-top: 1px solid rgba(204, 255, 0, 0.08) !important;
  }

  /* Active state: neon left border flash on tap ──────────────────  */
  #sovereign-nav .bricks-nav-menu > li:active,
  #sovereign-nav .bricks-mobile-menu > li:active {
    background: rgba(204, 255, 0, 0.04) !important;
    border-left: 2px solid #ccff00 !important;
  }

  /* ── Link: full row, flex layout ─────────────────────────────── */
  #sovereign-nav .bricks-nav-menu > li > a,
  #sovereign-nav .bricks-mobile-menu > li > a {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 100% !important;
    padding: 16px var(--space-m) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    transition: color 0.2s ease !important;
    /* Override Bricks text-shadow on hover */
    text-shadow: none !important;
  }

  /* Hover/active text colour */
  #sovereign-nav .bricks-nav-menu > li:hover > a,
  #sovereign-nav .bricks-mobile-menu > li:hover > a,
  #sovereign-nav .bricks-nav-menu > li:active > a,
  #sovereign-nav .bricks-mobile-menu > li:active > a {
    color: #ccff00 !important;
    text-shadow: 0 0 20px rgba(204, 255, 0, 0.25) !important;
  }

  /* ── Status sublabel: the hover ::after content made visible ──── */
  /* Uses data-label attribute injected by JS below */
  #sovereign-nav .bricks-nav-menu > li > a::after,
  #sovereign-nav .bricks-mobile-menu > li > a::after {
    content: attr(data-mobile-label) !important;
    display: block !important;
    position: static !important;
    transform: none !important;
    font-family: 'Fira Code', monospace !important;
    font-size: 9px !important;
    font-weight: 400 !important;
    color: rgba(204, 255, 0, 0.4) !important;
    letter-spacing: 0.15em !important;
    margin-top: 4px !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    opacity: 1 !important;
    right: auto !important;
    top: auto !important;
  }

  /* ── Chevron arrow: right side of each row ───────────────────── */
  #sovereign-nav .bricks-nav-menu > li::after,
  #sovereign-nav .bricks-mobile-menu > li::after {
    content: '[ → ]' !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    font-family: 'Fira Code', monospace !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    color: rgba(204, 255, 0, 0.3) !important;
    letter-spacing: 0.1em !important;
    padding-right: var(--space-m) !important;
    pointer-events: none !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
  }
  #sovereign-nav .bricks-nav-menu > li:hover::after,
  #sovereign-nav .bricks-nav-menu > li:active::after,
  #sovereign-nav .bricks-mobile-menu > li:hover::after,
  #sovereign-nav .bricks-mobile-menu > li:active::after {
    color: rgba(204, 255, 0, 0.8) !important;
  }

  /* ── Badge: inline pill, right-aligned ───────────────────────── */
  #sovereign-nav .sovereign-nav-badge {
    font-size: 8px !important;
    padding: 2px 6px !important;
    margin-left: 8px !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  /* ── Support item: distinct colour treatment ─────────────────── */
  #sovereign-nav li.js-open-support > a {
    color: rgba(255, 255, 255, 0.85) !important;
  }
  #sovereign-nav li.js-open-support:hover > a,
  #sovereign-nav li.js-open-support:active > a {
    color: #ccff00 !important;
  }

  /* ── Kill desktop-only pseudo rules on mobile ────────────────── */
  #sovereign-nav .bricks-nav-menu > li > a::before,
  #sovereign-nav .bricks-mobile-menu > li > a::before {
    display: none !important;
    content: none !important;
  }
  #sovereign-nav li.js-open-support > a::before,
  #sovereign-nav li.js-open-support > a::after {
    display: none !important;
    content: none !important;
  }
  /* Re-enable our own ::after for support item sublabel */
  #sovereign-nav li.js-open-support > a::after {
    content: attr(data-mobile-label) !important;
    display: block !important;
    position: static !important;
    transform: none !important;
    font-family: 'Fira Code', monospace !important;
    font-size: 9px !important;
    color: rgba(204, 255, 0, 0.4) !important;
    letter-spacing: 0.15em !important;
    margin-top: 4px !important;
    opacity: 1 !important;
    right: auto !important;
    top: auto !important;
  }

}
/* ── END SOVEREIGN NAV MOBILE REDESIGN ──────────────────────────── */


/* =================================================================
   SOVEREIGN DEPLOY SECTION — MOBILE COMPACT STRIP
   Collapses the 3 featured-node cards from tall portrait cards
   (~535px each) into compact horizontal strips (~72px each).
   Layout: [ LOGO ] [ NAME / STATUS · ENV · BUILD ] [ → ]
   Scoped to #deploy-section only — no side effects on other
   .featured-node or .srv-card instances elsewhere on the page.
   CSS audit target: migrate to automatic-custom-css.css pre-launch.
   ================================================================= */
@media (max-width: 768px) {

  /* ── Card: horizontal strip ───────────────────────────────────── */
  #deploy-section .featured-node {
    flex-direction: row !important;
    align-items: center !important;
    padding: 12px 14px !important;
    min-height: 0 !important;
    gap: 12px !important;
  }

  /* ── Logo: small fixed square, no bottom margin ───────────────── */
  #deploy-section .featured-node .log-entry__logo {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #deploy-section .featured-node .log-entry__logo svg {
    max-height: 26px !important;
    width: auto !important;
  }

  /* ── Title: compact, no wrap ──────────────────────────────────── */
  #deploy-section .featured-node .log-entry__title {
    font-size: 13px !important;
    margin: 0 0 3px 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
  }

  /* ── Specs: collapse to a single compact inline meta row ─────── */
  /* Each spec block: make label and value sit on one line         */
  #deploy-section .featured-node .log-entry__specs {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-top: none !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  /* Spec label + value: tiny, muted, inline */
  #deploy-section .featured-node .log-entry__specs .brxe-text-basic {
    font-size: 9px !important;
    line-height: 1 !important;
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    color: rgba(204, 255, 0, 0.45) !important;
    letter-spacing: 0.05em !important;
  }

  /* First spec label (e.g. "STATUS:") — slightly dimmer */
  #deploy-section .featured-node .log-entry__specs .brxe-text-basic:first-child {
    color: rgba(255, 255, 255, 0.25) !important;
  }

  /* Stack all specs vertically but each one is now a tiny row ─── */
  /* Group them into a tight column in the middle content area     */
  #deploy-section .featured-node .log-entry__specs + .log-entry__specs {
    margin-top: 2px !important;
  }

  /* ── Action button: right-aligned, auto left margin ──────────── */
  #deploy-section .featured-node .featured-node__action {
    margin-top: 0 !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    align-self: center !important;
    padding-top: 0 !important;
    border-top: none !important;
  }

  #deploy-section .featured-node .featured-node__action .text--technical {
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  /* ── Kill hover transform on mobile (no hover on touch) ──────── */
  #deploy-section .featured-node:hover {
    transform: none !important;
  }

}
/* ── END SOVEREIGN DEPLOY SECTION MOBILE ────────────────────────── */


/* =================================================================
   SOVEREIGN INTEL SECTION — MOBILE COMPACT STRIP
   Collapses intel-cards (min-height: 420px, space-xl padding)
   into compact horizontal strips on mobile.
   Layout: [ ICON ] [ TITLE / EXCERPT ] [ → ]
   Scoped to #intel-section only — no side effects elsewhere.
   CSS audit target: migrate to automatic-custom-css.css pre-launch.
   ================================================================= */
@media (max-width: 768px) {

  /* ── Card: horizontal strip ───────────────────────────────────── */
  #intel-section .intel-card {
    flex-direction: row !important;
    align-items: center !important;
    min-height: 0 !important;
    padding: 12px 14px !important;
    gap: 12px !important;
    transform: none !important;
  }

  /* ── Icon: small fixed size, no bottom margin ─────────────────── */
  #intel-section .intel-card__icon {
    font-size: 20px !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
    width: 28px !important;
    text-align: center !important;
    line-height: 1 !important;
  }

  /* ── Date/ID line: tiny, above title ─────────────────────────── */
  #intel-section .intel-card .text--technical {
    font-size: 8px !important;
    margin-bottom: 2px !important;
    opacity: 0.4 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  /* ── Middle content: flex column, takes remaining space ───────── */
  #intel-section .intel-card__title {
    font-size: 13px !important;
    margin-bottom: 3px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ── Excerpt: single truncated line ──────────────────────────── */
  #intel-section .intel-card__excerpt {
    font-size: 10px !important;
    line-height: 1.4 !important;
    -webkit-line-clamp: 1 !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
    opacity: 0.6;
  }

  /* ── Action: right side, auto left margin ─────────────────────── */
  #intel-section .intel-card .featured-node__action {
    margin-top: 0 !important;
    margin-left: auto !important;
    padding-top: 0 !important;
    border-top: none !important;
    flex-shrink: 0 !important;
    align-self: center !important;
  }

  #intel-section .intel-card .srv-card__link {
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  /* ── Kill hover transform on touch ───────────────────────────── */
  #intel-section .intel-card:hover {
    transform: none !important;
  }

  /* ── Type indicator dot: tier colour on left border ──────────── */
  #intel-section .intel-card[data-intel-type="system_intel"] {
    border-left: 2px solid var(--neon-green) !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  }
  #intel-section .intel-card[data-intel-type="field_report"] {
    border-left: 2px solid var(--neon-purple) !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  }

}
/* ── END SOVEREIGN INTEL SECTION MOBILE ─────────────────────────── */




/* =================================================================
   SOVEREIGN FAQ — BRICKSEXTRAS PRO ACCORDION STYLING
   Targets the .brxe-xproaccordion element inside #faq-section.
   Overrides BricksExtras defaults (light grey bg, generic padding)
   with the Sovereign terminal aesthetic.
   Structure:
     .x-accordion
       .x-accordion_item
         h4.x-accordion_heading-wrapper
           div.x-accordion_header  [aria-expanded="true/false"]
             span.x-accordion_title > p.faq-q  (question)
             i.x-accordion_icon                (arrow)
         div.x-accordion_content
           div.x-accordion_content-inner
             div.brxe-text > p.faq-a           (answer)
   CSS audit target: migrate to automatic-custom-css.css pre-launch.
   ================================================================= */

/* ── Accordion wrapper ────────────────────────────────────────────── */
#faq-section .x-accordion {
  width: 100%;
}

/* ── Each item ────────────────────────────────────────────────────── */
#faq-section .x-accordion_item {
  border-bottom: 1px solid rgba(204, 255, 0, 0.1);
}
#faq-section .x-accordion_item:first-child {
  border-top: 1px solid rgba(204, 255, 0, 0.1);
}

/* ── Heading wrapper: strip default h4 styles ─────────────────────── */
#faq-section .x-accordion_heading-wrapper {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* ── Header trigger ───────────────────────────────────────────────── */
#faq-section .x-accordion_header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--space-s) !important;
  padding: var(--space-s) var(--space-m) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
  width: 100% !important;
}
#faq-section .x-accordion_header:hover {
  background: rgba(204, 255, 0, 0.03) !important;
}

/* Open state: neon left border flash */
#faq-section .x-accordion_header[aria-expanded="true"] {
  background: rgba(204, 255, 0, 0.04) !important;
  border-left: 2px solid rgba(204, 255, 0, 0.6) !important;
}

/* ── Title span: takes remaining width ────────────────────────────── */
#faq-section .x-accordion_title {
  flex: 1 !important;
  display: block !important;
}


/* ── Arrow icon ────────────────────────────────────────────────────── */
#faq-section .x-accordion_icon {
  flex-shrink: 0 !important;
  font-size: 14px !important;
  color: rgba(204, 255, 0, 0.5) !important;
  transition: transform 0.3s ease, color 0.2s ease !important;
  display: block !important;
  width: 20px !important;
  text-align: center !important;
}

/* Rotate on open — BricksExtras adds aria-expanded to the header */
#faq-section .x-accordion_header[aria-expanded="true"] .x-accordion_icon {
  transform: rotate(180deg) !important;
  color: #ccff00 !important;
}

/* ── Content inner: padding + answer text ─────────────────────────── */
#faq-section .x-accordion_content-inner {
  padding: 0 var(--space-m) var(--space-m) var(--space-m) !important;
  border-left: 2px solid rgba(204, 255, 0, 0.15) !important;
  margin-left: 1px !important;
}

/* ── Answer strong text ───────────────────────────────────────────── */
/* Typography set in Bricks directly */
#faq-section .faq-a strong {
  color: rgba(204, 255, 0, 0.7) !important;
  font-weight: 600 !important;
}

/* ── Hover on whole item ──────────────────────────────────────────── */
#faq-section .x-accordion_item:hover > .x-accordion_heading-wrapper .x-accordion_icon {
  color: rgba(204, 255, 0, 0.8) !important;
}

/* ── Remove the old .faq-item styles interference ─────────────────── */
/* Let Bricks control .faq-grid layout (flex or grid set in Bricks UI) */
/* We only neutralise old faq-item padding/border */
#faq-section .faq-item:has(.x-accordion) {
  padding: 0 !important;
  border: none !important;
}

/* ── Mobile: tighter padding ──────────────────────────────────────── */
@media (max-width: 768px) {
  #faq-section .x-accordion_header {
    padding: 14px var(--space-s) !important;
  }
  #faq-section .x-accordion_content-inner {
    padding: 0 var(--space-s) var(--space-s) var(--space-s) !important;
  }
  /* faq-q and faq-a font sizes set in Bricks at mobile breakpoint */
}

/* ── END SOVEREIGN FAQ ACCORDION ─────────────────────────────────── */


/* ==========================================================
   OFFCANVAS MOBILE — PREVENT FLEX-WRAP
   Bricks @layer rule sets .brxe-block { flex-wrap: wrap }
   at max-width 767px which pushes form content to a second
   column. Override with nowrap on all offcanvas inners.
   ========================================================== */
@media (max-width: 767px) {
  .brx-offcanvas-inner,
  .brx-offcanvas-inner .brxe-block {
    flex-wrap: nowrap !important;
  }
}


/* ============================================================
   SUPPORT-TERMINAL ACCORDION — MOBILE LAYOUT FIX
   On narrow viewports the flex header was wrapping (title above,
   arrow below) and the heading-wrapper's column-flex centred
   them visually. Force single-row layout with title flush-left
   and arrow pinned right. Also tighten panel padding so the
   accordion has more horizontal breathing room.
   ============================================================ */
@media (max-width: 768px) {
  /* Tighter panel padding gives accordion more horizontal room */
  #support-terminal .brx-offcanvas-inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* Header: one row, no wrap, left-anchored */
  #support-terminal .x-accordion_header {
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: var(--space-xs) !important;
    text-align: left !important;
  }
  /* Title: flex-grow so it occupies the row, never centred */
  #support-terminal .x-accordion_title {
    flex: 1 1 auto !important;
    text-align: left !important;
    align-self: center !important;
    margin: 0 !important;
    min-width: 0 !important;
  }
  /* Heading wrapper (h4): kill any inherited column-centring */
  #support-terminal .x-accordion_heading-wrapper {
    align-self: stretch !important;
    align-items: stretch !important;
    text-align: left !important;
  }
  /* Arrow ::after — pin to the right edge of the row */
  #support-terminal .x-accordion_header::after {
    margin-left: auto !important;
    flex-shrink: 0 !important;
    align-self: center !important;
  }
  /* Item: tighter left padding next to the border indicator */
  #support-terminal .x-accordion_item {
    padding-left: 10px !important;
  }
}



/* ============================================================
   COLD-VISITOR PANEL ACCORDIONS (Brief + Provisioning)
   Sovereign terminal styling, mirrored from #support-terminal
   (helpdesk). Kept in style.css (not ACSS) so an ACSS dashboard
   save can't wipe it. Light-mode equivalents in paper-mode.css.
   Added Session 52.
   ============================================================ */
#webdesign-terminal .x-accordion_item,
#provisioning-terminal .x-accordion_item {
  background: transparent !important;
  border: none !important;
  border-left: 2px solid rgba(var(--neon-green-rgb), 0.15) !important;
  padding: 0 0 0 var(--space-xs) !important;
  transition: border-color 0.2s !important;
}
#webdesign-terminal .x-accordion_item:has(.x-accordion_header[aria-expanded="true"]),
#provisioning-terminal .x-accordion_item:has(.x-accordion_header[aria-expanded="true"]) {
  border-color: rgba(var(--neon-green-rgb), 0.4) !important;
}
#webdesign-terminal .x-accordion_heading-wrapper,
#provisioning-terminal .x-accordion_heading-wrapper {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
#webdesign-terminal .x-accordion_header,
#provisioning-terminal .x-accordion_header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 6px 0 !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  outline: none !important;
  gap: var(--space-xs) !important;
}
#webdesign-terminal .x-accordion_title,
#provisioning-terminal .x-accordion_title {
  font-family: var(--font-accent, "Fira Code", monospace) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(var(--neon-green-rgb), 0.55) !important;
  transition: color 0.2s !important;
}
#webdesign-terminal .x-accordion_header:hover .x-accordion_title,
#provisioning-terminal .x-accordion_header:hover .x-accordion_title {
  color: rgba(var(--neon-green-rgb), 0.9) !important;
}
#webdesign-terminal .x-accordion_header[aria-expanded="true"] .x-accordion_title,
#provisioning-terminal .x-accordion_header[aria-expanded="true"] .x-accordion_title {
  color: rgba(var(--neon-green-rgb), 0.85) !important;
}
#webdesign-terminal .x-accordion_icon,
#provisioning-terminal .x-accordion_icon {
  display: none !important;
}
#webdesign-terminal .x-accordion_header::after,
#provisioning-terminal .x-accordion_header::after {
  content: "\25B6" !important;
  font-size: 7px !important;
  color: rgba(var(--neon-green-rgb), 0.4) !important;
  transition: transform 0.2s, color 0.2s !important;
  flex-shrink: 0 !important;
  font-family: sans-serif !important;
}
#webdesign-terminal .x-accordion_header[aria-expanded="true"]::after,
#provisioning-terminal .x-accordion_header[aria-expanded="true"]::after {
  transform: rotate(90deg) !important;
  color: rgba(var(--neon-green-rgb), 0.7) !important;
}
#webdesign-terminal .x-accordion_content,
#provisioning-terminal .x-accordion_content {
  background: transparent !important;
  border: none !important;
  padding: var(--space-2xs) 0 var(--space-xs) 0 !important;
  overflow: hidden !important;
}
#webdesign-terminal .x-accordion_content p,
#webdesign-terminal .x-accordion_content div,
#webdesign-terminal .x-accordion_content span,
#provisioning-terminal .x-accordion_content p,
#provisioning-terminal .x-accordion_content div,
#provisioning-terminal .x-accordion_content span {
  font-family: var(--font-accent, "Fira Code", monospace) !important;
  font-size: 11px !important;
  line-height: 1.65 !important;
  color: rgba(255, 255, 255, 0.4) !important;
  letter-spacing: 0.02em !important;
  background: transparent !important;
}
#webdesign-terminal .x-accordion_content a,
#provisioning-terminal .x-accordion_content a {
  color: rgba(var(--neon-green-rgb), 0.65) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(var(--neon-green-rgb), 0.2) !important;
  transition: color 0.2s, border-color 0.2s !important;
}
#webdesign-terminal .x-accordion_content a:hover,
#provisioning-terminal .x-accordion_content a:hover {
  color: rgb(204, 255, 0) !important;
  border-color: rgba(var(--neon-green-rgb), 0.5) !important;
}
@media (max-width: 768px) {
  #webdesign-terminal .x-accordion_header,
  #provisioning-terminal .x-accordion_header {
    flex-flow: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: var(--space-xs) !important;
    text-align: left !important;
  }
  #webdesign-terminal .x-accordion_title,
  #provisioning-terminal .x-accordion_title {
    flex: 1 1 auto !important;
    text-align: left !important;
    align-self: center !important;
    margin: 0 !important;
    min-width: 0 !important;
  }
  #webdesign-terminal .x-accordion_heading-wrapper,
  #provisioning-terminal .x-accordion_heading-wrapper {
    align-self: stretch !important;
    align-items: stretch !important;
    text-align: left !important;
  }
  #webdesign-terminal .x-accordion_header::after,
  #provisioning-terminal .x-accordion_header::after {
    margin-left: auto !important;
    flex-shrink: 0 !important;
    align-self: center !important;
  }
  #webdesign-terminal .x-accordion_item,
  #provisioning-terminal .x-accordion_item {
    padding-left: 10px !important;
  }
}


/* Cold-visitor accordions — breathing room ABOVE & BELOW the block.
   The accordion sits in a flex column with no gap, flush against the
   intro paragraph above and the form below, so we space the wrapper
   itself. Scoped to Brief + Provisioning (helpdesk untouched). */
#webdesign-terminal .brxe-xproaccordion.x-accordion,
#provisioning-terminal .brxe-xproaccordion.x-accordion {
  margin-top: var(--space-m, 28px) !important;
  margin-bottom: var(--space-m, 28px) !important;
}



/* ============================================================
   [ SOVEREIGN_CONSENT ] — Borlabs Cookie skin (MCC / Console family)
   Session 53. Lives in style.css on purpose: immune to ACSS regen
   AND to Borlabs admin "Save" (Lesson 52-C). Dark mode here; light
   mode in paper-mode.css. Overrides Borlabs' Vue/Tailwind compiled
   styles -> scoped to .brlbs-cmpnt-* + !important on key props.
   Verified Chrome session 53 (selectors bind; dialog capped 880px,
   toggle/tab/button/links restyled).
   ============================================================ */
.brlbs-cmpnt-container{
  --bsv-bg:#0b0b0c; --bsv-bg2:#100f12;
  --bsv-grn:#ccff00; --bsv-grnr:204,255,0;
  --bsv-line:rgba(204,255,0,.20); --bsv-soft:rgba(255,255,255,.08);
  --bsv-txt:rgba(255,255,255,.92); --bsv-dim:rgba(255,255,255,.46); --bsv-fnt:rgba(255,255,255,.28);
  --bsv-mono:"Fira Code","JetBrains Mono",ui-monospace,monospace;
}
/* backdrop scrim -> deeper + faint scanlines; panel floats bottom-centre */
.brlbs-dialog-positioner{
  background:
    repeating-linear-gradient(to bottom,transparent 0 2px,rgba(255,255,255,.016) 2px 4px),
    rgba(2,2,3,.9)!important;
  align-items:center!important; justify-content:center!important; overflow-y:auto!important; padding:24px 0!important;
}
/* the panel -> contained console card, not a full-width bar */
.brlbs-cmpnt-dialog{
  max-width:880px!important; width:calc(100% - 32px)!important; margin:auto!important;
  background:var(--bsv-bg)!important; border:1px solid var(--bsv-line)!important; border-radius:2px!important;
  box-shadow:0 24px 80px rgba(0,0,0,.6),0 0 60px rgba(var(--bsv-grnr),.06)!important;
  font-family:var(--bsv-mono)!important; color:var(--bsv-txt)!important;
  overflow:hidden!important; position:relative!important;
}
.brlbs-cmpnt-dialog::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg,transparent,rgba(var(--bsv-grnr),.7),transparent);
  pointer-events:none; z-index:3;
}
/* details header + description */
.brlbs-cmpnt-dialog-details-description,.brlbs-cmpnt-dialog-details{
  color:var(--bsv-dim)!important; font-size:12px!important; letter-spacing:.02em!important;
}
/* tab bar -> underlined terminal nav */
.brlbs-cmpnt-tab-bar{border-bottom:1px solid var(--bsv-soft)!important; gap:2px!important;}
.brlbs-cmpnt-tab{
  font-family:var(--bsv-mono)!important; font-size:11px!important; letter-spacing:.12em!important;
  text-transform:uppercase!important; color:var(--bsv-dim)!important;
  background:transparent!important; border:0!important; border-bottom:2px solid transparent!important;
  padding:10px 12px!important; border-radius:0!important;
}
.brlbs-cmpnt-tab:hover{color:var(--bsv-txt)!important;}
.brlbs-cmpnt-tab-active{color:var(--bsv-grn)!important; border-bottom-color:var(--bsv-grn)!important;}
.brlbs-cmpnt-tab-active::before{content:"[ "; color:var(--bsv-fnt);}
.brlbs-cmpnt-tab-active::after{content:" ]"; color:var(--bsv-fnt);}
/* cards / service groups */
.brlbs-cmpnt-card,.brlbs-cmpnt-card-service-group{
  background:var(--bsv-bg2)!important; border:1px solid var(--bsv-soft)!important;
  border-left:2px solid rgba(var(--bsv-grnr),.25)!important; border-radius:2px!important;
}
.brlbs-cmpnt-card:hover,.brlbs-cmpnt-card-service-group:hover{border-left-color:var(--bsv-grn)!important;}
/* terminal toggle from the native checkbox */
.brlbs-cmpnt-checkbox{
  -webkit-appearance:none!important; appearance:none!important;
  width:38px!important; min-width:38px!important; height:18px!important;
  background:rgba(255,255,255,.08)!important; border:1px solid var(--bsv-fnt)!important;
  border-radius:2px!important; position:relative!important; cursor:pointer!important; flex:0 0 auto!important;
  transition:background .16s ease,border-color .16s ease!important;
}
.brlbs-cmpnt-checkbox::after{
  content:""; position:absolute; top:1px; left:1px; width:14px; height:14px;
  background:var(--bsv-dim); transition:transform .16s ease,background .16s ease;
}
.brlbs-cmpnt-checkbox:checked{background:rgba(var(--bsv-grnr),.18)!important; border-color:var(--bsv-grn)!important;}
.brlbs-cmpnt-checkbox:checked::after{transform:translateX(20px); background:var(--bsv-grn); box-shadow:0 0 8px rgba(var(--bsv-grnr),.7);}
.brlbs-cmpnt-checkbox:disabled{opacity:.5!important; cursor:not-allowed!important;}
/* buttons -> terminal */
.brlbs-cmpnt-btn{
  font-family:var(--bsv-mono)!important; text-transform:uppercase!important;
  letter-spacing:.14em!important; font-size:12px!important; border-radius:2px!important;
}
.brlbs-btn-accept-all{background:rgba(var(--bsv-grnr),.10)!important; border:1px solid var(--bsv-grn)!important; color:var(--bsv-grn)!important;}
.brlbs-btn-accept-all:hover{background:rgba(var(--bsv-grnr),.18)!important; box-shadow:0 0 22px rgba(var(--bsv-grnr),.25)!important;}
.brlbs-btn-save,.brlbs-btn-accept-only-essential{background:transparent!important; border:1px solid var(--bsv-soft)!important; color:var(--bsv-dim)!important;}
.brlbs-btn-save:hover,.brlbs-btn-accept-only-essential:hover{border-color:var(--bsv-txt)!important; color:var(--bsv-txt)!important;}
/* links + selection controls + accordion toggle */
.brlbs-cmpnt-link{color:var(--bsv-grn)!important; text-transform:uppercase!important; letter-spacing:.08em!important; font-size:11px!important;}
.brlbs-cmpnt-privacy-link::before,.brlbs-cmpnt-imprint-link::before{content:"[ "; color:var(--bsv-fnt);}
.brlbs-cmpnt-privacy-link::after,.brlbs-cmpnt-imprint-link::after{content:" ]"; color:var(--bsv-fnt);}
.brlbs-cmpnt-accordion-toggle{color:var(--bsv-dim)!important; font-family:var(--bsv-mono)!important; font-size:11px!important; letter-spacing:.06em!important;}
.brlbs-cmpnt-accordion-toggle:hover{color:var(--bsv-grn)!important;}
/* floating launcher widget -> terminal node glow */
.brlbs-cmpnt-widget{filter:drop-shadow(0 0 10px rgba(var(--bsv-grnr),.35));}
/* === [ SOVEREIGN_CONSENT ] end === */


/* ============================================================
   [ SOVEREIGN_CONSENT ] — modal lock (session 53)
   When the Borlabs banner is shown, .brlbs-dialog-positioner is in
   the DOM. Borlabs sets that overlay pointer-events:none and parks it
   at a low z-index, so the MCC / Neby / header (z ~1e6) render above it
   and stay live, and the page keeps scrolling. We can't win the z-war
   (separate stacking contexts), so instead: lock document scroll, give
   the scrim pointer capture, and neutralise the site chrome while the
   banner is up. Verified Chrome session 53 (scroll locked, chrome inert,
   dialog buttons still clickable). :has() supported in current FF/Chrome.
   ============================================================ */
html:has(.brlbs-dialog-positioner),
body:has(.brlbs-dialog-positioner){ overflow:hidden !important; }
.brlbs-dialog-positioner{ z-index:2147483640 !important; pointer-events:auto !important; }
body:has(.brlbs-dialog-positioner) #mcc-bar,
body:has(.brlbs-dialog-positioner) #mcc-palette-shell,
body:has(.brlbs-dialog-positioner) #neby-bubble,
body:has(.brlbs-dialog-positioner) #neby-toast,
body:has(.brlbs-dialog-positioner) #sovereign-lens,
body:has(.brlbs-dialog-positioner) #brx-header{
  pointer-events:none !important; opacity:.35 !important; transition:opacity .25s ease;
}
/* === [ SOVEREIGN_CONSENT ] modal lock end === */


/* ============================================================
   [ SOVEREIGN_CONSENT ] dialog centering (session 53)
   Equal-specificity .brlbs-dialog-positioner rules lose to Borlabs'
   own CSS by source order, so we position the dialog directly with
   html body + !important (beats Borlabs regardless of load order).
   Fixed-centred, height-capped with internal scroll, so the Accept
   buttons stay reachable while the page is scroll-locked. This
   supersedes the positioner flex-align in the skin block above.
   Verified Chrome session 53 (centred, fully in view, buttons hittable).
   ============================================================ */
html body .brlbs-cmpnt-dialog{
  position:fixed !important; left:50% !important; top:50% !important;
  transform:translate(-50%,-50%) !important; margin:0 !important;
  width:min(880px, calc(100% - 32px)) !important; max-width:880px !important;
  max-height:calc(100vh - 48px) !important; overflow-y:auto !important;
}
/* === [ SOVEREIGN_CONSENT ] dialog centering end === */

/* ============================================================
   [ SOVEREIGN_CONSENT ] header layout (session 53)
   Borlabs lays the policy/print links out position:absolute top-right
   with order utilities, which crowds the title (wider "Print policy")
   and collides with it on mobile. We take over the header: stack it as
   a centred column — title on top, the two links centred on their own
   row below — identical at every width. flex:0 0 auto neutralises
   Borlabs' flex-basis (which becomes height in a column and would
   otherwise blow up the header). Verified Chrome session 53.
   ============================================================ */
html body .brlbs-cmpnt-dialog-details-header{
  display:flex !important; flex-direction:column !important; align-items:center !important;
  row-gap:12px !important; text-align:center !important; padding:18px 32px 20px !important;
}
html body .brlbs-cmpnt-dialog-details-header > .brlbs-flex:not(:has(.brlbs-cmpnt-privacy-link)){
  order:1 !important; flex:0 0 auto !important; width:auto !important;
}
html body .brlbs-cmpnt-dialog-details-header > .brlbs-flex:has(.brlbs-cmpnt-privacy-link){
  position:static !important; order:99 !important; flex:0 0 auto !important; margin:0 !important;
  justify-content:center !important; flex-wrap:wrap !important;
}
/* === [ SOVEREIGN_CONSENT ] header layout end === */


/* ============================================================
   [ SOVEREIGN_CONSENT ] z-trap fix (session 53)
   The positioner's z-index (2147483640) was trapped inside its
   .brlbs-fixed ancestor (z:1000002), which lost to the MCC bar
   (z:1000010) in the root stacking context — so on mobile the banner
   painted UNDER the MCC. Lift the wrapper itself above the MCC so the
   whole dialog subtree wins. Verified Chrome session 53 (mobile: scrim
   + dialog paint over the MCC band).
   ============================================================ */
.brlbs-fixed:has(.brlbs-dialog-positioner){ z-index:2147483640 !important; }
/* === [ SOVEREIGN_CONSENT ] z-trap fix end === */


/* ============================================================
   [ SOVEREIGN_CONSENT ] Services tab rows (session 53)
   Services render as <article.brlbs-cmpnt-list-item-service> whose row
   (div.brlbs-flex.brlbs-items-center: <h2> name + a flex-1/justify-end
   controls cluster holding Show Information + the on/off toggle) was
   collapsing to content width, while the expanded panel below is a
   full-width sibling. Result: Show Information bunched against the name
   and the row "jumped" to full width on expand. Force the row full width
   so the controls right-align and collapsed matches expanded.
   ============================================================ */
html body .brlbs-cmpnt-list-item-service > .brlbs-flex.brlbs-items-center{
  width:100% !important; gap:16px !important;
}
html body .brlbs-cmpnt-list-item-service .brlbs-cmpnt-list-item-controls-container{
  flex:1 1 auto !important;
}
/* === [ SOVEREIGN_CONSENT ] Services tab rows end === */


/* ============================================================
   [ SOVEREIGN_CONSENT ] Services list wrapper — stretch to fill panel
   Borlabs' service-list region is a flex column with align-items:flex-start,
   so the .brlbs-mt-4 list wrapper shrink-wraps to content width. Firefox
   honours that (list reads compact when collapsed, then jumps wider when an
   accordion table opens); Chrome already fills it, which is why this only
   reproduced in Firefox. width:stretch forces the wrapper to fill the
   container in all browsers, so the list is full width collapsed and stays
   put on expand. Vendor fallbacks ordered so modern browsers land on stretch.
   ============================================================ */
html body .brlbs-cmpnt-container .brlbs-mt-4{
  width: -webkit-fill-available;
  width: -moz-available;
  width: stretch;
}
/* === [ SOVEREIGN_CONSENT ] Services list wrapper stretch end === */


/* ============================================================
   [ SOVEREIGN_CONSENT ] Button labels — allow wrapping
   Borlabs sets white-space:nowrap on .brlbs-cmpnt-btn, and the dark-skin's
   uppercase + .14em letter-spacing widens the text, so the longest label
   ("Accept only essential cookies") bleeds out of the button. Allow wrapping
   so long labels break to a second line; height auto + line-height so the
   button grows cleanly to fit. Covers first-visit banner and settings dialog
   (both use .brlbs-cmpnt-dialog).
   ============================================================ */
html body .brlbs-cmpnt-dialog .brlbs-cmpnt-btn{
  white-space: normal !important;
  height: auto !important;
  line-height: 1.3 !important;
}
/* === [ SOVEREIGN_CONSENT ] Button labels wrap end === */


/* ============================================================
   [ SOVEREIGN_INTEL ] Detail panel (#brxe-tyfref) — close-button clearance
   The close button is position:absolute top:30px inside the panel inner; the
   content (LOG_ID/INTEL_REF line + title) used to start at the same band and
   rode under the [ X ], worst on mobile. The decorative type icon (absolute
   top-right of .intel-wrapper) overlapped long titles and collided with the
   close button on mobile, and was absent from the single-post template — so
   it has been removed from the injected markup for consistency. This padding
   drops the content below the close button at all widths (absolute button is
   unaffected by inner padding; only the flowed content moves down).
   ============================================================ */
#brxe-tyfref .brx-offcanvas-inner.brxe-block{ padding-top: 84px !important; }
/* === [ SOVEREIGN_INTEL ] Detail panel clearance end === */