/* Tool pages. Uses the theme's colour tokens; loaded only on tool pages. */

.is-tool .content { max-width: var(--maxw, 1120px); }
.is-tool .entry-content > * { max-width: none; }
.tool > * + * { margin-top: 24px; }
.tool h2 { margin-top: 0; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.answer { background: var(--c-surface); border: 1px solid var(--c-border); border-left: 5px solid var(--c-primary); border-radius: var(--radius); padding: 14px 16px; }
.answer p { margin: 0; max-width: 70ch; }
.answer p + p { margin-top: 8px; color: var(--c-muted); }

/* Form */
.tool-form fieldset { border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); margin: 0; padding: 12px 16px 16px; min-width: 0; }
.tool-form legend { font-weight: 800; padding: 0 6px; }
.field-grid { display: grid; gap: 12px 16px; grid-template-columns: 1fr; }
@media (min-width: 480px) { .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .field-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field label { font-weight: 700; font-size: .95rem; }
.field__hint { margin: 0; font-size: .85rem; color: var(--c-muted); }
.farm-note { margin-top: 12px; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--c-link, inherit); text-decoration: underline; cursor: pointer; }
.field select, .field input {
	font: inherit; font-size: 1rem; min-height: 44px; width: 100%; padding: 8px 10px;
	color: var(--c-ink); background: var(--c-bg); border: 1px solid var(--c-muted); border-radius: 8px;
}
.check-row { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 12px; }
.check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--c-primary); }

.tool-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.tool-actions__status { color: var(--c-primary); font-weight: 700; }
.button, .link-button { font: inherit; cursor: pointer; }
.button {
	min-height: 44px; padding: 8px 16px; border-radius: 10px; font-weight: 700;
	background: var(--c-primary); color: var(--c-bg); border: 1px solid var(--c-primary);
}
.button:hover { background: var(--c-primary-dark); }
.button--ghost { background: transparent; color: var(--c-ink); border-color: var(--c-border); }
.button--ghost:hover { background: var(--c-alt); }
.link-button { background: none; border: 0; padding: 10px 4px; min-height: 44px; color: var(--c-link); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; white-space: nowrap; }

.notice { background: var(--c-alt); border: 1px solid var(--c-border); border-radius: 8px; padding: 10px 12px; }

/* Results */
.tool-results { min-height: 320px; }
html:not(.tool-ready) .tool-results [data-results]:empty { min-height: 240px; }
.result-summary { font-size: 1.1rem; margin: 0 0 12px; min-height: 1.6em; }
.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); }
.results-table { width: 100%; border-collapse: collapse; font-size: .97rem; }
.results-table th, .results-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--c-border); vertical-align: middle; }
.results-table thead th { background: var(--c-alt); font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; }
.results-table .num { text-align: right; white-space: nowrap; }
.results-table tbody th { font-weight: 700; }
.results-table tr.is-best th, .results-table tr.is-best td { background: color-mix(in srgb, var(--c-primary) 10%, transparent); }
.results-table .math-row td { background: var(--c-bg); }
.tag { display: inline-block; margin-left: 6px; font-size: .75rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--c-alt); color: var(--c-accent-ink); border: 1px solid var(--c-border); vertical-align: middle; }
@media (max-width: 520px) {
	.results-table th, .results-table td { padding: 7px 6px; }
	.results-table .col-hide-sm { display: none; }
}

.math { margin: 4px 0; padding-left: 1.3em; display: grid; gap: 4px; }
.math__value { margin-left: 4px; }
.math__detail { display: block; color: var(--c-muted); font-size: .88rem; }
.math__source { margin: 8px 0 0; font-size: .88rem; color: var(--c-muted); }

