/* ContentBlocks — Admin (builder shell) styles */

/* Form widgets — scoped under .cb-shell, pairs with @ContentBlocks/form/cb_form_theme.html.twig. */
@import "forms-6ubPn-j.css";

/* ---- Launcher (form widget area) ----
 *
 * Lives on the host's edit page OUTSIDE the cb-shell scope, so the
 * button can't rely on the form-theme tokens defined in forms.css.
 * Keep these rules self-contained — same blue / radii / typography
 * as the rest of the builder so the launcher reads as part of the
 * same product. */

.cb-launcher {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.cb-launcher__button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  background: #4f8df9;
  color: #fff;
  border: 1px solid #4f8df9;
  border-radius: 0.375rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.12s ease;
}
.cb-launcher__button:hover {
  background: #3d7be7;
  border-color: #3d7be7;
}
.cb-launcher__button:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(79, 141, 249, 0.25);
}

.cb-launcher__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.45rem;
  background: #f5d27a;
  color: #5a4308;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
}

/* ---- Dialog wrapper (fullscreen) ---- */

.cb-builder-dialog {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: none;
  background: #f5f6f8;
}

.cb-builder-dialog::backdrop {
  background: rgba(20, 22, 30, 0.6);
}

/* ---- Shell layout ---- */

.cb-shell {
  /* Positioning context for the floating undo snackbar. */
  position: relative;
  display: grid;
  grid-template-rows: 56px 1fr;
  height: 100%;
  width: 100%;
  background: #f5f6f8;
  color: #1f2330;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
  /* Drives the sidebar grid column width below. JS updates this on
       resize / collapsed-state changes; descendants must NOT redeclare
       it or they'd shadow the live value back to the default. */
  --cb-sidebar-width: 340px;
  --cb-sidebar-collapsed-width: 32px;
}

.cb-shell__topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 1rem;
  background: #fff;
  border-bottom: 1px solid #e3e5e9;
  gap: 1rem;
  /* Make room for the progress bar that sits on the shell's top edge. */
  position: relative;
}

/* ---- Top-bar progress indicator ---- */

/* Thin indeterminate progress bar pinned to the very top of the shell, above
   the topbar. Visible only while the controller has an AJAX request in flight
   or the iframe is reloading; idle the bar is collapsed to zero height so it
   doesn't take any space. */
.cb-shell__progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  overflow: hidden;
  z-index: 10;
  pointer-events: none;
  transition: height 0.12s ease-out;
}
.cb-shell--loading .cb-shell__progress {
  height: 2px;
  background: rgba(79, 141, 249, 0.15);
}
.cb-shell__progress::after {
  content: "";
  display: block;
  height: 100%;
  width: 30%;
  background: #4f8df9;
  animation: cb-shell-progress 1.1s ease-in-out infinite;
}
@keyframes cb-shell-progress {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(150%);
  }
  100% {
    transform: translateX(350%);
  }
}

