/* ══════════════════════════════════════════════════════════════
   AN TESSERA — the builder.

   Laid out for a thumb first. The stage takes the top of the
   screen, the numbers sit under it where they can be read without
   covering anything, and the palette lives in a bottom sheet
   because the bottom third is the only part of a phone a thumb
   reaches without the hand moving.

   Everything here is tested at 380px before it is considered done.
   ══════════════════════════════════════════════════════════════ */

.an-t {
	--t-ink:     #F2F4F1;
	--t-dim:     rgba(242, 244, 241, .62);
	--t-faint:   rgba(242, 244, 241, .38);
	--t-ground:  #08100E;
	--t-panel:   rgba(255, 255, 255, .05);
	--t-panel-2: rgba(255, 255, 255, .085);
	--t-line:    rgba(255, 255, 255, .12);
	--t-hot:     #5FD8A0;
	--t-warn:    #E0A63C;
	--t-fail:    #E0554B;

	position: relative;
	color: var(--t-ink);
	background: var(--t-ground);
	font-family: var(--an-font-ui, system-ui, sans-serif);
	/* The closed sheet handle is 64px and fixed to the viewport bottom, so the
	   page needs more than that below its last element or the final row of
	   numbers can never be scrolled clear of it. */
	padding-bottom: 104px;
	overflow-x: clip;
}

.an-t:focus { outline: none; }
.an-t:focus-visible { outline: 2px solid var(--t-hot); outline-offset: -2px; }

/* ── stage ──────────────────────────────────────────────────── */

.an-t-stage {
	position: relative;
	width: 100%;
	/* Tall enough to build in, short enough that the first number is
	   on screen without scrolling. dvh so the iOS toolbar collapsing
	   does not resize the canvas mid-drag. */
	height: min(58dvh, 460px);
	background: var(--t-ground);
	border-bottom: 1px solid var(--t-line);
	touch-action: none;        /* we handle pinch and pan ourselves */
	overflow: hidden;
}

@media (min-width: 900px) {
	.an-t-stage { height: min(70vh, 620px); }
}

.an-t-stage canvas { display: block; }

.an-t-hint {
	position: absolute;
	left: 12px;
	bottom: 10px;
	padding: 5px 10px;
	border-radius: 999px;
	background: rgba(8, 16, 14, .78);
	border: 1px solid var(--t-line);
	font-size: 12px;
	color: var(--t-dim);
	pointer-events: none;
}

/* ── numbers ────────────────────────────────────────────────── */

.an-t-panel {
	padding: 14px clamp(12px, 4vw, 28px) 18px;
	max-width: 1100px;
	margin: 0 auto;
}

.an-t-panel > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 44px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--t-faint);
}

.an-t-panel > summary::-webkit-details-marker { display: none; }
.an-t-panel > summary::after { content: "▾"; transition: transform var(--an-fast, 140ms); }
.an-t-panel[open] > summary::after { transform: rotate(180deg); }

.an-t-kv {
	margin: 10px 0 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--t-line);
	border: 1px solid var(--t-line);
	border-radius: 12px;
	overflow: hidden;
}

@media (min-width: 620px) {
	.an-t-kv { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

.an-t-kv > div {
	background: var(--t-ground);
	padding: 10px 12px;
	display: grid;
	gap: 3px;
	min-width: 0;
}

.an-t-kv dt {
	margin: 0;
	font-size: 11.5px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--t-faint);
}

.an-t-kv dd {
	margin: 0;
	font-family: var(--an-font-mono, ui-monospace, monospace);
	font-size: 16px;
	font-variant-numeric: tabular-nums;
	color: var(--t-ink);
	/* A value never truncates. If it does not fit, it wraps — a
	   half-shown figure is worse than no figure. */
	overflow-wrap: anywhere;
}

.an-t-findings {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}

.an-t-findings li {
	padding: 10px 12px 10px 14px;
	border-radius: 10px;
	border: 1px solid var(--t-line);
	border-left-width: 3px;
	background: var(--t-panel);
	font-size: 14px;
	line-height: 1.55;
	color: var(--t-dim);
}

.an-t-findings li.is-fail { border-left-color: var(--t-fail); }
.an-t-findings li.is-warn { border-left-color: var(--t-warn); }
.an-t-findings li.is-note { border-left-color: var(--t-line); }

.an-t-clear,
.an-t-empty {
	margin: 14px 0 0;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid var(--t-line);
	background: var(--t-panel);
	font-size: 14px;
	line-height: 1.55;
	color: var(--t-dim);
}

.an-t-clear { border-left: 3px solid var(--t-hot); color: var(--t-ink); }

/* ── share and export ───────────────────────────────────────── */

.an-t-share {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 0;
}

.an-t-share input {
	flex: 1 1 100%;
	min-width: 0;
	min-height: 44px;
	padding: 0 12px;
	border-radius: 10px;
	border: 1px solid var(--t-line);
	background: var(--t-panel);
	color: var(--t-dim);
	font-family: var(--an-font-mono, ui-monospace, monospace);
	font-size: 12.5px;
}

.an-t-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 18px;
	border-radius: 10px;
	border: 1px solid var(--t-line);
	background: var(--t-panel);
	color: var(--t-ink);
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
}

