/* CookieBot project styles. Restyles framework chrome via CSS only - no template forks. */

/* --------------------------------------------------------------------------
   1. Framework brand tokens
   body[data-projectname] is specificity (0,2,0) and beats the framework's own
   body.theme-light / body.theme-dark (0,1,1), so these win without !important.
   Both theme blocks must be set or dark mode keeps the framework purple.
   -------------------------------------------------------------------------- */

body.theme-light[data-projectname] {
  --primary-blue: #0f766e;
  --primary-blue-hover: #115e59;
  --accent-blue: #14b8a6;
  --accent-blue-light: #ccfbf1;
  --link: #0f766e;
  --btn-gradient: #0f766e;
  /* Separate from --primary-blue: base_elements.css derives input focus rings
     and checkbox/radio accent-color from this one. Defaults to #7c3aed. */
  --primary-color: #0f766e;
}

body.theme-dark[data-projectname] {
  --primary-blue: #14b8a6;
  --primary-blue-hover: #0f766e;
  --accent-blue: #2dd4bf;
  --accent-blue-light: #134e4a;
  --link: #2dd4bf;
  --btn-gradient: #14b8a6;
  --primary-color: #14b8a6;
}

/* --------------------------------------------------------------------------
   2. CookieBot design tokens (locked palette)
   -------------------------------------------------------------------------- */

body[data-projectname] {
  --cb-accent: #0f766e;
  --cb-accent-hover: #115e59;
  --cb-accent-soft: #ccfbf1;
  --cb-accent-wash: #f0fdfa;
  --cb-surface: #ffffff;
  --cb-canvas: #f8fafc;
  --cb-text: #0f172a;
  --cb-muted: #64748b;
  --cb-border: #e2e8f0;
  --cb-faint: #94a3b8;
  --cb-sans:
    'Instrument Sans', system-ui, -apple-system, 'Helvetica Neue', Arial,
    sans-serif;
  --cb-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  font-family: var(--cb-sans);
}

body.theme-dark[data-projectname] {
  --cb-accent: #14b8a6;
  --cb-accent-hover: #2dd4bf;
  --cb-accent-soft: #134e4a;
  --cb-accent-wash: #0f2c2a;
  --cb-surface: #16181d;
  --cb-canvas: #0f1115;
  --cb-text: #f1f5f9;
  --cb-muted: #94a3b8;
  --cb-border: #2a2d35;
  --cb-faint: #64748b;
}

/* --------------------------------------------------------------------------
   3. Site-wide buttons
   base_elements.css styles every <button> with !important, so filled buttons
   have to re-assert. Scoped away from admin - admin is never restyled.
   -------------------------------------------------------------------------- */

body:not(:has(.admin-container)) .btn-primary,
body:not(:has(.admin-container)) .button-primary,
body:not(:has(.admin-container)) button.button-primary {
  background: var(--cb-accent) !important;
  background-image: none !important;
  border-color: var(--cb-accent) !important;
  color: #ffffff !important;
}

body:not(:has(.admin-container)) .btn-primary:hover,
body:not(:has(.admin-container)) .button-primary:hover,
body:not(:has(.admin-container)) button.button-primary:hover {
  background: var(--cb-accent-hover) !important;
  border-color: var(--cb-accent-hover) !important;
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   2b. Navbar surface and page background
   The framework paints a contour-pattern overlay on body::before, hue-rotated to
   a dusty maroon (rgb(145,79,87) per base_style.css:102). --nb-rest-bg defaults to
   `transparent`, so the unscrolled navbar shows that pattern through and reads as a
   brown band that fights the teal. base_navbar.css:129 documents the intended fix:
   a project wanting a solid band sets --nb-rest-bg to a colour. Killing the overlay
   is the privcaptcha pattern (its styles.css:89).
   -------------------------------------------------------------------------- */

body[data-projectname]::before {
  display: none !important;
}

body[data-projectname] {
  /* 68px per the design (framework default is 74px). One token - --navbar-offset
     and .nb-spacer both track it, per base_navbar.css:226. */
  --nb-height: 68px;
  --navbar-offset: 68px;
}

body.theme-light[data-projectname] {
  --nb-rest-bg: rgba(255, 255, 255, 0.88);
  --nb-surface: #ffffff;
}

body.theme-dark[data-projectname] {
  --nb-rest-bg: rgba(15, 17, 21, 0.88);
  --nb-surface: #16181d;
}

/* Give the bar a hairline so it separates from a near-white page instead of
   floating with no edge. */
body[data-projectname] .nb-root {
  border-bottom: 1px solid var(--cb-border);
}

/* --------------------------------------------------------------------------
   3b. Framework pages with HARDCODED purple
   These framework rules use literal hex gradients instead of deriving from
   --primary-blue, so the token override in section 1 cannot reach them. They
   have to be re-declared here. Framework files are never edited - this is the
   project-side override. All scoped away from admin.
   Source hexes: #6366f1 #a855f7 #ec4899 #8b5cf6 #b98ff5 #7c3aed
   -------------------------------------------------------------------------- */

body:not(:has(.admin-container)) .contact-orb-1,
body:not(:has(.admin-container)) .contact-form-orb-1,
body:not(:has(.admin-container)) .contact-form-orb-3,
body:not(:has(.admin-container)) .contact-form-orb-4,
body:not(:has(.admin-container)) .about-hero-orb-1,
body:not(:has(.admin-container)) .about-hero-orb-3 {
  background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%) !important;
}

body:not(:has(.admin-container)) .contact-orb-2,
body:not(:has(.admin-container)) .contact-form-orb-2,
body:not(:has(.admin-container)) .about-hero-orb-2,
body:not(:has(.admin-container)) .contact-orb-3 {
  background: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%) !important;
}