.cb-shell__topbar-left {
  justify-self: start;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.cb-shell__topbar-center {
  justify-self: center;
}
.cb-shell__topbar-right {
  justify-self: end;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.cb-shell__close {
  background: transparent;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  color: #666;
}
.cb-shell__close:hover {
  color: #1f2330;
}

/* ---- Top-left Replace button (matches Discard's ghost style) ---- */

.cb-shell__replace {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.375rem 0.75rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  color: #4f8df9;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease;
}
.cb-shell__replace:hover:not([disabled]) {
  background: rgba(79, 141, 249, 0.08);
  border-color: rgba(79, 141, 249, 0.25);
}
.cb-shell__replace .cb-shell__btn-icon {
  display: none;
  font-size: 1.15rem;
}

/* ---- Replace-content picker overlay (anchored to topbar Insert button) ---- */

.cb-replace-picker {
  position: absolute;
  top: 56px;
  left: 12px;
  width: 360px;
  max-width: calc(100% - 24px);
  max-height: calc(100% - 80px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e3e5e9;
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  z-index: 30;
  overflow: hidden;
}
.cb-replace-picker[hidden] {
  display: none;
}

.cb-replace-picker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #eef0f3;
  background: #fafbfc;
}
.cb-replace-picker__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1f2330;
}
.cb-replace-picker__close {
  background: transparent;
  border: 0;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.15rem 0.35rem;
  cursor: pointer;
  color: #666;
}
.cb-replace-picker__close:hover {
  color: #1f2330;
}

.cb-replace-picker__body {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
}

.cb-replace-picker__search {
  width: 100%;
  padding: 0.375rem 0.5rem;
  border: 1px solid #d8dbe0;
  border-radius: 0.375rem;
  font: inherit;
}

.cb-replace-picker__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.cb-replace-picker__item {
  display: flex;
}
.cb-replace-picker__item-btn {
  flex: 1 1 auto;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  padding: 0.375rem 0.5rem;
  font: inherit;
  font-size: 0.9rem;
  color: #1f2330;
  cursor: pointer;
}
.cb-replace-picker__item-btn:hover,
.cb-replace-picker__item-btn:focus-visible {
  background: rgba(79, 141, 249, 0.08);
  border-color: rgba(79, 141, 249, 0.25);
  outline: none;
}

.cb-replace-picker__status {
  margin: 0;
  color: #666;
  font-size: 0.85rem;
  min-height: 1rem;
}
.cb-replace-picker__status:empty {
  display: none;
}

/* ---- Import / Export topbar button + picker overlay ----
   Visually consistent with the Replace button & picker so the topbar
   reads as one cohesive toolbar. The picker sits in the same overlay
   stack (z-index 30) and is anchored to the topbar's left edge. */

.cb-shell__import-export {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.375rem 0.75rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  color: #4f8df9;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease;
}
.cb-shell__import-export:hover:not([disabled]) {
  background: rgba(79, 141, 249, 0.08);
  border-color: rgba(79, 141, 249, 0.25);
}
.cb-shell__import-export .cb-shell__btn-icon {
  display: none;
  font-size: 1.15rem;
}

.cb-import-export-picker {
  position: absolute;
  top: 56px;
  left: 12px;
  width: 360px;
  max-width: calc(100% - 24px);
  max-height: calc(100% - 80px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e3e5e9;
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  z-index: 30;
  overflow: hidden;
}
.cb-import-export-picker[hidden] {
  display: none;
}
.cb-import-export-picker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #eef0f3;
  background: #fafbfc;
}
.cb-import-export-picker__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1f2330;
}
.cb-import-export-picker__close {
  background: transparent;
  border: 0;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.15rem 0.35rem;
  cursor: pointer;
  color: #666;
}
.cb-import-export-picker__close:hover {
  color: #1f2330;
}
.cb-import-export-picker__body {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow-y: auto;
}
.cb-import-export-picker__section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cb-import-export-picker__heading {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #4f5867;
}
.cb-import-export-picker__hint {
  margin: 0;
  color: #666;
  font-size: 0.85rem;
  line-height: 1.4;
}
.cb-import-export-picker__hint--warning {
  color: #a66100;
}
.cb-import-export-picker__separator {
  border-top: 1px solid #eef0f3;
}
.cb-import-export-picker__file {
  font-size: 0.85rem;
}
.cb-import-export-picker__btn {
  align-self: flex-start;
  background: transparent;
  border: 1px solid #d8dbe0;
  border-radius: 0.375rem;
  padding: 0.4rem 0.85rem;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  color: #1f2330;
}
.cb-import-export-picker__btn:hover:not([disabled]) {
  background: rgba(79, 141, 249, 0.08);
  border-color: rgba(79, 141, 249, 0.4);
}
.cb-import-export-picker__btn--primary {
  background: #4f8df9;
  border-color: #4f8df9;
  color: #fff;
}
.cb-import-export-picker__btn--primary:hover:not([disabled]) {
  background: #3a7be5;
  border-color: #3a7be5;
  color: #fff;
}
.cb-import-export-picker__status {
  margin: 0;
  color: #666;
  font-size: 0.85rem;
  min-height: 1rem;
}
.cb-import-export-picker__status:empty {
  display: none;
}

