/* Plantroster brand.css — one stylesheet to re-skin both surfaces.
   Public SSR pages (src/guide.js, src/tools.js): inline this file's contents into the
   template literal <style>, or serve it from the Worker and <link> it.
   Private SPA (public/app.html): <link rel="stylesheet" href="/brand.css">.
   Light and dark are both first-class via prefers-color-scheme; dark is authored, not inverted. */


:root {
  /* ground */
  --pr-bg: #f5ead8;
  --pr-surface: #ebddc5;
  --pr-surface-2: #f9f4ed;
  --pr-ink: #201e1d;
  --pr-muted: rgba(32,30,29,.62);
  --pr-divider: rgba(32,30,29,.16);
  /* brand (sage) — the brand green; body-size brand text uses --pr-brand-text for AA */
  --pr-brand: #7a8a5e;
  --pr-brand-deep: #56633f;
  --pr-brand-text: #3d472b;
  --pr-brand-tint: #f0fae1;
  /* act (terracotta) — "act", never "danger" */
  --pr-act: #d67f48;
  --pr-act-deep: #8c491a;
  --pr-act-tint: #fff2eb;
  /* loss (brick red) — severity 4 ONLY; nothing else may be red */
  --pr-loss: #a63d2a;
  --pr-loss-fg: #fff2eb;
  /* four semantic states */
  --pr-sev4-bg: var(--pr-loss);      --pr-sev4-fg: var(--pr-loss-fg);
  --pr-sev3-bg: var(--pr-act-tint);  --pr-sev3-fg: #643312; --pr-sev3-dot: var(--pr-act);
  --pr-sev2-bg: var(--pr-brand-tint);--pr-sev2-fg: #3d472b; --pr-sev2-dot: var(--pr-brand);
  --pr-sev1-bg: var(--pr-surface-2); --pr-sev1-fg: #474238; --pr-sev1-dot: #82796a;
  /* zones: terracotta = hot/sun, sage = shade, neutral = indoors */
  --pr-zone-hot: #d67f48; --pr-zone-shade: #7a8a5e; --pr-zone-indoor: #82796a;
  /* mark */
  --pr-mark-bg: #56633f; --pr-mark-row: #f5ead8; --pr-mark-flag: #f6a06b;
  /* shape, type, elevation */
  --pr-radius: 16px; --pr-radius-lg: 26px;
  --pr-font: "Figtree", system-ui, sans-serif;
  --pr-display: "Caprasimo", var(--pr-font);
  --pr-shadow-sm: 0 1px 2px rgba(46,43,37,.14);
  --pr-shadow-md: 0 3px 10px rgba(46,43,37,.16);
}

@media (prefers-color-scheme: dark) {
  :root {
    --pr-bg: #1d1a14;
    --pr-surface: #2a251c;
    --pr-surface-2: rgba(236,227,210,.06);
    --pr-ink: #ece3d2;
    --pr-muted: rgba(236,227,210,.62);
    --pr-divider: rgba(236,227,210,.16);
    --pr-brand: #aebf92;
    --pr-brand-deep: #aebf92;
    --pr-brand-text: #ccdbb2;
    --pr-brand-tint: rgba(174,191,146,.16);
    --pr-act: #f6a06b;
    --pr-act-deep: #ffc6a5;
    --pr-act-tint: rgba(246,160,107,.14);
    --pr-loss: #c65a42;
    --pr-sev3-fg: #ffc6a5;
    --pr-sev2-fg: #ccdbb2;
    --pr-sev1-bg: rgba(236,227,210,.08); --pr-sev1-fg: rgba(236,227,210,.8); --pr-sev1-dot: rgba(236,227,210,.5);
    --pr-mark-bg: #aebf92; --pr-mark-row: #1d1a14; --pr-mark-flag: #8c491a;
    --pr-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --pr-shadow-md: 0 3px 10px rgba(0,0,0,.45);
  }
}

/* — base — */
body { background: var(--pr-bg); color: var(--pr-ink); font-family: var(--pr-font); margin: 0; line-height: 1.55; }
a { color: var(--pr-act-deep); text-underline-offset: 3px; }
a:hover { color: var(--pr-brand-deep); }
::selection { background: rgba(214,127,72,.3); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--pr-act); outline-offset: 2px; }

/* — mark (simple variant, ≤48px: three bars, middle flagged) —
   <span class="pr-mark" style="--s:24px"><i class="r1"></i><i class="r2"></i><i class="r3"></i></span>
   Full variant (≥48px, icon bullets) is markup: see chrome-demo.html / README §Mark. */
