/*!
 * Section: Divider
 *
 * Scoped CSS for inc/sections/divider.php. Stub partial — the 9-color divider
 * matrix (Topic 13 PORT-WP1 semantics) and per-variant SVG / shape work land
 * during page-migration WPs (RENDER-WP5–WP11). Same-bg collapse policy is
 * surfaced via data-collapse-same-bg attribute; final cascade rules ship later.
 *
 * @package Mystwood_Studios_AB
 * @since   Topic 17 RENDER-WP1
 */

.mw-divider {
	display: block;
	width: 100%;
	height: 1px;
	background: currentColor;
	opacity: 0.18;
	margin: 0;
}

.mw-divider--rule {
	height: 1px;
	opacity: 0.18;
}

/* Future divider variants (zigzag, scallop, brushstroke, etc.) override these
 * defaults in page-migration WPs. The data-divider-color attribute carries the
 * 9-color token name and is consumed by later CSS via attribute selectors. */

/* -----------------------------------------------------------------------
 * K-World brand divider variants (Topic 17 RENDER-WP7)
 *
 * Topic 13 PORT-WP1 semantics: data-divider-color names the *outgoing* tone,
 * and the strip PAINTS THAT SAME OUTGOING TONE — so the shape carries the
 * previous section down over the next one, whose band shows through the
 * masked-out gaps.
 *
 * (Corrected at the FIX-WP9 re-run, 2026-07-31. This sentence used to read
 * "the divider strip itself paints in the *incoming* tone", which contradicted
 * both line ~91 of this file and _studio.css's identical painter block, and is
 * contradicted by the rendered output: on /k-world/ the seam declaring
 * data-divider-color="kw-sky" computes background-color rgb(143,168,220) —
 * kw-sky-surface, the band it is LEAVING. Reading it the wrong way round is
 * how a divider ends up painting the tone it is heading into, which renders as
 * an invisible strip that still consumes its overlap.)
 *
 * The same-bg-collapse policy
 * (data-collapse-same-bg="true") suppresses the strip when surrounding
 * sections share the same brand band — for K-World the only case in WP-7
 * is the consecutive kw-sky sections on /coloring-books and /book-product.
 *
 * Topic 25 KLEI-WP7 Group D: torn-paper + overlap conversion.
 * The base rule gains SVG mask plumbing so K-World dividers render as
 * jagged ripped-paper edges instead of solid colour bars — mirroring the
 * already-shipped studio-tier mechanism in _studio.css (lines ~255-366).
 * The bright kw-* palette is KEPT: the per-tone painters below become the
 * mask fill colour (same SVG path, same shape, different fill per token).
 *
 * ⚠️ ZIGZAG IS RETIRED. It is used by NO page. Topic 33 FIX-WP28 converted
 * /k-world/'s four band seams to torn-paper-down and deleted its fifth, so
 * every divider on the site is now torn-paper (plus the one `rule` variant on
 * /coloring-books/). There is no longer a two-shape K-World tier.
 *
 * This block previously said the opposite, and the reversal is worth stating
 * so the history reads straight. FIX-WP24 Task B (2026-07-31) adopted zigzag
 * on the owner's explicit 2026-07-30 direction, and this note instructed a
 * future sweep that found zigzag alive to "read this note and stop, rather
 * than filing it as a regression". The owner then saw it rendered and reversed
 * the call on 2026-08-01 ("Drop the zig zag"). That is a legitimate reversal,
 * not drift — but a sweep reading the OLD text against the NEW code would have
 * been told to protect a shape nothing uses. Rewriting this in the same commit
 * as the code is the whole point: the FIX-WP9 re-run's central lesson was that
 * a wrong-way-round comment is how a defect recurs.
 *
 * The `.mw-divider--brand-k-world.mw-divider--zigzag-*` rules and their two
 * SVGs are KEPT but DORMANT. They are left deliberately rather than deleted:
 * the shape was owner-chosen once and may be again, and the mask plumbing is
 * non-obvious enough to be worth preserving. Dead-but-documented is fine;
 * dead-and-unexplained is not.
 *
 * Also standing and site-wide, from the same ruling: NO PAGE MAY END ON A
 * STYLED DIVIDER. "For the footer yes there should be never a styled divider
 * on the footer." FIX-WP28 removed the three that existed (/k-world/,
 * /coloring-book-product/, /bedtime-stories/). Do not add one back.
 *
 * Why overlap is required: the page <body> background is a fixed dark tone
 * (#040420, from critical.css). A divider paints in its outgoing tone and
 * relies on its masked-out gaps revealing the section behind it — but in
 * normal flow those gaps reveal the dark <body>, so a bright-toned shape
 * reads as a dark-on-bright silhouette with dark holes. The overlap modifier
 * lifts the strip with position + z-index and applies a negative margin so
 * the adjacent section slides up behind the shape; the gaps then reveal that
 * bright band, and the jagged edge pops cleanly against both neighbours.
 * ----------------------------------------------------------------------- */
