/* ══════════════════════════════════════════════════════════════
   MINIMAL — one box, and nothing you did not ask for
   ══════════════════════════════════════════════════════════════

   Loaded after os.css, so every rule here wins on specificity
   alone and none of them needs !important. Everything is scoped
   to .is-min, so removing the body class restores the full shell
   without touching a stylesheet.
   ────────────────────────────────────────────────────────────── */

/* ── the chrome that goes ─────────────────────────────────── */

.is-min .sx-rail,
.is-min .sx-burger,
.is-min .sx-acuity,
.is-min .sx-bar-end,
.is-min .sx-cmd-kbd,
.is-min .sx-questbar,
.is-min .sx-below,
.is-min .an-hub-hero .an-crumb,
.is-min .sx-foot-nav {
	display: none;
}

/* The bar keeps the mark and nothing else. The field in it was a
   second way to do the one thing the page is already for, and two
   inputs on a screen whose whole argument is "one input" is an
   argument that loses itself. */
.is-min .sx-cmd { display: none; }

.is-min .sx-bar {
	display: flex;
	justify-content: center;
	padding: var(--an-space-5) var(--an-space-4);
	background: transparent;
	border: 0;
	backdrop-filter: none;
}

.is-min .sx-frame,
.is-min .sx-os {
	margin: 0;
	padding: 0;
	max-width: none;
}

.is-min .sx-mark { opacity: .55; transition: opacity var(--an-fast) var(--an-ease); }
.is-min .sx-mark:hover,
.is-min .sx-mark:focus-visible { opacity: 1; }

/* The crop hero keeps the crop's name and loses the photograph. The image was
   a full-bleed hero with a scrim over it — the single heaviest request on a
   crop page, in service of decoration, on a surface whose argument is that
   there is nothing on it but the question. */
.is-min .an-hub-hero {
	min-height: 0;
	padding: clamp(24px, 8vh, 72px) clamp(16px, 5vw, 40px) 0;
	background: transparent;
	color: var(--an-text);
}

.is-min .an-hub-hero .an-ph,
.is-min .an-hub-hero .an-scrim { display: none; }

.is-min .an-hub-hero-in {
	max-width: 760px;
	margin: 0 auto;
	padding: 0;
}

.is-min .an-hub-hero h1 {
	font: 400 var(--an-t-h1) / var(--an-lh-tight) var(--an-font-editorial);
	letter-spacing: -.015em;
	margin: 0 0 var(--an-space-3);
}

.is-min .an-hub-hero .an-hub-tag,
.is-min .an-hub-hero p {
	color: var(--an-text-2);
	font: 400 var(--an-t-small) / var(--an-lh-body) var(--an-font-ui);
}

.is-min .an-hub-hero + .mn { padding-top: var(--an-space-5); }

/* ── the page ─────────────────────────────────────────────── */

.mn {
	max-width: 760px;
	margin: 0 auto;
	padding: clamp(24px, 9vh, 96px) clamp(16px, 5vw, 40px) 0;
	text-align: left;
}

.mn-title {
	margin: 0 0 var(--an-space-4);
	font: 400 var(--an-t-h1) / var(--an-lh-tight) var(--an-font-editorial);
	letter-spacing: -.015em;
	color: var(--an-text);
	text-wrap: balance;
}

.mn-sub {
	margin: 0 0 var(--an-space-6);
	max-width: 46ch;
	font: 400 var(--an-t-body) / var(--an-lh-body) var(--an-font-ui);
	color: var(--an-text-2);
}

/* The composer stops being a docked bar and becomes the thing the
   page is built around. On a minimal page there is nothing above
   it to scroll past, so pinning it to the bottom would pin it to
   the bottom of an empty screen. */
.is-min .blk-ask {
	position: static;
	margin: 0 auto;
	padding: 0;
	background: transparent;
	border: 0;
	max-width: none;
}

