/* Sleep science editorial page: patterns/lovable-page-sleep-science-editorial.php.
   Loaded only on /sleep-science-editorial/, after assets/css/lovable.css. */

/* Text sizes come from the design-system layer (.nv-lp-* roles) and the
   article body from .nv-prose; rules here are layout, surfaces and the
   page's few display values. The reading-progress bar is the shared
   subnav fill ([data-nv-scroll-progress], assets/js/lovable.js). */

@media (max-width: 782px) {
	.nv-sse .nv-lp-split--even { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Measures ---------- */

.nv-sse .nv-sse__col { max-width: 42rem; margin-inline: auto; }

.nv-sse .nv-sse__wide { max-width: 60rem; margin-inline: auto; }

.nv-sse__stack > * + * { margin-top: var(--wp--preset--spacing--50); }

.nv-sse__divided { border-top: 1px solid var(--nv-ink-10); }

.nv-sse__warm { background: var(--nv-beige-dark); }

.nv-sse .nv-sse__mono { font-family: var(--nv-mono); }

.nv-sse .nv-sse__caps { letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- Article prose ---------- */

.nv-sse .nv-prose > :first-child { margin-top: 0; }

.nv-sse .nv-prose > :last-child { margin-bottom: 0; }

.nv-sse .nv-prose > .nv-eyebrow { display: block; margin: 0 0 var(--wp--preset--spacing--20); }

.nv-sse .nv-prose > .nv-eyebrow + h2 { margin-top: 0; }

.nv-sse .nv-prose > h3 + .nv-lp-fine { margin-top: var(--wp--preset--spacing--10); }

/* Citation markers: a superscript at the text floor, since .nv-prose sup
   scales below it on phones. */

.nv-sse__cite { margin-left: 2px; font-size: var(--nv-fs-mono); font-weight: 600; line-height: 0; vertical-align: super; color: var(--nv-orange-deep); text-decoration: underline; }

.nv-sse__text-link { display: inline-flex; align-items: center; min-height: 24px; border-bottom: 1px solid color-mix(in srgb, var(--nv-white) 40%, transparent); font-size: var(--wp--preset--font-size--small); color: var(--nv-white); text-decoration: none; transition: border-color var(--nv-dur) var(--nv-ease); }

.nv-sse__text-link:hover { border-color: var(--nv-white); color: var(--nv-white); }

.nv-sse__text-link:focus-visible { outline: 2px solid var(--nv-orange-soft); outline-offset: 3px; }

/* ---------- Photo frames (shared .nv-lp-photo; every one a placeholder slot for now) ---------- */

/* The source's 16:9 crop has no shared modifier; the Core pack sits on a
   capped, centred square tinted for the ink band. */

.nv-sse__frame--wide { aspect-ratio: 16 / 9; }

.nv-sse__frame--square { max-width: 21.25rem; margin-inline: auto; background: color-mix(in srgb, var(--nv-white) 6%, transparent); }

.nv-sse .nv-lp-photo .nv-lp-imgslot span { max-width: 32ch; }

/* Block, not the row acf-blocks.css's global
   `figure:not(.wp-block-image){display:flex}` would make it. */

.nv-sse .nv-sse__figure { display: block; margin-block: 0; }

.nv-sse__caption { margin-top: var(--wp--preset--spacing--20); font-style: italic; text-align: center; }

/* ---------- Hero ---------- */

.nv-sse__hero { position: relative; display: flex; align-items: flex-end; min-height: max(80vh, 38.75rem); overflow: hidden; }

.nv-sse__hero-media { position: absolute; top: 0; right: 0; left: 0; height: 58%; }

/* Until the photograph lands the placeholder stays dark, as the photo under
   its shade will be, and its label sits clear of the header and the copy. */

.nv-sse .nv-sse__frame--hero { position: absolute; inset: 0; border-radius: 0; background: var(--nv-ink); }

.nv-sse__frame--hero > .nv-lp-imgslot { align-items: flex-start; justify-content: flex-end; padding: calc(var(--nv-top-stack) + var(--wp--preset--spacing--30)) var(--nv-gutter) 0; border: 0; background: transparent; color: var(--nv-on-dark-muted); }

.nv-sse__hero-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--nv-ink) 10%, transparent) 55%, var(--nv-ink) 100%); }