/* Comparison cards */
.compare { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .compare { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.compare-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 14px 16px; }
.compare-card.is-best { border: 2px solid var(--c-primary); }
.compare-card h3 { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.compare-card .big { font-size: 1.6rem; font-weight: 800; margin: 4px 0; }
.compare-card dl { display: grid; grid-template-columns: auto auto; gap: 4px 12px; margin: 8px 0; }
.compare-card dt { color: var(--c-muted); }
.compare-card dd { margin: 0; text-align: right; font-weight: 700; }
.compare-card details { margin-top: 8px; }
.compare-card summary { cursor: pointer; color: var(--c-link); font-weight: 600; min-height: 44px; display: flex; align-items: center; }

/* Greenhouse grid: 12 x 10 soil plus the wooden border ring */
.gh-wrap { overflow-x: auto; }
.gh-grid { display: grid; grid-template-columns: repeat(14, minmax(18px, 1fr)); gap: 2px; max-width: 560px; padding: 6px; background: color-mix(in srgb, var(--c-accent) 35%, var(--c-surface)); border-radius: 10px; }
.gh-cell { aspect-ratio: 1; border-radius: 3px; display: grid; place-items: center; font-size: .6rem; font-weight: 800; color: #10210f; }
.gh-cell--border { background: transparent; }
.gh-cell--soil { background: color-mix(in srgb, var(--c-accent-ink) 55%, var(--c-surface)); }
.gh-cell--sprinkler { background: #9fd3ff; color: #0b2a44; }
.gh-cell--sprinkler::after { content: "S"; }
.gh-legend { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.gh-legend li { display: inline-flex; align-items: center; gap: 6px; }
.gh-swatch { width: 16px; height: 16px; border-radius: 3px; display: inline-grid; place-items: center; font-size: .6rem; font-weight: 800; color: #10210f; }
.gh-c0 { background: #8fd18a; } .gh-c1 { background: #f2c14e; } .gh-c2 { background: #e98a9a; }
.plan-rows { display: grid; gap: 10px; }
.plan-row { display: grid; gap: 8px 12px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: end; }

/* Shared blocks */
.tool-explain, .tool-meta, .tool-related { max-width: 75ch; }
.tool-explain ol, .tool-explain ul { padding-left: 1.3em; }
.badge--ok { color: var(--c-primary); margin-right: 6px; }
.related-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.related-list a { font-weight: 700; display: inline-block; padding: 6px 0; }
.related-list span { display: block; color: var(--c-muted); font-size: .95rem; }
.math-details { margin-top: 12px; }
.math-details summary { cursor: pointer; color: var(--c-link); font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.cell-sub { display: block; font-weight: 400; font-size: .85rem; color: var(--c-muted); }
.pick { background: var(--c-surface); border: 2px solid var(--c-primary); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 16px; }
.pick h3 { margin-top: 0; }
.pick h4 { margin: 14px 0 4px; }
.pick .big { font-size: 1.6rem; font-weight: 800; margin: 4px 0; }
.pick ul { margin: 0; padding-left: 1.2em; }

/* Guides and topic hubs */
.is-guide .entry-content, .is-hub .entry-content { max-width: 75ch; }
.guide-byline { color: var(--c-muted); font-size: .95rem; margin: 0 0 16px; }
.guide h2, .hub h2 { margin-top: 32px; }
.guide .results-table td.is-best, .guide .results-table td.is-best small { background: color-mix(in srgb, var(--c-primary) 12%, transparent); font-weight: 700; }
.guide .results-table small { color: var(--c-muted); font-weight: 400; }
.table-note { color: var(--c-muted); font-size: .9rem; margin-top: 6px; }
.hub-lead { font-size: 1.1rem; }
.guide-tools { margin-top: 32px; }

/* Crafting list, gift lists and bundle tracker */
.craft-list { list-style: none; margin: 0 0 12px; padding: 0; }
.craft-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--c-border); padding: 2px 0; }
.gift-grid { display: grid; gap: 8px 24px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.gift-list { margin: 4px 0 12px; padding-left: 1.2em; }
.gift-list li { margin: 2px 0; }
.gift-more { margin-top: 16px; }
.gift-more summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.bundle, .room { border: 1px solid var(--c-border); border-radius: 8px; margin: 10px 0; background: var(--c-surface, transparent); }
.room > summary, .bundle > summary { cursor: pointer; padding: 10px 12px; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.room > .table-note, .room > .bundle { margin-left: 12px; margin-right: 12px; }
.room > .table-note { margin-top: 0; }
.bundle__count { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.is-done > summary .bundle__count { color: var(--c-accent-ink); }
.bundle .table-note, .bundle__mine, .bundle__items { margin-left: 12px; margin-right: 12px; }
.bundle__mine { display: block; margin-bottom: 6px; }
.bundle__items { list-style: none; padding: 0; margin-bottom: 8px; }
.bundle__items label, .bundle__mine, .bundle-controls label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.bundle__items input, .bundle__mine input, .bundle-controls input { width: 22px; height: 22px; flex: none; }
.bundle-controls { margin-bottom: 8px; }