/* The pages that a Cahut serves to readers. They take the tokens and the
   components of the brand of Cahut, linked before this sheet, light or dark
   as the reader's system is. See docs/adr/0032-the-page-of-a-room.md and
   docs/adr/0049-no-house-style.md. */
:root {
	color-scheme: light dark;
	--font-heading: var(--font-sans);
}

body { min-height: 100vh; }
a { color: var(--color-link); }
h1, h2, h3 { font-family: var(--font-heading); }

/* The top of every page: the Cahut, and who reads. */
.top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3) var(--space-4);
	min-height: 64px;
	padding: var(--space-3) var(--space-8);
	border-bottom: var(--border-width) solid var(--color-border);
	background: var(--color-surface);
}
.top__home {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-width: 0;
	color: inherit;
	text-decoration: none;
}
.top__cahut { display: block; width: auto; height: 26px; }
.top__domain {
	padding-left: var(--space-3);
	border-left: var(--border-width) solid var(--color-border);
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	overflow-wrap: anywhere;
}
.top__reader { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.top__handle { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-text-muted); }
.top .c-btn--secondary { color: var(--color-text); }

.page { max-width: 1120px; margin: 0 auto; padding: var(--space-12) var(--space-8) var(--space-16); }
.page--narrow { max-width: 520px; }

/* The head of a page: what it is, its title, and its address. */
.hero { position: relative; isolation: isolate; margin-bottom: var(--space-10); }
.hero::after {
	/* The clouds of the brand, behind the head of the page. */
	content: "";
	position: absolute;
	top: calc(-1 * var(--space-6));
	right: 0;
	width: 320px;
	height: 160px;
	background: url("/-/brand/illustrations/motif-nuages-sky.svg") right top / 160px repeat-x;
	opacity: 0.7;
	pointer-events: none;
	z-index: -1;
}
@media (prefers-color-scheme: dark) {
	.hero::after { opacity: 0.2; }
}
.hero__picto { display: block; width: 56px; height: 56px; margin-bottom: var(--space-4); color: var(--color-text); }
.hero__picto svg { display: block; width: 100%; height: 100%; color: inherit; }
.hero .c-label { margin: 0 0 var(--space-2); }
.hero__title {
	margin: 0 0 var(--space-3);
	max-width: 22ch;
	font-size: var(--text-4xl);
	line-height: var(--leading-4xl);
	font-weight: var(--weight-extrabold);
	letter-spacing: var(--tracking-title);
	overflow-wrap: anywhere;
}
.hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}
.hero__meta .c-mono { overflow-wrap: anywhere; }
.hero__description {
	margin: 0 0 var(--space-4);
	max-width: 60ch;
	font-size: var(--text-lg);
	line-height: var(--leading-lg);
}

/* The Windows of a Room, as cards with a preview of each. */
.cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}
.card { position: relative; transition: box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); }
.card:hover { box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }
.card__thumb { position: relative; color: var(--color-text-disabled); }
.card__thumb > .i { width: 40px; height: 40px; }
.card__preview {
	/* The Window drawn 1280 px wide, as on a laptop, then shrunk to its
	   card by pages.js, over the icon of its kind once it loads. Its
	   frame paints white behind a page that sets no background, as a
	   browser does. */
	position: absolute;
	top: 0;
	left: 0;
	width: 1280px;
	height: 800px;
	border: 0;
	background: white;
	transform: scale(var(--preview-scale, 0.2));
	transform-origin: 0 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--duration-slow) var(--ease-out);
}
.card__preview--shown { opacity: 1; }
.card__title { color: var(--color-text); text-decoration: none; }
.card__title span { min-width: 0; overflow-wrap: anywhere; }
/* The description of a Window, on two lines at most. */
.card__description {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	line-height: var(--leading-sm);
}
.card__title::after {
	/* The whole card leads to the Window. */
	content: "";
	position: absolute;
	inset: 0;
}
/* The link that reports a Window, for a reader outside its Room: discreet,
   as the links of the foot, and above the link of its card. */
.card__report {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-self: end;
	gap: var(--space-1);
	color: var(--color-text-muted);
	font-size: var(--text-xs);
	text-underline-offset: 3px;
}
.card__report:hover { color: var(--color-text); }
@media (prefers-reduced-motion: reduce) {
	.card, .card__preview { transition: none; }
}

/* A Room without Windows, which only its members see. */
.empty {
	display: grid;
	justify-items: center;
	gap: var(--space-3);
	max-width: 520px;
	margin: var(--space-8) auto;
	text-align: center;
}
.empty__picture { width: 240px; height: auto; margin-bottom: var(--space-4); }
.empty h2, .empty p { margin: 0; }

/* A card of its own: the Key of a Window, what is not found, sign in. */
.panel { padding: var(--space-8); }
.panel > :first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }
.panel .c-label { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); }
.panel h1, .panel h2 { margin: 0 0 var(--space-4); overflow-wrap: anywhere; }
.form { display: grid; gap: var(--space-4); margin: 0 0 var(--space-4); }
.form p { margin: 0; }
.form textarea.c-input { height: auto; min-height: 8rem; padding: var(--space-3); line-height: var(--leading-sm); resize: vertical; }
.choices { display: grid; gap: var(--space-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.choices legend { margin-bottom: var(--space-2); padding: 0; }

.foot { margin: var(--space-12) 0 0; }
.foot .c-mono { overflow-wrap: anywhere; }

/* The legal pages of the Cahut, at the foot of the page: discreet, in the
   color of what is secondary. */
.legal { padding: 0 var(--space-8) var(--space-10); }
.legal__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2) var(--space-6);
	font-size: var(--text-sm);
}
.legal__links a { color: var(--color-text-muted); text-underline-offset: 3px; }
.legal__links a:hover { color: var(--color-text); }

/* The frame of a Window: the whole page. */
.frame { margin: 0; overflow: hidden; }
.frame iframe { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 760px) {
	.top { padding: var(--space-3) var(--space-4); }
	.page { padding: var(--space-8) var(--space-4) var(--space-12); }
	.legal { padding: 0 var(--space-4) var(--space-8); }
	.hero__title { font-size: var(--text-3xl); line-height: var(--leading-3xl); }
	.hero::after { width: 120px; height: 120px; background-size: 120px; }
	.panel { padding: var(--space-6); }
}