/* Mobile-first. The layout target is a phone held one-handed, with the
   recommendation visible without scrolling. */

:root {
	--bg: #f7f5fb;
	--panel: #ffffff;
	--ink: #1d1a26;
	--ink-soft: #5b5570;
	--ink-faint: #8b849e;
	--line: #e2ddec;
	--accent: #6d4aff;
	--accent-ink: #ffffff;
	--good: #0f7a4d;
	--warn: #8a5a00;
	--warn-bg: #fdf3dd;
	--danger: #a32323;
	--highlight: #f0ebff;
	--radius: 12px;
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #14111c;
		--panel: #1e1a29;
		--ink: #f0edf7;
		--ink-soft: #b6aecb;
		--ink-faint: #857d9c;
		--line: #322b45;
		--accent: #a78bff;
		--accent-ink: #17121f;
		--good: #56d39b;
		--warn: #f0c46b;
		--warn-bg: #33290f;
		--danger: #ff8a8a;
		--highlight: #2a2340;
		color-scheme: dark;
	}
}

* { box-sizing: border-box; }

body {
	margin: 0;
	padding: 0 0 3rem;
	background: var(--bg);
	color: var(--ink);
	font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	/* The page itself must never scroll sideways; wide tables scroll internally. */
	overflow-x: hidden;
}

main { padding: 0 0.75rem; }

.topbar {
	padding: 1rem 0.75rem 0.75rem;
	background: var(--panel);
	border-bottom: 1px solid var(--line);
}
.topbar h1 { margin: 0; font-size: 1.35rem; letter-spacing: -0.01em; }
.subtitle { margin: 0.15rem 0 0; color: var(--ink-faint); font-size: 0.85rem; }
.saveStatus { margin: 0.35rem 0 0; font-size: 0.78rem; color: var(--ink-faint); min-height: 1.1em; }

.panel {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	margin: 0.75rem 0;
	padding: 0.85rem;
}

.panelHead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-bottom: 0.5rem;
}
h2 { margin: 0; font-size: 1.05rem; }
h3 { margin: 1.25rem 0 0.4rem; font-size: 0.9rem; text-transform: uppercase;
	letter-spacing: 0.06em; color: var(--ink-faint); }
h3:first-of-type { margin-top: 0.75rem; }

summary { cursor: pointer; list-style: none; padding: 0.15rem 0; }
summary::-webkit-details-marker { display: none; }
summary h2 { display: inline; }
summary::after { content: " ▾"; color: var(--ink-faint); }
details[open] > summary::after { content: " ▴"; }

.hint { margin: 0.3rem 0 0.6rem; font-size: 0.83rem; color: var(--ink-soft); }
.hint.muted { color: var(--ink-faint); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Buttons ---------------------------------------------------------------- */

button {
	font: inherit;
	min-height: 44px; /* comfortable tap target */
	padding: 0.45rem 0.9rem;
	border-radius: 9px;
	border: 1px solid var(--line);
	background: var(--panel);
	color: var(--ink);
	cursor: pointer;
}
button.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 600; }
button.ghost { background: transparent; }
button.danger { color: var(--danger); }
button:disabled { opacity: 0.45; cursor: default; }

.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.segmented .seg { border: 0; border-radius: 0; min-height: 38px; padding: 0.3rem 0.75rem; font-size: 0.85rem; }
.segmented .seg[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 600; }

.row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin: 0.5rem 0; }

.fileButton {
	display: inline-flex; align-items: center; min-height: 44px;
	padding: 0.45rem 0.9rem; border: 1px solid var(--line);
	border-radius: 9px; cursor: pointer; font-size: 0.95rem;
}

/* Best pick -------------------------------------------------------------- */

.best {
	display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
	background: var(--highlight); border-radius: 10px;
	padding: 0.65rem 0.75rem; margin-bottom: 0.75rem;
}
.bestLabel { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-faint); }
.best strong { font-size: 1.05rem; }
.bestWhy { font-size: 0.83rem; color: var(--ink-soft); flex: 1 1 100%; }

/* Table ------------------------------------------------------------------ */

.tableScroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -0.85rem; padding: 0 0.85rem; }
table { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
th, td { padding: 0.45rem 0.5rem; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); }
th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); font-weight: 600; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.isBest td { background: var(--highlight); font-weight: 600; }
tr.unavailable td { opacity: 0.45; }
tr.noUnicorns td.name { color: var(--ink-soft); }
.colCheck { width: 1.5rem; }
td.zeroGain { color: var(--ink-faint); }

/* Per-row "I bought this". Wide layout shows the compact "+1"; the phone card
   swaps in the full sentence (see the max-width block at the end of this file). */
td.colBuy, th.colBuy { text-align: right; }
.buyRow { padding: 0.2rem 0.5rem; font-size: 0.8rem; }
.buyPhone { display: none; }
.tag { font-size: 0.68rem; padding: 0.05rem 0.35rem; border-radius: 5px;
	background: var(--line); color: var(--ink-soft); margin-left: 0.35rem; vertical-align: middle; }

/* Bought ----------------------------------------------------------------- */

.badge { display: inline-block; min-width: 1.5em; padding: 0.05rem 0.4rem; border-radius: 999px;
	background: var(--line); color: var(--ink-soft); font-size: 0.78rem; text-align: center; }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.boughtActions { display: flex; gap: 0.4rem; }
.boughtList { list-style: none; margin: 0.4rem 0; padding: 0; }
.boughtList li {
	display: flex; align-items: center; gap: 0.6rem;
	padding: 0.45rem 0; border-bottom: 1px solid var(--line);
}
.boughtList .step { flex: 1; }
.boughtList .stepIndex { color: var(--ink-faint); font-variant-numeric: tabular-nums; min-width: 1.5rem; }
.boughtList .stepCost { font-size: 0.8rem; color: var(--ink-soft); }
.boughtList button { min-height: 34px; padding: 0.2rem 0.6rem; font-size: 0.8rem; }

.spentHeading { margin: 0.8rem 0 0; font-size: 0.78rem; text-transform: uppercase;
	letter-spacing: 0.05em; color: var(--ink-faint); font-weight: 600; }
.boughtTotals { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin: 0.6rem 0 0; }
.boughtTotals div { display: flex; gap: 0.35rem; align-items: baseline; }
.boughtTotals dt { color: var(--ink-faint); font-size: 0.78rem; }
.boughtTotals dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }

/* Stats ------------------------------------------------------------------ */

.statGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.5rem; }
.stat { background: var(--bg); border-radius: 9px; padding: 0.5rem 0.6rem; }
.stat .k { display: block; font-size: 0.74rem; color: var(--ink-faint); }
.stat .v { display: block; font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Inputs ----------------------------------------------------------------- */

.fieldGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.6rem; }
.field { display: flex; flex-direction: column; gap: 0.2rem; }
.field label { font-size: 0.78rem; color: var(--ink-soft); }
.field .sub { font-size: 0.72rem; color: var(--ink-faint); }
.field input {
	font: inherit; min-height: 44px; padding: 0.4rem 0.55rem;
	border: 1px solid var(--line); border-radius: 9px;
	background: var(--bg); color: var(--ink);
	font-variant-numeric: tabular-nums; width: 100%;
}
.field.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; align-items: end; }
.field.pair > label { grid-column: 1 / -1; }

.checkGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.15rem; }
.check { display: flex; align-items: center; gap: 0.5rem; min-height: 40px; font-size: 0.88rem; }
.check input { width: 20px; height: 20px; }

textarea {
	width: 100%; font: 0.8rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
	padding: 0.55rem; border: 1px solid var(--line); border-radius: 9px;
	background: var(--bg); color: var(--ink); resize: vertical;
}

.message { padding: 0.5rem 0.65rem; border-radius: 9px; font-size: 0.85rem; margin: 0.5rem 0 0; }
.message.ok { background: var(--highlight); color: var(--ink); }
.message.warn { background: var(--warn-bg); color: var(--warn); }
.message.error { background: var(--warn-bg); color: var(--danger); }
.message ul { margin: 0.35rem 0 0; padding-left: 1.1rem; }

footer { padding: 0 1.25rem; color: var(--ink-faint); font-size: 0.78rem; }