.an-t-btn:hover { background: var(--t-panel-2); }
.an-t-btn:focus-visible { outline: 2px solid var(--t-hot); outline-offset: 2px; }

.an-t-btn.is-primary {
	background: var(--t-hot);
	border-color: var(--t-hot);
	color: #05100C;
	font-weight: 600;
}

.an-t-btn.is-primary:hover { background: #3FC48C; }

.an-t-export {
	margin: 20px 0 0;
	padding: 16px;
	border-radius: 14px;
	border: 1px solid rgba(95, 216, 160, .34);
	background: linear-gradient(165deg, rgba(95, 216, 160, .11), rgba(255, 255, 255, .035) 62%);
}

.an-t-export h3 { margin: 0 0 8px; font-size: 1.02rem; font-weight: 600; }

.an-t-export p {
	margin: 0 0 12px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--t-dim);
}

.an-t-export ul {
	margin: 0 0 14px;
	padding-left: 18px;
	display: grid;
	gap: 5px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--t-dim);
}

.an-t-export-price {
	font-family: var(--an-font-ui, system-ui, sans-serif);
	font-size: 1.5rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	margin: 0 0 10px;
}

/* ── the palette, in a bottom sheet ─────────────────────────────
   Fixed to the bottom because that is where a thumb is. It opens
   over the numbers rather than over the stage, so a grower can see
   what they are about to change while they choose. */

.an-t-sheet {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	/* Opaque, not nearly opaque. At 97% the page ghosted through the closed
	   handle strip, and half-legible text under a control reads as a rendering
	   fault rather than as depth. */
	background: #08100E;
	border-top: 1px solid var(--t-line);
	box-shadow: 0 -12px 40px rgba(0, 0, 0, .5);
	transform: translateY(calc(100% - 64px));
	transition: transform 260ms var(--an-ease, cubic-bezier(.2, .7, .3, 1));
	max-height: min(62dvh, 480px);
	display: flex;
	flex-direction: column;
}

@media (prefers-reduced-motion: reduce) {
	.an-t-sheet { transition: none; }
}

.an-t-sheet.is-open { transform: translateY(0); }

.an-t-sheet-btn {
	flex: 0 0 auto;
	min-height: 64px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: 0;
	background: transparent;
	color: var(--t-ink);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.an-t-sheet-btn::before {
	content: "";
	width: 34px;
	height: 4px;
	border-radius: 999px;
	background: var(--t-line);
}

.an-t-sheet-body {
	overflow-y: auto;
	padding: 0 clamp(12px, 4vw, 24px) max(18px, env(safe-area-inset-bottom));
	-webkit-overflow-scrolling: touch;
}

.an-t-group { margin: 0 0 16px; }

.an-t-group h4 {
	margin: 0 0 8px;
	font-size: 11.5px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--t-faint);
}

.an-t-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
	gap: 7px;
}

.an-t-tile {
	display: flex;
	flex-direction: column;
	gap: 3px;
	align-items: flex-start;
	min-height: 62px;
	padding: 8px 9px;
	border-radius: 10px;
	border: 1px solid var(--t-line);
	background: var(--t-panel);
	color: var(--t-dim);
	font: inherit;
	font-size: 12.5px;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
}

.an-t-tile b { font-weight: 500; color: var(--t-ink); font-size: 12.5px; }
.an-t-tile span { font-size: 11px; color: var(--t-faint); font-variant-numeric: tabular-nums; }
.an-t-tile i { font-style: normal; font-size: 14px; line-height: 1; opacity: .55; }

.an-t-tile:hover { background: var(--t-panel-2); }

.an-t-tile.is-on {
	border-color: var(--t-hot);
	background: rgba(95, 216, 160, .14);
	color: var(--t-ink);
}

.an-t-tile.is-on i { opacity: 1; color: var(--t-hot); }
.an-t-tile:focus-visible { outline: 2px solid var(--t-hot); outline-offset: 2px; }

/* Colour the group headers the same way the tiles are drawn, so the
   palette and the lattice are obviously the same vocabulary. */
.an-t-group[data-g="grow"]  h4 { color: #5FD8A0; }
.an-t-group[data-g="water"] h4 { color: #5AB6E0; }
.an-t-group[data-g="air"]   h4 { color: #B79BE8; }
.an-t-group[data-g="light"] h4 { color: #EDD86B; }

/* ── scenarios ──────────────────────────────────────────────── */

.an-t-scenarios {
	display: grid;
	gap: 10px;
	margin: 18px 0 0;
}

@media (min-width: 700px) {
	.an-t-scenarios { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.an-t-scenario {
	padding: 14px;
	border-radius: 12px;
	border: 1px solid var(--t-line);
	background: var(--t-panel);
}

.an-t-scenario h4 { margin: 0 0 6px; font-size: 14.5px; font-weight: 600; }

.an-t-scenario p {
	margin: 0 0 10px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--t-dim);
}

.an-t-panel-h {
	margin: 24px 0 10px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--t-faint);
}

.an-t-scenario-c {
	margin: 0 0 8px !important;
	font-family: var(--an-font-mono, ui-monospace, monospace);
	font-size: 12.5px !important;
	line-height: 1.5 !important;
	color: var(--t-hot) !important;
}