.nv-sse__hero-inner { position: relative; z-index: 1; flex: 1 1 auto; }

.nv-sse__hero-copy { max-width: 48rem; }

.nv-sse__hero-copy > .nv-eyebrow { margin: 0; }

.nv-sse__hero-title { max-width: 18ch; margin: var(--wp--preset--spacing--20) 0 0; }

.nv-sse .nv-sse__hero-lead { max-width: 36rem; margin-top: var(--wp--preset--spacing--30); }

.nv-sse__hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40); margin-top: var(--wp--preset--spacing--40); }

.nv-sse .nv-sse__meta { font-family: var(--nv-mono); letter-spacing: 0.1em; text-transform: uppercase; }

/* ---------- TOC ---------- */

@media (min-width: 900px) {
	.nv-sse__toc { justify-content: center; }
}

/* ---------- 12.4% ---------- */

.nv-sse__stat { margin: 0; font-family: var(--nv-serif); font-size: var(--nv-fs-h2); font-weight: 600; line-height: var(--nv-h2-lh); letter-spacing: var(--nv-h2-ls); color: var(--nv-orange-deep); }

.nv-sse__stat-text { max-width: 34ch; margin: var(--wp--preset--spacing--20) 0 0; font-size: var(--nv-fs-lead); line-height: 1.4; color: var(--nv-ink); }

.nv-sse__dots { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 4px; max-width: 32.5rem; margin: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--20); }

.nv-sse__dot { aspect-ratio: 1 / 1; border-radius: 2px; background: var(--nv-ink-10); }

.nv-sse__dot.is-on { background: var(--nv-orange-deep); }

/* ---------- Native disclosures: the sleep-problem picker ---------- */

.nv-sse__problems { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--20); align-items: start; }

.nv-sse__problem { padding: 0 var(--wp--preset--spacing--30); background: var(--nv-white); border: 1px solid var(--nv-ink-10); border-radius: var(--nv-radius); transition: border-color var(--nv-dur) var(--nv-ease); }

.nv-sse__problem:hover { border-color: var(--nv-ink-40); }

.nv-sse__problem[open] { border-color: var(--nv-orange); }

.nv-sse__problem-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--20); min-height: 44px; padding: var(--wp--preset--spacing--20) 0; font-size: var(--wp--preset--font-size--small); font-weight: 600; line-height: 1.3; color: var(--nv-ink); list-style: none; cursor: pointer; }

.nv-sse__problem .nv-lp-small { margin: 0; padding-bottom: var(--wp--preset--spacing--30); }

/* ---------- Native disclosures: "Show me the science" ---------- */

.nv-sse__details { margin: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--30); padding: 0 var(--wp--preset--spacing--20); background: var(--nv-beige); border: 1px solid var(--nv-ink-10); border-radius: var(--nv-radius-sm); transition: border-color var(--nv-dur) var(--nv-ease); }

.nv-sse__details:hover { border-color: var(--nv-ink-40); }

.nv-sse__details-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--20); min-height: 44px; font-family: var(--nv-mono); font-size: var(--nv-fs-mono); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nv-orange-deep); list-style: none; cursor: pointer; }

.nv-sse .nv-sse__details .nv-lp-small { margin: 0; padding-bottom: var(--wp--preset--spacing--20); }

/* Summary markers: the site's plus that turns to a minus, and a visible
   keyboard focus ring, on both kinds of native disclosure. */

.nv-sse :is(.nv-sse__problem-summary, .nv-sse__details-summary)::-webkit-details-marker { display: none; }

.nv-sse :is(.nv-sse__problem-summary, .nv-sse__details-summary):focus-visible { border-radius: var(--nv-radius-xs); outline: 2px solid var(--nv-orange-soft); outline-offset: 2px; }

.nv-sse__plus { position: relative; flex: none; width: 12px; height: 12px; }

.nv-sse__plus::before,
.nv-sse__plus::after { content: ""; position: absolute; background: var(--nv-orange-deep); transition: transform var(--nv-dur) var(--nv-ease); }