.is-min .blk-ask input[type="search"] {
	padding: var(--an-space-5);
	font-size: var(--an-t-h4);
	border-radius: var(--an-radius-xl);
	border-width: 1.5px;
}

.is-min .blk-ask input[type="search"]:focus {
	outline: 0;
	border-color: var(--an-primary);
}

.is-min .blk-ask button {
	padding: var(--an-space-5) var(--an-space-6);
	font-size: var(--an-t-body);
	border-radius: var(--an-radius-xl);
}

/* Once the feed has something in it the composer moves to the
   bottom, where a follow-up question belongs. Driven by :has(),
   with the static position above as the fallback where it is
   unsupported — the box works either way, it is only ever in the
   wrong half of the screen. */
@supports selector(:has(*)) {
	.is-min .an-feed:has(.blk) ~ .blk-ask {
		position: sticky;
		bottom: 0;
		padding: var(--an-space-3) 0 calc(var(--an-space-3) + env(safe-area-inset-bottom));
		background: var(--an-bg);
		border-top: 1px solid var(--an-line);
	}
}

/* ── the three questions ──────────────────────────────────── */

.mn-eg {
	display: flex;
	flex-wrap: wrap;
	gap: var(--an-space-2);
	margin: var(--an-space-4) 0 0;
	padding: 0;
	list-style: none;
}

.mn-eg button {
	padding: var(--an-space-3) var(--an-space-4);
	font: 400 var(--an-t-small) / 1.2 var(--an-font-ui);
	color: var(--an-text-2);
	background: transparent;
	border: 1px solid var(--an-line);
	border-radius: 999px;
	cursor: pointer;
	transition: color var(--an-fast) var(--an-ease),
	            border-color var(--an-fast) var(--an-ease);
}

.mn-eg button:hover,
.mn-eg button:focus-visible {
	color: var(--an-text);
	border-color: var(--an-text-3);
}

/* ── everything else, folded ──────────────────────────────── */

.mn-more {
	max-width: 760px;
	margin: var(--an-space-8) auto 0;
	padding: 0 clamp(16px, 5vw, 40px);
	border-top: 1px solid var(--an-line);
}

.mn-more > summary {
	list-style: none;
	cursor: pointer;
	padding: var(--an-space-5) 0;
	font: 500 var(--an-t-micro) / 1 var(--an-font-mono);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--an-text-3);
	display: flex;
	align-items: center;
	gap: var(--an-space-3);
}

.mn-more > summary::-webkit-details-marker { display: none; }

.mn-more > summary::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--an-line);
}

.mn-more > summary:hover,
.mn-more > summary:focus-visible { color: var(--an-text); }

.mn-more[open] > summary { color: var(--an-text-2); }

.mn-more-in { padding-bottom: var(--an-space-8); }

/* Inside the fold the page is the page again — the full shell's
   own styles apply untouched. A second, smaller design for
   folded content would be a second design to maintain. */
.mn-more-in .an-sec,
.mn-more-in .an-market,
.mn-more-in .an-hub-do { margin-inline: 0; }

/* ── the feed sits in the same column ─────────────────────── */

.is-min .an-feed {
	max-width: 760px;
	margin: 0 auto;
	padding: var(--an-space-6) 0 0;
}

/* Before anything has been asked the feed is an empty div, and an empty div
   with padding is a gap the page cannot explain. */
.is-min .an-feed:empty { padding: 0; }

@media (max-width: 640px) {
	.is-min .an-feed { padding-top: var(--an-space-5); }
	.mn { padding-top: clamp(16px, 6vh, 48px); }
}

/* ── the footer, reduced to a line ────────────────────────── */

.is-min .sx-foot {
	max-width: 760px;
	margin: var(--an-space-9) auto 0;
	padding: var(--an-space-5) clamp(16px, 5vw, 40px);
	border-top: 1px solid var(--an-line);
	font: 400 var(--an-t-micro) / 1.6 var(--an-font-ui);
	color: var(--an-text-3);
}