/* The FRAMEWORK's own consent banner, on every project page. Not ours. */
body:not(:has(.admin-container)) .base-consent__btn--accent,
body:not(:has(.admin-container)) .base-consent .base-consent__btn--accent:hover,
body:not(:has(.admin-container))
  .base-consent__sw
  input:checked
  + .base-consent__track {
  background: var(--cb-accent) !important;
  border-color: var(--cb-accent) !important;
  color: #ffffff !important;
}

body:not(:has(.admin-container)) .base-consent__btn:focus-visible,
body:not(:has(.admin-container))
  .base-consent__sw
  input:focus-visible
  + .base-consent__track {
  outline-color: var(--cb-accent) !important;
  border-color: var(--cb-accent) !important;
}

body:not(:has(.admin-container))
  .footer-blog-menu-item:focus-within
  .footer-blog-menu-chevron,
body:not(:has(.admin-container)) .footer-blog-menu-popup-item:focus-visible,
body:not(:has(.admin-container)) .blog-scroll-to-top {
  color: var(--cb-accent) !important;
  border-color: var(--cb-accent) !important;
}

body:not(:has(.admin-container)) .footer-blog-menu-popup-thumb-fallback {
  background: var(--cb-accent) !important;
}

/* --------------------------------------------------------------------------
   4. Landing shell (kept from the scaffold - the homepage needs it)
   -------------------------------------------------------------------------- */

.landing-container {
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   5. Homepage
   -------------------------------------------------------------------------- */

.cb-page {
  background: var(--cb-canvas);
  color: var(--cb-text);
}

.cb-section {
  padding: 80px 40px;
  border-top: 1px solid var(--cb-border);
}

.cb-section--hero {
  padding: 84px 40px 76px;
  background: var(--cb-canvas);
  border-top: 0;
}

.cb-section--plain {
  background: var(--cb-surface);
}

.cb-section--wash {
  background: var(--cb-accent-wash);
}

.cb-section--cta {
  padding: 76px 40px 84px;
  background: var(--cb-canvas);
}

.cb-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.cb-kicker {
  font-family: var(--cb-mono);
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--cb-accent);
}

.cb-h2 {
  margin: 14px 0 0;
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: -0.72px;
  color: var(--cb-text);
  font-weight: 600;
}

/* hero ------------------------------------------------------------------- */

.cb-hero-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.cb-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cb-accent-soft);
  color: var(--cb-accent-hover);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
}

body.theme-dark[data-projectname] .cb-pill {
  color: #99f6e4;
}

.cb-h1 {
  margin: 22px 0 0;
  font-size: 56px;
  line-height: 1.06;
  letter-spacing: -1.68px;
  color: var(--cb-text);
  font-weight: 600;
  text-wrap: pretty;
}

.cb-lede {
  margin: 20px 0 0;
  font-size: 19px;
  line-height: 1.55;
  color: var(--cb-muted);
  max-width: 480px;
  text-wrap: pretty;
}

.cb-cta-row {
  margin-top: 32px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.cb-note {
  margin-top: 22px;
  font-size: 14px;
  color: var(--cb-muted);
}

.cb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 9px;
  text-decoration: none;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.cb-btn--fill {
  background: var(--cb-accent);
  color: #ffffff;
  padding: 14px 24px;
}

.cb-btn--fill:hover {
  background: var(--cb-accent-hover);
  color: #ffffff;
}

.cb-btn--ghost {
  border: 1px solid var(--cb-border);
  background: var(--cb-surface);
  color: var(--cb-text);
  padding: 13px 22px;
}

.cb-btn--ghost:hover {
  border-color: var(--cb-accent);
  color: var(--cb-accent);
}

/* hero product shot ------------------------------------------------------ */

.cb-shot {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: 14px;
  box-shadow: 0 24px 48px -28px rgba(15, 23, 42, 0.22);
  overflow: hidden;
}

.cb-shot__bar {
  height: 38px;
  border-bottom: 1px solid var(--cb-border);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
}

.cb-shot__dots {
  display: flex;
  gap: 6px;
}

.cb-shot__dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--cb-border);
}

.cb-shot__url {
  margin-left: 10px;
  flex: 1;
  height: 20px;
  border-radius: 5px;
  background: var(--cb-canvas);
  border: 1px solid var(--cb-border);
}

.cb-shot__body {
  position: relative;
  height: 400px;
  background: repeating-linear-gradient(
    135deg,
    #f1f5f9 0 9px,
    #f8fafc 9px 18px
  );
}

body.theme-dark[data-projectname] .cb-shot__body {
  background: repeating-linear-gradient(
    135deg,
    #1b1e24 0 9px,
    #16181d 9px 18px
  );
}

.cb-banner {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: 12px;
  box-shadow: 0 12px 32px -14px rgba(15, 23, 42, 0.28);
  padding: 22px 24px;
}

.cb-banner__head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 600;
  color: var(--cb-text);
}

.cb-banner__head i {
  font-size: 15px;
  color: var(--cb-accent);
}

.cb-banner__text {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--cb-muted);
}

.cb-chips {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cb-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: 7px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--cb-muted);
  font-weight: 500;
}

.cb-chip--locked {
  background: var(--cb-accent-wash);
  border-color: var(--cb-accent-soft);
  color: var(--cb-accent-hover);
}

body.theme-dark[data-projectname] .cb-chip--locked {
  color: #99f6e4;
}

.cb-chip i {
  font-size: 10px;
}