.cb-shell__viewport {
  display: inline-flex;
  background: #f5f6f8;
  border-radius: 0.375rem;
  padding: 0.125rem;
}
.cb-shell__viewport-btn {
  background: transparent;
  border: 0;
  padding: 0.25rem 0.75rem;
  cursor: pointer;
  color: #666;
  border-radius: 0.25rem;
  font-size: 1.1rem;
  line-height: 1;
}
.cb-shell__viewport-btn[hidden] {
  display: none;
}
.cb-shell__viewport-btn--active {
  background: #fff;
  color: #1f2330;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* ---- Save-failure banner (topbar) ----
 *
 * Persistent (unlike the transient sidebar "Saved" flash): it appears
 * when any save path fails — structural AJAX op, Live block form,
 * section settings POST — and only disappears once a later save
 * succeeds. Red chip sitting left of the Discard / Publish buttons.
 */
.cb-shell__save-error {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid rgba(216, 58, 58, 0.4);
  border-radius: 0.375rem;
  background: rgba(216, 58, 58, 0.08);
  color: #b32626;
  font-size: 0.8125rem;
  line-height: 1.2;
  white-space: nowrap;
}
.cb-shell__save-error[hidden] {
  display: none;
}
@media (max-width: 768px) {
  /* Keep the chip readable on narrow topbars: icon only. */
  .cb-shell__save-error > span:not(.cb-shell__btn-icon) {
    display: none;
  }
}

/* ---- Undo snackbar ----
 *
 * Floating chip at the bottom-center of the shell, shown for a few
 * seconds after a block/section delete. Dark (inverse) styling so it
 * reads as transient system feedback, not part of the page.
 */
.cb-shell__undo {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem 0.5rem 1rem;
  border-radius: 0.5rem;
  background: #1f2330;
  color: #fff;
  font-size: 0.875rem;
  line-height: 1.2;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
}
.cb-shell__undo[hidden] {
  display: none;
}
.cb-shell__undo-btn {
  background: transparent;
  border: 0;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  color: #8db4fb;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.cb-shell__undo-btn:hover {
  background: rgba(141, 180, 251, 0.12);
}

/* ---- Top-right action buttons (Discard / Publish) ---- */

.cb-shell__discard,
.cb-shell__publish {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease;
}
.cb-shell__discard {
  background: transparent;
  border: 1px solid transparent;
  color: #4f8df9;
}
.cb-shell__discard:hover:not([disabled]) {
  background: rgba(79, 141, 249, 0.08);
  border-color: rgba(79, 141, 249, 0.25);
}
.cb-shell__discard[hidden] {
  display: none;
}
.cb-shell__publish {
  background: #2e7d4f;
  border: 1px solid #2e7d4f;
  color: #fff;
}
.cb-shell__publish:hover:not([disabled]) {
  background: #266a42;
  border-color: #266a42;
}
.cb-shell__publish[disabled] {
  background: #cbd0d8;
  border-color: #cbd0d8;
  color: #fff;
  cursor: not-allowed;
}
.cb-shell__btn-icon {
  font-size: 1rem;
  line-height: 1;
}
/* Default state: icon hidden on desktop where the label is shown. */
.cb-shell__discard .cb-shell__btn-icon {
  display: none;
}

/* ---- Mobile tightening ---- */
@media (max-width: 768px) {
  /* Drop the grid (1fr auto 1fr) on mobile and switch to flex with
       space-between. The grid was forcing the right column to a fixed
       1fr share, so when discard+publish were wider than that share the
       buttons spilled past the topbar. Flex lets each cluster take its
       natural width with the viewport switcher floating in the middle. */
  .cb-shell__topbar {
    display: flex;
    justify-content: space-between;
    padding: 0 0.5rem;
    gap: 0.5rem;
  }
  .cb-shell__topbar-left,
  .cb-shell__topbar-center,
  .cb-shell__topbar-right {
    justify-self: auto;
    flex: 0 0 auto;
  }
  /* Discard collapses to icon-only — the long "Annuler les modifications"
       label was wrapping on narrow screens and pushing Publish out of the
       topbar row. */
  .cb-shell__discard {
    padding: 0.375rem 0.5rem;
  }
  .cb-shell__discard .cb-shell__btn-icon {
    display: inline-flex;
    font-size: 1.15rem;
  }
  .cb-shell__discard .cb-shell__btn-label {
    display: none;
  }
  /* Replace collapses to icon-only on mobile for the same reason. */
  .cb-shell__replace,
  .cb-shell__import-export {
    padding: 0.375rem 0.5rem;
  }
  .cb-shell__replace .cb-shell__btn-icon,
  .cb-shell__import-export .cb-shell__btn-icon {
    display: inline-flex;
  }
  .cb-shell__replace .cb-shell__btn-label,
  .cb-shell__import-export .cb-shell__btn-label {
    display: none;
  }
  .cb-replace-picker,
  .cb-import-export-picker {
    left: 6px;
    right: 6px;
    width: auto;
  }
  .cb-shell__publish {
    padding: 0.375rem 0.65rem;
    font-size: 0.85rem;
  }
  .cb-shell__viewport-btn {
    padding: 0.25rem 0.55rem;
  }
}

/* ---- Main area: 2-column grid (sidebar left, iframe right) ----
 *
 * The sidebar is permanent: it always claims a column rather than
 * floating over the iframe. A collapsed state shrinks the column to
 * a fly-out handle width so the iframe can expand to the full main
 * width when the user wants a wide preview. Width is CSS-variable
 * driven so the resize handle can update one knob without touching
 * the grid template directly. */

.cb-shell__main {
  display: grid;
  grid-template-columns: var(--cb-sidebar-width) 1fr;
  overflow: hidden;
  background: #e9ebef;
  min-height: 0;
}

.cb-shell--sidebar-collapsed .cb-shell__main {
  grid-template-columns: var(--cb-sidebar-collapsed-width) 1fr;
}

.cb-shell__iframe {
  border: 0;
  background: #fff;
  width: 100%;
  height: 100%;
  display: block;
  /* Smooth resize when the viewport switcher changes max-width — the
       transition gives the iframe content time to reflow with media
       queries, instead of flashing a horizontal scrollbar at the moment
       the size jumps. */
  transition:
    max-width 0.2s ease,
    margin 0.2s ease;
}

.cb-shell__sidebar {
  position: relative;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #e3e5e9;
  box-shadow: 2px 0 12px rgba(20, 22, 30, 0.04);
  min-width: 0;
  /* min-height:0 stops this grid item from growing past its track when the
       form is tall — without it the implicit row expands to fit the content
       and .cb-shell__main's overflow:hidden clips the bottom, so the
       sidebar-content's overflow-y:auto never engages and lower fields
       become unreachable.
     No overflow:hidden here — the toggle button is absolute-positioned and
       deliberately overhangs the right edge; the content child scrolls. */
  min-height: 0;
}

/* Collapsed: hide content, resize handle, saved-flash; only the
   toggle chip remains visible to expand back. */
.cb-shell--sidebar-collapsed .cb-shell__sidebar-content,
.cb-shell--sidebar-collapsed .cb-shell__sidebar-resize,
.cb-shell--sidebar-collapsed .cb-shell__sidebar-saved {
  display: none;
}

.cb-shell__sidebar-resize {
  position: absolute;
  top: 0;
  bottom: 0;
  right: -3px;
  width: 6px;
  cursor: col-resize;
  z-index: 6;
  transition: background-color 0.12s ease-out;
}
.cb-shell__sidebar-resize:hover,
.cb-shell__sidebar-resize:active {
  background-color: rgba(79, 141, 249, 0.35);
}

/* Floating toggle chip on the sidebar's right edge, vertically centered.
   Translates half its width past the sidebar so it overhangs the iframe
   gutter — still entirely clickable, and visible even when the sidebar
   is collapsed to its 32px stub. */
.cb-shell__sidebar-toggle {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
  z-index: 10;
  width: 26px;
  height: 26px;
  background: #fff;
  border: 1px solid #d8dbe2;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(20, 22, 30, 0.12);
  color: #5b6478;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cb-shell__sidebar-toggle:hover {
  background: #f5f6f8;
  color: #1f2330;
}
.cb-shell__sidebar-toggle-icon {
  display: inline-block;
  transition: transform 0.15s ease-out;
}
.cb-shell--sidebar-collapsed .cb-shell__sidebar-toggle-icon {
  transform: rotate(180deg);
}

/* Mobile: the sidebar becomes a bottom sheet that floats above the
   iframe instead of stealing a row from the main grid. The iframe gets
   the full main area and the sidebar slides in from the bottom edge,
   overlaying the lower portion of the preview. When collapsed it
   translates down to leave just a 32px strip visible, holding the
   toggle that pulls it back up. cb-builder also scrolls the iframe
   so the focused element's bottom isn't hidden under the sheet.

   This block lives AFTER the desktop sidebar/toggle rules on purpose:
   media queries don't bump specificity, so the cascade still picks the
   last matching declaration — putting mobile last lets it win at
   <=768px without resorting to !important. */
@media (max-width: 768px) {
  .cb-shell__main {
    position: relative;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
  .cb-shell--sidebar-collapsed .cb-shell__main {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
  .cb-shell__sidebar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60vh;
    border-right: 0;
    border-top: 1px solid #e3e5e9;
    box-shadow: 0 -2px 12px rgba(20, 22, 30, 0.08);
    z-index: 5;
    transition: transform 0.22s ease-out;
  }
  .cb-shell--sidebar-collapsed .cb-shell__sidebar {
    /* Slide the sheet down so only the 32px strip carrying the toggle
       remains visible above the bottom edge. The translate keeps the
       layout height intact so getBoundingClientRect reports the visual
       (transformed) position — handy when we measure for auto-scroll. */
    transform: translateY(calc(100% - 32px));
  }
  .cb-shell__sidebar-resize {
    display: none;
  }
  /* Toggle pinned to the top edge of the sheet, centered horizontally,
     overhanging upward so it reads as a "grab handle" on a bottom
     sheet — same chip in both states, just moves with the sheet. */
  .cb-shell__sidebar-toggle {
    top: 0;
    right: auto;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  /* The chevron is a left-arrow at rest; rotate it so it reads as
     "down" when expanded (close direction) and "up" when collapsed
     (pull-up affordance). */
  .cb-shell__sidebar-toggle-icon {
    transform: rotate(-90deg);
  }
  .cb-shell--sidebar-collapsed .cb-shell__sidebar-toggle-icon {
    transform: rotate(90deg);
  }
}

/* Transient "✓ Saved" pill pinned to the sidebar's top-right corner,
   fired by autosave. role="status" + aria-live="polite" handles the
   screen-reader announcement; the visible pill fades in/out via a
   transition. */
.cb-shell__sidebar-saved {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: rgba(46, 125, 79, 0.12);
  color: #2e7d4f;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.25s ease-out;
}
.cb-shell__sidebar-saved.is-visible {
  opacity: 1;
}
.cb-shell__sidebar-saved[hidden] {
  display: none;
}

.cb-shell__sidebar-content {
  flex: 1 1 auto;
  /* min-height: 0 lets the flex child shrink past its content size
       so overflow-y: auto can scroll inside the sidebar. Without it the
       child would expand to fit content and push past the sidebar. */
  min-height: 0;
  overflow-y: auto;
  padding: 1rem;
}

/* Empty state shown when no block/section is focused. Keeps the
   sidebar useful even before the user clicks anything: a one-liner
   hint plus the three add-section buttons (mirror of the iframe's
   own empty tray). */
.cb-sidebar-empty {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.cb-sidebar-empty__hint {
  margin: 0;
  color: #5b6478;
  font-size: 0.9rem;
  line-height: 1.4;
}
.cb-sidebar-empty__sections {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cb-sidebar-empty__sections-label {
  margin: 0;
  color: #1f2330;
  font-size: 0.85rem;
  font-weight: 600;
}
.cb-sidebar-empty__buttons {
  display: flex;
  gap: 0.5rem;
}
.cb-sidebar-empty__btn {
  background: #fff;
  border: 1px solid #d8dbe2;
  border-radius: 0.375rem;
  color: #5b6478;
  cursor: pointer;
  padding: 0.5rem;
  line-height: 0;
  transition:
    border-color 0.12s ease,
    color 0.12s ease,
    background-color 0.12s ease;
}
.cb-sidebar-empty__btn:hover,
.cb-sidebar-empty__btn:focus-visible {
  border-color: #4f8df9;
  color: #4f8df9;
  background: rgba(79, 141, 249, 0.06);
  outline: none;
}

/* (The visually-hidden helper lives in forms.css as .cb-form-sr-only —
   used by the in-form save buttons that the header Save delegates to.) */

/* (Add-section UI now lives inside the iframe — see builder.css's
   .cb-add-section-tray.) */

/* ---- Sidebar groups (General + Styling stacked) ----
 *
 * Replaces the old tab pattern: both blocks are always visible and the
 * sidebar content scrolls when they overflow. Each group is introduced
 * by a small uppercase label and separated by a thin divider so the
 * eye can still scan the two clusters at a glance. */

.cb-sidebar__group {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #f0f1f4;
}
.cb-sidebar__group:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.cb-sidebar__group-title {
  margin: 0 0 0.75rem;
  color: #5b6478;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cb-sidebar__group-body > :last-child {
  margin-bottom: 0;
}

/* ---- Block edit form: heading ----
 *
 * Lightweight title above the fields, showing which block is being edited.
 * Icon (block-author SVG) sits in a soft accent-tinted chip. */

.cb-block__heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0.5rem;
}

.cb-block__heading-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  color: #4f8df9;
  background: rgba(79, 141, 249, 0.1);
}

.cb-block__heading-icon svg {
  width: 16px;
  height: 16px;
}

.cb-block__heading-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #1f2330;
  letter-spacing: 0.01em;
}

/* ---- Block edit form: tabbed field groups ----
 *
 * Block fields are bucketed into tabs by their `data-cb-group` attribute
 * (rendered in components/Block.html.twig). A horizontal tablist sits above
 * the panels; only the active panel is shown. All panels stay in the DOM so
 * autosave and validation keep working across hidden tabs. */

.cb-block__tabs {
  display: flex;
  flex-direction: column;
}

/* The tablist stays visible while the (now scrollable) sidebar scrolls a
   tall form, so the user can switch tabs from anywhere. It sticks to the
   top of the scroll container (.cb-shell__sidebar-content); the negative
   top + matching padding swallow the container's 1rem padding so no field
   peeks above it, and the white background hides rows scrolling underneath.
   Reachability itself is handled by .cb-shell__sidebar { min-height: 0 },
   which lets sidebar-content's overflow-y:auto engage on tall content. */
.cb-block__tablist {
  position: sticky;
  top: -1rem;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-bottom: 1rem;
  padding-top: 1rem;
  background: #fff;
  border-bottom: 1px solid #f0f1f4;
}

.cb-block__tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: #5b6478;
  padding: 6px 10px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.cb-block__tab:hover {
  color: #1f2330;
}

.cb-block__tab--active {
  color: #1f2330;
  border-bottom-color: #4f8df9;
}

/* Red dot appended to a tab whose panel holds an invalid field, so a
   validation error on a hidden tab is still discoverable after a save. */
.cb-block__tab--has-error::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 5px;
  vertical-align: middle;
  border-radius: 50%;
  background: #d83a3a;
}

.cb-block__tabpanel[hidden] {
  display: none;
}

/* ---- Styling: responsive box spacing (padding / margin) ---- */

.cb-form-row__header {
  margin-bottom: 0.375rem;
}

.cb-viewport-tabs {
  display: inline-flex;
  gap: 2px;
  background: #eceef2;
  border-radius: 6px;
  padding: 2px;
}

.cb-viewport-tabs__btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: #5b6478;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
}

