/* ---------------------------------------------------------------------------
   calculator.css — the calculator UI only. Tokens come from site.css.
   Mobile-first. Every interactive target is at least 44x44.
   --------------------------------------------------------------------------- */

.calc { padding-bottom: var(--s7); }

/* --- primary result ------------------------------------------------------ */

.result {
	position: relative;
	background: var(--surface-1);
	border: 1px solid var(--border);
	border-radius: var(--r3);
	padding: var(--s5) var(--s4) var(--s4);
	margin-bottom: var(--s5);
	overflow: hidden;
}
.result::before {
	/* a faint seam of ore across the top edge */
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 2px;
	background: linear-gradient(90deg,
		var(--gem-topaz), var(--gem-emerald), var(--gem-sapphire),
		var(--gem-ruby), var(--gem-diamond));
	opacity: 0.85;
}

.result__label {
	margin: 0;
	font-size: var(--step--1);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-faint);
}

.result__primary {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--s3);
	margin: var(--s2) 0 0;
	line-height: 1;
}
.result__primary output {
	font-size: var(--display);
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--accent);
	font-variant-numeric: tabular-nums;
	/* fixed line box so the card never resizes as digits are added */
	min-height: 1em;
}
.result__unit {
	font-size: var(--step-2);
	font-weight: 600;
	color: var(--text-soft);
}

.result__secondary {
	margin: var(--s3) 0 0;
	font-size: var(--step-1);
	color: var(--text);
}
.result__secondary output { font-weight: 700; font-variant-numeric: tabular-nums; }
.result__count { margin: var(--s1) 0 0; font-size: var(--step--1); color: var(--text-faint); }

.result__rate {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--s2);
	margin-top: var(--s4);
	padding-top: var(--s4);
	border-top: 1px solid var(--border);
	font-size: var(--step--1);
	color: var(--text-soft);
}
.result__rate label { font-weight: 600; color: var(--text); }
.result__rate input {
	width: 5.5rem;
	min-height: var(--tap);
	padding: var(--s1) var(--s2);
	font: inherit;
	font-variant-numeric: tabular-nums;
	text-align: center;
	color: var(--text);
	background: var(--surface-2);
	border: 1px solid var(--border-hi);
	border-radius: var(--r1);
}

/* --- toolbar and presets -------------------------------------------------- */

.toolbar,
.presets__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
}
.toolbar { margin-top: var(--s4); }

.presets {
	margin-bottom: var(--s5);
	padding: var(--s4);
	background: var(--surface-1);
	border: 1px solid var(--border);
	border-radius: var(--r2);
}
.presets__label {
	margin: 0 0 var(--s3);
	font-size: var(--step--1);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-faint);
}

/* --- gem groups ----------------------------------------------------------- */

.gem-group {
	background: var(--surface-1);
	border: 1px solid var(--border);
	border-left: 3px solid var(--gem);
	border-radius: 0 var(--r2) var(--r2) 0;
	margin-bottom: var(--s4);
	overflow: hidden;
}
.gem-group[data-type="topaz"]    { --gem: var(--gem-topaz); }
.gem-group[data-type="emerald"]  { --gem: var(--gem-emerald); }
.gem-group[data-type="sapphire"] { --gem: var(--gem-sapphire); }
.gem-group[data-type="ruby"]     { --gem: var(--gem-ruby); }
.gem-group[data-type="diamond"]  { --gem: var(--gem-diamond); }

.gem-group__head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--s2);
	min-height: var(--tap);
	padding: var(--s2) var(--s4);
	background: var(--surface-2);
	cursor: pointer;
	list-style: none;
}
.gem-group__head::-webkit-details-marker { display: none; }
.gem-group__head::before {
	content: "";
	flex: 0 0 auto;
	width: 0.5rem;
	height: 0.5rem;
	margin-right: var(--s1);
	border-right: 2px solid var(--text-faint);
	border-bottom: 2px solid var(--text-faint);
	transform: rotate(-45deg);
	transition: transform 0.15s ease;
}
.gem-group[open] .gem-group__head::before { transform: rotate(45deg); }
.gem-group__sub { margin-left: auto; }
.gem-group[open] .gem-group__head { border-bottom: 1px solid var(--border); }
.gem-group__title {
	margin: 0;
	font-size: var(--step-1);
	letter-spacing: -0.01em;
	color: var(--gem);
}
.gem-group__sub { margin: 0 0 0 auto; font-size: var(--step-0); color: var(--text-soft); }
.gem-group__sub output {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--text);
}

