/*
 * lwl-lesson — Phase 3g-0 chrome + theme bindings
 *
 *   0.1.0 — body wrapper
 *   0.2.0 — events (no CSS change)
 *   0.3.0 — server-side chrome (header + footer prev/next)
 *   0.4.0 — data-style + data-mood theme bindings (THIS slice)
 *
 * Token scopes:
 *   - .lwl-lesson-body / .lwl-lesson-chrome declare the design-spec tokens
 *     (--lwl-paper-warm-1, --lwl-sepia-deep, --lwl-bronze-line, …) locally
 *     because they don't exist globally yet — verified 2026-05-04 against
 *     staging mirror. lwl-path.css uses its own --lwl-path-* namespace, no
 *     conflict.
 *   - data-mood="day|dusk|night" rebinds the local cascade vars (--bg,
 *     --paper, --paper-raised, --ink, --ink-strong, --hairline, --accent,
 *     --accent-glow, --shadow). Chrome elements consume those cascade vars
 *     so the same chrome HTML themes correctly across moods.
 *   - data-style="welcome|grammar_dojo|atelier|field_film" applies subtle
 *     accent shifts (e.g. grammar_dojo nudges accent toward gold).
 *
 * Future sub-phases:
 *   - 3g-0.5 → micro-interactions (mark-complete pill, vocab hover, audio,
 *             video) and ornament SVGs (sumi-e divider, hearth, quill, etc.)
 *   - Promote the design-spec tokens to a global stylesheet when other
 *     plugins start consuming them (current scope is intentionally narrow).
 */

/* ==========================================================================
   1. Design-spec token declarations (locally scoped to lesson surfaces)
   ========================================================================== */

.lwl-lesson-body,
.lwl-lesson-chrome {
	/* Paper / cream — Day palette (LWL_DESIGN_SYSTEM_SPEC §3.2). */
	--lwl-paper-warm-1: #fbf7ec;
	--lwl-paper-warm-2: #fbf2dc;
	--lwl-cream:        #fff7ec;
	--lwl-cream-2:      #faeed3;

	/* Aged-paper / Dusk palette (§3.3). */
	--lwl-paper-aged:        #f0e1bf;
	--lwl-paper-aged-ink:    #4d3a18;
	--lwl-paper-aged-muted:  #6b5a3f;

	/* Inks — sepia family. */
	--lwl-sepia-deep: #3a2814;
	--lwl-sepia-mid:  #5a4326;
	--lwl-sepia-soft: #8a6f4a;

	/* Hairlines + accents. */
	--lwl-bronze-line:  rgba(106, 63, 26, 0.22);
	--lwl-bronze-line-strong: rgba(106, 63, 26, 0.40);
	--lwl-terracotta:   #b15a2a;
	--lwl-ember-glow:   0 0 14px rgba(177, 90, 42, 0.28);
	--lwl-gold:         #c08e3c;
	--lwl-gold-soft:    rgba(192, 142, 60, 0.40);
	--lwl-icon-glow:    0 0 14px rgba(192, 142, 60, 0.32);
	--lwl-emerald:      #2f8a6a;

	/* Night palette (§3.4). */
	--lwl-night:    #050a18;
	--lwl-panel:    #0d1428;
	--lwl-panel-2:  #11183a;
	--lwl-mist-1:   #e8e6dd;
	--lwl-mist-2:   #c8c5b8;
	--lwl-azure:    #6ea5ff;
	--lwl-azure-deep: #3f6cd8;
	--lwl-moon-teal: #6cb9c0;
	--lwl-danger:    #b35a4e;

	/* Shadows. */
	--lwl-shadow-soft:  0 12px 24px rgba(15, 23, 42, 0.08);
	--lwl-shadow-deep:  0 28px 60px rgba(39, 27, 17, 0.18);
	--lwl-shadow-hover: 0 10px 20px rgba(106, 63, 26, 0.20);
	--lwl-shadow-night: 0 18px 36px rgba(2, 6, 23, 0.55);

	/* Radii + motion. */
	--lwl-radius-sm:    8px;
	--lwl-radius-md:    16px;
	--lwl-radius-lg:    22px;
	--lwl-radius-pill:  999px;
	--lwl-ease-bonsai:  cubic-bezier(0.25, 0.1, 0.25, 1);
	--lwl-ease-flow:    cubic-bezier(0.4, 0, 0.2, 1);
	--lwl-dur-quick:    240ms;
	--lwl-dur-medium:   360ms;
}