.cb-banner__actions {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Accept and reject are deliberately identical: EU rules require refusing to be
   as easy as accepting, so reject must never read as the quieter option. */
.cb-banner__btn {
  background: var(--cb-accent);
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 8px;
}

.cb-banner__link {
  color: var(--cb-accent);
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 4px;
}

.cb-banner__by {
  margin-left: auto;
  font-family: var(--cb-mono);
  font-size: 10px;
  color: var(--cb-faint);
}

/* card grids ------------------------------------------------------------- */

.cb-steps {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.cb-card {
  border: 1px solid var(--cb-border);
  border-radius: 14px;
  padding: 28px;
  background: var(--cb-surface);
}

.cb-card__num {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--cb-accent-wash);
  border: 1px solid var(--cb-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cb-mono);
  font-size: 14px;
  color: var(--cb-accent);
  font-weight: 500;
}

.cb-card__title {
  margin-top: 18px;
  font-size: 19px;
  font-weight: 600;
  color: var(--cb-text);
}

.cb-card__text {
  margin: 9px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--cb-muted);
}

.cb-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.cb-morelink {
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cb-accent);
  text-decoration: none;
}

.cb-morelink:hover {
  color: var(--cb-accent-hover);
}

.cb-features {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.cb-feature {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: 14px;
  padding: 26px;
}

/* FA icons are SVG masks tinted by color only - never set a background here. */
.cb-feature > i {
  font-size: 18px;
  color: var(--cb-accent);
}

.cb-feature__title {
  margin-top: 16px;
  font-size: 17px;
  font-weight: 600;
  color: var(--cb-text);
}

.cb-feature__text {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--cb-muted);
}

/* trust strip ------------------------------------------------------------ */

.cb-trust {
  padding: 44px 40px;
  background: var(--cb-surface);
  border-top: 1px solid var(--cb-border);
}

.cb-trust__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.cb-trust__label {
  font-size: 14px;
  color: var(--cb-muted);
  margin-right: auto;
}

.cb-badges {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.cb-badge {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--cb-border);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cb-text);
}

.cb-badge i {
  font-size: 12px;
  color: var(--cb-accent);
}

/* closing CTA ------------------------------------------------------------ */

.cb-cta {
  max-width: 1200px;
  margin: 0 auto;
  background: var(--cb-surface);
  border: 1px solid var(--cb-accent-soft);
  border-radius: 18px;
  padding: 48px 52px;
  display: flex;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
}

.cb-cta__body {
  flex: 1;
  min-width: 280px;
}

.cb-cta__title {
  margin: 0;
  font-size: 32px;
  letter-spacing: -0.64px;
  color: var(--cb-text);
  font-weight: 600;
}

.cb-cta__text {
  margin: 12px 0 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--cb-muted);
  max-width: 520px;
}

/* --------------------------------------------------------------------------
   6. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .cb-hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .cb-steps,
  .cb-features {
    grid-template-columns: repeat(2, 1fr);
  }

  .cb-lede {
    max-width: none;
  }
}

@media (max-width: 760px) {
  .cb-section,
  .cb-section--hero,
  .cb-section--cta,
  .cb-trust {
    padding: 44px 20px;
  }

  .cb-h1 {
    font-size: 34px;
    line-height: 1.1;
    letter-spacing: -0.68px;
    margin-top: 18px;
  }

  .cb-lede {
    font-size: 16px;
    margin-top: 14px;
  }

  .cb-h2 {
    font-size: 26px;
    margin-top: 12px;
  }

  .cb-kicker {
    font-size: 11px;
  }

  .cb-cta-row {
    margin-top: 24px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .cb-btn {
    width: 100%;
    padding: 15px 20px;
  }

  .cb-steps,
  .cb-features {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 24px;
  }

  .cb-card,
  .cb-feature {
    padding: 20px;
  }

  .cb-shot {
    margin-top: 28px;
  }

  .cb-shot__bar {
    display: none;
  }

  .cb-shot__body {
    height: auto;
    background: none;
    padding: 0;
  }

  .cb-banner {
    position: static;
    padding: 18px;
    box-shadow: 0 14px 30px -20px rgba(15, 23, 42, 0.25);
  }

  .cb-banner__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cb-banner__btn,
  .cb-banner__link {
    text-align: center;
    padding: 12px;
  }

  .cb-banner__by {
    display: none;
  }

  .cb-cta {
    padding: 26px 22px;
    gap: 20px;
  }

  .cb-cta__title {
    font-size: 24px;
  }

  .cb-cta__text {
    font-size: 15px;
  }

  .cb-trust__label {
    margin-right: 0;
  }
}

/* --------------------------------------------------------------------------
   7. Customer panel (/dashboard)
   Scoped to .cb-panel. The framework sidebar and user layout are untouched -
   this only styles the page body.
   -------------------------------------------------------------------------- */

.cb-panel {
  color: var(--cb-text);
}

/* The page h1 and header CTA come from _user_layout's own blocks, so this layer only
   styles the body below them. */

.cb-switch {
  display: flex;
  align-items: center;
  gap: 9px;
}

.cb-switch__l {
  font-size: 12.5px;
  color: var(--cb-muted);
}

.cb-switch__sel {
  font: inherit;
  font-size: 13.5px;
  padding: 7px 11px;
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  background: var(--cb-surface);
  color: var(--cb-text);
}

/* domain list ------------------------------------------------------------ */

.cb-list {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: 10px;
  overflow: hidden;
}

.cb-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--cb-border);
  text-decoration: none;
  color: inherit;
}

.cb-row:last-child {
  border-bottom: 0;
}

.cb-row:hover {
  background: var(--cb-accent-wash);
}

.cb-row__mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--cb-accent-wash);
  color: var(--cb-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-size: 14px;
}

.cb-row__mark--warn {
  background: rgba(161, 98, 7, 0.12);
  color: #a16207;
}