/* Each gemstone is one compact horizontal row. The grid tiles those rows: one
   column on a phone, up to three on a wide screen. Same cell layout at every
   width, so there is only one thing to get right.

   Track floor measured in Chrome, not guessed: the fixed parts of a row come to
   256px and the widest visible price label ("600 💎") needs 45px, so 19rem
   leaves real slack. The gem glyph replacing the word "gems" is what bought the
   extra column back. */
.gem-grid {
	list-style: none;
	margin: 0;
	padding: var(--s2);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(19.5rem, 100%), 1fr));
	gap: var(--s1) var(--s2);
}

.gem-cell {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	grid-template-areas:
		"img id stepper value"
		"err err err     err";
	align-items: center;
	gap: 0 var(--s1);
	padding: var(--s1) var(--s2);
	border-radius: var(--r1);
}
.gem-cell:focus-within { background: var(--surface-2); }

.gem-cell__img {
	grid-area: img;
	/* 40px. Still well under the 44px stepper, so the row height does not move,
	   and small enough that three columns still fit at 1024. Sprites are 256px
	   native; nearest-neighbour downscaling keeps them crisp where smoothing
	   turns them to mush. */
	width: 2.5rem;
	height: 2.5rem;
	object-fit: contain;
	image-rendering: pixelated;
}
.gem-cell__id { grid-area: id; min-width: 0; }
.gem-cell__name {
	display: block;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}
.gem-cell__unit {
	display: block;
	font-size: var(--step--1);
	line-height: 1.2;
	color: var(--text-faint);
	/* deliberately allowed to wrap: if the column is ever narrower than the
	   label, a second line is far better than a truncated price */
}

.stepper {
	grid-area: stepper;
	display: flex;
	align-items: center;
	gap: var(--s1);
}
.stepper__btn {
	width: var(--tap);
	height: var(--tap);
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--step-2);
	font-weight: 700;
	line-height: 1;
	color: var(--text-soft);
	background: var(--surface-2);
	border: 1px solid var(--border-hi);
	border-radius: var(--r1);
	cursor: pointer;
}
.stepper__btn:hover { color: var(--gem, var(--accent)); border-color: var(--gem, var(--accent)); }
.stepper__input {
	width: 2.75rem;
	height: var(--tap);
	padding: 0 var(--s1);
	font: inherit;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: center;
	color: var(--text);
	background: var(--surface-2);
	border: 1px solid var(--border-hi);
	border-radius: var(--r1);
}
.stepper__input[aria-invalid="true"] { border-color: var(--danger); }

.gem-cell__value {
	grid-area: value;
	min-width: 2.5rem;
	padding-left: var(--s1);
	text-align: right;
	font-size: var(--step--1);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--gem);
}

.field-err {
	grid-area: err;
	width: 100%;        /* grid-area is ignored in the flex rate row; this wraps it */
	margin: 0;
	font-size: var(--step--1);
	line-height: 1.3;
	color: var(--danger);
}

/* Under 26rem a single row cannot fit the name, the unit price, a 44px
   stepper and the value without cutting something, so it becomes two rows.
   The gem art is decorative (alt="") and goes, to buy width for the price. */
@media (max-width: 26rem) {
	.gem-grid { padding: var(--s2); }
	.gem-cell {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"id      id"
			"stepper value"
			"err     err";
		gap: var(--s1) var(--s2);
		padding: var(--s2);
	}
	.gem-cell__img { display: none; }
	.gem-cell__id {
		display: flex;
		align-items: baseline;
		flex-wrap: wrap;
		gap: 0 0.4em;
	}
	.gem-cell__name, .gem-cell__unit { display: inline; }
	.gem-cell__value { align-self: center; }
}