.nv-sse__plus::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }

.nv-sse__plus::after { top: 0; left: 50%; width: 2px; height: 100%; transform: translateX(-50%); }

.nv-sse details[open] > summary .nv-sse__plus::after { transform: translateX(-50%) scaleY(0); }

/* ---------- Hypnogram ---------- */

.nv-sse__hyp-rows { display: grid; gap: var(--wp--preset--spacing--10); margin-top: var(--wp--preset--spacing--30); }

.nv-sse__hyp-row { --nv-sse-stage: var(--nv-ink); display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); align-items: center; gap: var(--wp--preset--spacing--20); }

.nv-sse__hyp-row--awake { --nv-sse-stage: var(--nv-orange-deep); }

.nv-sse__hyp-row--rem { --nv-sse-stage: var(--nv-orange); }

.nv-sse__hyp-row--n1 { --nv-sse-stage: color-mix(in srgb, var(--nv-energy) 25%, var(--nv-ink-60)); }

.nv-sse__hyp-row--n2 { --nv-sse-stage: color-mix(in srgb, var(--nv-clinical-green) 55%, var(--nv-ink)); }

/* Selecting a stage label dims the other stages (the source's legend). */

.nv-sse__hyp:has(.nv-sse__hyp-label.is-active) .nv-sse__hyp-row:not(:has(.nv-sse__hyp-label.is-active)) .nv-sse__hyp-track { opacity: 0.3; }

.nv-sse__hyp-label { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 0 var(--wp--preset--spacing--10); border: 1px solid var(--nv-ink-20); border-radius: var(--nv-radius-pill); background: var(--nv-white); font-family: var(--nv-mono); font-size: var(--nv-fs-mono); font-weight: 600; letter-spacing: 0.04em; color: var(--nv-ink-80); cursor: pointer; transition: border-color var(--nv-dur) var(--nv-ease), background var(--nv-dur) var(--nv-ease), color var(--nv-dur) var(--nv-ease); }

.nv-sse__hyp-label:hover { border-color: var(--nv-ink-60); }

.nv-sse__hyp-label.is-active { border-color: var(--nv-ink); background: var(--nv-ink); color: var(--nv-white); }

.nv-sse__hyp-label:focus-visible { outline: 2px solid var(--nv-orange-soft); outline-offset: 2px; }

.nv-sse__hyp-track { position: relative; height: 14px; border-radius: var(--nv-radius-tile); background: var(--nv-ink-05); transition: opacity var(--nv-dur) var(--nv-ease); }

/* Each segment's start and length are minutes of the night, from the
   pattern's data array as --nv-sse-at / --nv-sse-span. */

.nv-sse__hyp-seg { position: absolute; top: 0; left: var(--nv-sse-at); width: var(--nv-sse-span); height: 100%; border-radius: var(--nv-radius-tile); background: var(--nv-sse-stage); }

.nv-sse .nv-sse__hyp-note { margin-top: var(--wp--preset--spacing--20); }

/* ---------- Cards ---------- */

/* Three-up rows keep their own breakpoints (two across, the third
   spanning); the two-up study cards are the shared .nv-lp-grid--2. */

.nv-sse__foundations,
.nv-sse__cards--3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--20); }

.nv-sse__foundation { padding: var(--wp--preset--spacing--30); background: var(--nv-beige); border-radius: var(--nv-radius-sm); }

.nv-sse__num { font-family: var(--nv-mono); font-size: var(--nv-fs-mono); color: var(--nv-orange-deep); }

.nv-sse__foundation .nv-lp-card-title { margin-top: var(--wp--preset--spacing--10); }

.nv-sse .nv-sse__foundation .nv-lp-small { margin-top: 4px; }

.nv-sse__card { display: flex; flex-direction: column; padding: var(--wp--preset--spacing--30); background: var(--nv-beige); border-radius: var(--nv-radius); }

.nv-sse .nv-sse__card--white { background: var(--nv-white); border: 1px solid var(--nv-ink-10); }

/* Card kickers: the shared .nv-lp-kicker--muted at this page's weight and tracking. */

.nv-sse .nv-lp-kicker { font-weight: 600; letter-spacing: 0.1em; }

