/*
 * Room CSS — Experience Shell library room (spec §5/§6).
 * Scoped entirely under body.room / html.plain-mode so non-room pages
 * (and the theme's default stylesheet) are completely untouched.
 * Palette comes from --room-* custom properties set inline per-room
 * (see inc/rooms.php mooring_room_head()); this file only consumes them.
 */

/* ===== Experience Shell: layers ===== */
body.room { background: var(--room-navy); }

.room-backdrop {
	position: fixed; inset: 0; z-index: 0;
	background-size: cover; background-position: center;
}
.room-ambience {
	position: fixed; inset: 0; z-index: 1;
	pointer-events: none;
}
.room-ambience canvas { position: absolute; display: block; }

/* Cool navy scrim behind the panel side, so the card reads calmly against
   a bright photo backdrop (spec: Backdrops §CSS treatment, gate B squint test). */
/* Even, gentle scrim over the whole backdrop: the panel is centred with photo
   on all sides, so no side/orientation bias — just enough to make the white
   card read and keep a bright photo from blowing out (gate B squint test). */
.room-backdrop::after {
	content: ""; position: absolute; inset: 0;
	background: rgba(10, 20, 45, .20);
}

.room-panel {
	position: relative; z-index: 2;
	margin: 6vh auto 8vh; padding: 2rem 2rem 3rem;
	max-width: 780px;
	background: #fff;
	color: var(--room-ink);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(17, 33, 80, .08), 0 8px 24px rgba(17, 33, 80, .10);
	transition: box-shadow .2s ease;
}
.room-panel:hover {
	box-shadow: 0 1px 3px rgba(17, 33, 80, .10), 0 12px 32px rgba(17, 33, 80, .14);
}
.room-panel > * { position: relative; z-index: 1; }

/* ===== Controls ===== */
.room-controls {
	position: fixed; z-index: 51; top: 5rem; right: 1rem; /* above sticky header (z50), below mobile nav (z55) */
	display: flex; gap: .5rem;
}
.room-toggle, .room-sound {
	font: inherit; font-size: .85rem; cursor: pointer;
	padding: .35rem .8rem; border-radius: 999px;
	border: 1px solid rgba(238, 247, 246, .55);
	background: rgba(10, 22, 51, .9); color: #eef7f6; /* ≥4.5:1 even over white backdrop regions */
	backdrop-filter: blur(4px);
}
.room-toggle:hover, .room-sound:hover {
	background: rgba(10, 22, 51, .97);
}
.room-toggle:focus-visible, .room-sound:focus-visible {
	outline: 2px solid #fff; outline-offset: 2px;
}

/* ===== Guide search (room + plain modes) ===== */
.room-panel .guide-search {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: .35rem;
	margin: 0 0 1.5rem;
}
.room-panel .guide-search__label {
	flex: 0 0 100%;
	font-size: .85rem;
	font-weight: 600;
}
.room-panel .guide-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	font: inherit;
	padding: .5rem .75rem;
	border: 1px solid #d8dce6;
	border-radius: 4px;
	background: #fff;
	color: #1d2433;
}
.room-panel .guide-search button {
	font: inherit;
	font-weight: 600;
	padding: .5rem 1.1rem;
	border: 1px solid #0e2440;
	border-radius: 4px;
	background: #0e2440;
	color: #fff;
	cursor: pointer;
}
.room-panel .guide-search button:hover {
	background: #0a1633;
}
.room-panel .guide-search input[type="search"]:focus-visible,
.room-panel .guide-search button:focus-visible {
	outline: 2px solid #0e2440;
	outline-offset: 2px;
}
@media (max-width: 600px) {
	.room-panel .guide-search {
		flex-direction: column;
		align-items: stretch;
	}
}

/* ===== Guide-card readability inside the panel (body.room scope only) ===== */
/* Cards sit on --room-paper backing; kb-head becomes the panel's header
   block. Contrast is re-checked below, not inherited from main.css. */
body.room .kb-head {
	background: transparent;
	padding: 0 0 1.2rem;
	border-bottom: 1px solid rgba(29, 36, 51, .12);
	margin-bottom: 1.5rem;
}
body.room .kb-head__inner { max-width: none; margin: 0; }
body.room .kb-head__title { color: var(--room-ink); }
/* --room-ink (#1d2433) on --room-paper (#eef7f6): ~14.9:1 — passes AA/AAA. */
body.room .kb-head__lede { color: var(--room-ink); opacity: .78; }
/* .78 opacity of #1d2433 over #eef7f6 still resolves > 4.5:1 (~11.6:1). */

