.nx-business-hours {
  box-sizing: border-box;
  padding-block: var(--nx-pad-t, 0px) var(--nx-pad-b, 0px);
  padding-inline: var(--nx-pad-l, 0px) var(--nx-pad-r, 0px);
  border-radius: var(--nx-radius, 12px);
  border-width: var(--nx-border, 0px);
  border-style: var(--nx-border-style, solid);
  border-color: var(--nx-bdr-color, #e2e8f0);
  box-shadow: var(--nx-shadow, none);
  background: var(--nx-bg, transparent);
  color: var(--nx-fg, inherit);
}

.nx-business-hours .nx-bh__row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .55rem 0; border-bottom: 1px solid var(--flavor-border, #e2e8f0);
  font-size: .9375rem;
}
.nx-business-hours .nx-bh__row:last-child { border-bottom: 0; }
.nx-business-hours .nx-bh__day { font-weight: 600; }
.nx-business-hours .nx-bh__hours { color: var(--flavor-text-muted, #64748b); font-variant-numeric: tabular-nums; }
.nx-business-hours .nx-bh__row.is-closed .nx-bh__hours { color: var(--flavor-danger, #dc2626); }

/* ── Configurable colours + optional separators ───────────────────────────── */
.nx-business-hours .nx-bh__day { color: var(--nx-day-color, inherit); }
.nx-business-hours .nx-bh__hours { color: var(--nx-hours-color, var(--flavor-text-muted, #64748b)); }
.nx-business-hours .nx-bh__row.is-closed .nx-bh__hours {
  color: var(--nx-closed-color, var(--flavor-danger, #dc2626));
  font-weight: 600;
}
.nx-business-hours.no-sep .nx-bh__row { border-bottom: 0; }
.nx-business-hours .nx-bh__meta { display: flex; flex-direction: column; align-items: flex-end; }
.nx-business-hours .nx-bh__note { font-size: .6875rem; color: var(--flavor-text-muted, #64748b); }

/* ─────────────────────────────────────────────────────────────────────────────
   EDITOR ROW TOOLS + CLOSED STATE
   The row itself is already styled above; these are the pieces the inline
   repeater adds. Without them the tool buttons stretched the row into the
   tall dark boxes that were reported.
   ───────────────────────────────────────────────────────────────────────────── */
.nx-business-hours .nx-bh__hours.is-closed-text {
  color: var(--nx-closed-color, var(--flavor-danger, #dc2626));
  font-weight: 600;
}

.nx-business-hours .nx-bh__row.is-today {
  background: var(--nx-accent, rgba(37, 99, 235, .08));
  border-radius: 6px;
  padding-inline: 8px;
}

/* ── Editor only ──────────────────────────────────────────────────────────── */
.nx-bh--editing .nx-bh__row {
  align-items: center;
  /* The row is a 3-column grid so the tool cluster cannot push the day and
     hours columns out of alignment from one row to the next. */
  display: grid !important;
  grid-template-columns: minmax(80px, 1fr) minmax(90px, 1fr) auto;
  gap: 10px;
}

.nx-bh--editing .nx-bh__tools {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Presets are compact chips, not full-size buttons — five of them at default
   size is what made the row grow tall. */
.nx-bh--editing .nx-bh__preset {
  font-size: 10px !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 2px 6px !important;
  line-height: 1.5 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 4px !important;
  color: #475569 !important;
}
.nx-bh--editing .nx-bh__preset:hover {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #fff !important;
}

.nx-bh--editing .nx-bh__empty {
  padding: 18px;
  text-align: center;
  color: #64748b;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
}

/* Inspector helper text (sidebar only, never rendered on the front end). */
.nx-hint {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT-SHIFT LOCK
   ───────────────────────────────────────────────────────────────────────────
   Reported symptom: the block grew taller after the page settled and its rows
   bled past the container edge.

   Cause: the block inherits whatever display/height the surrounding theme
   layout imposes. Inside a flex or grid parent it becomes a flex/grid ITEM, so
   `align-items: stretch` stretches it to the tallest sibling and a percentage
   height resolves against a container that is still being measured. The height
   therefore changes between first paint and layout settle — a visible jump.

   Pinning display to block takes it out of that negotiation, `height: auto`
   makes it size to its own rows, `fit-content` stops any inherited min-height
   from padding it out, and `overflow: hidden` clips the bleed instead of
   letting a long hours string widen the box.
   ═══════════════════════════════════════════════════════════════════════════ */
.nx-business-hours {
  display: block !important;
  height: auto !important;
  min-height: fit-content !important;
  max-height: none !important;
  overflow: hidden !important;
  contain: layout;
}

/* Rows must keep their own flex layout — the lock above applies to the
   container only, not to what it holds. */
.nx-business-hours .nx-bh__row {
  display: flex !important;
  height: auto !important;
  min-height: 0 !important;
  box-sizing: border-box;
  min-width: 0;
  padding-block: var(--nx-row-pad, 9px);
}

/* Thin hairline dividers. A full-weight border between every row reads as a
   table grid; at 1px in the lightest slate it reads as rhythm. */
.nx-business-hours:not(.no-sep) .nx-bh__row {
  border-bottom: 1px solid var(--nx-divider-color, #f1f5f9);
}
.nx-business-hours .nx-bh__row:last-child { border-bottom: 0 !important; }

/* Long free-text hours wrap instead of pushing the row wider than the card. */
.nx-business-hours .nx-bh__day,
.nx-business-hours .nx-bh__hours {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ── Editor: high-visibility control frames ───────────────────────────────── */
/* The row tools sat unframed on a white canvas and were easy to miss entirely.
   A boxed cluster makes it obvious they belong to the row beside them. */
.nx-bh--editing .nx-bh__tools {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  padding: 2px 4px;
  gap: 2px;
}
.nx-bh--editing .nx-bh__row:hover .nx-bh__tools { border-color: #2563eb; }

.nx-bh--editing .nx-bh__preset {
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #334155 !important;
}
.nx-bh--editing .nx-bh__preset:hover {
  border-color: #2563eb !important;
  color: #2563eb !important;
}

/* The editor must not inherit the front-end clip, or a tool cluster that
   overflows its row would be silently cut off mid-edit. */
.nx-bh--editing { overflow: visible !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   EDITOR — THE ROW TOOLS WERE INVISIBLE
   ───────────────────────────────────────────────────────────────────────────
   Same defect as the accordion: `.nx-bh__tools` was `opacity: 0` until the row
   was hovered, so the closed/reorder/delete controls could only be found by
   guessing. The framing added earlier could not help while the whole cluster
   was still transparent — this is the rule that actually reveals them.
   ═══════════════════════════════════════════════════════════════════════════ */
.nx-bh--editing .nx-bh__tools {
  opacity: 1 !important;
  display: inline-flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

/* ── Inner padding, controlled from the inspector ─────────────────────────── */
/* The requested single-knob variable. It resolves against the four-sided
   values the padding sliders already write, so the sliders keep working and
   `--nx-bh-pad` acts as the fallback when none has been set. */
.nx-business-hours {
  padding-block: var(--nx-pad-t, var(--nx-bh-pad, 16px))
                 var(--nx-pad-b, var(--nx-bh-pad, 16px)) !important;
  padding-inline: var(--nx-pad-l, var(--nx-bh-pad, 16px))
                  var(--nx-pad-r, var(--nx-bh-pad, 16px)) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   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 CARD

   Everything here is presentation on markup that already exists — no new class
   is emitted and no saved block changes, so none of it can invalidate a post.

   The list was structurally right and visually flat: a stack of rows with a
   hairline between them and nothing telling the eye where a day ends and its
   hours begin. Three cheap changes fix that. The day and the hours are pushed
   to opposite edges with a dotted leader between them, the way a printed
   opening-hours board does it; the hours column is tabular so the colons line
   up down the block; and a closed day gets a small marker instead of relying
   on red text alone, which a colour-blind reader cannot see.
   ═══════════════════════════════════════════════════════════════════════════ */
.nx-business-hours .nx-bh__row {
  align-items: baseline;
  gap: .75rem;
}

/*
 * The leader. A repeating dotted background on a flexible spacer, so it grows
 * and shrinks with the row instead of being a fixed run of periods that wraps
 * awkwardly on a phone.
 */
.nx-business-hours .nx-bh__day::after {
  content: '';
  display: inline-block;
  width: 100%;
  margin-inline-start: .5rem;
  border-bottom: 1px dotted var(--nx-divider-color, #cbd5e1);
  opacity: .55;

  /* Sits on the text baseline rather than the box bottom. */
  transform: translateY(-.25em);
}

.nx-business-hours .nx-bh__day {
  display: flex;
  align-items: baseline;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
}

.nx-business-hours .nx-bh__hours {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/*
 * A closed day, marked by shape as well as by colour. Red text alone is
 * invisible to a reader with deuteranopia, and "closed" is the single most
 * consequential thing this block says.
 */
.nx-business-hours .nx-bh__row.is-closed .nx-bh__hours,
.nx-business-hours .nx-bh__hours.is-closed-text {
  display: inline-flex;
  align-items: center;
  gap: .4em;
}

.nx-business-hours .nx-bh__row.is-closed .nx-bh__hours::before,
.nx-business-hours .nx-bh__hours.is-closed-text::before {
  content: '';
  width: .5em;
  height: .5em;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

/* Today's row, when the author has asked for it to be marked. */
.nx-business-hours .nx-bh__row.is-today {
  font-weight: 600;
}

.nx-business-hours .nx-bh__row.is-today .nx-bh__day::after { opacity: .3; }

/* The leader is decoration; it must not survive into a printout as a row of
   dots across an otherwise clean page. */
@media print {
  .nx-business-hours .nx-bh__day::after { display: none; }
}

/* The editor lays the row out as a grid so the tool cluster stays aligned, and
   a leader stretching under that cluster would be nonsense. */
.nx-bh--editing .nx-bh__day::after { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   THREE MORE LOOKS

   Reported as "correct but boring", which was fair: hairlines and a dotted
   leader is a typographic solution and it gives colour nothing to do.

   All three below are built from the SAME markup and the SAME custom
   properties, and each is selected by a class the block only emits when an
   author picks it — so nothing already published changes.

   The open/closed distinction survives every one of them. It is the single
   most consequential thing this block says, and it is never carried by colour
   alone: the dot stays, because red text is invisible to a reader with
   deuteranopia.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Striped ────────────────────────────────────────────────────────────── */
/*
 * Alternate rows tinted. The oldest trick in table design and still the most
 * effective for a long list, because the eye tracks a band across to the right
 * column without needing a rule to follow. The leader is dropped here — with a
 * band doing the tracking it is redundant, and two devices for one job is
 * clutter.
 */
.nx-business-hours.nx-bh--striped .nx-bh__row:nth-child(odd) {
  background: var(--nx-stripe-bg, var(--flavor-bg-alt, #f8fafc));
}

.nx-business-hours.nx-bh--striped .nx-bh__row {
  border-bottom: 0 !important;
  padding-inline: 10px;
  border-radius: 6px;
}

.nx-business-hours.nx-bh--striped .nx-bh__day::after { display: none; }

/* ── Cards ──────────────────────────────────────────────────────────────── */
/*
 * Every day is its own tile. Reads best when there are few rows and each
 * carries different hours; a seven-row identical week looks busy this way,
 * which is why it is a choice rather than the default.
 */
.nx-business-hours.nx-bh--cards {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
}

.nx-business-hours.nx-bh--cards .nx-bh__row {
  border-bottom: 0 !important;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--nx-stripe-bg, var(--flavor-bg-alt, #f8fafc));
  border: 1px solid var(--nx-divider-color, #e2e8f0);
}

.nx-business-hours.nx-bh--cards .nx-bh__day::after { display: none; }

.nx-business-hours.nx-bh--cards .nx-bh__row.is-closed {
  background: transparent;
  border-style: dashed;
}

/* ── Panel ──────────────────────────────────────────────────────────────── */
/*
 * A framed board with a coloured cap, the way a shop door sign is laid out.
 * The cap is a ::before on the container rather than an extra element, so no
 * markup changes and nothing can be invalidated.
 */
.nx-business-hours.nx-bh--panel {
  position: relative;
  padding-block-start: calc(var(--nx-pad-t, 16px) + 34px) !important;
  border: 1px solid var(--nx-divider-color, #e2e8f0);
  border-radius: var(--nx-radius, 12px);
  overflow: hidden !important;
}

.nx-business-hours.nx-bh--panel::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 26px;
  background: var(--nx-head-bg, var(--nx-accent, var(--flavor-primary, #2563eb)));
}

.nx-business-hours.nx-bh--panel .nx-bh__row:last-child { border-bottom: 0 !important; }

/* ── Colour, across every look ─────────────────────────────────────────────── */
/*
 * An explicit colour for open hours. Without it the hours column is muted
 * grey while "closed" is red, so the ONLY coloured thing on the board is the
 * bad news — which reads, at a glance, as a warning notice.
 */
.nx-business-hours .nx-bh__row:not(.is-closed) .nx-bh__hours {
  color: var(--nx-open-color, var(--nx-hours-color, var(--flavor-text-muted, #64748b)));
  font-weight: 500;
}

/* Today, when the author asks for it: a filled chip rather than a faint tint,
   because the whole point is that it is findable without reading. */
.nx-business-hours .nx-bh__row.is-today {
  background: var(--nx-accent, rgba(37, 99, 235, .1));
  border-radius: 8px;
  padding-inline: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE DEFAULT LOOK, WITH COLOUR

   Same constraint as the tabs: making 'striped' or 'panel' the default would
   change what save() writes and invalidate every published block. So the
   DEFAULT gets the upgrade instead, in CSS, reaching old and new blocks alike.

   The board had exactly one coloured thing on it — "closed", in red. A notice
   whose only colour is the bad news reads as a warning. Colour is spread
   across the whole thing now: a tinted card, a coloured accent edge, open
   hours in a confident dark slate, and closed in a muted red rather than a
   shouting one.
   ═══════════════════════════════════════════════════════════════════════════ */
.nx-business-hours {
  /* A surface, not a bare region of the article. */
  background: var(--nx-bg, var(--flavor-surface, #ffffff));
  border-radius: var(--nx-radius, 12px);

  /* The accent edge. Uses the accent the author already sets for "today", so
     one colour choice dresses the whole block. */
  border-inline-start: 3px solid var(--nx-accent, var(--flavor-primary, #2563eb));
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .05);
}

.nx-business-hours .nx-bh__day {
  color: var(--nx-day-color, var(--flavor-text, #0f172a));
  font-weight: 600;
  letter-spacing: -.01em;
}

/* Open hours: dark and settled, so the eye reads them as the answer. */
.nx-business-hours .nx-bh__row:not(.is-closed) .nx-bh__hours {
  color: var(--nx-open-color, var(--flavor-text, #1e293b));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Closed: still unmistakable, but a muted brick rather than an alarm red, and
   still carrying the dot so it does not depend on colour vision at all. */
.nx-business-hours .nx-bh__row.is-closed .nx-bh__hours,
.nx-business-hours .nx-bh__hours.is-closed-text {
  color: var(--nx-closed-color, #b4404a);
  font-weight: 600;
}

.nx-business-hours .nx-bh__row {
  transition: background-color .15s ease;
  border-radius: 6px;
}

/* A hover band, so a finger or a cursor can track one day across the row. */
@media (hover: hover) and (pointer: fine) {
  .nx-business-hours .nx-bh__row:hover {
    background: var(--nx-stripe-bg, var(--flavor-bg-alt, #f8fafc));
  }
  .nx-business-hours .nx-bh__row:hover .nx-bh__day::after { opacity: .8; }
}

/* Today: a filled chip in the accent colour, findable without reading. */
.nx-business-hours .nx-bh__row.is-today {
  background: color-mix(in srgb,
    var(--nx-accent, var(--flavor-primary, #2563eb)) 12%, transparent);
  box-shadow: inset 2px 0 0 var(--nx-accent, var(--flavor-primary, #2563eb));
}

/* color-mix is recent. The fallback keeps the highlight visible everywhere. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .nx-business-hours .nx-bh__row.is-today {
    background: var(--nx-stripe-bg, #eff6ff);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nx-business-hours .nx-bh__row { transition: none; }
}

/* The editor must not inherit the accent edge twice over its own framing. */
.nx-bh--editing { border-inline-start-width: 0; box-shadow: none; }