.cb-row__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cb-row__name {
  font-weight: 600;
  font-size: 14.5px;
}

.cb-row__hint {
  color: var(--cb-muted);
  font-size: 12.5px;
  margin-top: 1px;
}

/* pane tabs --------------------------------------------------------------
   Tabs now switch panes WITHIN a section (Design/Content/Privacy, found/declaration),
   never between sections - that is the sidebar's job. They are <button>s rather than
   links because switching a pane is not a navigation. */

.cb-cfgtabs,
.cb-viewtabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--cb-border);
  margin-bottom: 20px;
}

.cb-viewtabs {
  margin-top: 4px;
}

/* base_elements.css styles every <button> with !important, so each property has to be
   re-asserted here to land at all. */
.cb-panel .cb-cfgtab {
  font: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 9px 14px !important;
  margin: 0 0 -1px 0 !important;
  min-width: 0 !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--cb-muted) !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-transform: none !important;
  line-height: 1.6 !important;
}

.cb-panel .cb-cfgtab--on {
  color: var(--cb-accent) !important;
  border-bottom-color: var(--cb-accent) !important;
  font-weight: 600 !important;
}

/* Panes are display:none rather than removed so the Configuration form keeps every
   control in the DOM - the payload is rebuilt from the whole form on save, and a
   detached pane's fields would silently drop out of it. */
.cb-pane {
  display: none;
}

.cb-pane--on {
  display: block;
}

/* tiles ------------------------------------------------------------------ */

.cb-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.cb-tile {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: 10px;
  padding: 13px 14px;
}

.cb-tile__k {
  font-family: var(--cb-mono);
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--cb-muted);
}

.cb-tile__v {
  font-size: 24px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-top: 5px;
  letter-spacing: -0.5px;
}

.cb-tile__v--sm {
  font-size: 15px;
  letter-spacing: 0;
}

.cb-tile--alert {
  border-color: #a16207;
  background: rgba(161, 98, 7, 0.1);
}

.cb-tile--alert .cb-tile__k,
.cb-tile--alert .cb-tile__v {
  color: #a16207;
}

/* cards / form ----------------------------------------------------------- */

.cb-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 16px;
  align-items: start;
}

.cb-card {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 14px;
}

.cb-card__t {
  font-family: var(--cb-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--cb-muted);
  margin-bottom: 12px;
}

.cb-note {
  font-size: 13px;
  color: var(--cb-muted);
  margin: 0 0 14px;
}

.cb-note--accent {
  color: var(--cb-accent);
  margin: 12px 0 0;
}

.cb-field {
  margin-bottom: 14px;
}

.cb-field__l {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 6px;
}

.cb-seg {
  display: inline-flex;
  background: var(--cb-canvas);
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  padding: 3px;
  gap: 3px;
}

.cb-seg__b {
  font-size: 12.5px;
  padding: 5px 11px;
  border-radius: 6px;
  color: var(--cb-muted);
  text-transform: capitalize;
}

.cb-seg__b--on {
  background: var(--cb-accent);
  color: #ffffff;
  font-weight: 600;
}

.cb-inp {
  width: 100%;
  font: inherit;
  font-size: 13px;
  padding: 8px 11px;
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  background: var(--cb-surface);
  color: var(--cb-text);
}

.cb-inp--area {
  resize: vertical;
  min-height: 66px;
  line-height: 1.5;
}

/* Segment options are <button>s so they are keyboard-reachable; base_elements.css
   styles every button with !important, so each property has to be re-asserted. */
.cb-panel .cb-seg__b {
  font: inherit !important;
  font-size: 12.5px !important;
  padding: 5px 11px !important;
  margin: 0 !important;
  min-width: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--cb-muted) !important;
  cursor: pointer;
  line-height: 1.6 !important;
  text-transform: none !important;
}

.cb-panel .cb-seg__b--on {
  background: var(--cb-accent) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

.cb-panel .cb-seg__b:focus-visible {
  outline: 2px solid var(--cb-accent);
  outline-offset: 1px;
}

/* Position does not apply to the bar and modal layouts - dimmed rather than hidden so
   the control does not jump in and out of the form. */
.cb-seg--off {
  opacity: 0.45;
}

.cb-panel .cb-seg--off .cb-seg__b {
  cursor: not-allowed;
}

.cb-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  padding: 6px 0;
  cursor: pointer;
}

.cb-toggle input {
  accent-color: var(--cb-accent);
  width: 16px;
  height: 16px;
}

.cb-addlang {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

/* .cb-inp sets width:100% and is declared first, so a single-class selector loses on
   source order: the code box stretched to fill the card and pushed the button out of the
   flex row entirely. Needs the compound selector to win. */
.cb-inp.cb-addlang__in {
  width: 130px;
  flex: none;
}

/* base_elements.css sizes every <button>, so the add button came out shorter than the
   input beside it. Match the input's box rather than letting the two drift apart. */
.cb-panel .cb-addlang .up-btn {
  height: 38px;
  padding: 0 14px !important;
  white-space: nowrap;
}

.cb-color {
  width: 46px;
  height: 30px;
  padding: 2px;
  border: 1px solid var(--cb-border);
  border-radius: 7px;
  background: var(--cb-surface);
  cursor: pointer;
}

.cb-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.cb-colors__i {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11.5px;
  color: var(--cb-muted);
  cursor: pointer;
}

.cb-inline {
  display: flex;
  align-items: center;
  gap: 9px;
}

.cb-inline__u {
  font-size: 12.5px;
  color: var(--cb-muted);
}

/* .cb-inp sets width:100% and is declared first, so a bare .cb-inp--num loses on source
   order and the day count stretches the full card width. */
.cb-inp.cb-inp--num {
  width: 92px;
}

.cb-note--warn {
  color: #a16207;
  margin: 2px 0 14px;
}

.cb-note--gap {
  margin-top: 8px;
}

/* Scope bar - sits above a section's content and says WHICH domain it describes.
   Deliberately not in the page header: that row holds actions, and scope is not one. */
.cb-scopebar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 18px;
  border: 1px solid var(--cb-border);
  border-radius: 10px;
  background: var(--cb-surface);
}