/* ==========================================================================
   2. Mood cascade — Day / Dusk / Night
   ========================================================================== */

.lwl-lesson-body[data-mood="day"],
.lwl-lesson-chrome[data-style="welcome"],
.lwl-lesson-chrome[data-style="field_film"] {
	--bg:           var(--lwl-cream);
	--paper:        var(--lwl-paper-warm-1);
	--paper-raised: var(--lwl-paper-warm-2);
	--ink:          var(--lwl-sepia-mid);
	--ink-strong:   var(--lwl-sepia-deep);
	--ink-muted:    var(--lwl-sepia-soft);
	--hairline:     var(--lwl-bronze-line);
	--hairline-strong: var(--lwl-bronze-line-strong);
	--accent:       var(--lwl-terracotta);
	--accent-glow:  var(--lwl-ember-glow);
	--success:      var(--lwl-emerald);
	--shadow:       var(--lwl-shadow-soft);
}

.lwl-lesson-body[data-mood="dusk"],
.lwl-lesson-chrome[data-style="grammar_dojo"],
.lwl-lesson-chrome[data-style="atelier"] {
	--bg:           var(--lwl-paper-aged);
	--paper:        var(--lwl-paper-aged);
	--paper-raised: color-mix(in oklab, var(--lwl-paper-aged) 92%, white 8%);
	--ink:          var(--lwl-paper-aged-ink);
	--ink-strong:   var(--lwl-sepia-deep);
	--ink-muted:    var(--lwl-paper-aged-muted);
	--hairline:     rgba(155, 106, 34, 0.22);
	--hairline-strong: rgba(155, 106, 34, 0.42);
	--accent:       var(--lwl-gold);
	--accent-glow:  var(--lwl-icon-glow);
	--success:      var(--lwl-emerald);
	--shadow:       var(--lwl-shadow-deep);
}

.lwl-lesson-body[data-mood="night"] {
	--bg:           var(--lwl-night);
	--paper:        var(--lwl-panel);
	--paper-raised: var(--lwl-panel-2);
	--ink:          var(--lwl-mist-2);
	--ink-strong:   var(--lwl-mist-1);
	--ink-muted:    rgba(232, 230, 221, 0.62);
	--hairline:     rgba(110, 165, 255, 0.20);
	--hairline-strong: rgba(110, 165, 255, 0.40);
	--accent:       var(--lwl-azure);
	--accent-glow:  0 0 18px rgba(110, 165, 255, 0.30);
	--success:      #52C6A6;
	--shadow:       var(--lwl-shadow-night);
}

/* Body itself picks up paper + ink from the cascade so embedded post_content
   inherits the lesson's mood without each component needing to know about it. */
.lwl-lesson-body {
	background-color: var(--paper, transparent);
	color:            var(--ink-strong, inherit);
}

.lwl-lesson-body[data-mood="night"] {
	color: var(--ink-strong);
}

/* ==========================================================================
   3. Chrome — header band
   ========================================================================== */

.lwl-lesson-chrome {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0 0 24px;
	margin: 0 0 24px;
	border-bottom: 1px solid var(--hairline, var(--lwl-bronze-line));
	font-family: 'Spectral', Georgia, serif;
	color: var(--ink-strong, var(--lwl-sepia-deep));
}

.lwl-lesson-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	line-height: 1.3;
	color: var(--ink-muted, var(--lwl-paper-aged-muted));
}

.lwl-lesson-breadcrumb__crumb {
	color: var(--ink-muted, var(--lwl-paper-aged-muted));
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color var(--lwl-dur-quick) var(--lwl-ease-bonsai),
	            border-color var(--lwl-dur-quick) var(--lwl-ease-bonsai);
}

.lwl-lesson-breadcrumb__crumb:hover,
.lwl-lesson-breadcrumb__crumb:focus-visible {
	color: var(--accent, var(--lwl-terracotta));
	border-bottom-color: var(--hairline-strong, var(--lwl-bronze-line-strong));
	outline: none;
}

