.nx-accordion { display: flex; flex-direction: column; gap: var(--nx-gap, 8px); }
.nx-accordion .nx-acc__row {
  border-radius: var(--nx-radius, 12px);
  border: var(--nx-border, 0px) solid var(--nx-bdr-color, #e2e8f0);
  background: var(--flavor-surface, #fff);
  overflow: hidden;
}
.nx-accordion .nx-acc__head {
  cursor: pointer; list-style: none; padding: .875rem 1.125rem;
  font-weight: 600; display: flex; align-items: center; justify-content: space-between;
  background: var(--nx-head-bg, var(--flavor-bg-alt, #f8fafc));
  border-inline-start: 4px solid var(--nx-accent, var(--flavor-primary, #2563eb));
}
.nx-accordion .nx-acc__head::-webkit-details-marker { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   THE OPEN / CLOSED MARKER

   Real artwork, not a typed character.

   It used to be `content: "+"` and `content: "\276F"`, fed from two custom
   properties on the inline style. A character is at the mercy of whatever
   font resolves it: the weight is wrong next to a semibold heading, the
   baseline sits a pixel or two off, and on a system without the glyph the
   reader gets a tofu box where the indicator should be.

   These are SVG masks instead. `mask-image` paints through the shape, so the
   colour still comes from --nx-accent and the icon inherits the accent the
   author picked — the one thing an <img> or a background-image could not do.

   Telling directional markers from non-directional ones is now a CLASS check.
   It used to be `:not([style*="276F"])` — a substring test against the whole
   style attribute, which is precisely the shape of bug that had WordPress
   core's `[style*=border-color]` rule framing every block on this site dark.
   ══════════════════════════════════════════════════════════════════════════ */
.nx-accordion .nx-acc__row > summary { list-style: none; }
.nx-accordion .nx-acc__row > summary::-webkit-details-marker { display: none; }
.nx-accordion .nx-acc__row > summary::marker { content: ''; }

.nx-accordion .nx-acc__head {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  background: var(--nx-head-bg, transparent);
  color: var(--nx-head-color, inherit);
  padding: var(--nx-head-pad, 14px);
  font-size: var(--nx-head-fs, 16px);
}

/* The artwork, by style. Default is plus/minus, which is also what a block
   saved before this existed falls back to. */
.nx-accordion {
  --nx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --nx-ico-open: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}

.nx-accordion--icon-chevron {
  --nx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E");
  --nx-ico-open: var(--nx-ico);
}

.nx-accordion--icon-caret {
  --nx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M9 5.5v13l9-6.5z'/%3E%3C/svg%3E");
  --nx-ico-open: var(--nx-ico);
}

.nx-accordion--icon-arrow {
  --nx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --nx-ico-open: var(--nx-ico);
}

/*
 * The two filled styles. These are what "an icon rather than a character"
 * actually looks like: a solid disc with the sign knocked out of it, which
 * reads as designed at 18px where a stroked "+" reads as a typo.
 *
 * The disc is drawn with fill-rule evenodd so the inner shape is a HOLE, not a
 * second painted path — a mask only cares about alpha, so a hole is the only
 * way to get the sign to show the tile underneath rather than the accent
 * colour twice.
 */
.nx-accordion--icon-circleplus {
  --nx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zm1.15 5.6v4.25h4.25v2.3h-4.25v4.25h-2.3v-4.25H6.6v-2.3h4.25V6.6z'/%3E%3C/svg%3E");
  --nx-ico-open: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zM6.6 10.85h10.8v2.3H6.6z'/%3E%3C/svg%3E");
}

.nx-accordion--icon-circlechevron {
  --nx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zM10.2 6.9 8.6 8.5l3.5 3.5-3.5 3.5 1.6 1.6L15.3 12z'/%3E%3C/svg%3E");
  --nx-ico-open: var(--nx-ico);
}

/* ── Outline circles ─────────────────────────────────────────────────────── */
/*
 * A ring rather than a filled disc: the circle is a stroke and the sign inside
 * it is a second stroke, so the tile behind shows through. Drawn with two
 * separate paths rather than one evenodd shape, because an evenodd hole would
 * make the RING solid and the sign transparent — the opposite of what is
 * wanted here.
 */
.nx-accordion--icon-ringplus {
  --nx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.6'/%3E%3Cpath d='M12 7.4v9.2M7.4 12h9.2'/%3E%3C/svg%3E");
  --nx-ico-open: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.6'/%3E%3Cpath d='M7.4 12h9.2'/%3E%3C/svg%3E");
}

.nx-accordion--icon-ringchevron {
  --nx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.6'/%3E%3Cpath d='m10.2 7.8 4.2 4.2-4.2 4.2'/%3E%3C/svg%3E");
  --nx-ico-open: var(--nx-ico);
}

.nx-accordion--icon-ringcaret {
  --nx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.6'/%3E%3Cpath d='M10 7.6 16 12l-6 4.4z' fill='%23000'/%3E%3C/svg%3E");
  --nx-ico-open: var(--nx-ico);
}

.nx-accordion .nx-acc__head::after {
  content: '';
  flex: 0 0 auto;
  width: var(--nx-icon-size, 18px);
  height: var(--nx-icon-size, 18px);
  margin-inline-start: auto;

  /* The mask paints through the shape, so the ACCENT colour is what shows. */
  /*
   * Its own colour, falling back to the accent bar's, falling back to the
   * theme primary. Three tiers so an author who only ever sets the accent
   * still gets a matching marker, and one who wants them different can say so.
   */
  background-color: var(--nx-icon-color,
                    var(--nx-accent, var(--flavor-primary, #2563eb)));
  opacity: .75;

  -webkit-mask-image: var(--nx-ico);
          mask-image: var(--nx-ico);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;

  transition: transform 180ms ease, opacity 180ms ease;
  transform-origin: 50% 50%;
}

.nx-accordion .nx-acc__row[open] > .nx-acc__head::after {
  -webkit-mask-image: var(--nx-ico-open);
          mask-image: var(--nx-ico-open);
  opacity: 1;
}

/* "None" removes the indicator without removing the row's layout. */
.nx-accordion--icon-none .nx-acc__head::after { display: none; }

/* ── Rotation, for the directional icons only ─────────────────────────── */
/*
 * A chevron, a caret and an arrow all POINT somewhere, so they have to turn
 * to face the content they reveal. Plus/minus does not point at anything and
 * rotating it would just look like a rendering fault — which is why the
 * rotation lives on the three directional classes rather than being applied
 * to everything and then excluded.
 */
.nx-accordion--icon-chevron       .nx-acc__row[open] > .nx-acc__head::after,
.nx-accordion--icon-circlechevron .nx-acc__row[open] > .nx-acc__head::after,
.nx-accordion--icon-ringchevron   .nx-acc__row[open] > .nx-acc__head::after,
.nx-accordion--icon-caret         .nx-acc__row[open] > .nx-acc__head::after,
.nx-accordion--icon-ringcaret     .nx-acc__row[open] > .nx-acc__head::after,
.nx-accordion--icon-arrow         .nx-acc__row[open] > .nx-acc__head::after {
  transform: rotate(90deg);
}

/*
 * RTL: the glyph is mirrored so a closed row points LEFT, the direction this
 * page reads, and the open state still has to resolve DOWNWARD.
 *
 * ORDER MATTERS. Transforms compose right-to-left, so the rightmost function
 * runs first. `scaleX(-1) rotate(-90deg)` would turn the right-pointing glyph
 * UP and then mirror it, leaving an expanded row pointing away from its own
 * content. `rotate(-90deg) scaleX(-1)` mirrors first (right becomes left) and
 * then turns that left-pointing glyph a quarter turn counter-clockwise, which
 * lands on down.
 */
[dir="rtl"] .nx-accordion--icon-chevron       .nx-acc__head::after,
[dir="rtl"] .nx-accordion--icon-circlechevron .nx-acc__head::after,
[dir="rtl"] .nx-accordion--icon-ringchevron   .nx-acc__head::after,
[dir="rtl"] .nx-accordion--icon-caret         .nx-acc__head::after,
[dir="rtl"] .nx-accordion--icon-ringcaret     .nx-acc__head::after,
[dir="rtl"] .nx-accordion--icon-arrow         .nx-acc__head::after {
  transform: scaleX(-1);
}

[dir="rtl"] .nx-accordion--icon-chevron       .nx-acc__row[open] > .nx-acc__head::after,
[dir="rtl"] .nx-accordion--icon-circlechevron .nx-acc__row[open] > .nx-acc__head::after,
[dir="rtl"] .nx-accordion--icon-ringchevron   .nx-acc__row[open] > .nx-acc__head::after,
[dir="rtl"] .nx-accordion--icon-caret         .nx-acc__row[open] > .nx-acc__head::after,
[dir="rtl"] .nx-accordion--icon-ringcaret     .nx-acc__row[open] > .nx-acc__head::after,
[dir="rtl"] .nx-accordion--icon-arrow         .nx-acc__row[open] > .nx-acc__head::after {
  transform: rotate(-90deg) scaleX(-1);
}

@media (prefers-reduced-motion: reduce) {
  .nx-accordion .nx-acc__head::after { transition: none; }
}

/*
 * A browser with no mask support would paint a solid coloured square, which is
 * worse than the character it replaced. Falling back to the characters keeps
 * those readers with a working indicator.
 */
@supports not ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .nx-accordion .nx-acc__head::after {
    content: '+';
    width: auto;
    height: auto;
    background: none;
    color: var(--nx-accent, var(--flavor-primary, #2563eb));
    font-weight: 700;
    line-height: 1;
  }
  .nx-accordion .nx-acc__row[open] > .nx-acc__head::after { content: '\2212'; }
}

.nx-accordion .nx-acc__row[open] > .nx-acc__head {
  background: var(--nx-head-active-bg, var(--nx-head-bg, transparent));
  color: var(--nx-head-active-color, var(--nx-head-color, inherit));
}

.nx-accordion .nx-acc__body {
  background: var(--nx-body-bg, transparent);
  color: var(--nx-body-color, inherit);
}

.nx-accordion .nx-acc__title { flex: 1 1 auto; }

/* ── Editor-only row tools ────────────────────────────────────── */
.nx-accordion--editing .nx-acc__rowtools {
  display: inline-flex;
  gap: 2px;
  margin-inline-start: 8px;
}
.nx-accordion--editing .nx-acc__empty {
  padding: 20px;
  text-align: center;
  color: #64748b;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
}

/* The optional per-row glyph, shown before the title. */
.nx-accordion .nx-acc__glyph {
  flex: 0 0 auto;
  line-height: 1;
  font-size: 1.1em;
}

/* The optional per-row glyph, shown before the title. */
.nx-accordion .nx-acc__glyph {
  flex: 0 0 auto;
  line-height: 1;
  font-size: 1.1em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EDITOR — ALWAYS-VISIBLE ROW CONTROLS
   ───────────────────────────────────────────────────────────────────────────
   The reorder / duplicate / delete buttons were `opacity: 0` until the row was
   hovered. That is a common pattern and it was the wrong call here: a control
   you cannot see is a control you do not know exists, and the author reported
   exactly that — the buttons were found only by clicking blindly.

   They are permanently visible now, and each action carries its own colour so
   the destructive one can never be hit by mistake while reaching for reorder.
   ═══════════════════════════════════════════════════════════════════════════ */
.nx-accordion--editing .nx-acc__rowtools {
  display: inline-flex !important;
  gap: 4px;
  margin-inline-start: 8px;
  opacity: 1 !important;          /* overrides the hover-reveal rule above */
  flex: 0 0 auto;
}

/* ── Editor rows are plain DIVs, not <details> ────────────────────────────── */
/* See index.js: the disclosure element fights the caret, so the editor renders
   every row open. These rules give those divs the same skin the real rows have. */
.nx-accordion--editing .nx-acc__row.is-editing {
  display: block;
  border: 1px solid #cbd5e1;
  border-radius: var(--nx-radius, 12px);
  overflow: hidden;
  background: #fff;
}

.nx-accordion--editing .nx-acc__row.is-editing > .nx-acc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: text;
  background: var(--nx-head-bg, #f8fafc);
}

/* The body is the whole point of this fix — it must never be collapsed here. */
/*
 * NO !important HERE, deliberately.
 *
 * index.js writes `display` inline on this element, and inline is beaten by
 * exactly one thing: an !important rule. This rule used to carry one, so it
 * pinned every row open and the collapse button flipped its own icon while
 * changing nothing else — the reported "clicking it does nothing".
 *
 * The inline value decides now. It still outranks every non-important rule
 * from the editor stylesheet or the theme, which is why it was moved inline in
 * the first place.
 */
.nx-accordion--editing .nx-acc__row.is-editing > .nx-acc__body {
  min-height: 48px;
  border-top: 1px solid #e2e8f0;
  background: var(--nx-body-bg, #fff);

  /* An answer that is still empty must not look like a missing element. */
  padding: 10px 14px;
}

/*
 * The collapsed row loses its divider, or the header reads as sitting on an
 * empty body.
 *
 * Keyed on a CLASS the block writes, never on :has([style*=...]). A substring
 * test against a style attribute is the exact shape of the WordPress core
 * [style*=border-color] rule that framed every block on this site dark, and
 * "none" appears in plenty of declarations that have nothing to do with
 * display.
 */
.nx-accordion--editing .nx-acc__row.is-editing.is-collapsed > .nx-acc__head {
  border-bottom: 0;
}

/*
 * THE EDITOR SHOWS THE REAL STATE, NOT ALWAYS "OPEN".
 *
 * Editor rows are plain divs held permanently expanded so they can be typed
 * into, so there is no [open] attribute for the marker rules to key off. The
 * previous rule answered that by forcing the OPEN glyph on every row — which
 * is why the whole accordion showed nothing but minus signs, and why the
 * marker setting looked like it did nothing at all.
 *
 * index.js now adds `is-open` to exactly the rows that will actually be open
 * on the front end, so the editor previews the truth.
 */
.nx-accordion--editing .nx-acc__row.is-editing.is-open > .nx-acc__head::after {
  -webkit-mask-image: var(--nx-ico-open);
          mask-image: var(--nx-ico-open);
  opacity: 1;
}

.nx-accordion--editing.nx-accordion--icon-chevron .nx-acc__row.is-open > .nx-acc__head::after,
.nx-accordion--editing.nx-accordion--icon-caret   .nx-acc__row.is-open > .nx-acc__head::after,
.nx-accordion--editing.nx-accordion--icon-arrow   .nx-acc__row.is-open > .nx-acc__head::after {
  transform: rotate(90deg);
}

[dir="rtl"] .nx-accordion--editing.nx-accordion--icon-chevron .nx-acc__row.is-open > .nx-acc__head::after,
[dir="rtl"] .nx-accordion--editing.nx-accordion--icon-caret   .nx-acc__row.is-open > .nx-acc__head::after,
[dir="rtl"] .nx-accordion--editing.nx-accordion--icon-arrow   .nx-acc__row.is-open > .nx-acc__head::after {
  transform: rotate(-90deg) scaleX(-1);
}

/* The title must keep its own space when the tool cluster sits beside it. */
.nx-accordion--editing .nx-acc__title {
  flex: 1 1 auto;
  min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHARED ROW-CONTROL VOCABULARY
   ───────────────────────────────────────────────────────────────────────────
   The accordion, business-hours and tab-panel blocks all present the same four
   row actions, so they share one set of class names — `nx-tool--move`,
   `--dup`, `--del`, `--state` — and one set of rules.

   Colour carries the meaning: blue reorders, green adds, red destroys, amber
   toggles a state. That mapping is what lets someone reach for the right
   control without reading a tooltip, and it is why delete is also pushed away
   from the cluster rather than merely tinted.

   Classes, not :nth-child(). Position-based rules silently recolour every
   button after any insertion — a delete button that turns blue because a
   control was added ahead of it is worse than no colour at all.
   ═══════════════════════════════════════════════════════════════════════════ */
.nx-accordion--editing .nx-tool,
.nx-bh--editing .nx-tool,
.nx-tabs--editing .nx-tool {
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: #334155 !important;
  min-width: 30px;
  height: 30px;
  padding: 0 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/*
 * DOUBLED CLASS, ON PURPOSE.
 *
 * `.nx-tool.nx-tool--move` rather than `.nx-tool--move`. These rules carry
 * !important, so they can only ever be beaten on specificity — and they were,
 * by a three-class `.nx-bh__tools .components-button` blanket rule that
 * painted every one of them flat white. Doubling the class puts the colour
 * rules at the same weight as any plausible container-scoped selector, and
 * being later in the file settles the tie in their favour.
 */
.nx-accordion--editing .nx-tool.nx-tool--move,
.nx-bh--editing .nx-tool.nx-tool--move,
.nx-tabs--editing .nx-tool.nx-tool--move {
  background: #eff6ff !important;
  border-color: #93c5fd !important;
  color: #1d4ed8 !important;
}

.nx-accordion--editing .nx-tool.nx-tool--dup,
.nx-bh--editing .nx-tool.nx-tool--dup,
.nx-tabs--editing .nx-tool.nx-tool--dup {
  background: #f0fdf4 !important;
  border-color: #86efac !important;
  color: #15803d !important;
}

.nx-accordion--editing .nx-tool.nx-tool--del,
.nx-bh--editing .nx-tool.nx-tool--del,
.nx-tabs--editing .nx-tool.nx-tool--del {
  background: #fef2f2 !important;
  border-color: #fca5a5 !important;
  color: #b91c1c !important;
  margin-inline-start: 6px;
}

/* Open/closed is a state, not an action — amber, and unmistakable when set. */
.nx-bh--editing .nx-tool.nx-tool--state[aria-pressed="true"] {
  background: #fef3c7 !important;
  border-color: #fbbf24 !important;
  color: #92400e !important;
}

/* A disabled reorder (first row up, last row down) must read as unavailable
   rather than simply looking broken. */
.nx-accordion--editing .nx-tool:disabled,
.nx-bh--editing .nx-tool:disabled,
.nx-tabs--editing .nx-tool:disabled {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #cbd5e1 !important;
  box-shadow: none;
  cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE PUBLISHED ACCORDION

   Reported as "ugly" on a live post, and it was: bare rows, an accent bar
   hanging off the side, no separation between one question and the next, and
   an answer that started hard against its own heading.

   Everything below styles markup that already exists, so no saved block
   changes and nothing can be invalidated. Four things do the work:

     - the rows become cards with real separation, instead of a run-on stack
     - the header gets a hover and a pressed state, so it reads as a control
     - the open row is tinted, so which one you are reading is never in doubt
     - the answer gets breathing room and a measured line length

   The accent bar stays, because it is this block's signature — but at the
   INLINE START edge of a card rather than floating beside a bare row.
   ═══════════════════════════════════════════════════════════════════════════ */
.nx-accordion .nx-acc__row {
  transition: box-shadow .18s ease, border-color .18s ease;
}

.nx-accordion .nx-acc__row:not([open]):hover {
  border-color: var(--nx-accent, var(--flavor-primary, #2563eb));
}

.nx-accordion .nx-acc__head {
  gap: 12px;
  line-height: 1.45;
  transition: background-color .18s ease, color .18s ease;

  /* A summary is a button. It should not select as text when double-clicked. */
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.nx-accordion .nx-acc__head:hover {
  background: var(--nx-head-active-bg, var(--flavor-bg-alt, #f1f5f9));
}

.nx-accordion .nx-acc__head:focus-visible {
  outline: 2px solid var(--nx-accent, var(--flavor-primary, #2563eb));
  outline-offset: -2px;
}

/* The open row, tinted just enough to find at a glance. */
.nx-accordion .nx-acc__row[open] {
  box-shadow: 0 2px 10px rgba(15, 23, 42, .07);
}

.nx-accordion .nx-acc__row[open] > .nx-acc__head::after { opacity: 1; }

.nx-accordion .nx-acc__body {
  padding: 2px var(--nx-head-pad, 14px) calc(var(--nx-head-pad, 14px) + 4px);
  line-height: 1.7;

  /* Prose, not a data column: a 68-character measure is where reading speed
     peaks, and an answer that runs the full width of a desktop article does
     not get read. */
  max-width: 68ch;
}

.nx-accordion .nx-acc__body > :first-child { margin-block-start: 0; }
.nx-accordion .nx-acc__body > :last-child  { margin-block-end: 0; }

/* The body slides rather than appearing, where the browser supports animating
   a <details>. Progressive enhancement — nothing depends on it. */
@supports (interpolate-size: allow-keywords) {
  .nx-accordion .nx-acc__row::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size .28s ease, content-visibility .28s allow-discrete;
  }
  .nx-accordion .nx-acc__row[open]::details-content { block-size: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .nx-accordion .nx-acc__row,
  .nx-accordion .nx-acc__head { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE PUBLISHED BLOCK LOOKS LIKE THE EDITOR

   The editor draws each row as a framed white card with real separation. The
   front end drew a bare bar with an accent line hanging off its edge — the
   same content, two different products, and the published one was the worse.

   The editor's look was not something the editor invented; it was written into
   `.nx-accordion--editing` rules and simply never given to the front end. It
   is given now, from ONE definition applying to both, so the two cannot drift
   apart again.
   ═══════════════════════════════════════════════════════════════════════════ */
.nx-accordion .nx-acc__row {
  border: 1px solid var(--nx-bdr-color, #e6ebf1);
  border-radius: var(--nx-radius, 12px);
  background: var(--flavor-surface, #ffffff);
  overflow: hidden;

  /* The accent is an inset shadow rather than a border, so it cannot fight the
     frame for the same edge and cannot round differently from the card. */
  box-shadow: inset var(--nx-bar-w, 4px) 0 0 0
              var(--nx-accent, var(--flavor-primary, #2563eb));
}

[dir="rtl"] .nx-accordion .nx-acc__row {
  box-shadow: inset calc(var(--nx-bar-w, 4px) * -1) 0 0 0
              var(--nx-accent, var(--flavor-primary, #2563eb));
}

/* The old left border is superseded by the shadow above; leaving both would
   double the accent's width on one side. */
.nx-accordion .nx-acc__head {
  border-inline-start: 0;
  padding-inline-start: calc(var(--nx-head-pad, 14px) + var(--nx-bar-w, 4px));
}

.nx-accordion .nx-acc__body {
  padding-inline-start: calc(var(--nx-head-pad, 14px) + var(--nx-bar-w, 4px));
}

.nx-accordion .nx-acc__row[open] {
  border-color: color-mix(in srgb,
    var(--nx-accent, var(--flavor-primary, #2563eb)) 35%, #e6ebf1);
  box-shadow: inset var(--nx-bar-w, 4px) 0 0 0
              var(--nx-accent, var(--flavor-primary, #2563eb)),
              0 4px 16px rgba(15, 23, 42, .07);
}

[dir="rtl"] .nx-accordion .nx-acc__row[open] {
  box-shadow: inset calc(var(--nx-bar-w, 4px) * -1) 0 0 0
              var(--nx-accent, var(--flavor-primary, #2563eb)),
              0 4px 16px rgba(15, 23, 42, .07);
}

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .nx-accordion .nx-acc__row[open] { border-color: #cbd5e1; }
}

/* The editor's own frame must not sit on top of this one. */
.nx-accordion--editing .nx-acc__row.is-editing { box-shadow: none; }