/* Actions sit at the far end of the scope bar, so the control and what acts on it stay
   grouped at the start. */
.cb-scopebar__acts {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

/* With a single configuration there is nothing to pick, so the name is shown as text. */
.cb-scopebar__one {
  font-size: 13px;
  font-weight: 600;
  color: var(--cb-text);
}

.cb-movesel {
  max-width: 170px;
}

.cb-scopebar__l {
  font-size: 12px;
  font-weight: 600;
  color: var(--cb-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* logo upload ------------------------------------------------------------ */

.cb-logo {
  margin-top: 10px;
}

.cb-logo__drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px;
  border: 1px dashed var(--cb-border);
  border-radius: 9px;
  background: var(--cb-surface);
  cursor: pointer;
  text-align: center;
  color: var(--cb-muted);
  font-size: 12.5px;
}

.cb-logo__drop:hover {
  border-color: var(--cb-accent);
  color: var(--cb-accent);
}

.cb-logo__t {
  font-weight: 600;
  color: var(--cb-text);
}

.cb-logo__drop:hover .cb-logo__t {
  color: var(--cb-accent);
}

.cb-logo__hint {
  font-size: 11.5px;
}

.cb-logo__has {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--cb-border);
  border-radius: 9px;
  background: var(--cb-surface);
}

/* Bounded so an oversized upload cannot stretch the form while it is being previewed. */
.cb-logo__img {
  max-height: 32px;
  max-width: 140px;
  width: auto;
}

/* Our mark in the preview. Quietest thing in the banner on purpose: visible enough to be
   a real placement, never competing with the consent choice being asked of the visitor. */
.cb-pbanner__brand {
  margin-top: 10px;
  font-size: 10.5px;
  opacity: 0.62;
}

.cb-pbanner__brand strong {
  font-weight: 600;
}

/* scan status ------------------------------------------------------------ */

.cb-scanbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 18px;
  border: 1px solid var(--cb-border);
  border-radius: 10px;
  background: var(--cb-surface);
  font-size: 12.5px;
  color: var(--cb-muted);
}

.cb-scanbar__idle,
.cb-scanbar__busy {
  display: flex;
  align-items: center;
  gap: 9px;
}

/* Only one of the two ever shows. The running state is driven by a class rather than by
   swapping markup, so the scanner can flip it without a re-render. */
.cb-scanbar__busy {
  display: none;
}

.cb-scanbar--busy .cb-scanbar__idle {
  display: none;
}

.cb-scanbar--busy .cb-scanbar__busy {
  display: flex;
}

.cb-scanbar--busy {
  border-color: var(--cb-accent);
  color: var(--cb-accent);
}

.cb-scanbar__spin {
  width: 13px;
  height: 13px;
  border: 2px solid color-mix(in srgb, var(--cb-accent) 30%, transparent);
  border-top-color: var(--cb-accent);
  border-radius: 50%;
  animation: cb-spin 700ms linear infinite;
  flex: none;
}

@keyframes cb-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Frequency reads as a stated fact, not a control - it is set by the plan. */
.cb-scan {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cb-scan__freq {
  font-weight: 600;
  color: var(--cb-text);
}

.cb-scan__when {
  font-size: 12px;
  color: var(--cb-muted);
}

/* Brief dim while a section is being fetched. Short enough not to flash on a fast local
   response, visible enough that a slow one does not look like a dead click. */
.cb-panel--loading {
  opacity: 0.55;
  transition: opacity 120ms ease-out;
  pointer-events: none;
}

/* Per-row shortcuts on the Domains table. Quiet by default so they read as navigation
   rather than as three competing buttons on every row. */
/* nowrap: left to wrap, the shortcuts stack and triple the row height. */
.cb-rowacts {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.cb-rowact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--cb-border);
  border-radius: 7px;
  font-size: 12.5px;
  color: var(--cb-muted);
  text-decoration: none;
  white-space: nowrap;
}

.cb-rowact:hover {
  border-color: var(--cb-accent);
  color: var(--cb-accent);
  background: var(--cb-accent-wash, transparent);
}

/* Wide enough for the four shortcuts on one line, and right-aligned so they sit at the
   edge of the table rather than floating mid-row. */
.cb-col-actions,
.cb-rowacts {
  min-width: 380px;
}

.cb-col-actions {
  text-align: right;
}

.cb-groupnote {
  margin-bottom: 18px;
}

.cb-groupnote .cb-note {
  margin-bottom: 0;
}

/* "3 / 5" - the denominator is context, so it must not compete with the count. */
.cb-tile__of {
  font-size: 14px;
  font-weight: 500;
  color: var(--cb-muted);
  margin-left: 4px;
}

.cb-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--cb-border);
}

.cb-saved {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cb-accent);
}

/* `display` beats the hidden attribute, so without this the "Saved" tick shows on load
   before anything has been saved. Applies to any [hidden] we style with display. */
.cb-panel [hidden] {
  display: none !important;
}