body.room .guide-grid {
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
body.room .guide-card {
	background: #fff;
	border: none;
	box-shadow: 0 1px 3px rgba(17, 33, 80, .08), 0 8px 24px rgba(17, 33, 80, .10);
	border-radius: 12px;
	flex-direction: row;
	transition: box-shadow .2s ease;
}
body.room .guide-card:hover {
	box-shadow: 0 1px 3px rgba(17, 33, 80, .10), 0 12px 32px rgba(17, 33, 80, .14);
}
body.room .guide-card__media {
	flex: 0 0 40%;
	aspect-ratio: auto;
}
body.room .guide-card__media--flat {
	background: linear-gradient(160deg, var(--room-navy), #0a1122);
}
body.room .guide-card__body { flex: 1; padding: 1.1rem 1.3rem; }
body.room .guide-card__title { color: var(--room-navy); }
/* --room-navy (#0e2440) on #fff: ~14.7:1 — passes AA/AAA. */
body.room .guide-card__sub { color: #3a4256; }
/* #3a4256 on #fff: ~9.4:1 — passes AA/AAA. */

/* ===== Plain mode: first-class clean skin (same card system, no backdrop) ===== */
html.plain-mode .room-backdrop,
html.plain-mode .room-ambience { display: none; }
html.plain-mode body.room { background: var(--c-mist, #f4f6f8); }
html.plain-mode .room-panel {
	max-width: 860px; margin: 3rem auto;
	background: #fff; color: #0e2440;
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(17, 33, 80, .08), 0 8px 24px rgba(17, 33, 80, .10);
}
html.plain-mode .room-controls .room-toggle {
	background: #0e2440; color: #fff; border-color: #0e2440;
}
html.plain-mode .room-sound { display: none; }

html.plain-mode body.room .kb-head { border-bottom-color: rgba(17, 33, 80, .10); }
html.plain-mode body.room .kb-head__title,
html.plain-mode body.room .guide-card__title { color: #0e2440; }
html.plain-mode body.room .kb-head__lede,
html.plain-mode body.room .guide-card__sub { color: #3a4256; opacity: 1; }
html.plain-mode body.room .guide-card {
	background: #fff; border: none;
	box-shadow: 0 1px 3px rgba(17, 33, 80, .06), 0 4px 14px rgba(17, 33, 80, .08);
}
html.plain-mode body.room .guide-card__media--flat {
	background: linear-gradient(160deg, #0e2440, #0a1122);
}

/* OS-level signals force Plain presentation regardless of JS (spec §5). */
@media (forced-colors: active) {
	.room-backdrop, .room-ambience { display: none !important; }
	.room-panel, body.room .guide-card { border: 1px solid CanvasText; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
	.room-ambience { display: none !important; }
}

/* ===== Safe-zone wiring (spec §6): position panel over the backdrop's
   clear area, per-room --sz-* custom properties from mooring_room_head(). */
@media (orientation: landscape) and (min-width: 900px) {
	/* Centred, comfortably wide — photo surrounds the card on all sides.
	   (Was margin-left:var(--sz-left) which pinned it to a narrow side band.) */
	body.room .room-panel { margin-inline: auto; max-width: 800px; }
}
@media (orientation: portrait) {
	body.room .room-panel { margin-top: var(--sz-top, 6vh); }
}
html.plain-mode body.room .room-panel { margin-left: auto; margin-right: auto; margin-top: 2rem; max-width: 860px; }

/* ===== Responsive: three target viewports ===== */
/* Desktop (default above): wide panel, side-by-side card media. */

/* Tablet / narrow landscape */
@media (max-width: 900px) {
	.room-panel { margin: 4vh auto 6vh; max-width: 92vw; }
	.room-controls { top: 4.5rem; right: .75rem; }
}

/* Mobile / portrait */
@media (max-width: 600px) {
	.room-panel { margin: 3vh auto 5vh; padding: 1.1rem; border-radius: 4px; }
	.room-controls { top: .5rem; right: .5rem; gap: .35rem; }
	.room-toggle, .room-sound { font-size: .78rem; padding: .3rem .65rem; }
	body.room .guide-card { flex-direction: column; }
	body.room .guide-card__media { flex: none; aspect-ratio: 16/10; }
}

/* ===== Editorial content INSIDE the immersive room panel (Ed 2026-07-06b) =====
   The full-bleed backdrop surrounds a centred white "paper" card; the article
   lives in the card. Style the head as clean navy-ink-on-white (not the
   full-width navy hero), sane padding, and keep the differentiated italic lede. */
.room-panel .article { background: transparent; }
.room-panel .article__head {
	background: transparent; color: var(--room-ink, #1d2433);
	padding: 0 0 1.3rem; overflow: visible;
	border-bottom: 1px solid rgba(17, 33, 80, .12); margin-bottom: 1.7rem;
}
.room-panel .article__head-inner { max-width: none; margin: 0; }
.room-panel .article__head .eyebrow { color: var(--c-link, #8c9ece); }
.room-panel .article__title { color: var(--c-primary, #0e2440); max-width: none; }
.room-panel .depth-scale { display: none; }
.room-panel .article__body { padding: 0; }
.room-panel .prose { max-width: none; margin-inline: 0; }
.room-panel .article__foot {
	margin-top: 2.4rem; padding: 1.5rem 0 0;
	border-top: 1px solid rgba(17, 33, 80, .12); background: transparent;
}
.room-panel .article__foot-inner { max-width: none; margin: 0; padding: 0; }

/* Room prose lede: the opening centred bold sentences read as one distinct
   standfirst — left-aligned, accent italic, primary — not weak centred bold. */
.article--room .prose > .wp-block-group:first-of-type p.has-text-align-center,
.article--room .prose > p.has-text-align-center:first-of-type { text-align: left; }
.article--room .prose .wp-block-group:first-of-type p.has-text-align-center strong {
	display: block;
	font-family: var(--font-accent);
	font-weight: 400;
	font-style: italic;
	font-size: clamp(1.2rem, 1.1rem + 0.7vw, 1.45rem);
	line-height: 1.5;
	color: var(--c-primary);
	text-align: left;
}

/* Room-panel eyebrow: --c-link is a dark-background tint; on the white panel use the accessible deep accent (vision-critic catch 2026-07-07). */
.room-panel .article__head .eyebrow { color: var(--c-flux-deep, #0b7a6e); }