/* --- jump nav ------------------------------------------------------------- */

.jump {
	position: sticky;
	top: 0;
	z-index: 6;
	margin-inline: calc(var(--s4) * -1);
	padding: var(--s2) var(--s4);
	background: var(--surface-0);
	box-shadow: 0 1px 0 var(--border);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--s2);
	margin-bottom: var(--s4);
}
.jump__label {
	font-size: var(--step--1);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-faint);
}
.jump ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	list-style: none;
	margin: 0;
	padding: 0;
}
.jump__link {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	padding-inline: var(--s3);
	white-space: nowrap;
	border: 1px solid var(--border);
	border-left: 3px solid var(--gem);
	border-radius: var(--r-pill);
	background: var(--surface-1);
	color: var(--text);
	text-decoration: none;
	font-size: var(--step--1);
	font-weight: 600;
}
.jump__link:hover { border-color: var(--gem); background: var(--surface-2); }
.jump__link[data-type="topaz"]    { --gem: var(--gem-topaz); }
.jump__link[data-type="emerald"]  { --gem: var(--gem-emerald); }
.jump__link[data-type="sapphire"] { --gem: var(--gem-sapphire); }
.jump__link[data-type="ruby"]     { --gem: var(--gem-ruby); }
.jump__link[data-type="diamond"]  { --gem: var(--gem-diamond); }

/* clears the sticky jump bar when an anchor is followed */
.gem-group__title { scroll-margin-top: 4rem; }
.gem-group__title:focus { outline: none; }

@media (min-width: 40rem) {
	.result { padding: var(--s6) var(--s6) var(--s5); }
}

/* --- breakdown ------------------------------------------------------------ */

.breakdown {
	background: var(--surface-1);
	border: 1px solid var(--border);
	border-radius: var(--r2);
	margin-bottom: var(--s5);
}
.breakdown > summary {
	display: flex;
	align-items: center;
	gap: var(--s2);
	min-height: var(--tap);
	padding: var(--s2) var(--s4);
	font-weight: 600;
	cursor: pointer;
	border-radius: var(--r2);
	list-style: none;
}
.breakdown > summary::-webkit-details-marker { display: none; }
.breakdown > summary::before {
	content: "";
	flex: 0 0 auto;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 0.15s ease;
}
.breakdown[open] > summary::before { transform: rotate(45deg); }
.breakdown > summary:hover { color: var(--accent); }
.breakdown__body {
	padding: 0 var(--s4) var(--s4);
	overflow-x: auto;              /* four columns on a 320px screen */
	-webkit-overflow-scrolling: touch;
}

.breakdown table {
	width: 100%;
	min-width: 20rem;
	border-collapse: collapse;
	font-size: var(--step--1);
}
.breakdown caption {
	text-align: left;
	color: var(--text-faint);
	padding-bottom: var(--s3);
}
.breakdown th, .breakdown td {
	padding: var(--s2) var(--s2);
	border-bottom: 1px solid var(--border);
	text-align: left;
}
.breakdown thead th {
	color: var(--text-faint);
	font-size: var(--step--1);
	font-weight: 600;
	white-space: nowrap;
}
.breakdown td.num, .breakdown th.num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.breakdown td.strong { font-weight: 700; color: var(--text); }
.breakdown tfoot td, .breakdown tfoot th {
	border-bottom: 0;
	border-top: 2px solid var(--border-hi);
	font-weight: 700;
	padding-top: var(--s3);
}
.breakdown__formula {
	margin: var(--s3) 0 0;
	padding: var(--s3);
	background: var(--surface-2);
	border-radius: var(--r1);
	font-family: var(--font-mono);
	font-size: var(--step--1);
	color: var(--text-soft);
	overflow-x: auto;
}