/* The live preview follows the accent the customer picks, not the site's teal. */
.cb-pbanner[data-cb-preview] .cb-pbanner__b {
  background: var(--cb-preview-accent, var(--cb-accent));
  color: var(--cb-preview-accent-text, #ffffff);
}

.cb-pbanner[data-cb-preview] .cb-pbanner__link,
.cb-pbanner[data-cb-preview] .cb-pbanner__h i {
  color: var(--cb-preview-accent, var(--cb-accent));
}

/* --- preview stage: layout + position actually reshape the banner ---------
   Without these, picking "bar" or "centre" changes a stored value and nothing on
   screen, which reads as a dead control. */

.cb-preview[data-cb-stage] {
  position: relative;
  min-height: 300px;
  display: flex;
  padding: 16px;
}

.cb-preview[data-cb-stage] .cb-pbanner {
  transition:
    max-width 0.18s ease,
    border-radius 0.18s ease;
}

/* box: a compact card tucked into a corner */
.cb-preview[data-layout='box'] .cb-pbanner {
  max-width: 300px;
}

/* bar: full width, squared off, pinned along the bottom edge */
.cb-preview[data-layout='bar'] {
  align-items: flex-end;
  padding: 0;
}

.cb-preview[data-layout='bar'] .cb-pbanner {
  max-width: none;
  width: 100%;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

/* modal: centred, with a scrim over the page behind it */
.cb-preview[data-layout='modal'] {
  align-items: center;
  justify-content: center;
}

.cb-preview[data-layout='modal']::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.32);
}

.cb-preview[data-layout='modal'] .cb-pbanner {
  position: relative;
  z-index: 1;
  max-width: 340px;
}

/* position only applies to the box layout - a bar spans the width, and a modal is
   centred by definition. */
.cb-preview[data-layout='box'] {
  align-items: flex-end;
}

.cb-preview[data-layout='box'][data-position='bottom-right'] {
  justify-content: flex-end;
}

.cb-preview[data-layout='box'][data-position='bottom-left'] {
  justify-content: flex-start;
}

.cb-preview[data-layout='box'][data-position='center'] {
  align-items: center;
  justify-content: center;
}

/* The preview shows what a VISITOR to the customer's site sees, so it must follow the
   banner's own light/dark setting and NOT the dashboard theme. Using --cb-* tokens here
   made a light-configured banner render dark whenever the customer switched their own
   dashboard to dark - misleading, since their visitors would still see it light. Hence
   explicit colours, both directions. */
/* The theme hex is the FALLBACK, not the value: picking a background or text colour in
   the form overrides it, so the preview shows the customer's own choice. Without the
   var the theme rule would win on !important and the two new pickers would look dead. */
