/* ==========================================================================
   Mouldshop section divider — a horizontal rule with a centred label.
   M4 / TASK-0057 built it. TASK-0062 took it OUT OF THE CONTAINER and matched it to live.

   WHAT THIS REPLACES. The rule-with-label on live is authored as an empty paragraph
   carrying raw HTML: per instance, unversioned, unstyleable centrally and invisible to
   any check. It is now two fields on a row, and this file is the whole of its appearance.

   ── MEASURED OFF LIVE mouldshop.co.uk, NOT DESIGNED ──────────────────────────────────
   `div.bon-text-divider-header` on the live home page, read through the CSSOM at 1440
   and at 390. Every number below is that measurement, and where we differ from live it
   is stated rather than quietly adjusted:

     rule          border-bottom: 1px solid rgba(10, 41, 121, .35)   on ::before/::after
                   NOT a background — live draws it as a bottom border on a 1px-tall box.
     rule colour   rgba(10, 41, 121, .35) — EXACTLY our --ms-rule token, independently.
     label gap     margin-right:10px on ::before, margin-left:10px on ::after  -> 10px.
     tracking      letter-spacing is `normal`. Live's wide tracking is LITERAL SPACES in
                   the label text: the string is "N E W S", not "NEWS". Measured advance
                   56.08px spaced vs 44.14px tight at Roboto 16/700 = 3.98px per gap
                   = 0.249em. We reproduce it in CSS instead (see below).
     extent        left 0 -> right 1425 at a 1440 viewport (1425 = viewport - scrollbar);
                   left 0 -> right 375 at 390. Full-bleed at both, no gutter, no inset.
     font          Roboto 16px / 700, colour rgb(9,43,116), text-transform: none.

   ── WHERE WE DELIBERATELY DIFFER ─────────────────────────────────────────────────────
   1. TRACKING IS CSS, NOT TYPED SPACES. Live achieves it by typing "N E W S" into the
      label. Reproducing that would put presentation into the content field and make every
      label fragile to a missing space, so `letter-spacing: .25em` (live's measured
      0.249em per gap) does it here. The author types NEWS and gets N E W S.
   2. COLOUR IS SCHEME-DERIVED, NOT FIXED. Live hardcodes rgb(9,43,116). Ours reads
      --dw-color-foreground off the row's <section>, so the same label is legible on a
      navy band and on a grey one without a variant class. On a light row it resolves to
      the same navy live uses; on a dark row it lightens, which live has no case for.
   ────────────────────────────────────────────────────────────────────────────────────

   EVERY COLOUR COMES FROM THE ACTIVE COLOUR SCHEME. No hex anywhere in this file, and
   that is a packet halt-bar rather than a preference. The divider sits inside the row's
   <section>, which carries `data-dw-colorscheme`, so the tokens resolve to whatever band
   the row is on. That is also why TASK-0062 moved the divider out of the CONTAINER but
   kept it inside the SECTION — the section is what carries the scheme.

   MECHANISM: one flex line, two pseudo-element rules, label between them. Not a
   background-gradient trick and not a `border-top` with a negatively-offset label on an
   opaque background — both of those need to know the band's colour in order to punch the
   label out of the rule, and the second breaks outright the moment the row carries a
   background IMAGE, which the section row allows. Two independent rules that simply stop
   either side of the label need to know nothing.

   THERE IS NO "HIDDEN" STATE HERE ON PURPOSE. The template emits nothing when the
   divider is off or the label empty, so this file has no `display:none` rule and cannot
   be made to hide a divider that was rendered. If a divider is in the DOM, it is meant
   to be seen.
   ========================================================================== */

