/* ==========================================================================
   睡眠 — /shuimian/ (the owner's #837). Markup: Molihua\Core\Sleep\SleepPage; script: assets/js/sleep.js.

   DARK WHATEVER THE SITE THEME, AND WARM. It is read in bed with the lights off, so the page is night-blue with
   lamp-coloured accents rather than the site's green, and nothing on it is bright white. Loaded only on this page.

   THE ONE MEMORABLE THING is the start button: a warm moon whose halo swells for 4 seconds and settles for 6 while
   「海浪」 plays — the breathing pace the page teaches, so the button doubles as the guide. Everything else is quiet.

   Big targets (48px and up): it is used half asleep, often one-handed. The phone tier is LAST; keep it last.
   ========================================================================== */

html:has(.sl), body:has(.sl) { background: #0d111d; }

.sl {
	--sl-bg: #0d111d;
	--sl-panel: #141b2c;
	--sl-line: #263049;
	--sl-ink: #ece6da;
	--sl-ink-2: #b2b6c6;
	--sl-ink-3: #868ca3;
	--sl-lamp: #e9b872;
	--sl-lamp-2: #c08d50;
	--sl-alert: #f2a69c;
	--sl-serif: "Noto Serif SC", "Songti SC", "STSong", serif;
	--sl-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
	width: 100%;
	min-height: 100vh;
	background: var(--sl-bg);
	color: var(--sl-ink);
	font-family: var(--sl-sans);
	font-size: 16px;
	line-height: 1.75;
	-webkit-text-size-adjust: 100%;
}
.sl h1, .sl h2, .sl h3, .sl p, .sl ol, .sl ul, .sl dl, .sl dd { margin: 0; padding: 0; }
.sl h1, .sl h2, .sl h3 { color: inherit; } /* the site's own h1–h6 { color: var(--ink) } is near-black in light mode */
.sl ul, .sl ol { list-style: none; }
.sl a { color: var(--sl-lamp); text-decoration: none; }
.sl a:hover { text-decoration: underline; }
.sl a:focus-visible, .sl button:focus-visible { outline: 2px solid var(--sl-lamp); outline-offset: 3px; }
.sl button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* The way home and to the other header-less pages (ChromelessNav). */
.sl-top { max-width: 1160px; margin: 0 auto; padding: 14px 24px 0; font-size: 14px; }
.sl-sis { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.sl-sis-a { color: var(--sl-ink-2) !important; }

.sl-grid {
	display: grid;
	grid-template-columns: minmax(300px, 380px) minmax(0, 680px);
	gap: 56px;
	justify-content: center;
	max-width: 1160px;
	margin: 0 auto;
	padding: 18px 24px 8px;
}

/* ---------- the player ---------- */

.sl-player { position: sticky; top: 16px; align-self: start; text-align: center; }
.sl-head { margin-bottom: 18px; }
.sl-kicker { font-size: 13px; letter-spacing: .2em; color: var(--sl-ink-3); }
.sl-head h1 { font-family: var(--sl-serif); font-size: 40px; line-height: 1.25; font-weight: 700; letter-spacing: .1em; }
.sl-dek { margin-top: 6px !important; font-size: 14px; line-height: 1.7; color: var(--sl-ink-2); }

.sl-go {
	position: relative;
	display: grid;
	place-items: center;
	width: 196px;
	height: 196px;
	margin: 26px auto 18px;
	border: 0;
	border-radius: 50%;
	background: radial-gradient(circle at 38% 34%, #f6dcae 0%, var(--sl-lamp) 46%, var(--sl-lamp-2) 100%);
	box-shadow: 0 0 60px rgba(233, 184, 114, .22);
	color: #2a2010;
	transition: filter .6s ease, box-shadow .6s ease;
}
.sl-ring {
	position: absolute;
	inset: -16px;
	border-radius: 50%;
	border: 2px solid rgba(233, 184, 114, .38);
	transform: scale(.86);
	transition: transform .2s linear;
	pointer-events: none;
}
.sl .sl-go { color: #2a2010; } /* `.sl button { color: inherit }` outranks the bare class */
.sl-go-txt { font-family: var(--sl-serif); font-size: 30px; font-weight: 700; letter-spacing: .15em; padding-left: .15em; }
.sl-breath { position: absolute; bottom: 44px; font-size: 13px; letter-spacing: .3em; padding-left: .3em; color: rgba(42, 32, 16, .75); }
.sl.sl-on .sl-go { filter: brightness(.82); box-shadow: 0 0 34px rgba(233, 184, 114, .14); }

.sl-status { min-height: 3.4em; font-size: 14px; line-height: 1.7; color: var(--sl-ink-2); }

.sl-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.sl-opts-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sl-opt {
	min-height: 52px;
	padding: 6px 8px;
	border: 1px solid var(--sl-line);
	border-radius: 10px;
	background: var(--sl-panel);
	font-size: 15px;
	line-height: 1.35;
}
.sl-opt small { display: block; margin-top: 2px; font-size: 12px; color: var(--sl-ink-3); }
.sl-opt[aria-pressed="true"] { border-color: var(--sl-lamp); color: var(--sl-lamp); box-shadow: inset 0 0 0 1px var(--sl-lamp); }
.sl-opt[aria-pressed="true"] small { color: var(--sl-lamp-2); }

.sl-note { margin-top: 14px !important; font-size: 13px; line-height: 1.7; color: var(--sl-ink-3); text-align: left; }

/* ---------- the guide ---------- */

.sl-main { min-width: 0; }
.sl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.sl-chips a { padding: 6px 14px; border: 1px solid var(--sl-line); border-radius: 999px; font-size: 14px; color: var(--sl-ink-2); }
.sl-chips a:hover { color: var(--sl-lamp); border-color: var(--sl-lamp-2); text-decoration: none; }

.sl-sec { padding: 26px 0 24px; border-bottom: 1px solid var(--sl-line); scroll-margin-top: 16px; }
.sl-sec h2 { font-family: var(--sl-serif); font-size: 24px; line-height: 1.35; font-weight: 700; margin-bottom: 14px !important; }
.sl-sec p + p { margin-top: 10px; }
.sl-lead { color: var(--sl-ink); margin-bottom: 12px !important; }
.sl-small { font-size: 14px; color: var(--sl-ink-3); }

/* 睡不着的时候: four steps, numbered because they are tried in order on one night. */
.sl-steps { counter-reset: st; }
.sl-steps > li { counter-increment: st; position: relative; padding: 0 0 18px 48px; }
.sl-steps > li:last-child { padding-bottom: 0; }
.sl-steps > li::before {
	content: counter(st);
	position: absolute; left: 0; top: 2px;
	width: 32px; height: 32px; border-radius: 50%;
	border: 1px solid var(--sl-lamp-2); color: var(--sl-lamp);
	font-family: var(--sl-serif); font-size: 16px; line-height: 30px; text-align: center;
}
.sl-steps h3 { font-size: 17px; line-height: 1.5; font-weight: 700; margin-bottom: 4px !important; }

.sl-list { counter-reset: ls; margin-bottom: 12px !important; }
.sl-list li { counter-increment: ls; position: relative; padding: 7px 0 7px 34px; border-top: 1px solid var(--sl-line); }
.sl-list li:last-child { border-bottom: 1px solid var(--sl-line); }
.sl-list li::before { content: counter(ls); position: absolute; left: 4px; color: var(--sl-lamp); font-family: var(--sl-serif); font-weight: 700; }

.sl-flags li { position: relative; padding: 8px 0 8px 18px; }
.sl-flags li::before { content: ""; position: absolute; left: 0; top: 18px; width: 7px; height: 7px; border-radius: 50%; background: var(--sl-lamp); }
.sl-flags .sl-urgent { margin-top: 6px; padding: 10px 14px 10px 32px; border-radius: 10px; background: rgba(242, 166, 156, .1); color: var(--sl-alert); }
.sl-flags .sl-urgent::before { left: 14px; top: 21px; background: var(--sl-alert); }

.sl-facts > div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--sl-line); }
.sl-facts > div:last-child { border-bottom: 1px solid var(--sl-line); }
.sl-facts dt { font-weight: 700; color: var(--sl-lamp); }
.sl-facts dd { color: var(--sl-ink); }

/* ---------- the videos: nothing from YouTube until 播放 is pressed ---------- */

/* A card is a round play button beside its words; the 16:9 player is inserted above them when 播放 is pressed. */
.sl-videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sl-v { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px; border: 1px solid var(--sl-line); border-radius: 12px; background: var(--sl-panel); }
.sl-v.sl-v-on { grid-template-columns: minmax(0, 1fr); grid-column: 1 / -1; } /* a playing video takes the row: bigger, and no stretched neighbour */
.sl-v-box { position: relative; aspect-ratio: 16 / 9; margin: -12px -14px 2px; background: #10162a; }
.sl-v-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sl-v-play {
	position: relative;
	width: 52px; height: 52px;
	border: 1px solid var(--sl-lamp-2); border-radius: 50%;
	background: rgba(233, 184, 114, .1);
}
.sl-v-play::before { content: ""; position: absolute; left: 50%; top: 50%; margin: -8px 0 0 -5px; border-style: solid; border-width: 8px 0 8px 14px; border-color: transparent transparent transparent var(--sl-lamp); }
.sl-v-play:hover { background: rgba(233, 184, 114, .2); }
.sl-v-tag { font-size: 12px; line-height: 1.5; color: var(--sl-lamp-2); }
.sl-v-title { font-size: 15px; line-height: 1.55; font-weight: 700; }
.sl-v-meta { margin-top: 3px !important; font-size: 13px; line-height: 1.6; color: var(--sl-ink-3); }

.sl-src ul { columns: 2; column-gap: 28px; }
.sl-src li { break-inside: avoid; padding: 3px 0; font-size: 13px; line-height: 1.6; }
.sl-src a { color: var(--sl-ink-2); }

.sl-foot { max-width: 1160px; margin: 0 auto; padding: 22px 24px 40px; font-size: 13px; line-height: 1.7; color: var(--sl-ink-3); }
.sl-foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; }
.sl-foot nav a { color: var(--sl-ink-2); }

@media (prefers-reduced-motion: reduce) {
	.sl-ring, .sl-go { transition: none; }
}

/* PHONE TIER — keep last. */
@media screen and (max-width: 900px) {
	.sl-grid { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 10px 18px 8px; }
	.sl-player { position: static; padding-bottom: 22px; border-bottom: 1px solid var(--sl-line); }
	.sl-head h1 { font-size: 34px; }
	.sl-go { width: 176px; height: 176px; margin: 22px auto 16px; }
	.sl-breath { bottom: 38px; }
	.sl-top { padding: 12px 18px 0; }
	.sl-chips { margin-top: 18px; }
	.sl-videos { grid-template-columns: minmax(0, 1fr); }
	.sl-src ul { columns: 1; }
	.sl-foot { padding: 20px 18px 36px; }
}
@media screen and (max-width: 380px) {
	.sl-opts-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sl-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}