.lwl-lesson-breadcrumb__crumb--current {
	color: var(--ink-strong, var(--lwl-sepia-deep));
	font-weight: 500;
}

.lwl-lesson-breadcrumb__sep {
	color: var(--hairline-strong, var(--lwl-bronze-line));
}

.lwl-lesson-overline {
	font-family: 'Cinzel', 'Cinzel Decorative', Georgia, serif;
	font-weight: 500;
	font-size: clamp(14px, 1.3vw, 16px);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-muted, var(--lwl-paper-aged-muted));
	margin-top: 4px;
}

.lwl-lesson-title {
	font-family: 'Spectral', Georgia, serif;
	font-weight: 600;
	font-size: clamp(26px, 2.8vw, 34px);
	line-height: 1.2;
	color: var(--ink-strong, var(--lwl-sepia-deep));
	margin: 0;
	padding: 0;
}

/* Style accent shifts on the chrome — subtle, not loud. Each style picks up
   the mood cascade above; this layer adjusts ONLY the overline accent. */
.lwl-lesson-chrome[data-style="grammar_dojo"] .lwl-lesson-overline {
	color: var(--lwl-gold);
}
.lwl-lesson-chrome[data-style="atelier"] .lwl-lesson-overline {
	color: var(--lwl-gold);
}
.lwl-lesson-chrome[data-style="field_film"] .lwl-lesson-overline {
	color: var(--lwl-terracotta);
}
.lwl-lesson-chrome[data-style="welcome"] .lwl-lesson-overline {
	color: var(--lwl-terracotta);
}

/* ==========================================================================
   4. Chrome — footer prev/next nav
   ========================================================================== */

.lwl-lesson-nav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	margin: 48px 0 0;
	padding: 24px 0 0;
	border-top: 1px solid var(--hairline, var(--lwl-bronze-line));
	font-family: 'Spectral', Georgia, serif;
}

.lwl-lesson-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	color: var(--ink-strong, var(--lwl-sepia-deep));
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--lwl-radius-md);
	transition: transform var(--lwl-dur-quick) var(--lwl-ease-bonsai),
	            border-color var(--lwl-dur-quick) var(--lwl-ease-bonsai),
	            background-color var(--lwl-dur-quick) var(--lwl-ease-bonsai);
}

.lwl-lesson-nav__link--prev { justify-self: start; }
.lwl-lesson-nav__link--next { justify-self: end; text-align: right; }

.lwl-lesson-nav__link:not(.lwl-lesson-nav__link--empty):hover,
.lwl-lesson-nav__link:not(.lwl-lesson-nav__link--empty):focus-visible {
	transform: translateY(-1px);
	border-color: var(--hairline-strong, var(--lwl-bronze-line-strong));
	background-color: var(--paper-raised, var(--lwl-paper-warm-2));
	outline: none;
}

.lwl-lesson-nav__link--empty {
	opacity: 0.32;
	cursor: default;
}

.lwl-lesson-nav__arrow {
	font-family: 'Cinzel', Georgia, serif;
	font-size: 26px;
	line-height: 1;
	color: var(--accent, var(--lwl-terracotta));
}

.lwl-lesson-nav__word {
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-muted, var(--lwl-paper-aged-muted));
}

.lwl-lesson-nav__title {
	display: inline-block;
	max-width: 26ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-style: italic;
	font-weight: 400;
	color: var(--ink-strong, var(--lwl-sepia-deep));
}

.lwl-lesson-nav__link--prev .lwl-lesson-nav__word  { order: 1; }
.lwl-lesson-nav__link--prev .lwl-lesson-nav__title { order: 2; }

.lwl-lesson-nav__position {
	font-family: 'Cinzel', Georgia, serif;
	font-size: 15px;
	letter-spacing: 0.12em;
	color: var(--ink-muted, var(--lwl-paper-aged-muted));
	white-space: nowrap;
}