/* Phones: the eleven-column table does not fit any phone, and side-scrolling to
   compare two rows is worse than not showing them. Same markup -- one render
   path, one set of headings -- laid out as a card per building. Each value keeps
   its own label via data-label, set in ui.js from the live <th> text. */
@media (max-width: 719px) {
	.tableScroll { overflow-x: visible; margin: 0; padding: 0; }
	#recommendTable, #recommendBody tr, #recommendBody td { display: block; }
	/* Flex column so each row's `order` (set in ui.js) ranks the cards. */
	#recommendBody { display: flex; flex-direction: column; }

	/* Visually hidden, still read by screen readers and still the label source. */
	#recommendTable thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	#recommendBody tr {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		column-gap: 0.5rem;
		border: 1px solid var(--line);
		border-radius: var(--radius);
		padding: 0.6rem 0.75rem;
		margin-bottom: 0.6rem;
		background: var(--panel);
	}

	#recommendBody td {
		flex: 0 0 100%;
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 1rem;
		border: 0;
		padding: 0.2rem 0;
		white-space: normal;
		text-align: right;
	}
	/* display:flex above would otherwise beat the [hidden] attribute, and the
	   unicorn/ivory cost columns are toggled with exactly that. */
	#recommendBody td[hidden] { display: none; }

	#recommendBody td::before {
		content: attr(data-label);
		color: var(--ink-faint);
		font-weight: 400;
		text-align: left;
		text-transform: none;
		letter-spacing: 0;
	}

	/* Checkbox, name and rank share the card's first line. */
	#recommendBody td.colCheck { flex: 0 0 auto; order: -3; padding: 0; }
	#recommendBody td.colCheck input { width: 22px; height: 22px; }
	#recommendBody td.name {
		flex: 1 1 auto;
		order: -2;
		justify-content: flex-start;
		gap: 0.35rem;
		font-size: 1rem;
		font-weight: 600;
	}
	#recommendBody td.colOrder { flex: 0 0 auto; order: -1; }
	#recommendBody td.colCheck::before, #recommendBody td.name::before { content: none; }
	#recommendBody td.colOrder::before { content: none; }
	#recommendBody td.colOrder.hasOrder {
		background: var(--accent);
		color: var(--accent-ink);
		border-radius: 999px;
		min-width: 1.6rem;
		justify-content: center;
		gap: 0; /* the inherited 1rem would split "#" from the number */
		padding: 0.1rem 0.45rem;
		font-weight: 600;
	}
	#recommendBody td.colOrder.hasOrder::before { content: "#"; color: inherit; }

	/* A card per building is eight lines tall if every row is kept, and rows
	   reading "Other cost —" are pure noise. The dash cells already carry
	   .zeroGain, so drop them; an unavailable building shrinks to its name and
	   price. The heading stays in the DOM for the wide layout. */
	#recommendBody td.zeroGain { display: none; }

	/* The card's main action: full width at the bottom, thumb-sized. Ordered last
	   so it sits below the numbers no matter which cells got dropped as dashes. */
	#recommendBody td.colBuy {
		order: 10;
		flex: 0 0 100%;
		padding: 0.45rem 0 0.1rem;
	}
	#recommendBody td.colBuy::before { content: none; }
	#recommendBody .buyRow {
		width: 100%;
		padding: 0.6rem;
		font-size: 0.95rem;
		min-height: 44px;
	}
	#recommendBody .buyWide { display: none; }
	#recommendBody .buyPhone { display: inline; }
	/* .zeroGain hides empty cells, but this cell holds a button, never a dash. */
	#recommendBody tr.isBest .buyRow {
		background: var(--accent);
		color: var(--accent-ink);
		border-color: transparent;
		font-weight: 600;
	}

	/* The whole card carries the state, rather than each cell separately. */
	#recommendBody tr.isBest { border-color: var(--accent); background: var(--highlight); }
	#recommendBody tr.isBest td { background: none; }
	#recommendBody tr.unavailable { opacity: 0.55; }
	#recommendBody tr.unavailable td { opacity: 1; }
}

@media (min-width: 720px) {
	main { max-width: 1100px; margin: 0 auto; padding: 0 1rem; }
	.topbar { padding: 1.25rem 1rem; }
	table { font-size: 0.88rem; }
}