.nv-sse__card .nv-lp-card-title { margin-top: var(--wp--preset--spacing--10); }

.nv-sse .nv-sse__card > .nv-lp-small { margin-top: var(--wp--preset--spacing--10); }

.nv-sse__card .nv-sse__details { margin-bottom: 0; background: var(--nv-white); }

.nv-sse__card--white .nv-sse__details { background: var(--nv-beige); }

.nv-sse .nv-sse__card-ref { margin-top: auto; padding-top: var(--wp--preset--spacing--20); }

/* ---------- Table ---------- */

.nv-sse .nv-sse__table-card { padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30); background: var(--nv-white); border-radius: var(--nv-radius-lg); }

.nv-sse .nv-sse__table { min-width: 42rem; }

.nv-sse .nv-sse__table thead th { border-bottom-color: var(--nv-ink); font-family: var(--nv-mono); font-size: var(--nv-fs-mono); letter-spacing: 0.06em; text-transform: uppercase; }

.nv-sse .nv-sse__table :is(tbody th, td) { font-size: var(--wp--preset--font-size--small); }

.nv-sse .nv-sse__table tbody tr:last-child { border-bottom: 0; }

.nv-sse .nv-sse__table td.nv-sse__read { font-weight: 600; color: var(--nv-orange-deep); }

/* ---------- NOVOS Core splits: the shared .nv-lp-split--even --wide on a wider measure ---------- */

.nv-sse .nv-sse__split { max-width: 67.5rem; }

.nv-sse__split .nv-lp-head { margin-bottom: 0; }

/* ---------- References ---------- */

.nv-sse__refs { border-top: 1px solid var(--nv-ink-10); }

.nv-sse__refs .nv-eyebrow { margin: 0; }

.nv-sse__ref-list { display: grid; gap: var(--wp--preset--spacing--30); margin: var(--wp--preset--spacing--40) 0 0; padding: 0; list-style: none; }

.nv-sse__ref { display: flex; gap: var(--wp--preset--spacing--20); scroll-margin-top: calc(var(--nv-top-stack) + var(--wp--preset--spacing--60)); }

.nv-sse__ref-num { flex: none; font-family: var(--nv-mono); font-size: var(--nv-fs-mono); line-height: 1.9; color: var(--nv-orange-deep); }

.nv-sse__ref-title { display: inline-block; font-family: var(--nv-serif); font-size: var(--wp--preset--font-size--body); line-height: 1.5; color: var(--nv-ink); text-decoration: underline; text-underline-offset: 3px; }

.nv-sse__ref-title:hover { color: var(--nv-orange-deep); }

.nv-sse .nv-sse__ref :is(.nv-lp-small, .nv-lp-fine) { margin-top: 4px; }

.nv-sse .nv-sse__important { color: var(--nv-orange-deep); }

/* ---------- Breakpoints ---------- */

@media (max-width: 899px) {
	.nv-sse__problems,
	.nv-sse__foundations,
	.nv-sse__cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* Three study cards: two across, the third spanning the row. */
	.nv-sse__cards--3 > :last-child { grid-column: span 2; }
}

@media (max-width: 781px) {
	.nv-sse .nv-sse__split { gap: var(--wp--preset--spacing--40); }

	.nv-sse__split > .nv-lp-photo--tall { max-width: 26rem; margin-inline: auto; }
}

@media (max-width: 599px) {
	.nv-sse__problems,
	.nv-sse__foundations,
	.nv-sse__cards--3 { grid-template-columns: minmax(0, 1fr); }

	.nv-sse__cards--3 > :last-child { grid-column: auto; }

	.nv-sse__dots { gap: 3px; }

	.nv-sse__hyp-row { grid-template-columns: 4rem minmax(0, 1fr); gap: var(--wp--preset--spacing--10); }
}

@media (prefers-reduced-motion: reduce) {
	.nv-sse__text-link,
	.nv-sse__problem,
	.nv-sse__details,
	.nv-sse__plus::before,
	.nv-sse__plus::after,
	.nv-sse__hyp-track,
	.nv-sse__hyp-label { transition: none; }
}