/* ==========================================================================
   5. Reduced motion + responsive + fallback states
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.lwl-lesson-breadcrumb__crumb,
	.lwl-lesson-nav__link {
		transition: none;
	}
	.lwl-lesson-nav__link:hover {
		transform: none;
	}
}

@media (max-width: 780px) {
	.lwl-lesson-nav {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.lwl-lesson-nav__link--prev,
	.lwl-lesson-nav__link--next {
		justify-self: center;
	}
	.lwl-lesson-nav__position {
		order: 0;
	}
}

.lwl-lesson-empty {
	padding: 2rem 1rem;
	text-align: center;
	color: var(--ink-muted, var(--lwl-paper-aged-muted));
	font-family: 'Spectral', Georgia, serif;
}

/* ==========================================================================
   6. Mark-complete band (3g-0.5)
   ========================================================================== */

.lwl-lesson-mark-complete {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 32px 0 0;
	padding: 24px 0 8px;
	font-family: 'Spectral', Georgia, serif;
}

.lwl-lesson-mark-complete[data-state="anonymous"] {
	display: none;
}

.lwl-lesson-mark-complete[data-busy="1"] {
	opacity: 0.6;
	pointer-events: none;
}

/* --- Pending state — primary CTA --- */

.lwl-lesson-mark-complete__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 28px;
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	font-weight: 600;
	font-size: 17px;
	letter-spacing: 0.02em;
	color: #fff;
	background: var(--accent, var(--lwl-terracotta));
	border: none;
	border-radius: var(--lwl-radius-pill);
	cursor: pointer;
	box-shadow: var(--shadow, var(--lwl-shadow-soft));
	transition: transform var(--lwl-dur-quick) var(--lwl-ease-bonsai),
	            box-shadow var(--lwl-dur-quick) var(--lwl-ease-bonsai),
	            filter var(--lwl-dur-quick) var(--lwl-ease-bonsai);
}

.lwl-lesson-mark-complete__btn:hover,
.lwl-lesson-mark-complete__btn:focus-visible {
	transform: translateY(-1px);
	box-shadow: var(--lwl-shadow-hover);
	filter: brightness(1.04);
	outline: none;
}

.lwl-lesson-mark-complete__btn:active {
	transform: translateY(0);
	filter: brightness(0.96);
}

/* Style accent shifts mirror the chrome overline: gold for grammar_dojo +
   atelier (dusk surfaces), terracotta for welcome + field_film. */
.lwl-lesson-body[data-style="grammar_dojo"] .lwl-lesson-mark-complete__btn,
.lwl-lesson-body[data-style="atelier"] .lwl-lesson-mark-complete__btn {
	background: var(--lwl-gold);
	color: var(--lwl-sepia-deep);
}

/* Sibling-selector fallback if the body's data-style isn't visible to the
   pill (band is OUTSIDE the body wrapper in the DOM). Use chrome-as-anchor
   via :has() — falls back to terracotta on browsers without :has(). */
.lwl-lesson-chrome[data-style="grammar_dojo"] ~ .lwl-lesson-mark-complete .lwl-lesson-mark-complete__btn,
.lwl-lesson-chrome[data-style="atelier"] ~ .lwl-lesson-mark-complete .lwl-lesson-mark-complete__btn {
	background: var(--lwl-gold);
	color: var(--lwl-sepia-deep);
}

/* --- Completed state — subdued indicator (no celebration in this slice;
       bonsai-bloom comes in 3g-0.5b) --- */

.lwl-lesson-mark-complete[data-state="completed"] {
	color: var(--ink-muted, var(--lwl-paper-aged-muted));
}

.lwl-lesson-mark-complete__indicator {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 24px;
	font-family: 'Spectral', Georgia, serif;
	font-weight: 500;
	font-size: 17px;
	color: var(--ink-strong, var(--lwl-sepia-deep));
	background: var(--paper-raised, var(--lwl-paper-warm-2));
	border: 1px solid var(--hairline, var(--lwl-bronze-line));
	border-radius: var(--lwl-radius-pill);
}

.lwl-lesson-mark-complete__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	background: var(--lwl-emerald);
	border-radius: 50%;
	line-height: 1;
}

.lwl-lesson-mark-complete__label {
	letter-spacing: 0.04em;
}

/* --- Reduced motion --- */

@media (prefers-reduced-motion: reduce) {
	.lwl-lesson-mark-complete__btn {
		transition: none;
	}
	.lwl-lesson-mark-complete__btn:hover {
		transform: none;
	}
}