/* --- running total, small screens only ----------------------------------- */

.sticky-total {
	display: none;
	position: sticky;
	bottom: 0;
	z-index: 5;
	align-items: center;
	justify-content: space-between;
	gap: var(--s3);
	padding: var(--s3) var(--s4);
	margin-top: var(--s4);
	background: var(--surface-2);
	border: 1px solid var(--border-hi);
	border-radius: var(--r2);
	box-shadow: var(--shadow-2);
	font-size: var(--step--1);
	color: var(--text-soft);
}
.sticky-total output {
	font-size: var(--step-2);
	font-weight: 800;
	color: var(--accent);
	font-variant-numeric: tabular-nums;
}
@media (max-width: 49.99rem) {
	.sticky-total { display: flex; }
}

/* app.js hides the bar while the main result card is on screen, so it only
   covers content when it is actually telling you something new. Without JS it
   simply stays visible. */
.sticky-total.is-hidden { display: none; }

.calc-noscript {
	padding: var(--s4);
	background: var(--surface-2);
	border: 1px solid var(--border-hi);
	border-radius: var(--r2);
	margin-bottom: var(--s5);
}
.calc-noscript p { margin: 0; }

/* --- fish calculator ------------------------------------------------------
   Twelve species x five sizes is 60 inputs, so each species is a compact card
   with its sizes in a row, rather than the taller one-row-per-item layout the
   gemstone page uses for its 25. No species artwork: the game's own sprites
   are not ours to add.
   ------------------------------------------------------------------------- */

.fish-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(19.5rem, 100%), 1fr));
	gap: var(--s3);
	margin-bottom: var(--s5);
}

.fish-card {
	background: var(--surface-1);
	border: 1px solid var(--border);
	border-radius: var(--r2);
	overflow: hidden;
}

.fish-card__head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--s2);
	padding: var(--s2) var(--s3);
	background: var(--surface-2);
	border-bottom: 1px solid var(--border);
}
.fish-card__title {
	margin: 0;
	font-size: var(--step-0);
	letter-spacing: -0.01em;
}
.fish-card__sub {
	margin: 0 0 0 auto;
	font-size: var(--step--1);
	color: var(--text-soft);
}
.fish-card__sub output {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--accent);
}

.size-grid {
	list-style: none;
	margin: 0;
	padding: var(--s2);
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--s1);
}

.size-cell {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
	min-width: 0;
	text-align: center;
}
.size-cell__name {
	font-size: 0.7rem;
	line-height: 1.1;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--text-soft);
	cursor: pointer;
	overflow: hidden;
	text-overflow: ellipsis;
}
.size-cell__price {
	font-size: 0.7rem;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	color: var(--text-faint);
}
.size-cell__input {
	width: 100%;
	min-width: 0;
}
.size-cell__value {
	font-size: 0.7rem;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	color: var(--accent);
	min-height: 1.2em;
}
.size-cell .field-err { width: 100%; text-align: left; }

.callout--warn {
	border-left-color: var(--danger);
	background: var(--surface-2);
}

/* The gem emoji stands in for the word "gems" wherever repeating it would cost
   more room than it earns. Always paired with an .sr-only "gems" so the meaning
   survives for anyone not seeing the glyph. */
.gem {
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
	font-size: 0.85em;
	line-height: 1;
	vertical-align: baseline;
}

.fish-card__icon {
	/* sprites are 96px native, so 48px is a clean 2:1 downscale and stays crisp */
	width: 3rem;
	height: 3rem;
	flex: 0 0 auto;
	object-fit: contain;
	image-rendering: pixelated;
	align-self: center;
}

/* The byte coin sprite, used inline the way .gem is. Decorative (alt=""): the
   words "byte coin" are always right beside it. Fixed box so it cannot shift
   the line it sits on. */
.coin {
	width: 1.125em;
	height: 1em;
	object-fit: contain;
	vertical-align: -0.15em;
	image-rendering: pixelated;
}
.result__secondary .coin { width: 1.2em; height: 1.07em; }