.mw-divider--brand-k-world {
	height: clamp(28px, 4vw, 56px);
	opacity: 1;
	background: transparent;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center top;
	        mask-position: center top;
	-webkit-mask-size: 100% 100%;
	        mask-size: 100% 100%;
	/* Read the near-black divider SVG by its ALPHA, not luminance. Chromium's
	 * match-source default already resolves to alpha for a url() image mask, but
	 * WebKit/Safari can default to luminance — which reads the #040420 shape as
	 * ~0 and collapses the seam to a flat colour bar (the "no masking layer"
	 * regression). Explicit alpha mirrors the Claude Design divider
	 * (.mw-divider--shape::before, css/dividers.css) and keeps the torn edge on
	 * every engine. */
	-webkit-mask-mode: alpha;
	        mask-mode: alpha;
}

/* Torn-paper-down mask (downward seam / mid-content). */
.mw-divider--brand-k-world.mw-divider--torn-paper-down {
	-webkit-mask-image: url("../../img/decorative/divider-torn-paper-down.svg");
	        mask-image: url("../../img/decorative/divider-torn-paper-down.svg");
}

/* Torn-paper-up mask (upward seam / footer-adjacent). */
.mw-divider--brand-k-world.mw-divider--torn-paper-up {
	-webkit-mask-image: url("../../img/decorative/divider-torn-paper-up.svg");
	        mask-image: url("../../img/decorative/divider-torn-paper-up.svg");
}

/* Zigzag masks (Topic 33 FIX-WP24 Task B) — the owner-chosen K-World shape,
 * see the divergence note in this block's header. No new asset: both SVGs
 * already shipped with the design bundle and are what the studio tier uses
 * (_studio.css:333-341).
 *
 * Intrinsic SVG height is irrelevant to rendering — `preserveAspectRatio
 * ="none"` plus the base rule's `mask-size: 100% 100%` stretches either
 * shape onto the clamp(28px,4vw,56px) strip, exactly as torn-paper does, and
 * the overlap margin below mirrors that clamp rather than the SVG.
 *
 * BUT the two files are not proportionally matched, and the pair is shipped
 * with that recorded rather than silently: zigzag-down's teeth cut from y=60
 * to y=30 of a 60px box (depth = 50% of the strip), zigzag-up's from y=40 to
 * y=10 of a 40px box (depth = 75%). Rendered at one strip height they read as
 * different tooth depths.
 *
 * MOOT as of FIX-WP28 — neither is used by any page now. The finding is kept
 * rather than deleted because it is still true of the SVGs on disk: if zigzag
 * is ever revived, the first page to pair -down with -up must re-cut one file
 * rather than patch the mismatch in CSS. */
.mw-divider--brand-k-world.mw-divider--zigzag-down {
	-webkit-mask-image: url("../../img/decorative/divider-zigzag-down.svg");
	        mask-image: url("../../img/decorative/divider-zigzag-down.svg");
}

.mw-divider--brand-k-world.mw-divider--zigzag-up {
	-webkit-mask-image: url("../../img/decorative/divider-zigzag-up.svg");
	        mask-image: url("../../img/decorative/divider-zigzag-up.svg");
}

/* Per-tone painters — these become the mask fill colour.
 * A divider paints the OUTGOING tone (Topic 13 PORT-WP1 semantics), so kw-sky
 * and kw-gold here resolve to the Topic 33 FIX-WP6 surface siblings — the same
 * field the band it is leaving now paints in. Keep in lockstep with the band
 * painters (sections/_body.css etc.); a mismatch is the most visible seam bug
 * this system can produce.
 *
 * VERIFIED — Topic 36 CORR-WP1 Item 2. `--kw-sky-surface` / `--kw-gold-surface`
 * flipped to white, so any surviving `rule` or `flourish` divider painting
 * from these two tokens would go white-on-white against a same-tone
 * neighbour. Grepped every live `color => 'kw-sky'|'kw-gold'` divider call
 * sitewide: every one of them is `torn-paper-down` or `torn-paper-up` — none
 * is `rule` or `flourish`. No white-on-white seam exists today. `torn-paper-
 * down` is Item 4's territory (a later pass in this topic removes those
 * calls entirely); `torn-paper-up` survives but is a shaped mask, not a flat
 * bar, so it still reads as a seam against an adjacent non-white band. */