.ms-divider {
  display: flex;
  align-items: center;

  /* FULL BLEED, AND IT NEEDS NO NEGATIVE MARGIN TRICK. The element is emitted outside
     `[data-swift-container]` and directly inside the row's <section>, which vendor Swift
     leaves unpadded and full width — so `width:100%` already reaches both viewport edges.
     The classic `margin-left: calc(50% - 50vw)` full-bleed hack is NOT used, deliberately:
     it is what introduces a horizontal scrollbar when an ancestor turns out to be padded
     after all, and the packet's halt-bar forbids editing <section> or any ancestor to make
     bleeding work. If this ever stops reaching the edges, the cause is an ancestor that
     gained padding — fix that, do not reach for viewport units here. */
  width: 100%;

  /* Fixed, not author-editable — item 3. The row's Top/Bottom spacing settings govern the
     COLUMNS and must not move the divider; they apply to the container, which the divider
     is no longer inside. */
  padding-top: 3rem;
  padding-bottom: 3rem;   /* = top (TASK-0111, operator 2026-09-24; was 1rem) */

  /* Live: 10px of clear space either side of the label, as margins on its two rules.
     NOTE, because it contradicts the packet's read of the screenshots: live's gap is
     NARROWER than what TASK-0057 shipped (16px), not wider. Measured, not eyeballed, and
     shipped at live's value per the instruction to match. */
  gap: 10px;

  /* The label is the section's heading in weight, not in markup — the row's own content
     supplies the real heading level, and an <h*> here would put a second one on the page. */
  /* TASK-0063 item 6: Roboto (body), weight 100, 1.25rem. Tracking stays at TASK-0062's
     measured .25em on the label itself.
     TWO THINGS FLAGGED RATHER THAN ABSORBED, both in the packet and both shipped as asked:
       · the divider was named a Montserrat surface earlier in the same exchange and then
         specified as Roboto 100 -- built to the explicit later instruction;
       · Roboto 100 is THIN. Live Mouldshop's label is heavy and dark. The contrast ratio
         against each scheme is measured and reported in the WORKLOG; no heavier weight was
         substituted. */
  font-family: var(--ms-font-body, inherit);
  font-size: 1.25rem;
  font-weight: 100;
  text-transform: uppercase;
  color: var(--dw-color-foreground, currentColor);
}

/* The two halves of the rule. `flex: 1` on both keeps the label centred when it is short
   and lets it take the room it needs when it is long, without a max-width guess.
   `border-bottom` rather than `background` mirrors live exactly — live's ::before is a
   1px-tall box with a transparent background and a 1px solid bottom border. */
.ms-divider::before,
.ms-divider::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  border-bottom: 1px solid rgba(var(--dw-color-foreground-rgb, 0, 0, 0), .35);
}

.ms-divider__label {
  flex: 0 1 auto;
  /* min-width:0 lets a long label wrap instead of forcing the row wider than its container,
     which is the horizontal-overflow rule this project holds site-wide. */
  min-width: 0;
  text-align: center;

  /* Live's measured 0.249em per inter-letter gap, achieved there with typed spaces. */
  letter-spacing: .25em;

  /* NO TRAILING-ADVANCE CANCEL, AND THE FIRST VERSION HAD ONE. The usual complaint about CSS
     letter-spacing is that it adds its advance after EVERY character including the last, so a
     centred label drifts left by half a step; the usual remedy is a negative margin-right of
     one step. Neither applies here, and the remedy actively broke it. This label is a
     shrink-to-fit flex item, so its box hugs the ink and flex centres the box — measured, at
     the same letter-spacing, by moving the label's ink relative to the divider:

         margin-right: 0        ink 685 / 685     <- centred
         margin-right: -.125em  ink 686 / 684
         margin-right: -.25em   ink 686 / 683     <- the "fix", 3px off centre
         margin-right: -.5em    ink 688 / 682

     So the cancel was the cause of the asymmetry, not the cure for it. Do not reintroduce it;
     `divider.mjs` measures the inked extent with a Range and would fail again. */
}

/* Phones: full bleed and the same fixed padding — the operator's ruling is no inset at any
   width, taken from live, which measures left 0 / right 375 at a 390 viewport. Only the
   type tightens, so a two-word label still holds one line. */
@media (max-width: 575.98px) {
  .ms-divider {
    gap: 8px;
    font-size: .75rem;
  }

  .ms-divider__label {
    letter-spacing: .2em;
  }
}