/* ═══════════════════════════════════════════════════════════════════════════
   INTERACTIVE TABS
   ───────────────────────────────────────────────────────────────────────────
   Front-end markup, emitted flat by the child tab-panel blocks:

     .nx-tabs > .nx-tabs__group
         input.nx-tabs__radio  +  label.nx-tabs__label  +  div.nx-tabs__panel
         input.nx-tabs__radio  +  label.nx-tabs__label  +  div.nx-tabs__panel
         …

   The triplets MUST stay consecutive siblings: the whole switching mechanism
   is `:checked + label + .panel`, and any wrapper around a triplet breaks the
   chain and leaves every panel stuck at display:none. That is the bug this
   architecture replaced — content saved correctly and rendered invisible.

   Labels are lifted onto one row by `order: -1`; panels break to full width
   underneath. No JavaScript is involved on the front end.
   ═══════════════════════════════════════════════════════════════════════════ */

.nx-tabs .nx-tabs__group {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: flex-start;

  /* Column gap separates the tabs; the small row gap is what becomes the
     nav's padding-bottom, since the rule below is a flex item of its own. */
  column-gap: var(--nx-nav-gap, 16px);
  row-gap: 8px;

  width: 100% !important;
  background: var(--nx-tab-bg, transparent);
  border-radius: var(--nx-radius, 12px);
  border: var(--nx-border, 0px) solid var(--nx-bdr-color, #e2e8f0);
}

/*
 * The nav underline.
 *
 * A pseudo-element rather than a border on the group: the group also contains
 * the panels, so a border on it would frame the whole block instead of just
 * the tab row. Ordered with the labels (order: -1) it sorts last among them by
 * source order, and flex-basis:100% forces the line break — so it lands
 * exactly between the tabs and the open panel.
 */
.nx-tabs .nx-tabs__group::after {
  content: '';
  order: -1;
  flex: 0 0 100%;
  width: 100%;
  height: 0;
  border-bottom: 2px solid var(--nx-bdr-color, #e2e8f0);
}

/* The radio is the state store, never visible. Kept in the layout flow at zero
   size so :focus-visible still reaches its label. */
.nx-tabs .nx-tabs__radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.nx-tabs .nx-tabs__label {
  order: -1;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  width: auto !important;
  white-space: nowrap;

  cursor: pointer;
  padding: var(--nx-tab-pad-y, 12px) var(--nx-tab-pad-x, 20px);
  font-weight: 600;
  font-size: var(--nx-tab-fs, 15px);
  color: var(--nx-inactive, #64748b);

  /* Sits directly on top of the group's ::after rule, so the active tab reads
     as connected to its panel rather than floating above it. */
  border-bottom: var(--nx-underline, 3px) solid transparent;
  margin-bottom: -2px;

  transition: color 150ms ease, border-color 150ms ease;
  -webkit-tap-highlight-color: transparent;
}

/* Optional: share the width equally instead of hugging the labels. */
.nx-tabs .nx-tabs__group.is-stretch .nx-tabs__label {
  flex: 1 1 0;
  justify-content: center;
}

/* The inner RichText span carries no frame of its own — see index.js. */
.nx-tabs .nx-tabs__labeltext { display: inline-block; min-width: 1ch; }
.nx-tabs .nx-tabs__glyph { flex: 0 0 auto; line-height: 1; }

.nx-tabs .nx-tabs__radio:checked + .nx-tabs__label {
  color: var(--nx-active, var(--flavor-primary, #2563eb));
  border-bottom-color: var(--nx-active, var(--flavor-primary, #2563eb));
}
.nx-tabs .nx-tabs__radio:focus-visible + .nx-tabs__label {
  outline: 2px solid var(--flavor-primary, #2563eb);
  outline-offset: -2px;
}

/* ── The panel ────────────────────────────────────────────────────────────── */
.nx-tabs .nx-tabs__panel {
  display: none;
  flex-basis: 100%;
  width: 100%;
  line-height: 1.65;

  /* Premium card finish, matching the carousel treatment. */
  padding: var(--nx-panel-pad, 24px);
  border: 1px solid var(--nx-bdr-color, #e2e8f0);
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03);
  background: var(--nx-panel-bg, var(--flavor-surface, #fff));
  color: var(--nx-panel-color, inherit);
}

/* THE reveal rule. Only matches because the triplet is three real siblings. */
.nx-tabs .nx-tabs__radio:checked + .nx-tabs__label + .nx-tabs__panel {
  display: block;
}

/*
 * Fallback for a tabs block whose author never marked a default tab: without
 * a :checked radio nothing would be revealed and the block would look empty.
 * :has() opens the first panel only when no radio at all is checked.
 */
.nx-tabs .nx-tabs__group:not(:has(.nx-tabs__radio:checked)) .nx-tabs__panel:first-of-type {
  display: block;
}

/* Panels hold arbitrary inner blocks; nothing inside may force a horizontal
   scrollbar onto the page. */
.nx-tabs .nx-tabs__panel > * { max-width: 100%; }
.nx-tabs .nx-tabs__panel table,
.nx-tabs .nx-tabs__panel pre { display: block; overflow-x: auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   EDITOR
   ───────────────────────────────────────────────────────────────────────────
   In the editor every tab is shown open, stacked as a labelled card — the
   same choice core/columns makes. A tab whose panel is collapsed is not a
   usable InnerBlocks drop target, and an author cannot drag a block into
   something that is display:none.
   ═══════════════════════════════════════════════════════════════════════════ */

.nx-tabs--editing .nx-tabs__group {
  display: block !important;
  padding: 0;
  border: 0;
}
.nx-tabs--editing .nx-tabs__group::after { display: none; }

/* One tab = one framed card, so the boundary between tabs is unmistakable. */
.nx-tabs--editing .nx-tabs__pair {
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  margin-bottom: 16px;
  background: #fff;
  overflow: hidden;
}

.nx-tabs--editing .nx-tabs__pair > .nx-tabs__label {
  display: flex !important;
  width: 100% !important;
  white-space: normal;
  margin-bottom: 0;
  border: 0;
  border-bottom: 1px solid #e2e8f0;
  border-radius: 0;
  background: #f8fafc;
  color: #0f172a;
  cursor: text;
}

/* A visible hint that the label is editable text, not a static heading. */
.nx-tabs--editing .nx-tabs__pair > .nx-tabs__label::before {
  content: '⇥';
  flex: 0 0 auto;
  margin-inline-end: 8px;
  color: #2563eb;
  font-weight: 700;
}

.nx-tabs--editing .nx-tabs__panel {
  display: block !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-height: 80px;
}

/*
 * THE APPENDER IS OURS NOW.
 *
 * These rules used to dress Gutenberg's own ButtonBlockAppender in a dashed
 * frame. That held only for as long as its internal class names did, and what
 * the author actually saw was a small round dashed "+" adrift in the bottom
 * corner. index.js passes `renderAppender: false` and renders the labelled
 * button below instead, so there is nothing of Gutenberg's left to style here.
 */
.nx-tabs--editing .nx-tabs__add {
  display: flex !important;
  width: 100%;
  justify-content: center;
  margin-top: 4px;
  min-height: 40px;
  border-radius: 10px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE PREVIEW STRIP

   The editing view below stacks the tabs vertically, and it has to: every
   panel must be an open InnerBlocks drop target, because an author cannot
   drag a block into something that is display:none. The cost of that is an
   editor which looks nothing like the published block — exactly what was
   reported.

   This strip is the answer: a read-only picture of the real horizontal tab
   bar, sitting above the cards. It is deliberately not clickable, because the
   cards below are where editing happens.
   ═══════════════════════════════════════════════════════════════════════════ */
.nx-tabs--editing .nx-tabs__preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nx-nav-gap, 16px);
  margin-bottom: 14px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--nx-bdr-color, #e2e8f0);
  pointer-events: none;
  user-select: none;
}

.nx-tabs--editing .nx-tabs__preview-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--nx-tab-pad-y, 10px) var(--nx-tab-pad-x, 18px);
  font-size: var(--nx-tab-fs, 15px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--nx-inactive, #64748b);
  background: var(--nx-tab-bg, transparent);
  border-radius: 8px 8px 0 0;

  /* A long label must not reflow the editor; this is a preview, not the bar. */
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The tab that will be open on load, marked the way the front end marks it —
   the underline is this block's whole visual signature. */
.nx-tabs--editing .nx-tabs__preview-tab.is-active {
  color: var(--nx-active, #2563eb);
  box-shadow: inset 0 calc(var(--nx-underline, 3px) * -1) 0 var(--nx-active, #2563eb);
}

.nx-tabs--editing .nx-tabs__preview-glyph { line-height: 1; }

.nx-tabs--editing .nx-tabs__hint,
.nx-tabs--editing .nx-tabs__empty {
  margin: 8px 0 0;
  font-size: 12px;
  color: #64748b;
}

/* The inspector hint. Defined here rather than borrowed from another block's
   stylesheet: block styles are enqueued per block, so on a page holding a Tabs
   block and nothing else the shared rule would simply never load. */
.nx-hint {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
}

/* ═══════════════════════════════════════════════════════════════════════════
   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 per-tab control cluster in the editor header. Mirrors the accordion's
   placement so the two blocks are operated the same way. */
.nx-tabs--editing .nx-tabs__pairtools {
  display: inline-flex;
  gap: 4px;
  margin-inline-start: auto;
  flex: 0 0 auto;
}

/* The label must yield the space the cluster needs rather than push it out. */
.nx-tabs--editing .nx-tabs__pair > .nx-tabs__label > .nx-tabs__labeltext {
  flex: 1 1 auto;
  min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOUR LOOKS

   The block had exactly one: labels in a row with an underline under the
   active one. It is a fine default and it is what every published block still
   renders — which is precisely why it stays the default. These three are
   alternatives, selected by a class that is only ever emitted when an author
   picks one, so nothing already in the database changes.

   Each is built from the SAME custom properties the underline look already
   uses, so every existing control — padding, font size, gap, colours — keeps
   working across all four rather than each design needing its own panel.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Pills ──────────────────────────────────────────────────────────────── */
/*
 * Rounded, filled when active, on a tinted strip. The most "app-like" of the
 * four and the one that survives a coloured page background best, because the
 * strip gives the labels their own ground instead of floating on the article.
 */
.nx-tabs--pills .nx-tabs__group {
  gap: 6px;
  padding: 5px;
  border-radius: calc(var(--nx-tab-radius, 10px) + 5px);
  background: var(--nx-bar-bg, var(--flavor-bg-alt, #f1f5f9));
  border-bottom: 0;
}

.nx-tabs--pills .nx-tabs__group::after { display: none; }

.nx-tabs--pills .nx-tabs__label {
  border-radius: var(--nx-tab-radius, 10px);
  border: 0;
  transition: background-color .18s ease, color .18s ease;
}

.nx-tabs--pills .nx-tabs__label:hover {
  background: rgba(255, 255, 255, .6);
}

.nx-tabs--pills .nx-tabs__radio:checked + .nx-tabs__label {
  background: var(--nx-active-bg, var(--flavor-surface, #ffffff));
  color: var(--nx-active, var(--flavor-primary, #2563eb));
  box-shadow: 0 1px 3px rgba(15, 23, 42, .12);

  /* The underline is the OTHER look's signature; it must not survive here. */
  border-bottom: 0;
}

/* ── Boxed ──────────────────────────────────────────────────────────────── */
/*
 * Folder tabs: each label is a card whose bottom edge merges into the panel.
 * The active tab's bottom border is erased and pulled 1px down over the
 * group's own border, which is what produces the "connected" look — without
 * that overlap there is a hairline seam and the illusion breaks.
 */
.nx-tabs--boxed .nx-tabs__group {
  gap: 4px;
  border-bottom: 1px solid var(--nx-bdr-color, #e2e8f0);
}

.nx-tabs--boxed .nx-tabs__group::after { display: none; }

.nx-tabs--boxed .nx-tabs__label {
  border: 1px solid transparent;
  border-radius: var(--nx-tab-radius, 10px) var(--nx-tab-radius, 10px) 0 0;
  margin-bottom: -1px;
}

.nx-tabs--boxed .nx-tabs__label:hover {
  background: var(--nx-bar-bg, var(--flavor-bg-alt, #f8fafc));
}

.nx-tabs--boxed .nx-tabs__radio:checked + .nx-tabs__label {
  background: var(--nx-active-bg, var(--flavor-surface, #ffffff));
  border-color: var(--nx-bdr-color, #e2e8f0);
  border-bottom-color: var(--nx-active-bg, var(--flavor-surface, #ffffff));
  color: var(--nx-active, var(--flavor-primary, #2563eb));
}

/* ── Segmented ──────────────────────────────────────────────────────────── */
/*
 * One continuous control divided into cells, like a native segmented picker.
 * The dividers are inset borders rather than gaps, so the group reads as a
 * single object; the active cell is filled solid.
 */
.nx-tabs--segmented .nx-tabs__group {
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--nx-bdr-color, #e2e8f0);
  border-radius: var(--nx-tab-radius, 10px);
  background: var(--nx-bar-bg, var(--flavor-surface, #ffffff));
}

.nx-tabs--segmented .nx-tabs__group::after { display: none; }

.nx-tabs--segmented .nx-tabs__label {
  border: 0;
  border-radius: 0;
  border-inline-start: 1px solid var(--nx-bdr-color, #e2e8f0);
  transition: background-color .18s ease, color .18s ease;
}

/* The first cell has no divider before it, in either writing direction. */
.nx-tabs--segmented .nx-tabs__radio:first-of-type + .nx-tabs__label {
  border-inline-start: 0;
}

.nx-tabs--segmented .nx-tabs__label:hover {
  background: var(--flavor-bg-alt, #f8fafc);
}

.nx-tabs--segmented .nx-tabs__radio:checked + .nx-tabs__label {
  background: var(--nx-active-bg, var(--flavor-primary, #2563eb));
  color: var(--nx-active, #ffffff);
  border-bottom: 0;
}

/* ── Shared ─────────────────────────────────────────────────────────────── */
/* The panel picks up the chosen radius too, so the whole block reads as one
   design decision rather than a styled bar sitting on a default box. */
.nx-tabs--pills .nx-tabs__panel,
.nx-tabs--boxed .nx-tabs__panel,
.nx-tabs--segmented .nx-tabs__panel {
  border-radius: var(--nx-tab-radius, 10px);
}

.nx-tabs--boxed .nx-tabs__panel {
  border-start-start-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
  .nx-tabs--pills .nx-tabs__label,
  .nx-tabs--segmented .nx-tabs__label { transition: none; }
}

/* The editor preview strip follows whichever look is selected, so choosing one
   shows the real thing rather than a description of it. */
.nx-tabs--editing.nx-tabs--pills .nx-tabs__preview {
  border-bottom: 0;
  padding: 5px;
  border-radius: calc(var(--nx-tab-radius, 10px) + 5px);
  background: var(--nx-bar-bg, #f1f5f9);
}

.nx-tabs--editing.nx-tabs--pills .nx-tabs__preview-tab {
  border-radius: var(--nx-tab-radius, 10px);
}

.nx-tabs--editing.nx-tabs--pills .nx-tabs__preview-tab.is-active {
  background: var(--nx-active-bg, #ffffff);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}

.nx-tabs--editing.nx-tabs--segmented .nx-tabs__preview {
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--nx-bdr-color, #e2e8f0);
  border-radius: var(--nx-tab-radius, 10px);
}

.nx-tabs--editing.nx-tabs--segmented .nx-tabs__preview-tab.is-active {
  background: var(--nx-active-bg, #2563eb);
  color: var(--nx-active, #ffffff);
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE DEFAULT LOOK, PROPERLY DRESSED

   The three alternative looks added earlier only apply once an author picks
   one. The DEFAULT — the underline — is what every existing block renders and
   what a newly inserted one renders, and it was plain to the point of looking
   unfinished.

   CSS ONLY, on purpose. Making 'pills' the default would mean changing the
   attribute default in block.json, which changes what save() writes, which
   invalidates every Tabs block already published. Everything below restyles
   markup that already exists, so it reaches old and new blocks alike and can
   break nothing.
   ═══════════════════════════════════════════════════════════════════════════ */
.nx-tabs .nx-tabs__group {
  /* The rail the underline slides along. Two pixels of very light slate reads
     as structure; the 1px hairline it replaces read as a stray border. */
  border-bottom: 2px solid var(--nx-bdr-color, #e8edf3);
  padding-inline: 2px;
}

.nx-tabs .nx-tabs__label {
  position: relative;
  border-radius: 8px 8px 0 0;
  font-weight: 600;
  letter-spacing: -.01em;
  transition: color .18s ease, background-color .18s ease;

  /* A tab is a control. It should not select as text on a double-click. */
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/*
 * The underline is a ::after on the LABEL rather than a border, so it can be
 * inset from the label's padding and animate its width from the centre out. A
 * border-bottom can do neither, and a full-width border under a padded label
 * always looks like it belongs to something else.
 */
.nx-tabs .nx-tabs__label::after {
  content: '';
  position: absolute;
  inset-block-end: calc(var(--nx-underline, 3px) * -1);
  inset-inline: 8px;
  height: var(--nx-underline, 3px);
  border-radius: 999px;
  background: var(--nx-active, var(--flavor-primary, #2563eb));

  /* Scaled rather than shown: transform animates on the compositor, so the
     underline slides in without a layout pass on every hover. */
  transform: scaleX(0);
  transition: transform .2s cubic-bezier(.4, 0, .2, 1);
}

.nx-tabs .nx-tabs__label:hover {
  color: var(--nx-active, var(--flavor-primary, #2563eb));
  background: var(--flavor-bg-alt, #f8fafc);
}

.nx-tabs .nx-tabs__label:hover::after { transform: scaleX(.4); }

.nx-tabs .nx-tabs__radio:checked + .nx-tabs__label {
  background: transparent;
}

.nx-tabs .nx-tabs__radio:checked + .nx-tabs__label::after {
  transform: scaleX(1);
}

/* Keyboard focus must be visible on the LABEL, because the radio itself is
   visually hidden — without this the block is unusable without a mouse. */
.nx-tabs .nx-tabs__radio:focus-visible + .nx-tabs__label {
  outline: 2px solid var(--nx-active, var(--flavor-primary, #2563eb));
  outline-offset: 2px;
}

.nx-tabs .nx-tabs__panel {
  /* Content that starts flush against the rail reads as part of the bar. */
  padding-block-start: max(var(--nx-panel-pad, 24px), 18px);
  line-height: 1.7;
}

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

@media (prefers-reduced-motion: reduce) {
  .nx-tabs .nx-tabs__label,
  .nx-tabs .nx-tabs__label::after { transition: none; }
}

/* The alternative looks draw their own active treatment, so the sliding
   underline must not also appear inside them. */
.nx-tabs--pills .nx-tabs__label::after,
.nx-tabs--boxed .nx-tabs__label::after,
.nx-tabs--segmented .nx-tabs__label::after { display: none; }

/* ── The editor's panel appender ───────────────────────────────────────────── */
/* Ours by wrapper, so it can select its own panel before the inserter opens. */
.nx-tabs--editing .nx-tabs__panelappender {
  margin-block-start: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOLDER — the hybrid

   Asked for as "a mix of pills and boxed": the rounded, filled active tab of
   the first, sitting on the connected content panel of the second. It is the
   look most documentation sites land on, and it is the clearest of the five,
   because the active tab is BOTH a different colour and physically joined to
   the thing it reveals — two independent signals saying the same thing.
   ═══════════════════════════════════════════════════════════════════════════ */
.nx-tabs--folder .nx-tabs__group {
  gap: 4px;
  padding-inline: 4px;
  border-bottom: 2px solid var(--nx-bdr-color, #e8edf3);
  background: var(--nx-bar-bg, transparent);
}

.nx-tabs--folder .nx-tabs__group::after { display: none; }
.nx-tabs--folder .nx-tabs__label::after { display: none; }

.nx-tabs--folder .nx-tabs__label {
  border: 2px solid transparent;
  border-bottom: 0;
  border-radius: var(--nx-tab-radius, 10px) var(--nx-tab-radius, 10px) 0 0;
  margin-bottom: -2px;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.nx-tabs--folder .nx-tabs__label:hover {
  background: var(--nx-hover-bg, var(--flavor-bg-alt, #f1f5f9));
  color: var(--nx-active, var(--flavor-primary, #2563eb));
}

/*
 * The active tab is filled AND joined. Its bottom edge is painted in its own
 * fill colour so it erases the group's rule underneath, which is what makes it
 * read as continuous with the panel rather than as a box sitting above it.
 */
.nx-tabs--folder .nx-tabs__radio:checked + .nx-tabs__label {
  background: var(--nx-active-bg, var(--flavor-primary, #2563eb));
  color: var(--nx-active, #ffffff);
  border-color: var(--nx-active-border, var(--nx-active-bg, var(--flavor-primary, #2563eb)));
  border-bottom: 2px solid var(--nx-active-bg, var(--flavor-primary, #2563eb));
}

.nx-tabs--folder .nx-tabs__panel {
  border-radius: 0 0 var(--nx-tab-radius, 10px) var(--nx-tab-radius, 10px);
  background: var(--nx-panel-bg, var(--flavor-surface, #ffffff));
}

/* ── Colour reaches the other looks too ────────────────────────────────────── */
/*
 * hover and the active edge were only expressible on 'folder'. A control that
 * works in one of five designs is worse than no control, because an author
 * changes it, sees nothing, and stops trusting the panel.
 */
.nx-tabs--pills .nx-tabs__label:hover,
.nx-tabs--boxed .nx-tabs__label:hover,
.nx-tabs--segmented .nx-tabs__label:hover,
.nx-tabs .nx-tabs__label:hover {
  background: var(--nx-hover-bg, var(--flavor-bg-alt, #f8fafc));
}

.nx-tabs--boxed .nx-tabs__radio:checked + .nx-tabs__label,
.nx-tabs--segmented .nx-tabs__radio:checked + .nx-tabs__label {
  border-color: var(--nx-active-border, var(--nx-bdr-color, #e2e8f0));
}

/* The editor strip mirrors the folder look as well, so choosing it shows the
   real thing rather than a description of it. */
.nx-tabs--editing.nx-tabs--folder .nx-tabs__preview-tab.is-active {
  background: var(--nx-active-bg, #2563eb);
  color: var(--nx-active, #ffffff);
  border-radius: var(--nx-tab-radius, 10px) var(--nx-tab-radius, 10px) 0 0;
  box-shadow: none;
}