/**
 * @file
 * Admin/CKEditor styles for Advanced Container.
 */

/* Toolbar icon for the text format configuration page */
.ckeditor5-toolbar-button-advancedContainer {
  background-image: url(../icons/container.svg);
}

/* ============================================
   NESTED EDITABLE
   Scoped to our columns only — a bare .ck-editor__nested-editable
   selector would also restyle table cells and media captions.
   ============================================ */
/* Guide border, deliberately NOT !important: the inline style of a column
   with a real border must win, side by side. A top-only border then paints
   its top and leaves the guide on the other three, so the column stays
   visible as a box while showing exactly what gets published. */
.ck .ck-advanced-column.ck-editor__nested-editable {
  border: 1px solid #bfbfbf;
}

.ck .ck-advanced-column.ck-editor__nested-editable.ck-editor__nested-editable_focused,
.ck .ck-advanced-column.ck-editor__nested-editable:focus {
  background: rgba(158, 207, 250, 0.3);
  outline: 1px solid var(--ck-color-focus-border, #1a8bf1);
  outline-offset: -1px;
}

/* Tables inside columns: same containment as the front end (consistency
   rule 1), so a table with fixed cell widths cannot widen the column here
   either. CKEditor's own content styles already handle the figure margins
   inside the canvas. */
.ck-editor__editable .ck-advanced-column table {
  max-width: 100%;
}

.ck-editor__editable .ck-advanced-column figure.table {
  max-width: 100%;
}

/* ============================================
   CONTAINER WIDGET
   ============================================ */
.ck-editor__editable .ck-advanced-container-widget {
  display: flex;
  flex-wrap: wrap;
  /* Do NOT use gap here - CKEditor UI divs break the spacing */
  border: 2px dashed var(--ck-color-focus-border, #0066cc);
  padding: 10px;
  margin: 1rem 0;
  background-color: rgba(0, 102, 204, 0.05);
  border-radius: var(--ck-border-radius, 4px);
  min-height: 60px;
}

.ck-advanced-container-widget.ck-widget_selected {
  outline: 2px solid var(--ck-color-focus-border, #1a8bf1);
  outline-offset: 2px;
}

/* ============================================
   COLUMN - Gap via margin-left (avoids conflict with CKEditor UI)
   ============================================ */
.ck-editor__editable .ck-advanced-column {
  flex: 1 1 0%;
  min-width: 50px;
  min-height: 50px;
  box-sizing: border-box;
  /* Horizontal gap between columns using margin-left */
  margin-left: var(--adv-container-gap, 0);
  /* Padding creates clickable space around content so users can:
     - Click above/below content to insert a temporary <p>
     - Click on the side areas to select the column and see its properties */
  padding: 8px;
}

/* First column has no margin-left */
.ck-editor__editable .ck-advanced-column:first-child {
  margin-left: 0;
}

/* ============================================
   CONTENT SPACING (Editor)
   Same logic as container.css, and it MUST stay in sync with it: this ran
   unconditionally while the front end honoured data-keep-spacing, so turning
   that option on showed one thing in the editor and another once published.
   ============================================ */
.advanced-container:not([data-keep-spacing]) > .ck-advanced-column > *:first-child {
  margin-top: 0;
}

.advanced-container:not([data-keep-spacing]) > .ck-advanced-column > *:last-child {
  margin-bottom: 0;
}

/* ============================================
   MEDIA CONTAINMENT INSIDE COLUMNS
   - max-width prevents overflow.
   - Reset the default 40px horizontal margins that CKEditor's
     drupalmedia.css applies.  Inside narrow columns those
     margins eat too much space and prevent align-left/right
     from reaching the column edges.  The column already has
     padding: 8px for visual spacing.
   - display, float and alignment margins are left to
     CKEditor/Drupal native behavior (media-alignment.css).
   ============================================ */
.ck-advanced-column .drupal-media,
.ck-advanced-column figure.drupal-media,
.ck-advanced-column .media {
  max-width: 100%;
  box-sizing: border-box;
  /* Reset all default CKEditor margins (drupalmedia.css uses 0 40px 16px).
     The column padding:8px already provides visual spacing.
     Alignment-specific margins (auto) from media-alignment.css
     have higher specificity and will still apply. */
  margin: 0;
}

.ck-advanced-column .drupal-media img,
.ck-advanced-column figure.drupal-media img,
.ck-advanced-column .media img {
  max-width: 100%;
  height: auto;
}

/* ============================================
   MEDIA ALIGNMENT INSIDE FLEX COLUMNS (Editor)
   CKEditor 5 uses .drupal-media-style-align-* classes on
   the widget wrapper.  Drupal's media-alignment.css uses
   margin:auto which has no effect when the flex item stretches
   to full column width.  align-self fixes this.
   ============================================ */
.ck-advanced-column .drupal-media-style-align-center,
.ck-advanced-column .align-center,
.ck-advanced-column [data-align="center"] {
  align-self: center;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
}

.ck-advanced-column .drupal-media-style-align-left,
.ck-advanced-column .align-left,
.ck-advanced-column [data-align="left"] {
  align-self: flex-start;
}

.ck-advanced-column .drupal-media-style-align-right,
.ck-advanced-column .align-right,
.ck-advanced-column [data-align="right"] {
  align-self: flex-end;
}

/* Generic overflow protection */
.ck-editor__editable .ck-advanced-column {
  overflow: hidden;
  /* Arrow cursor on hover over padding area */
  cursor: default;
}

/* Text cursor once the column is focused (user clicked and caret is active).
   Use both CKEditor's class AND :focus-within as fallback, because our
   stopImmediatePropagation() on mousedown may prevent CKEditor from
   adding the _focused class in some cases. */
.ck-editor__editable .ck-advanced-column.ck-editor__nested-editable_focused,
.ck-editor__editable .ck-advanced-column:focus-within {
  cursor: text;
}

/* ============================================
   TOOLBAR
   ============================================ */
.adv-container-toolbar {
  display: flex;
  padding: 6px;
  gap: 2px;
  background: var(--ck-color-base-background, #fff);
  position: relative;
}

/* ============================================
   COLUMN LAYOUTS DROPDOWN
   Proportional thumbnails, not typographic fractions.
   ============================================ */
.adv-container-toolbar div.adv-layout-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  width: 372px;
  padding: 8px;
  background: var(--ck-color-base-background, #fff);
  border: 1px solid var(--ck-color-base-border, hsl(0, 0%, 77%));
  border-radius: var(--ck-border-radius, 4px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.adv-container-toolbar div.adv-lm-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.adv-container-toolbar button.adv-lm-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--ck-color-base-border, hsl(0, 0%, 77%));
  border-radius: 5px;
  background: var(--ck-color-base-background, #fff);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.adv-container-toolbar button.adv-lm-item:hover,
.adv-container-toolbar button.adv-lm-item:focus {
  border-color: var(--ck-color-focus-border, hsl(208, 90%, 62%));
  background: var(--ck-color-button-default-hover-background, hsl(0, 0%, 96%));
  outline: none;
}

.adv-container-toolbar span.adv-lm-mini {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 20px;
}

.adv-container-toolbar span.adv-lm-row {
  display: flex;
  gap: 2px;
  flex: 1;
  min-height: 0;
}

.adv-container-toolbar span.adv-lm-seg {
  flex-basis: 0;
  border-radius: 2px;
  background: hsla(208, 88%, 52%, 0.3);
}

.adv-container-toolbar span.adv-lm-label {
  font-size: 10px;
  text-align: center;
  color: var(--ck-color-label-default, hsl(0, 0%, 46%));
  font-family: var(--ck-font-face, Helvetica, Arial, sans-serif);
}

.adv-container-toolbar div.adv-lm-addrow {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--ck-color-base-border, hsl(0, 0%, 77%));
}

.adv-container-toolbar span.adv-lm-subtitle {
  display: block;
  margin-bottom: 5px;
  font-size: 10px;
  font-weight: 600;
  color: var(--ck-color-label-default, hsl(0, 0%, 46%));
  font-family: var(--ck-font-face, Helvetica, Arial, sans-serif);
}

.adv-container-toolbar span.adv-lm-mini--short {
  height: 12px;
}

.adv-container-toolbar div.adv-lm-actions {
  display: flex;
  gap: 14px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--ck-color-base-border, hsl(0, 0%, 77%));
}

.adv-container-toolbar button.adv-lm-action {
  padding: 0;
  border: none;
  background: none;
  font-size: 11px;
  font-family: var(--ck-font-face, Helvetica, Arial, sans-serif);
  color: var(--ck-color-text, hsl(0, 0%, 20%));
  cursor: pointer;
}

.adv-container-toolbar button.adv-lm-action:hover {
  color: var(--ck-color-focus-border, hsl(208, 90%, 62%));
  text-decoration: underline;
}

.adv-container-toolbar .ck-button.ck-disabled {
  opacity: 0.4;
}

/* ============================================
   PROPERTIES FORM
   ============================================ */
.adv-container-props {
  background: var(--ck-color-base-background, #fff);
  min-width: 360px;
  max-width: 400px;
  font-family: var(--ck-font-face, Helvetica, Arial, sans-serif);
  font-size: var(--ck-font-size-base, 13px);
  color: var(--ck-color-text, hsl(0, 0%, 20%));
  overflow: hidden;
}

/* ============================================
   TABS (Layout | Style | Responsive)
   ============================================ */
form.adv-container-props .adv-tabs {
  display: flex;
  gap: 2px;
  padding: 4px 16px 0;
  border-bottom: 1px solid var(--ck-color-base-border, hsl(0, 0%, 77%));
  background: var(--ck-color-base-background, #fff);
}

form.adv-container-props .adv-tab {
  padding: 7px 14px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--ck-color-label-default, hsl(0, 0%, 46%));
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

form.adv-container-props .adv-tab:hover {
  color: var(--ck-color-text, hsl(0, 0%, 20%));
}

/* Only show the focus ring for keyboard users: on click it left a boxed
   outline around the whole tab that read as a stray wide container. */
form.adv-container-props .adv-tab:focus {
  outline: none;
  box-shadow: none;
}

form.adv-container-props .adv-tab:focus-visible {
  box-shadow: inset 0 0 0 2px hsla(208, 79%, 51%, 0.35);
  border-radius: 2px 2px 0 0;
}

form.adv-container-props .adv-tab-active,
form.adv-container-props .adv-tab-active:hover {
  /* Solid readable blue: --ck-color-button-on-background is a pale
     BACKGROUND tone in Drupal's CKEditor theme and made the active tab
     label nearly invisible as a text color. */
  color: hsl(208, 88%, 43%);
  border-bottom-color: hsl(208, 88%, 48%);
}

form.adv-container-props .adv-tabpanel {
  display: none;
}

form.adv-container-props .adv-tabpanel-active {
  display: block;
}

/* ============================================
   HEADER
   ============================================ */
.adv-props-header {
  padding: var(--ck-spacing-large, 16px);
  border-bottom: 1px solid var(--ck-color-base-border, hsl(0, 0%, 77%));
}

.adv-props-header h2 {
  margin: 0;
  font-size: var(--ck-font-size-base, 13px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ck-color-text, hsl(0, 0%, 20%));
}

/* ============================================
   BODY
   ============================================ */
.adv-props-body {
  padding: var(--ck-spacing-large, 16px);
  /* The form can be taller than the viewport (per-side borders, effects...).
     Only the BODY scrolls, so the header and the Save/Cancel footer stay
     reachable on any screen height. overflow-x stays clipped so nothing
     bleeds sideways out of the balloon. */
  /* border-box so the 16px padding is INSIDE max-height and the arithmetic
     is predictable. Measured: form height = body + ~174px (header, tab bar,
     footer, borders), so 250px leaves ~76px of clearance for the balloon
     arrow and positioning on any screen height. */
  box-sizing: border-box;
  max-height: calc(100vh - 250px);
  min-height: 120px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

/* Slim scrollbar so it doesn't eat the narrow balloon width. */
form.adv-container-props .adv-props-body {
  scrollbar-width: thin;
}

form.adv-container-props .adv-props-body::-webkit-scrollbar {
  width: 10px;
}

form.adv-container-props .adv-props-body::-webkit-scrollbar-thumb {
  background: hsl(0, 0%, 78%);
  border-radius: 5px;
  border: 3px solid var(--ck-color-base-background, #fff);
}

form.adv-container-props .adv-props-body::-webkit-scrollbar-thumb:hover {
  background: hsl(0, 0%, 65%);
}

/* ============================================
   FORM ROW
   ============================================ */
.adv-props-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-bottom: var(--ck-spacing-large, 16px);
  width: 100%;
}

.adv-props-row:last-child {
  margin-bottom: 0;
}

.adv-props-row > label:first-child {
  flex-basis: 100%;
  font-size: var(--ck-font-size-small, 11px);
  font-weight: 700;
  color: var(--ck-color-text, hsl(0, 0%, 20%));
  margin-bottom: var(--ck-spacing-standard, 8px);
}

/* ============================================
   INLINE ROW
   ============================================ */
.adv-inline-row {
  display: flex;
  gap: var(--ck-spacing-large, 16px);
  margin-bottom: var(--ck-spacing-large, 16px);
  width: 100%;
}

.adv-inline-row > div {
  flex: 1;
  min-width: 0;
}

/* ============================================
   LABELED FIELD
   ============================================ */
.adv-inline-row label {
  display: block;
  font-size: var(--ck-font-size-small, 11px);
  font-weight: 400;
  color: var(--ck-color-label-default, hsl(0, 0%, 46%));
  margin-bottom: var(--ck-spacing-small, 4px);
}

/* ============================================
   INPUT
   ============================================ */
.adv-container-props input[type="text"],
form.adv-container-props .adv-input {
  width: 100%;
  height: var(--ck-ui-component-min-height, 32px);
  padding: 0 var(--ck-spacing-standard, 8px);
  border: 1px solid var(--ck-color-input-border, hsl(0, 0%, 78%));
  border-radius: var(--ck-border-radius, 2px);
  font-size: var(--ck-font-size-base, 13px);
  font-family: inherit;
  background: var(--ck-color-input-background, #fff);
  color: var(--ck-color-input-text, hsl(0, 0%, 20%));
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.adv-container-props input[type="text"]:hover {
  border-color: hsl(0, 0%, 68%);
}

.adv-container-props input[type="text"]:focus {
  border-color: var(--ck-color-focus-border, hsl(208, 90%, 62%));
  outline: none;
  box-shadow: 0 0 0 2px hsla(208, 79%, 51%, 0.2);
}

.adv-container-props input[type="text"]::placeholder {
  color: var(--ck-color-input-placeholder, hsl(0, 0%, 69%));
}

/* ============================================
   COLOR INPUT (Background style - label above, full-width input)
   ============================================ */
.adv-color-input {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.adv-color-input input[type="text"] {
  flex: 1;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
  /*
  min-width: 0 !important;
  */
}

.adv-color-input input[type="text"]:focus {
  position: relative;
  z-index: 1;
  border-right: 1px solid var(--ck-color-focus-border, hsl(208, 90%, 62%));
}

.adv-color-input input[type="color"] {
  width: 44px;
  height: var(--ck-ui-component-min-height, 32px);
  padding: 4px;
  border: 1px solid var(--ck-color-input-border, hsl(0, 0%, 78%));
  border-left: none;
  border-radius: 0 var(--ck-border-radius, 2px) var(--ck-border-radius, 2px) 0;
  cursor: pointer;
  background: var(--ck-color-input-background, #fff);
  box-sizing: border-box;
  flex-shrink: 0;
}

.adv-color-input input[type="color"]:hover {
  border-color: hsl(0, 0%, 68%);
}

.adv-color-input input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 2px;
}

.adv-color-input input[type="color"]::-webkit-color-swatch {
  border: 1px solid hsl(0, 0%, 82%);
  border-radius: 1px;
}

.adv-color-input input[type="color"]::-moz-color-swatch {
  border: 1px solid hsl(0, 0%, 82%);
  border-radius: 1px;
}

/* ============================================
   BUTTON GROUP / TOOLBAR
   ============================================ */
.adv-button-group {
  display: inline-flex;
  border: 1px solid var(--ck-color-base-border, hsl(0, 0%, 77%));
  border-radius: var(--ck-border-radius, 2px);
  overflow: hidden;
  background: var(--ck-color-base-background, #fff);
}

.adv-button-group button {
  min-width: 36px;
  height: 32px;
  padding: 0 8px;
  border: none;
  border-right: 1px solid var(--ck-color-base-border, hsl(0, 0%, 77%));
  background: transparent;
  color: var(--ck-color-text, hsl(0, 0%, 20%));
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.adv-button-group button:last-child {
  border-right: none;
}

.adv-button-group button:hover {
  background: var(--ck-color-button-default-hover-background, hsl(0, 0%, 94%));
}

.adv-button-group button.active,
.adv-button-group button.ck-on {
  background: var(--ck-color-button-on-background, hsl(208, 88%, 52%));
  color: var(--ck-color-button-on-color, #fff);
}

.adv-button-group button:focus {
  outline: none;
  position: relative;
  z-index: 1;
  box-shadow: inset 0 0 0 2px hsla(208, 79%, 51%, 0.3);
}

.adv-button-group button svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* ============================================
   CHECKBOX
   ============================================ */
.adv-checkbox-row {
  margin-bottom: var(--ck-spacing-standard, 8px) !important;
}

.adv-checkbox-label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  gap: var(--ck-spacing-small, 4px);
  font-size: var(--ck-font-size-base, 13px);
  color: var(--ck-color-text, hsl(0, 0%, 20%));
}

/* The checkbox itself only carries state now: nativizeCheckboxes() paints
   CKEditor's switch around it, so hide the native box without removing it
   from the accessibility tree (the label still toggles it on click). */
.adv-checkbox-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* Match SwitchButtonView: label left, toggle right, full row width. */
form.adv-container-props .adv-checkbox-label.ck-switchbutton {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

form.adv-container-props .adv-checkbox-label.ck-switchbutton .ck-button__label {
  flex: 1 1 auto;
  text-align: left;
}

/* Keyboard focus lands on the hidden input, so mirror the ring on the label. */
form.adv-container-props .adv-checkbox-input:focus-visible + .ck-button__label,
form.adv-container-props .adv-checkbox-label:focus-within {
  outline: none;
  box-shadow: var(--ck-focus-outer-shadow, 0 0 0 3px hsla(208, 79%, 51%, 0.3));
  border-radius: var(--ck-border-radius, 2px);
}

/* Hidden class */
.adv-hidden {
  display: none !important;
}

/* ============================================
   RESPONSIVE SECTION
   ============================================ */
.adv-responsive-section {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

/* Claro hides CKEditor button labels (`.ck.ck-button .ck-button__label`)
   because toolbar buttons are icon-only. Our in-form buttons — the device
   switch and the nativized switches — are text buttons, so bring the label
   back for this form only. */
form.adv-container-props .ck-button .ck-button__label {
  display: inline-block;
}

/* The section head is a flex row; without this the short "Reset" link breaks
   mid-word ("Re-set") when the title takes the rest of the line. */
form.adv-container-props .adv-section-reset {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Corner radii laid out as the corners actually sit, so the field you click
   is the corner you mean. Two columns, top row then bottom row. */
form.adv-container-props .adv-per-corner-section {
  width: 100%;
  margin-inline-start: 0;
}

form.adv-container-props .adv-corner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  width: 100%;
  padding-top: 8px;
  box-sizing: border-box;
}

form.adv-container-props .adv-corner-grid > .ck-labeled-field-view {
  min-width: 0;
  margin: 0;
}

/* Device switch: a segmented control that swaps which override panel is on
   screen, so the twelve per-device fields never compete for room at once.
   Colours come from CKEditor's own .ck-button/.ck-on rules. */
.adv-device-switch {
  display: flex;
  width: 100%;
  margin-top: var(--ck-spacing-standard, 8px);
  padding: 0;
  border: 1px solid var(--ck-color-base-border, hsl(0, 0%, 77%));
  border-radius: var(--ck-border-radius, 2px);
  overflow: hidden;
}

form.adv-container-props .adv-device-switch .ck-button {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  border: 0;
  border-radius: 0;
  font-size: 12px;
  font-weight: 600;
}

form.adv-container-props .adv-device-switch .ck-button + .ck-button {
  border-left: 1px solid var(--ck-color-base-border, hsl(0, 0%, 77%));
}

/* The section is one of CKEditor's form rows and ships as content-box, so its
   own padding pushed it past the scroll body and clipped the last field.
   Both forms tag their section with .adv-responsive-section, so every rule
   below reaches the column panel too. */
form.adv-container-props .adv-responsive-section {
  box-sizing: border-box;
  max-width: 100%;
}

/* CKEditor indents every sibling in a form row with the LOGICAL property
   `.ck.ck-form__row > :not(.ck-label) ~ * { margin-inline-start }`, which a
   plain `margin-left: 0` does not override. Reset the logical property, and
   with a selector specific enough to beat that one. */
form.adv-container-props .adv-responsive-section > .adv-device-switch,
form.adv-container-props .adv-responsive-section > .adv-device-panel {
  margin-inline-start: 0;
  margin-inline-end: 0;
}

/* The responsive section is a wrapping flex row, so the switch and the panels
   have to claim a full line each; otherwise they sit indented and their inner
   grid overflows, which is what dropped the row from four columns to three. */
form.adv-container-props .adv-responsive-section .adv-device-switch,
form.adv-container-props .adv-device-panel {
  flex: 1 0 100%;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}

/* The row already sits inside the section's padding; adding its own would
   push it past the panel and cost a column. */
form.adv-container-props .adv-device-panel .adv-inline-row {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

/* CKEditor lays the input wrapper out as a flex row, so the validation
   message landed BESIDE the input and got squeezed to a couple of letters.
   Let the wrapper wrap and give the message the full cell on its own line. */
form.adv-container-props .ck-labeled-field-view__input-wrapper {
  flex-wrap: wrap;
}

form.adv-container-props .adv-field-error {
  flex: 1 0 100%;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  font-size: 10px;
  line-height: 1.3;
}

/* ============================================
   FOOTER / ACTION ROW
   ============================================ */
.adv-props-footer {
  /* Copies the native Table / Resize-media action row: two equal buttons that
     fill the width with a hairline divider between them. Tighter side padding
     (11.7px) so they reach the edges; no gap because the divider splits them. */
  padding: 7.8px 11.7px var(--ck-spacing-large, 16px);
  border-top: 1px solid var(--ck-color-base-border, hsl(0, 0%, 77%));
  display: flex;
  justify-content: center;
  gap: 0;
}

.adv-props-footer .ck-button {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 2.34px 7.8px;
  border: none;
  background: transparent;
  font-size: var(--ck-font-size-base, 13px);
  font-family: inherit;
  font-weight: 400;
  cursor: pointer;
  transition: background 0.12s;
  line-height: 1;
}

.adv-props-footer .ck-button:hover {
  background: var(--ck-color-button-default-hover-background, hsl(0, 0%, 92%));
}

.adv-props-footer .ck-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--ck-color-focus-border, hsl(208, 79%, 51%));
  border-radius: var(--ck-border-radius, 2px);
}

.adv-props-footer .ck-button .ck-icon {
  width: 20px;
  height: 20px;
}

.adv-props-footer .ck-button .ck-button__label {
  font-size: var(--ck-font-size-base, 13px);
}

/* Native look: dark labels, only the icons carry colour (green check, red x). */
.adv-props-footer .ck-button-save,
.adv-props-footer .ck-button-cancel {
  color: var(--ck-color-text, hsl(0, 0%, 20%));
}

.adv-props-footer .ck-button-save {
  /* The straight line down the middle of the footer. */
  border-right: 1px solid var(--ck-color-base-border, hsl(0, 0%, 77%));
}

.adv-props-footer .ck-button-save .ck-icon {
  color: var(--ck-color-button-save, hsl(123, 46%, 39%));
}

.adv-props-footer .ck-button-cancel .ck-icon {
  color: var(--ck-color-button-cancel, hsl(0, 75%, 45%));
}

/* ============================================
   BORDER SECTION - Grid 2x2 (overflow fixed)
   ============================================ */
.adv-border-section {
  border-top: 1px solid var(--ck-color-base-border, hsl(0, 0%, 77%));
  padding-top: var(--ck-spacing-large, 16px);
  margin-top: var(--ck-spacing-standard, 8px);
}

.adv-border-field {
  min-width: 0;
  overflow: hidden;
}

.adv-border-field select,
.adv-border-field input[type="text"] {
  width: 100%;
  height: var(--ck-ui-component-min-height, 32px);
  padding: 0 var(--ck-spacing-small, 4px);
  border: 1px solid var(--ck-color-input-border, hsl(0, 0%, 78%));
  border-radius: var(--ck-border-radius, 2px);
  font-size: var(--ck-font-size-base, 13px);
  font-family: inherit;
  background: var(--ck-color-input-background, #fff);
  color: var(--ck-color-input-text, hsl(0, 0%, 20%));
  box-sizing: border-box;
}

.adv-border-field select:focus,
.adv-border-field input[type="text"]:focus {
  border-color: var(--ck-color-focus-border, hsl(208, 90%, 62%));
  outline: none;
  box-shadow: 0 0 0 2px hsla(208, 79%, 51%, 0.2);
}

.adv-border-field span {
  display: block;
  font-size: 10px;
  text-align: center;
  color: var(--ck-color-label-default, hsl(0, 0%, 46%));
  margin-top: var(--ck-spacing-small, 4px);
}

/* ============================================
   FIX: Select border style width
   ============================================ */
form.adv-container-props .adv-border-field select.ck-input {
  min-width: 0 !important;
  width: 100%;
}

/* ============================================
   RESPONSIVE PREVIEW
   Shrinks .ck-editor__main to simulate tablet/mobile viewport.
   The editable stays centered so the editor chrome doesn't jump.
   ============================================ */
.ck-editor__main.adv-preview--tablet,
.ck-editor__main.adv-preview--mobile {
  transition: max-width 0.25s ease, margin 0.25s ease;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  /* Subtle outline so the simulated frame is visible */
  outline: 2px dashed var(--ck-color-focus-border, #1a8bf1);
  outline-offset: -2px;
  border-radius: var(--ck-border-radius, 4px);
}

.ck-editor__main.adv-preview--tablet {
  max-width: 768px;
}

.ck-editor__main.adv-preview--mobile {
  max-width: 375px;
}

/* ============================================
   NESTING INDICATOR
   Level badge on nested containers; warning state
   when the configured max depth is reached.
   ============================================ */
.ck-editor__editable .ck-advanced-container-widget {
  position: relative;
}

.ck-editor__editable .ck-advanced-container-widget[data-nesting-level]::before {
  content: attr(data-nesting-label);
  position: absolute;
  top: -1px;
  right: -1px;
  z-index: 1;
  padding: 1px 6px;
  font-size: 10px;
  font-family: var(--ck-font-face, Helvetica, Arial, sans-serif);
  line-height: 1.4;
  color: #fff;
  background: var(--ck-color-focus-border, #0066cc);
  border-radius: 0 var(--ck-border-radius, 4px) 0 var(--ck-border-radius, 4px);
  opacity: 0.75;
  pointer-events: none;
}

.ck-editor__editable .ck-advanced-container-widget.ck-adv-nesting-max::before {
  background: #b45309;
  opacity: 0.9;
}

.ck-editor__editable .ck-advanced-container-widget.ck-adv-nesting-max {
  border-color: #b45309;
}

/* ============================================
   INLINE VALIDATION
   ============================================ */
form.adv-container-props .adv-input-error {
  border-color: hsl(0, 75%, 55%) !important;
}

form.adv-container-props .adv-field-error {
  flex-basis: 100%;
  width: 100%;
  margin-top: 2px;
  font-size: 10px;
  line-height: 1.3;
  color: hsl(0, 75%, 45%);
}

/* ============================================
   SECTION HEAD (label + reset)
   ============================================ */
form.adv-container-props .adv-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  margin-bottom: var(--ck-spacing-standard, 8px);
}

form.adv-container-props .adv-section-head label {
  font-size: var(--ck-font-size-small, 11px);
  font-weight: 700;
  color: var(--ck-color-text, hsl(0, 0%, 20%));
  margin-bottom: 0;
}

form.adv-container-props .adv-section-reset {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ck-color-label-default, hsl(0, 0%, 46%));
  font-size: 10px;
  font-family: inherit;
  text-decoration: underline;
  cursor: pointer;
}

form.adv-container-props .adv-section-reset:hover {
  color: var(--ck-color-button-cancel, hsl(0, 75%, 45%));
}

/* ============================================
   COLOR CLEAR BUTTON
   ============================================ */
form.adv-container-props .adv-color-clear {
  flex-shrink: 0;
  width: 22px;
  height: var(--ck-ui-component-min-height, 32px);
  padding: 0;
  border: 1px solid var(--ck-color-input-border, hsl(0, 0%, 78%));
  border-left: none;
  border-radius: 0 var(--ck-border-radius, 2px) var(--ck-border-radius, 2px) 0;
  background: var(--ck-color-input-background, #fff);
  color: var(--ck-color-label-default, hsl(0, 0%, 46%));
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

form.adv-container-props .adv-color-clear:hover {
  color: var(--ck-color-button-cancel, hsl(0, 75%, 45%));
  background: var(--ck-color-button-default-hover-background, hsl(0, 0%, 94%));
}

/* The picker loses its right rounding when a clear button follows it. */
.adv-color-input input[type="color"] {
  border-radius: 0;
}

form.adv-container-props .adv-swatch-slot {
  width: 100%;
  margin-top: 4px;
}

form.adv-container-props .adv-swatch-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--ck-color-base-border, hsl(0, 0%, 77%));
  border-radius: var(--ck-border-radius, 2px);
  background: var(--ck-color-base-background, #fff);
  box-sizing: border-box;
}

form.adv-container-props .adv-swatch {
  width: 100%;
  height: 20px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 2px;
  cursor: pointer;
}

form.adv-container-props .adv-swatch:hover,
form.adv-container-props .adv-swatch:focus {
  outline: 2px solid var(--ck-color-focus-border, hsl(208, 90%, 62%));
  outline-offset: 1px;
}

form.adv-container-props .adv-doc-colors {
  margin-top: 4px;
}

form.adv-container-props .adv-doc-colors-label {
  font-size: 10px;
  color: var(--ck-color-label-default, hsl(0, 0%, 46%));
  margin-bottom: 2px;
}

/* ============================================
   SHORTCUT HINT (footer)
   ============================================ */
form.adv-container-props .adv-shortcut-hint {
  /* Own line under the buttons: inline it competed with Save/Cancel and got
     cramped in the ~400px balloon. The shortcuts are also on each button's
     tooltip, so this is a reminder, not the only affordance. */
  flex: 0 0 100%;
  margin-top: 6px;
  font-size: 10px;
  color: var(--ck-color-label-default, hsl(0, 0%, 46%));
  white-space: nowrap;
}

form.adv-container-props .adv-props-footer {
  flex-wrap: wrap;
  align-items: center;
}

/* CKEditor's own `.ck.ck-button` rules tie on specificity and win on source
   order, forcing the label left and the border transparent. Prefix with the
   form to outrank them so the buttons center and the divider is visible. */
form.adv-container-props .adv-props-footer .ck-button {
  justify-content: center;
}
form.adv-container-props .adv-props-footer .ck-button-save {
  border-right: 1px solid var(--ck-color-base-border, hsl(0, 0%, 77%));
}
form.adv-container-props .adv-props-footer .ck-button__label {
  color: var(--ck-color-text, hsl(0, 0%, 20%));
}
form.adv-container-props .adv-props-footer .ck-button-save .ck-icon {
  color: var(--ck-color-button-save, hsl(123, 46%, 39%));
}
form.adv-container-props .adv-props-footer .ck-button-cancel .ck-icon {
  color: var(--ck-color-button-cancel, hsl(0, 75%, 45%));
}

/* Toolbar may now hold more buttons — let it wrap on narrow screens. */
.adv-container-toolbar {
  flex-wrap: wrap;
}

/* ============================================
   NARROW VIEWPORT ADJUSTMENTS
   Prevent the properties panel from overflowing
   on mobile admin screens or very narrow balloons.
   ============================================ */
@media (max-width: 480px) {
  .adv-container-props {
    min-width: 0;
    max-width: 100%;
    width: auto;
  }

  .adv-inline-row {
    flex-direction: column;
  }

}
/* Inheritance hint under the device-override fields. */
/* CKEditor's .ck-reset_all sets `white-space: nowrap` on every descendant of
   the balloon, which kept this sentence on one line and clipped its tail at
   the panel edge. It is the only wrapping text in the form, so it opts out. */
form.adv-container-props .adv-resp-hint {
  flex-basis: 100%;
  width: 100%;
  margin-top: 5px;
  font-size: 10px;
  line-height: 1.4;
  white-space: normal;
  color: var(--ck-color-label-default, hsl(0, 0%, 46%));
}

/* ============================================
   WORD-STYLE BORDER SIDES MENU
   ============================================ */

form.adv-container-props .adv-border-sides {
  position: relative;
  margin: 6px 0 8px;
  width: 100%;
}

form.adv-container-props .adv-bs-toggle {
  max-width: 220px;
}

form.adv-container-props .adv-bs-toggle {
  width: 100%;
  text-align: left;
  padding: 5px 24px 5px 30px;
  font-size: 12px;
  border: 1px solid var(--ck-color-input-border, #c4c4c4);
  border-radius: 4px;
  background: var(--ck-color-input-background, #fff);
  color: inherit;
  cursor: pointer;
  position: relative;
}

form.adv-container-props .adv-bs-toggle::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  opacity: 0.7;
  box-sizing: border-box;
}

form.adv-container-props .adv-bs-toggle::after {
  content: '\25BE';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.6;
}

form.adv-container-props .adv-bs-slot {
  position: relative;
}

form.adv-container-props .adv-bs-menu {
  position: absolute;
  z-index: 30;
  top: 2px;
  left: 0;
  min-width: 240px;
  background: var(--ck-color-base-background, #fff);
  border: 1px solid var(--ck-color-base-border, #c4c4c4);
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  padding: 4px;
  /* Two-column grid keeps the menu short enough to fit inside the
     balloon (.adv-props-body clips overflowing children). */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
}

form.adv-container-props .adv-bs-menu.adv-hidden {
  display: none;
}

form.adv-container-props .adv-bs-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 5px 8px;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 12px;
  text-align: left;
  border-radius: 3px;
  color: inherit;
}

form.adv-container-props .adv-bs-item:hover {
  background: var(--ck-color-button-default-hover-background, #f0f0f0);
}

form.adv-container-props .adv-bs-item.adv-bs-on {
  background: var(--ck-color-button-on-background, #eef5ff);
  font-weight: 600;
}

form.adv-container-props .adv-bs-mini {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  display: inline-block;
}

form.adv-container-props .adv-bs-item[data-bs-key='inside'] {
  grid-column: 1 / -1;
}

form.adv-container-props .adv-bs-mini-bar {
  position: absolute;
  left: 50%;
  top: 1px;
  bottom: 1px;
  width: 2px;
  margin-left: -1px;
  background: currentColor;
}

/* Inside-border (divider) preview between columns in the editor. The
   editable affordance owns the real border, so a box-shadow driven by the
   inherited --adv-divider-shadow variable stands in for it. */
.ck-editor__editable .ck-advanced-container-widget .ck-advanced-column + .ck-advanced-column {
  box-shadow: var(--adv-divider-shadow, none);
}

/* ============================================
   QUICK STYLES GALLERY + SHADOW PRESETS
   ============================================ */

form.adv-container-props .adv-qs-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}

form.adv-container-props .adv-qs-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 5px 7px;
  border: 1px solid var(--ck-color-input-border, #c4c4c4);
  border-radius: 4px;
  background: var(--ck-color-input-background, #fff);
  cursor: pointer;
  font-size: 10.5px;
  line-height: 1.1;
  color: inherit;
}

form.adv-container-props .adv-qs-chip:hover {
  background: var(--ck-color-button-default-hover-background, #f0f0f0);
}

form.adv-container-props .adv-qs-box {
  width: 44px;
  height: 22px;
  border-radius: 3px;
  box-sizing: border-box;
  background: #fff;
}

form.adv-container-props .adv-qs-box-none {
  background: repeating-linear-gradient(45deg, #eee 0 4px, #fff 4px 8px);
  border: 1px dashed #bbbbbb;
}

form.adv-container-props .adv-shadow-group {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

form.adv-container-props .adv-shadow-btn {
  font-size: 11px;
  padding: 4px 10px;
  border: 1px solid var(--ck-color-input-border, #c4c4c4);
  border-radius: 4px;
  background: var(--ck-color-input-background, #fff);
  cursor: pointer;
  color: inherit;
}

form.adv-container-props .adv-shadow-btn:hover {
  background: var(--ck-color-button-default-hover-background, #f0f0f0);
}

form.adv-container-props .adv-shadow-btn.ck-on {
  background: var(--ck-color-button-on-background, #eef5ff);
  border-color: #1976d2;
  font-weight: 600;
}

/* ============================================
   PER-SIDE BORDER OVERRIDES
   ============================================ */

form.adv-container-props .adv-ps-toggle-row {
  margin-top: var(--ck-spacing-standard, 8px);
  margin-bottom: 4px;
  width: 100%;
}

form.adv-container-props .adv-per-side-section {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--ck-color-base-border, hsl(0, 0%, 85%));
  border-radius: 4px;
  background: hsl(0, 0%, 98%);
  box-sizing: border-box;
}

form.adv-container-props .adv-ps-row {
  display: grid;
  /* minmax(0, …) lets the cells shrink below the inputs' intrinsic width,
     otherwise the color pickers overflow and get clipped at the edge. */
  grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}

form.adv-container-props .adv-ps-row:last-of-type {
  margin-bottom: 0;
}

form.adv-container-props .adv-ps-head {
  margin-bottom: 2px;
}

form.adv-container-props .adv-ps-head span {
  font-size: 10px;
  color: var(--ck-color-label-default, hsl(0, 0%, 46%));
}

form.adv-container-props .adv-ps-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ck-color-text, hsl(0, 0%, 25%));
}

form.adv-container-props .adv-ps-row input[type="text"] {
  width: 100%;
  min-width: 0;
  height: 28px;
  box-sizing: border-box;
}

form.adv-container-props .adv-ps-color {
  display: flex;
  min-width: 0;
  width: 100%;
}

form.adv-container-props .adv-ps-color input[type="text"] {
  flex: 1 1 0;
  /* !important because the admin theme forces min-width: 100% on .ck-input,
     which pushes the color picker past the form edge (same battle as the
     border color field above). */
  min-width: 0 !important;
  width: auto;
}

form.adv-container-props .adv-ps-color input[type="color"] {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 0 var(--ck-border-radius, 2px) var(--ck-border-radius, 2px) 0;
}

form.adv-container-props .adv-ps-hint {
  margin-top: 6px;
  font-size: 10px;
  color: var(--ck-color-label-default, hsl(0, 0%, 46%));
}

/* Color input groups stretch to the row width instead of shrinking. */
form.adv-container-props .adv-props-row > .adv-color-input {
  flex: 1 1 100%;
}

form.adv-container-props .adv-color-input input[type="text"] {
  flex: 1 1 0;
  min-width: 0 !important;
  width: auto;
}

/* ============================================
   STYLE SUB-TABS (level 2 inside the Style tab)
   Horizontal segmented control — vertical would eat the balloon width the
   color/border controls need. Styled as pills so it reads as subordinate to
   the level-1 tabs, not a second identical tab row.
   ============================================ */

form.adv-container-props .adv-subtabs {
  /* Second-level segmented control, SAME language as the device switch
     (multi-AI consensus): a hairline-bordered track, no grey fill, dividers
     between segments. Sub-tabs and the device switch do the same job, so they
     look the same; only the top-level tabs keep the underline style. */
  display: flex;
  flex-wrap: nowrap;
  margin: 4px 0 12px;
  border: 1px solid var(--ck-color-base-border, hsl(0, 0%, 77%));
  border-radius: var(--ck-border-radius, 2px);
  overflow: hidden;
}

form.adv-container-props .adv-subtabs::-webkit-scrollbar {
  display: none;
}

form.adv-container-props .adv-subtab {
  flex: 1 1 0;
  min-width: 0;
  padding: 6px 8px;
  border: none;
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ck-color-label-default, hsl(0, 0%, 46%));
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

form.adv-container-props .adv-subtab + .adv-subtab {
  border-left: 1px solid var(--ck-color-base-border, hsl(0, 0%, 77%));
}

form.adv-container-props .adv-subtab:hover {
  color: var(--ck-color-text, hsl(0, 0%, 20%));
}

form.adv-container-props .adv-subtab:focus {
  outline: none;
  box-shadow: none;
}

form.adv-container-props .adv-subtab:focus-visible {
  box-shadow: inset 0 0 0 2px hsla(208, 79%, 51%, 0.35);
}

form.adv-container-props .adv-subtab-active,
form.adv-container-props .adv-subtab-active:hover {
  /* Pale-blue active fill like CKEditor's .ck-on, matching the device switch.
     Solid blue text (the on-background token is only a pale fill). */
  background: var(--ck-color-button-on-background, hsl(208, 100%, 96%));
  color: hsl(208, 88%, 43%);
}

form.adv-container-props .adv-subtabpanel {
  display: none;
}

form.adv-container-props .adv-subtabpanel-active {
  display: block;
}

/* Quick styles is now its own sub-tab; its inner section head would repeat
   the sub-tab label, so hide it there. */
form.adv-container-props .adv-subtabpanel[data-subpanel="quickstyles"] .adv-section-head {
  display: none;
}

/* ============================================
   BORDER: Style/Width/Radius as a 3-col row; Color moved to its own
   full-width row (in the 2x2 grid the color field was ~136px and the
   text input + picker + swatches + clear got cramped).
   ============================================ */
form.adv-container-props .adv-border-triple {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ck-spacing-standard, 8px);
  margin-bottom: var(--ck-spacing-standard, 8px);
}

form.adv-container-props .adv-border-color-row {
  /* The border section is a flex-wrap row; force this onto its own full
     line so the color input isn't content-sized (~177px). */
  flex: 0 0 100%;
  width: 100%;
  margin-bottom: 4px;
}

form.adv-container-props .adv-border-color-row > label {
  display: block;
  width: 100%;
  font-size: var(--ck-font-size-small, 11px);
  color: var(--ck-color-label-default, hsl(0, 0%, 46%));
  margin-bottom: 4px;
}

form.adv-container-props .adv-border-color-row .adv-color-input {
  display: flex;
  width: 100%;
}

/* ============================================
   COLOR CONTROL — pattern B (CKEditor ColorInputView)
   Row = [hex text input][swatch trigger]. The system picker and
   "Remove color" moved INSIDE the panel, so the row no longer crams a
   loose colour square + grid toggle + clear button together.
   ============================================ */

form.adv-container-props .adv-color-trigger {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  height: var(--ck-ui-component-min-height, 32px);
  padding: 0 6px;
  border: 1px solid var(--ck-color-input-border, hsl(0, 0%, 78%));
  border-left: none;
  border-radius: 0 var(--ck-border-radius, 2px) var(--ck-border-radius, 2px) 0;
  background: var(--ck-color-input-background, #fff);
  cursor: pointer;
}

form.adv-container-props .adv-color-trigger:hover {
  background: var(--ck-color-button-default-hover-background, hsl(0, 0%, 94%));
}

form.adv-container-props .adv-color-trigger[aria-expanded="true"] {
  background: var(--ck-color-button-default-hover-background, hsl(0, 0%, 94%));
}

form.adv-container-props .adv-color-preview {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  border: 1px solid hsl(0, 0%, 78%);
  box-sizing: border-box;
  display: block;
}

/* No colour set: diagonal hatch instead of a misleading solid square. */
form.adv-container-props .adv-color-preview-empty {
  background-image: repeating-linear-gradient(45deg, hsl(0, 0%, 88%) 0 3px, #fff 3px 6px);
}

form.adv-container-props .adv-color-caret {
  font-size: 9px;
  line-height: 1;
  color: var(--ck-color-label-default, hsl(0, 0%, 46%));
}

form.adv-container-props .adv-color-panel-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--ck-color-base-border, hsl(0, 0%, 85%));
}

form.adv-container-props .adv-native-wrap {
  flex: 0 0 auto;
  width: 30px;
  height: 26px;
  border: 1px solid var(--ck-color-input-border, hsl(0, 0%, 78%));
  border-radius: var(--ck-border-radius, 2px);
  overflow: hidden;
  cursor: pointer;
  display: flex;
}

form.adv-container-props .adv-native-wrap input[type="color"] {
  width: 150%;
  height: 150%;
  margin: -4px;
  padding: 0;
  border: none;
  cursor: pointer;
}

/* The clear button is a labelled action inside the panel now, not a 22px
   square glued to the input. */
form.adv-container-props .adv-color-panel-foot .adv-color-clear {
  flex: 1 1 auto;
  width: auto;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--ck-color-input-border, hsl(0, 0%, 78%));
  border-radius: var(--ck-border-radius, 2px);
  background: var(--ck-color-input-background, #fff);
  color: var(--ck-color-label-default, hsl(0, 0%, 40%));
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
}

form.adv-container-props .adv-color-panel-foot .adv-color-clear:hover {
  color: var(--ck-color-button-cancel, hsl(0, 75%, 45%));
  background: var(--ck-color-button-default-hover-background, hsl(0, 0%, 94%));
}


/* ============================================
   COLOR PANEL — compact
   Kept IN FLOW on purpose: .adv-props-body has overflow:hidden, so an
   absolutely positioned popover gets clipped (same reason the border-sides
   menu had to be compacted). Instead the panel is narrow and right-aligned
   under the trigger, so it reads as a dropdown without displacing the form.
   ============================================ */

form.adv-container-props .adv-swatch-slot {
  /* Floats over the form instead of pushing it down. The clipping from
     .adv-props-body{overflow:hidden} is handled by scrollIntoView on open,
     which lifts the clip only while a panel is open. */
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 30;
  width: 212px;
  max-width: 100%;
  margin-top: 4px;
  padding: 8px;
  border: 1px solid var(--ck-color-base-border, hsl(0, 0%, 80%));
  border-radius: 6px;
  background: var(--ck-color-base-background, #fff);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
}

/* The slot is the panel now, so the grid drops its own box. */
form.adv-container-props .adv-swatch-grid {
  grid-template-columns: repeat(5, 24px);
  justify-content: space-between;
  gap: 4px;
  padding: 0;
  border: none;
  background: none;
}

form.adv-container-props .adv-swatch {
  width: 24px;
  height: 24px;
  border-radius: 3px;
}

form.adv-container-props .adv-doc-colors {
  margin-top: 8px;
}

form.adv-container-props .adv-color-panel-foot {
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
}

form.adv-container-props .adv-native-wrap {
  width: 26px;
  height: 24px;
}

form.adv-container-props .adv-color-panel-foot .adv-color-clear {
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
}


/* Anchors for the floating colour panel. */
form.adv-container-props .adv-props-row,
form.adv-container-props .adv-border-color-row {
  position: relative;
}

/* NOTE: no overflow:visible escape hatch here — it would cancel the body's
   scrolling, which matters more. The colour panel is absolutely positioned
   inside the scroll area, so it is reached by scrolling like anything else. */


/* ============================================
   NATIVE FIELD LOOK
   nativizeForm() rebuilds our fields with CKEditor's LabeledFieldView DOM,
   so the editor's own CSS drives fonts, paddings and the floating label.
   These few rules just stop OUR older styles from fighting it.
   ============================================ */

/* Our old "label above the input" styling must not apply to the floating
   labels the native structure uses. */
form.adv-container-props .ck-labeled-field-view__input-wrapper > label.ck-label {
  display: inline-block;
  width: auto;
  margin: 0;
  font-size: inherit;
  font-weight: 400;
  /* In a 4-column row the field is ~85px and "Inner padding" wrapped onto two
     lines, making that field taller than its neighbours. Keep it on one line
     and clip it; the full name stays in the input's tooltip. */
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Section headings match the native bold row label. */
form.adv-container-props label.adv-section-label {
  display: block;
  width: 100%;
  font-size: var(--ck-font-size-base, 13px);
  font-weight: 700;
  color: var(--ck-color-text, hsl(0, 0%, 20%));
  margin: 0 0 4px;
}

/* Let the native input metrics win inside labelled fields. */
form.adv-container-props .ck-labeled-field-view__input-wrapper > .ck-input,
form.adv-container-props .ck-labeled-field-view__input-wrapper > select.ck-input {
  width: 100%;
  min-width: 0;
}


/* Floating labels need room: let the inline row wrap instead of squeezing
   four fields (the labels truncated to "Inner pa…"). */
/* Four fields on one line, degrading to 3 / 2 / 1 as the balloon narrows.
   auto-fit + minmax reacts to the CONTAINER width, unlike media queries which
   only know the viewport — the balloon can be narrow on a wide screen. */
form.adv-container-props .adv-inline-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 8px;
}

form.adv-container-props .adv-inline-row > .ck-labeled-field-view {
  min-width: 0;
  margin: 0;
}


/* Floating labels sit ~6px ABOVE the input, so rows that hold nativized
   fields need headroom or the label gets clipped by the row above (the
   native form gets this from .ck-form__row's padding-top). */
form.adv-container-props .adv-border-triple,
form.adv-container-props .adv-ps-row {
  margin-top: 12px;
}

form.adv-container-props .adv-inline-row {
  padding-top: 8px;
}


/* Floating labels are absolutely positioned ABOVE their input, so any
   overflow:hidden ancestor clips them in half (that is what cut "Estilo").
   Open up the containers that hold nativized fields. */
form.adv-container-props .adv-border-field,
form.adv-container-props .ck-labeled-field-view,
form.adv-container-props .ck-labeled-field-view__input-wrapper {
  overflow: visible;
}


/* "No colour" indicator copied from CKEditor's own
   .ck-input-color__button__preview__no-color-indicator (red bar rotated 45deg)
   instead of our grey hatch, so it reads the same as the table dialog. */
form.adv-container-props .adv-color-preview {
  position: relative;
  overflow: hidden;
}

form.adv-container-props .adv-color-preview-empty {
  background-image: none;
  background: var(--ck-color-base-background, #fff);
}

form.adv-container-props .adv-color-preview-empty::after {
  content: '';
  position: absolute;
  background: red;
  border-radius: 2px;
  height: 150%;
  width: 8%;
  left: 50%;
  top: -30%;
  transform: rotate(45deg);
  transform-origin: 50% center;
}