.pr-mark { --s: 24px; position: relative; display: inline-block; width: var(--s); height: var(--s); border-radius: 26%; background: var(--pr-mark-bg); flex: none; }
.pr-mark i { position: absolute; display: block; border-radius: 999px; background: var(--pr-mark-row); }
.pr-mark .r1 { left: 20%; top: 22%; width: 60%; height: 14%; }
.pr-mark .r2 { left: 20%; top: 43%; width: 44%; height: 14%; background: var(--pr-mark-flag); }
.pr-mark .r3 { left: 20%; top: 64%; width: 52%; height: 14%; }
.pr-mark--on-ink { --pr-mark-bg: #201e1d; --pr-mark-row: #f5ead8; --pr-mark-flag: #f6a06b; }
.pr-mark--mono { --pr-mark-bg: transparent; --pr-mark-row: currentColor; --pr-mark-flag: currentColor; box-shadow: inset 0 0 0 1.5px currentColor; }

/* — wordmark: Figtree 400 "plant" + 700 sage "roster", lowercase, tracking -0.02em.
   <span class="pr-wordmark">plant<b>roster</b></span>  Never letterspace or recolor ad hoc. */
.pr-wordmark { font-family: var(--pr-font); font-weight: 400; letter-spacing: -0.02em; color: var(--pr-ink); }
.pr-wordmark b { font-weight: 700; color: var(--pr-brand-deep); }

/* — header — */
.pr-header { display: flex; align-items: center; gap: 24px; padding: 16px 28px; }
.pr-header .pr-brand-lockup { display: flex; align-items: center; gap: 10px; margin-right: auto; text-decoration: none; color: inherit; }
.pr-header a { color: inherit; text-decoration: none; font-size: 14px; }
.pr-header a:hover, .pr-header a[aria-current="page"] { color: var(--pr-brand-deep); }

/* — buttons — */
.pr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; font: 600 14px/1.2 var(--pr-font); color: var(--pr-bg); background: var(--pr-brand-deep); border: 1px solid transparent; padding: 9px 18px; border-radius: 999px; }
.pr-btn:hover { filter: brightness(1.08); }
.pr-btn:active { filter: brightness(.92); }
.pr-btn:disabled { opacity: .45; cursor: not-allowed; }
.pr-btn--secondary { background: transparent; color: var(--pr-ink); border-color: var(--pr-divider); }
.pr-btn--secondary:hover { background: rgba(122,138,94,.1); filter: none; }
.pr-btn--act { background: var(--pr-act); color: #fff2eb; }

/* — inputs — */
.pr-input { width: 100%; min-height: 38px; padding: 7px 14px; font: 400 14px var(--pr-font); color: var(--pr-ink); caret-color: var(--pr-act); background: var(--pr-surface); border: 1px solid var(--pr-divider); border-radius: 999px; }
.pr-input:hover { border-color: var(--pr-muted); }
.pr-input:focus-visible { border-color: var(--pr-act); outline-offset: 0; }
textarea.pr-input { border-radius: var(--pr-radius); min-height: 90px; resize: vertical; }
.pr-field > label { display: block; font-size: 12px; margin-bottom: 5px; color: var(--pr-muted); }

/* — card — */
.pr-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: var(--pr-radius-lg); background: var(--pr-surface); }
.pr-card--raised { box-shadow: var(--pr-shadow-sm); }
.pr-card__kicker { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--pr-brand-deep); font-weight: 700; }
.pr-card__meta { font-size: 11px; color: var(--pr-muted); }

/* — zone chip: square swatch (places are fixed) in a round pill (everything else moves) —
   <span class="pr-chip"><i style="background:var(--pr-zone-hot)"></i>hot stucco corner</span> */
.pr-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; padding: 5px 14px; border-radius: 999px; background: var(--pr-surface-2); border: 1px solid var(--pr-divider); color: var(--pr-ink); }
.pr-chip i { width: 11px; height: 11px; border-radius: 3px; background: var(--pr-zone-indoor); flex: none; }

/* — alerts: the four-state severity stack.
   Severity 4 is the ONLY solid fill and the ONLY red. 3/2/1 are tints. —
   <div class="pr-alert pr-alert--sev4"><span class="pr-alert__dot">4</span><div>…</div></div> */
.pr-alert { display: flex; align-items: center; gap: 16px; padding: 16px 24px; border-radius: var(--pr-radius-lg); font-size: 15px; }
.pr-alert__dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; }
.pr-alert__title { font-weight: 600; }
.pr-alert__meta { font-size: 12px; opacity: .8; margin-top: 2px; }
.pr-alert--sev4 { background: var(--pr-sev4-bg); color: var(--pr-sev4-fg); box-shadow: var(--pr-shadow-md); }
.pr-alert--sev4 .pr-alert__dot { background: rgba(255,242,235,.18); color: var(--pr-sev4-fg); }
.pr-alert--sev4 .pr-alert__title { font-weight: 700; }
.pr-alert--sev3 { background: var(--pr-sev3-bg); color: var(--pr-sev3-fg); }
.pr-alert--sev3 .pr-alert__dot { background: var(--pr-sev3-dot); color: #fff2eb; }
.pr-alert--sev2 { background: var(--pr-sev2-bg); color: var(--pr-sev2-fg); }
.pr-alert--sev2 .pr-alert__dot { background: var(--pr-sev2-dot); color: #f0fae1; }
.pr-alert--sev1 { background: var(--pr-sev1-bg); color: var(--pr-sev1-fg); }
.pr-alert--sev1 .pr-alert__dot { background: var(--pr-sev1-dot); color: var(--pr-bg); }

/* — tool result panel: the verdict speaks in the display face — the one place the brand raises its voice — */
.pr-tool-result { border-radius: var(--pr-radius-lg); background: var(--pr-brand-tint); padding: 18px 22px; }
.pr-tool-result__verdict { font-family: var(--pr-display); font-weight: 400; font-size: 24px; color: var(--pr-brand-text); margin: 0 0 6px; }
.pr-tool-result__body { font-size: 13px; color: var(--pr-brand-text); margin: 0; }
.pr-tool-result--act { background: var(--pr-act-tint); }
.pr-tool-result--act .pr-tool-result__verdict, .pr-tool-result--act .pr-tool-result__body { color: var(--pr-sev3-fg); }

/* — trend labels (photo versions) — */
.pr-trend--up { color: var(--pr-brand-deep); font-weight: 700; font-size: 12px; }
.pr-trend--flat { color: var(--pr-muted); font-weight: 700; font-size: 12px; }
.pr-trend--down { color: var(--pr-act-deep); font-weight: 700; font-size: 12px; }