.cb-viewport-tabs__btn--active {
  background: #fff;
  color: #1f2330;
  box-shadow: 0 1px 2px rgba(20, 22, 30, 0.12);
}

.cb-responsive-box-spacing__viewport[hidden] {
  display: none;
}

/* ---- Styling: 4-side box spacing ---- */

.cb-box-spacing {
  border: 1px solid #e2e5ec;
  border-radius: 6px;
  padding: 0.5rem;
  background: #fafbfd;
}

.cb-box-spacing__sides {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: 0.375rem;
  align-items: end;
}

.cb-box-spacing__side {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cb-box-spacing__label {
  font-size: 9px;
  color: #5b6478;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  order: 2;
  margin: 0;
}

.cb-box-spacing__input {
  text-align: center;
  order: 1;
}

.cb-box-spacing__link {
  appearance: none;
  border: 1px solid #d3d7e0;
  background: #fff;
  color: #5b6478;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  align-self: start;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
}

.cb-box-spacing--linked .cb-box-spacing__link,
.cb-box-spacing__link[aria-pressed="true"] {
  background: #1f2330;
  color: #fff;
  border-color: #1f2330;
}

/* ---- Styling: length input (value + unit) ---- */

.cb-length {
  max-width: 160px;
}

.cb-length__unit {
  max-width: 72px;
  flex: 0 0 auto;
}

/* ---- Styling: alignment icon-radio group ---- */

.cb-align-group {
  display: inline-flex;
  gap: 2px;
  background: #eceef2;
  border-radius: 6px;
  padding: 2px;
}

.cb-align-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  border-radius: 4px;
  color: #5b6478;
  cursor: pointer;
  margin: 0;
  transition:
    background-color 0.08s,
    color 0.08s;
}

.cb-align-btn:hover {
  background: rgba(255, 255, 255, 0.6);
  color: #1f2330;
}

.cb-align-btn:has(.cb-align-btn__input:checked),
.cb-align-btn--active {
  background: #fff;
  color: #1f2330;
  box-shadow: 0 1px 2px rgba(20, 22, 30, 0.12);
}

.cb-align-btn:has(.cb-align-btn__input:focus-visible) {
  outline: 2px solid #6c8cf3;
  outline-offset: 1px;
}

.cb-align-btn__face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}