.mw-divider--brand-k-world[data-divider-color="kw-sky"]          { background-color: var(--kw-sky-surface); }
.mw-divider--brand-k-world[data-divider-color="kw-gold"]         { background-color: var(--kw-gold-surface); }
.mw-divider--brand-k-world[data-divider-color="kw-cream"]        { background-color: var(--kw-cream); }
.mw-divider--brand-k-world[data-divider-color="kw-sunset"]       { background-color: var(--kw-sunset); }
.mw-divider--brand-k-world[data-divider-color="kw-castle-stone"] { background-color: var(--kw-castle-stone); }

/* Topic 13 same-bg divider-collapse policy — load-bearing. */
.mw-divider--brand-k-world[data-collapse-same-bg="true"] {
	display: none;
}

/* -----------------------------------------------------------------------
 * K-World overlap modifier (Topic 25 KLEI-WP7 Group D) — mirrors the
 * studio-tier overlap block in _studio.css (lines ~348-366).
 *
 * All overlap selectors are BRAND-SCOPED (.mw-divider--brand-k-world
 * is always present) — no bare .mw-divider--overlap selector here, so
 * these rules cannot bleed into studio-tier or lore-tier dividers.
 * ----------------------------------------------------------------------- */
.mw-divider--brand-k-world.mw-divider--overlap {
	position: relative;
	z-index: 2;
}

.mw-divider--brand-k-world.mw-divider--overlap.mw-divider--torn-paper-down,
.mw-divider--brand-k-world.mw-divider--overlap.mw-divider--zigzag-down {
	margin-block-end: calc(-1 * clamp(28px, 4vw, 56px));
}

.mw-divider--brand-k-world.mw-divider--overlap.mw-divider--torn-paper-up,
.mw-divider--brand-k-world.mw-divider--overlap.mw-divider--zigzag-up {
	margin-block-start: calc(-1 * clamp(28px, 4vw, 56px));
}

/* -----------------------------------------------------------------------
 * Lore brand divider variants (Topic 17 RENDER-WP8)
 *
 * Topic 14 manuscript dividers — thin gilt rule between same-tier
 * parchment/vellum sections, slightly heavier between content blocks.
 * Same-bg-collapse policy preserved (e.g. consecutive lore-parchment
 * sections in /kaeros-cosmology that pass collapse_same_bg=true).
 *
 * Three variants reused from Topic 14: rule (thin gilt line),
 * flourish (centered ornament — emulated as a small gilt diamond),
 * deckle (irregular torn-parchment edge — emulated as zig-zag).
 * Variants are stylistic; if a caller passes an unknown variant,
 * the base `.mw-divider` rule (currentColor 1px) renders as a fallback.
 * ----------------------------------------------------------------------- */
.mw-divider--brand-lore {
	height: clamp(1rem, 2.5vw, 1.75rem);
	opacity: 1;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mw-divider--brand-lore[data-divider-color="lore-parchment"] { background-color: var(--lore-parchment); }
.mw-divider--brand-lore[data-divider-color="lore-vellum"]    { background-color: var(--lore-vellum); }

/* Rule variant — thin gilt centerline on the carrier band colour. */
.mw-divider--brand-lore.mw-divider--rule::before {
	content: "";
	display: block;
	width: min(80%, 36rem);
	height: 1px;
	background-color: var(--lore-gilt);
	opacity: 0.55;
}

/* Flourish variant — small gilt diamond as a centered ornament. */
.mw-divider--brand-lore.mw-divider--flourish {
	height: clamp(1.5rem, 3vw, 2.5rem);
}

.mw-divider--brand-lore.mw-divider--flourish::before {
	content: "";
	display: block;
	width: 0.5rem;
	height: 0.5rem;
	background-color: var(--lore-gilt);
	transform: rotate(45deg);
	opacity: 0.7;
	box-shadow: -1.25rem 0 0 var(--lore-gilt), 1.25rem 0 0 var(--lore-gilt);
}

/* Deckle variant — irregular torn-parchment edge feel via repeating gradient. */
.mw-divider--brand-lore.mw-divider--deckle {
	height: clamp(0.75rem, 2vw, 1.25rem);
}

.mw-divider--brand-lore.mw-divider--deckle::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(
		135deg,
		transparent 0,
		transparent 0.5rem,
		rgba(168, 125, 50, 0.35) 0.5rem,
		rgba(168, 125, 50, 0.35) 0.625rem
	);
}

/* Topic 13 same-bg divider-collapse policy — preserved for lore tier. */
.mw-divider--brand-lore[data-collapse-same-bg="true"] {
	display: none;
}