/* Plantroster site.css — layout and page structure.
 *
 * Pairs with brand.css, which owns tokens, the mark, the wordmark and the
 * chrome components (.pr-*). Nothing here redefines a colour: every value
 * below reads a --pr-* token, so re-skinning stays a one-file change.
 *
 * This file replaces the three scattered <style> blocks that previously lived
 * inside src/guide.js, src/tools.js and public/app-shell.html — the
 * consolidation the brand brief asked for.
 */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { font-size: 16px; }

/* Focus: terracotta, never the browser's blue ring. */
:focus-visible { outline: 2px solid var(--pr-act); outline-offset: 2px; }

.wrap { max-width: 760px; margin: 0 auto; padding: 0 20px; }
.wrap--narrow { max-width: 660px; }

/* — site chrome — */
header.site { border-bottom: 1px solid var(--pr-divider); }
header.site .wrap { display: flex; align-items: center; gap: 20px; padding-top: 14px; padding-bottom: 14px; }
.brand-lockup { display: flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; margin-right: auto; }
.brand-lockup .pr-wordmark { font-size: 19px; }
/* align-items:center so the links share a vertical centre with the pill —
   without it they stretch and their text rides high against the button. */
nav.site { display: flex; align-items: center; gap: 20px; font-size: 14px; }
/* :not(.pr-btn) matters: `nav.site a` outranks `.pr-btn` on specificity, so
   without it the button inherited muted dark text on the sage fill and became
   hard to read. */
nav.site a:not(.pr-btn) { color: var(--pr-muted); text-decoration: none; }
nav.site a:not(.pr-btn):hover { color: var(--pr-brand-deep); }
nav.site a[aria-current="page"]:not(.pr-btn) { color: var(--pr-brand-deep); font-weight: 600; }
/* The lockup and the nav share one baseline row. */
header.site .wrap { align-items: center; }

footer.site { border-top: 1px solid var(--pr-divider); margin-top: 52px; padding: 26px 0 44px; font-size: 13px; color: var(--pr-muted); }
footer.site a { color: var(--pr-muted); }

/* — type — */
h1 { font-size: clamp(28px, 5vw, 38px); line-height: 1.15; letter-spacing: -0.025em; font-weight: 800; margin: .35em 0 .3em; }
h2 { font-size: 22px; line-height: 1.25; letter-spacing: -0.015em; font-weight: 700; margin: 2em 0 .5em; }
h3 { font-size: 17px; font-weight: 700; margin: 1.6em 0 .35em; }
p { margin: .7em 0; }
a { color: var(--pr-brand-text); }
.lede { font-size: 18px; line-height: 1.6; color: var(--pr-muted); margin-bottom: 1.5em; }
.muted { color: var(--pr-muted); }
.crumb { font-size: 13px; color: var(--pr-muted); margin: 18px 0 4px; }
.crumb a { color: var(--pr-muted); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.disc { font-size: 13px; color: var(--pr-muted); font-style: italic; margin-top: 28px; }
ul.tight { padding-left: 20px; } ul.tight li { margin: .35em 0; }
ol { padding-left: 22px; } ol li { margin: .5em 0; }
code { font-size: .9em; background: var(--pr-surface-2); padding: 1px 5px; border-radius: 5px; }

/* — differential cause block: the sage rail marks "here is how to tell" — */
.cause { background: var(--pr-surface); border-radius: var(--pr-radius); border-left: 3px solid var(--pr-brand); padding: 15px 18px; margin: 13px 0; }
.cause h3 { margin-top: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--pr-brand-text); background: var(--pr-brand-tint); padding: 3px 8px; border-radius: 999px; }
.tell { color: var(--pr-muted); }
.tell b, .fix b { color: var(--pr-ink); }

/* — note: terracotta = "act on this", per the four-state rule. Never red. — */
.note { background: var(--pr-act-tint); border-left: 3px solid var(--pr-act); border-radius: var(--pr-radius); padding: 13px 17px; margin: 17px 0; font-size: 15px; color: var(--pr-sev3-fg); }
.note b { color: var(--pr-act-deep); }

/* — facts table — */
.facts, table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 10px 0; }
.facts th, .facts td, table th, table td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--pr-divider); vertical-align: top; }
.facts th, table th { width: 38%; color: var(--pr-muted); font-weight: 500; }

/* — link grid — */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin: 14px 0; }
.grid a { display: block; background: var(--pr-surface); border-radius: var(--pr-radius); padding: 13px 15px; text-decoration: none; color: var(--pr-ink); }
.grid a:hover { background: var(--pr-brand-tint); }
.grid small { display: block; color: var(--pr-muted); font-size: 13px; margin-top: 2px; }

/* — CTA — */
.cta { background: var(--pr-brand-tint); border-radius: var(--pr-radius-lg); padding: 22px; margin: 30px 0; text-align: center; color: var(--pr-brand-text); }
.cta b { font-family: var(--pr-display); font-weight: 400; font-size: 21px; display: block; margin-bottom: 6px; }
.cta a.pr-btn { margin-top: 10px; }

/* — tool panel — */
.tool { background: var(--pr-surface); border-radius: var(--pr-radius-lg); padding: 22px; margin: 20px 0; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.chk { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 6px 0; cursor: pointer; }
.chk input { width: auto; accent-color: var(--pr-act); }
.out { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--pr-divider); }
.big { font-family: var(--pr-display); font-weight: 400; font-size: 24px; line-height: 1.2; margin: 0 0 8px; color: var(--pr-brand-text); }
.big.no { color: var(--pr-act-deep); }
.mixrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--pr-divider); }
.buy { font-size: 12px; font-weight: 700; background: var(--pr-act-tint); color: var(--pr-act-deep); padding: 4px 11px; border-radius: 999px; text-decoration: none; white-space: nowrap; }
.buy:hover { filter: brightness(.97); }
.affil { font-size: 12px; color: var(--pr-muted); font-style: italic; margin-top: 12px; }

/* — trends: decline is terracotta, not red. Declining is not lost. — */
.pr-trend--up { color: var(--pr-brand-deep); }
.pr-trend--flat { color: var(--pr-muted); }
.pr-trend--down { color: var(--pr-act-deep); }

select.pr-input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
textarea.pr-input { border-radius: var(--pr-radius); min-height: 70px; padding: 10px 14px; font-family: var(--pr-font); }

/* — icon cards: glyph left, label right — */
.grid--icon a { display: flex; align-items: center; gap: 12px; }
.grid--icon a svg { flex: none; border-radius: 12px; }
.grid--icon a > span { min-width: 0; }
.grid--icon b { display: block; }

/* — page hero: the glyph sits with the H1, not above it — */
.pagehead { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.pagehead__icon { flex: none; border-radius: 17px; }
.pagehead h1 { margin: 0; }
@media (max-width: 480px) {
  .pagehead { gap: 12px; }
  .pagehead__icon { width: 48px; height: 48px; }
}

/* — tools hub card — */
.toolcard { display: flex; gap: 16px; align-items: flex-start; }
.toolcard svg { flex: none; border-radius: 14px; }
.toolcard h3 { margin: 0 0 4px; }