.cb-preview[data-theme='light'] .cb-pbanner {
  background: var(--cb-preview-surface, #ffffff) !important;
  /* `color` too, not just background: the container inherits the dashboard's text
     colour, so in dark mode a light-configured banner rendered near-white on white. */
  color: var(--cb-preview-text, #0f172a) !important;
  border-color: #e2e8f0 !important;
}

.cb-preview[data-theme='light'] .cb-pbanner__h {
  color: var(--cb-preview-text, #0f172a) !important;
}

/* Body copy is the muted sibling of the title, so mix the chosen text colour toward the
   surface rather than pinning slate - otherwise a custom text colour leaves the
   paragraph the one element still grey. */
.cb-preview[data-theme='light'] .cb-pbanner__p {
  color: color-mix(
    in srgb,
    var(--cb-preview-text, #0f172a) 62%,
    var(--cb-preview-surface, #ffffff)
  ) !important;
}

.cb-preview[data-theme='light'] .cb-pchip {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #64748b !important;
}

/* The locked "Necessary" chip is accent-tinted on purpose - that tint is what marks it
   as the always-on category. Derive it from the customer's accent rather than hardcoding
   teal, or picking orange leaves a stray teal chip beside orange buttons. */
.cb-preview[data-theme='light'] .cb-pchip--lock {
  background: color-mix(
    in srgb,
    var(--cb-preview-accent, var(--cb-accent)) 8%,
    #ffffff
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--cb-preview-accent, var(--cb-accent)) 28%,
    #ffffff
  ) !important;
  color: var(--cb-preview-accent, var(--cb-accent)) !important;
}

.cb-preview[data-theme='dark'] .cb-pbanner {
  background: var(--cb-preview-surface, #16181d) !important;
  color: var(--cb-preview-text, #f1f5f9) !important;
  border-color: #2a2d35 !important;
}

.cb-preview[data-theme='dark'] .cb-pbanner__h {
  color: var(--cb-preview-text, #f1f5f9) !important;
}

.cb-preview[data-theme='dark'] .cb-pbanner__p {
  color: color-mix(
    in srgb,
    var(--cb-preview-text, #f1f5f9) 66%,
    var(--cb-preview-surface, #16181d)
  ) !important;
}

.cb-preview[data-theme='dark'] .cb-pchip {
  background: transparent !important;
  border-color: #2a2d35 !important;
  color: #94a3b8 !important;
}

/* Same on dark, mixed toward the dark surface instead of white, and the text lightened
   so a dark accent stays legible against it. */
.cb-preview[data-theme='dark'] .cb-pchip--lock {
  background: color-mix(
    in srgb,
    var(--cb-preview-accent, var(--cb-accent)) 18%,
    #16181d
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--cb-preview-accent, var(--cb-accent)) 42%,
    #16181d
  ) !important;
  color: color-mix(
    in srgb,
    var(--cb-preview-accent, var(--cb-accent)) 62%,
    #ffffff
  ) !important;
}

/* banner preview --------------------------------------------------------- */

.cb-preview {
  background: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, var(--cb-text) 4%, transparent) 0 9px,
    transparent 9px 18px
  );
  border: 1px solid var(--cb-border);
  border-radius: 10px;
  padding: 20px;
}

.cb-pbanner {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: 11px;
  padding: 17px 18px;
  box-shadow: 0 10px 28px -16px rgba(15, 23, 42, 0.3);
}

.cb-pbanner__h {
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cb-pbanner__h i {
  color: var(--cb-accent);
}

.cb-pbanner__p {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--cb-muted);
}

.cb-pbanner__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.cb-pchip {
  font-size: 11.5px;
  padding: 4px 9px;
  border: 1px solid var(--cb-border);
  border-radius: 6px;
  color: var(--cb-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cb-pchip--lock {
  background: var(--cb-accent-wash);
  border-color: var(--cb-accent-soft);
  color: var(--cb-accent);
}

.cb-pbanner__acts {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  flex-wrap: wrap;
}

/* Accept and reject share this class deliberately - EU rules require refusing to be as
   easy as accepting, so the two must never be styled apart. */
.cb-pbanner__b {
  background: var(--cb-accent);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 13px;
  border-radius: 7px;
}

.cb-pbanner__link {
  color: var(--cb-accent);
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 2px;
}

.cb-eqnote {
  margin-top: 12px;
  font-size: 11.5px;
  color: var(--cb-accent);
  display: flex;
  gap: 7px;
  align-items: flex-start;
}

/* STALE: no domain children in the sidebar since sections became fixed. Kept only if
   something else still renders fa-circle there.
   Shrinks the bullet to a dot and
   tint it - at default size it reads as a filled blob next to the label. */
.base-sidebar__submenu .base-sidebar__item-icon .fa-circle {
  font-size: 8px;
  color: var(--cb-accent);
}

/* KNOWN FRAMEWORK BUG (base_userpanel.css ~5324, dev's lane): the rule
     .up-modal__form .user-overview-form-label,
     .up-mfa-add-expand .user-overview-form-label > i { display: none !important }
   is missing `> i` on the FIRST selector, so hosted modal forms hide the entire label
   instead of just its icon. Re-show ours, id-scoped so we do not undo the intended
   icon-hiding elsewhere. Same workaround privcaptcha uses. */
#cb-create .user-overview-form-label {
  display: flex !important;
}

#cb-create .user-overview-form-label > i {
  display: none !important;
}

/* base_status_badge.css hardcodes #4a9eff on .status-badge-info with !important, so the
   category pills come out framework blue against the teal panel. Re-assert here. Guarded
   away from admin - admin stays framework-default. */
body:not(:has(.admin-container)) .cb-panel .status-badge-info {
  border-color: var(--cb-accent-soft) !important;
  color: var(--cb-accent) !important;
  background: var(--cb-accent-wash) !important;
}

/* scan table ------------------------------------------------------------- */

.cb-panel .cb-tr--attn td {
  background: rgba(161, 98, 7, 0.09);
}

.cb-unk {
  font-size: 12px;
  color: var(--cb-muted);
  border: 1px dashed var(--cb-border);
  border-radius: 999px;
  padding: 3px 9px;
  display: inline-block;
}

/* regions ---------------------------------------------------------------- */

.cb-regions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0 4px;
}

.cb-region {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--cb-border);
  border-radius: 10px;
}

/* The fallback row is fixed, so it reads as a stated rule rather than a control the
   customer failed to find. */
.cb-region--locked {
  background: var(--cb-accent-wash);
  border-color: var(--cb-accent-soft);
}

.cb-region__main {
  min-width: 0;
  margin-right: auto;
}

.cb-region__name {
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cb-region__lock {
  font-size: 10px;
  color: var(--cb-muted);
}

.cb-region__law {
  font-family: var(--cb-mono);
  font-size: 11px;
  color: var(--cb-muted);
  margin-top: 2px;
}

@media (max-width: 700px) {
  .cb-region .cb-seg {
    width: 100%;
  }

  .cb-region .cb-seg__b {
    flex: 1;
    text-align: center;
  }
}

/* overview task list ----------------------------------------------------- */

.cb-steps-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.cb-todo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
}

a.cb-todo:hover {
  border-color: var(--cb-accent);
}

.cb-todo__ico {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--cb-accent-wash);
  color: var(--cb-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-size: 13px;
}

.cb-todo--warn .cb-todo__ico {
  background: rgba(161, 98, 7, 0.12);
  color: #a16207;
}

.cb-todo--done .cb-todo__ico {
  background: rgba(21, 128, 61, 0.12);
  color: #15803d;
}

.cb-todo__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cb-todo__t {
  font-weight: 600;
  font-size: 14px;
}

.cb-todo__d {
  color: var(--cb-muted);
  font-size: 12.5px;
  margin-top: 1px;
}

.cb-todo__go {
  margin-left: auto;
  color: var(--cb-faint);
  font-size: 12px;
}

/* consent log ------------------------------------------------------------ */

.cb-num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cb-hash {
  font-family: var(--cb-mono);
  font-size: 11.5px;
  color: var(--cb-faint);
}

.cb-decl__preview-label {
  font-family: var(--cb-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--cb-muted);
  margin: 22px 0 4px;
}

.cb-decl__grp {
  font-size: 14px;
  font-weight: 600;
  margin: 18px 0 8px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.cb-decl__n {
  font-family: var(--cb-mono);
  font-size: 11px;
  color: var(--cb-muted);
  font-weight: 400;
}

/* install ---------------------------------------------------------------- */

.cb-code {
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 9px;
  padding: 14px 16px;
  font-family: var(--cb-mono);
  font-size: 12px;
  line-height: 1.7;
  margin: 0;
  /* Wrap rather than scroll. The snippet is meant to be READ and copied, and a
     horizontal scrollbar hides the end of it - on a narrow panel the customer would
     not see the closing tag at all. `pre-wrap` keeps the intentional line breaks
     while letting long lines fold. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* <code> is inline by default, so it ignores the <pre>'s width and pushes out of the
   box instead of wrapping inside it. This is what made the snippet spill. */
.cb-code code {
  display: block;
  white-space: inherit;
  overflow-wrap: inherit;
  font: inherit;
  color: inherit;
  background: none;
  padding: 0;
}

.cb-codewrap {
  position: relative;
}

/* base_elements.css styles every <button> with !important, so a flat icon button has to
   re-assert everything it wants - hence the !important here on an otherwise plain rule. */
.cb-panel .cb-copy {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px !important;
  height: 30px !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(226, 232, 240, 0.22) !important;
  border-radius: 7px !important;
  background: rgba(15, 23, 42, 0.75) !important;
  background-image: none !important;
  color: #cbd5e1 !important;
  cursor: pointer;
  font-size: 12px !important;
  line-height: 1 !important;
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}

.cb-panel .cb-copy:hover {
  color: #ffffff !important;
  border-color: var(--cb-accent) !important;
  background: rgba(15, 23, 42, 0.9) !important;
}

.cb-panel .cb-copy:focus-visible {
  outline: 2px solid var(--cb-accent);
  outline-offset: 2px;
}

/* The tick swaps in for ~1.6s after a successful copy - a toast for something this
   small is more interruption than confirmation. */
/* The tick is hidden until a copy succeeds. Needs the same .cb-panel scope and an
   !important as the rules that show it - a bare .cb-copy__done loses to the icon
   styling, and both glyphs render side by side. */
.cb-panel .cb-copy .cb-copy__done {
  display: none !important;
}

.cb-panel .cb-copy.is-copied {
  color: #5eead4 !important;
  border-color: #5eead4 !important;
}

/* Both carry !important to beat the hide rule above, which needs its own !important to
   beat the icon styling in the first place. Swap, not toggle: exactly one shows. */
.cb-panel .cb-copy.is-copied .fa-copy {
  display: none !important;
}

.cb-panel .cb-copy.is-copied .cb-copy__done {
  display: inline !important;
}

/* Leave room so a long snippet never runs under the button. */
.cb-codewrap .cb-code {
  padding-right: 48px;
}

.cb-steps {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.cb-step {
  flex: 1;
  min-width: 150px;
  border: 1px solid var(--cb-border);
  border-radius: 9px;
  padding: 12px 14px;
}

.cb-step--on {
  border-color: #15803d;
  background: rgba(21, 128, 61, 0.1);
}

.cb-step__k {
  font-family: var(--cb-mono);
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--cb-muted);
}

.cb-step--on .cb-step__k {
  color: #15803d;
}

.cb-step__v {
  font-size: 13px;
  font-weight: 600;
  margin-top: 4px;
}

/* empty ------------------------------------------------------------------ */

.cb-empty {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: 10px;
  padding: 40px 24px;
  text-align: center;
  color: var(--cb-muted);
  font-size: 13.5px;
}

.cb-empty__t {
  font-weight: 600;
  color: var(--cb-text);
  font-size: 16px;
  margin-bottom: 6px;
}

.cb-empty p {
  margin: 0 0 16px;
}

@media (max-width: 900px) {
  .cb-split {
    grid-template-columns: 1fr;
  }
}

/* Adding a website that is not stored yet - accent-framed so it reads as an unfinished
   step rather than a normal scope bar. */
.cb-scopebar--pending {
  border-color: var(--cb-accent);
  background: var(--cb-accent-wash, var(--cb-surface));
}

.cb-pendnote {
  font-size: 12.5px;
  color: var(--cb-muted);
  margin-left: auto;
}

/* Destructive controls. base_elements.css styles every <button> with !important, so the
   danger colouring has to re-assert to land at all. */
.cb-panel .cb-rowact--danger,
.cb-panel .cb-btn--danger {
  color: #b91c1c !important;
  border-color: rgba(185, 28, 28, 0.28) !important;
  background: transparent !important;
  background-image: none !important;
}

.cb-panel .cb-rowact--danger:hover,
.cb-panel .cb-btn--danger:hover {
  color: #ffffff !important;
  background: #b91c1c !important;
  border-color: #b91c1c !important;
}

/* Category cell: the badge answers the question, the pencil offers to change it.
   Deliberately NOT .cb-switch__sel - the framework replaces that class with its own
   dropdown widget at runtime, which would hide the answer behind a control label. */
.cb-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cb-catsel {
  max-width: 190px;
  font: inherit;
  font-size: 12.5px;
  padding: 5px 8px;
  border: 1px solid var(--cb-border);
  border-radius: 7px;
  background: var(--cb-surface);
  color: var(--cb-text);
}

/* Quiet until the row is hovered. */
.cb-panel .cb-catedit {
  padding: 2px 5px !important;
  margin: 0 !important;
  min-width: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--cb-faint) !important;
  font-size: 11px !important;
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease-out;
}

.data-table tr:hover .cb-catedit,
.cb-panel .cb-catedit:focus-visible {
  opacity: 1;
}

/* Except on a row still waiting for a category - there the pencil IS the call to action,
   so it stays visible and takes the accent. */
.cb-panel .cb-catedit--wants {
  opacity: 1;
  color: #a16207 !important;
}

.cb-unk--yours {
  color: #a16207;
}

/* Marks a category that came from our classification database rather than the customer. */
.cb-catsrc {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--cb-faint);
}

/* A control the plan does not include: shown, but visibly inert. */
.cb-panel .cb-btn--locked {
  opacity: 0.55;
}

.cb-lock {
  margin-left: 6px;
  font-size: 10px;
}