/* Milpa Gardens — the shell's one stylesheet (Phase A, D-024/D-025; rebranded D-030).
   Tokens first: every colour, size, and radius below comes from this block, so the app reads
   as one system and a rebrand is a one-block change. Works in light and dark via color-scheme
   + system colours (Canvas/currentColor); the green hexes hold contrast in both. */

:root {
  color-scheme: light dark;

  /* colour — garden-green accent + neutrals. Two kinds of green: --accent for FILLS, BORDERS,
     and GRAPHICS (3:1 UI-component contrast is enough there), --accent-text for green TEXT
     (needs 4.5:1 body-text contrast — #16a34a on white is only 3.1:1, so text gets the darker
     green, and light-dark() picks a brighter one on dark backgrounds where dark greens die). */
  --accent:      #16a34a; /* fills, borders, focus rings, svg marks */
  --accent-deep: #166534; /* dark leaf: primary-button fill (white text = 6.7:1 both modes) */
  --accent-text: light-dark(#15803d, #4ade80);
  --ok:          light-dark(#15803d, #4ade80); /* positive body text */
  --warn:        light-dark(#b45309, #fbbf24);
  --danger:      light-dark(#dc2626, #f87171);
  --muted:       light-dark(#6b7280, #9ca3af);
  --line:        light-dark(#d1d5db, #3f4750);
  --accent-bg:   color-mix(in srgb, var(--accent) 10%, transparent);
  --surface:     color-mix(in srgb, currentColor 4%, transparent);

  /* type scale (body is 16px below) */
  --fs-0: .8rem;   /* fine print */
  --fs-1: .85rem;  /* hints, chips, table detail */
  --fs-2: .9rem;   /* controls, secondary prose */
  --fs-3: .95rem;  /* emphasized secondary */
  --fs-4: 1.05rem; /* card titles */
  --fs-5: 1.4rem;  /* page h1 */

  /* shape + layout */
  --r-1: .4rem;
  --r-2: .5rem;
  --r-3: .6rem;
  --r-pill: 99rem;
  --content-w: 44rem;
}

* { box-sizing: border-box; }
body {
  font: 16px/1.5 system-ui, sans-serif;
  margin: 0;
}

/* ---- shell: header / nav / main / footer ---- */
header.site {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .55rem max(1rem, calc((100% - var(--content-w)) / 2));
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, Canvas 88%, transparent);
  backdrop-filter: blur(8px);
}
header.site .brand {
  font-weight: 600; font-size: var(--fs-4); text-decoration: none; color: inherit;
  margin-right: auto; white-space: nowrap; letter-spacing: -0.01em;
}
header.site .brand b { color: var(--accent-text); font-weight: 800; }
header.site nav .navrow { display: flex; gap: .15rem; flex-wrap: wrap; }
.navitem { position: relative; display: flex; align-items: center; }
.navitem > a {
  text-decoration: none; color: inherit; font-weight: 600; font-size: var(--fs-3);
  padding: .3rem .55rem .3rem .7rem; border-radius: var(--r-2); white-space: nowrap;
}
.navitem > a:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.navitem > a[aria-current="page"] { background: var(--accent-bg); color: var(--accent-text); }
.navitem .caret {
  border: none; background: none; font-size: .7rem; color: var(--muted);
  padding: .35rem .3rem; margin-left: -.35rem; border-radius: var(--r-2); cursor: pointer;
}
.navitem .caret:hover, .navitem .caret[aria-expanded="true"] { color: var(--accent-text); background: var(--accent-bg); }
.navitem .menu {
  position: absolute; top: 100%; left: 0; z-index: 30;
  display: flex; flex-direction: column; gap: .1rem;
  min-width: 12rem; max-width: min(18rem, 92vw); padding: .3rem;
  background: Canvas; border: 1px solid var(--line); border-radius: var(--r-3);
  box-shadow: 0 6px 20px color-mix(in srgb, CanvasText 14%, transparent);
}
.navitem .menu[hidden] { display: none; } /* display:flex above would defeat [hidden] otherwise */
.navitem .menu.alignr { left: auto; right: 0; }
/* on phones, anchor menus to the viewport instead of the nav item so neither edge can clip */
@media (max-width: 480px) {
  .navitem .menu, .navitem .menu.alignr {
    position: fixed; left: .75rem; right: .75rem; top: auto;
    min-width: 0; max-width: none;
  }
}
.navitem .menu a {
  text-decoration: none; color: inherit; font-size: var(--fs-2);
  padding: .35rem .6rem; border-radius: var(--r-1); white-space: nowrap;
}
.navitem .menu a:hover { background: var(--accent-bg); color: var(--accent-text); }
/* deep-linked sections land clear of the sticky header */
fieldset[id], #guilds, #beliefs, #rules, #whyclimate { scroll-margin-top: 4.5rem; }
.unitbtn { font-size: var(--fs-1); font-weight: 700; padding: .2rem .55rem; min-width: 2.2rem; }
button.primary { background: var(--accent-deep); color: #fff; border-color: var(--accent-deep); font-weight: 600; padding: .35rem 1.1rem; }
button.primary:disabled { opacity: .6; }
.authchip { font-size: var(--fs-1); font-weight: 600; text-decoration: none; color: var(--muted); border: 1px solid var(--line); border-radius: var(--r-pill); padding: .15rem .6rem; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.authchip.on { color: var(--accent-text); border-color: var(--accent); background: var(--accent-bg); }
.signedcard { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.signedcard p { margin: 0; flex: 1 1 14rem; }
main { max-width: var(--content-w); margin: 0 auto; padding: 1.25rem 1rem 2rem; }
main h1 { font-size: var(--fs-5); margin: 0 0 .25rem; }
.tagline { color: var(--muted); font-size: var(--fs-2); margin: 0 0 1rem; }
/* ---- landing (D-027): the stranger's front door; returning users fast-path past it ---- */
.landing { max-width: 40rem; margin: 0 auto; text-align: center; padding: 1rem 0 .5rem; }
.landing-hero {
  font-size: clamp(1.7rem, 6vw, 2.6rem); line-height: 1.15; font-weight: 800;
  letter-spacing: -0.02em; margin: 1.25rem 0 .75rem;
}
.landing-sub { font-size: var(--fs-4); max-width: 34rem; margin: 0 auto 1.25rem; }
.landing-cta { margin: 1.5rem 0 .5rem; display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.landing-cta .primary { font-size: var(--fs-4); padding: .55rem 1.7rem; border-radius: var(--r-pill); }
.landing-cta .ghost {
  font-size: var(--fs-4); padding: .55rem 1.4rem; border-radius: var(--r-pill);
  background: transparent; border: 1px solid var(--line); color: var(--accent-text); font-weight: 600;
}
.landing-note { font-size: var(--fs-1); color: var(--muted); margin: 0 0 2rem; }
.landing-points {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
  text-align: left; margin: 1.5rem 0;
}
.landing-points .lp {
  border: 1px solid var(--line); border-radius: var(--r-3); padding: .9rem 1rem;
  background: var(--surface);
}
.landing-points .lp h2 { font-size: var(--fs-3); margin: 0 0 .4rem; color: var(--accent-text); }
.landing-points .lp p { font-size: var(--fs-2); margin: 0; }
.landing-foot { font-size: var(--fs-2); color: var(--muted); margin: 1.75rem 0 0; }
.landing-foot a { color: var(--accent-text); }
@media (max-width: 560px) { .landing-points { grid-template-columns: 1fr; } }

/* the "example garden" banner on Plan while a demo preset is loaded (D-029) */
.demobar {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  border: 1px solid var(--accent); background: var(--accent-bg); border-radius: var(--r-2);
  padding: .6rem .85rem; margin: 0 0 1rem; font-size: var(--fs-2);
}
.demobar span { flex: 1 1 16rem; }
.demobar button {
  background: var(--accent-deep); color: #fff; border: 1px solid var(--accent-deep);
  border-radius: var(--r-1); font-weight: 600; padding: .3rem .8rem; white-space: nowrap;
}

/* progressive onboarding hints on Plan (D-028) — one ordered step at a time, dismissible */
.onboard {
  display: flex; align-items: flex-start; gap: .75rem; flex-wrap: wrap;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  background: var(--surface); border-radius: var(--r-2); padding: .6rem .85rem; margin: 0 0 1rem;
}
.onboard-line { margin: 0; flex: 1 1 16rem; font-size: var(--fs-2); }
.onboard-step {
  display: inline-block; font-size: var(--fs-0); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--accent-text); margin-right: .5rem;
}
.onboard button {
  background: transparent; border: 1px solid var(--line); border-radius: var(--r-1);
  color: var(--muted); font-size: var(--fs-1); padding: .2rem .6rem; white-space: nowrap;
}

footer.site {
  border-top: 1px solid var(--line);
  max-width: var(--content-w); margin: 0 auto; padding: 1rem 1rem 2rem;
  color: var(--muted); font-size: var(--fs-0);
}
footer.site p { margin: .25rem 0; }
.welcome {
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--accent-bg);
  border-radius: var(--r-3); padding: .7rem 1rem; margin: 0 0 1rem; font-size: var(--fs-2);
}
.welcome p { margin: .25rem 0; }

/* ---- shared components ---- */
.controls label { font-weight: 600; }
.controls input, .controls select { font: inherit; padding: .2rem .4rem; }
.controls input[type="number"] { width: 5rem; }
#zip { width: 6rem; }
fieldset { border: 1px solid var(--line); border-radius: var(--r-3); margin: 0 0 .9rem; padding: .6rem .9rem; }
legend { font-weight: 600; font-size: var(--fs-2); padding: 0 .3rem; }
button {
  font: inherit; font-size: var(--fs-2); padding: .25rem .7rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-2);
  background: color-mix(in srgb, currentColor 5%, transparent); color: inherit;
}
button:hover { border-color: var(--accent); }
#climate { font-size: var(--fs-2); }
#climate .provenance { color: var(--muted); font-size: var(--fs-1); }
/* Phase D frost-risk panel (D-042): the last-frost percentile curve, under the climate line. */
#frostrisk { font-size: var(--fs-2); margin-top: .5rem; }
#frostrisk strong { display: block; }
#frostrisk p { margin: .15rem 0; }
#frostrisk .frostrisk-list { margin: .2rem 0; padding-left: 1.1rem; }
#frostrisk .frostrisk-list li { margin: .1rem 0; }
#frostrisk .frostrisk-list li strong { display: inline; color: var(--accent-text); }
#frostrisk .provenance { color: var(--muted); font-size: var(--fs-1); }
/* Phase D daylength panel (D-038): matches the climate block it sits under. */
#daylength { font-size: var(--fs-2); margin-top: .5rem; }
#daylength strong { display: block; }
#daylength p { margin: .15rem 0; }
#daylength .provenance { color: var(--muted); font-size: var(--fs-1); }
#daylength .daylength-curve { display: block; width: 260px; max-width: 100%; height: auto; color: var(--accent); margin: .35rem 0; opacity: .9; }
/* Phase D extension-office panel (D-041): matches the climate/daylength blocks it sits under. */
#extension { font-size: var(--fs-2); margin-top: .5rem; }
#extension strong { display: block; }
#extension p { margin: .15rem 0; }
#extension select { margin: 0 .25rem; }
#extension a { color: var(--accent-text); }
#extension .provenance { color: var(--muted); font-size: var(--fs-1); }
#families label { font-weight: 400; display: inline-block; margin-right: .8rem; font-size: var(--fs-2); }
#eligibility { font-size: var(--fs-2); margin-top: .5rem; }
#eligibility .blocked { margin: .15rem 0; }
#eligibility .suggest { margin: .3rem 0 0; color: var(--ok); font-size: var(--fs-2); }
svg.fit { display: block; margin: .4rem 0 0; }
svg.fit rect.bed { fill: color-mix(in srgb, currentColor 6%, transparent); stroke: var(--muted); stroke-width: 1.5; }
svg.fit rect.fp.ok { fill: color-mix(in srgb, var(--accent) 20%, transparent); stroke: var(--accent); stroke-width: 1.5; }
svg.fit rect.fp.over { fill: color-mix(in srgb, var(--danger) 13%, transparent); stroke: var(--danger); stroke-width: 1.5; stroke-dasharray: 4 3; }
svg.fit circle.fp.ok { fill: color-mix(in srgb, var(--accent) 20%, transparent); stroke: var(--accent); stroke-width: 1.5; }
svg.fit circle.fp.over { fill: color-mix(in srgb, var(--danger) 13%, transparent); stroke: var(--danger); stroke-width: 1.5; stroke-dasharray: 4 3; }
.guild .ring-note { margin: .2rem 0; font-size: var(--fs-1); color: var(--ok); }
.guild .variants { margin: .6rem 0 0; padding: .3rem 0 0; border-top: 1px dashed var(--line); }
.variants-label { margin: .2rem 0; font-size: var(--fs-0); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.guild .variant { margin: .4rem 0 0 .6rem; padding: .3rem .5rem; border-left: 2px solid var(--line); }
.guild .variant h4 { margin: 0 0 .1rem; font-size: var(--fs-3); }
.guild .variant.greyed { opacity: .6; }
.rec { color: var(--ok); font-weight: 600; font-size: var(--fs-1); }
.guild details { margin: .5rem 0 0; font-size: var(--fs-2); }
.guild details summary { cursor: pointer; font-weight: 600; }
.guild .role { margin: .3rem 0; }
.guild .window { margin: .5rem 0 .1rem; font-weight: 600; }
.guild .heat { margin: .1rem 0; color: var(--warn); }
.guild .mech { margin: .2rem 0; }
.guild .honesty { margin: .2rem 0; font-style: italic; color: var(--muted); }
.guild .lead { margin: .3rem 0 .1rem; color: light-dark(#7c3aed, #a78bfa); }
.subst { margin: .25rem 0 .1rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; }
.subst select { font-size: var(--fs-1); max-width: 100%; }
.subst .subst-clean { color: var(--ok); }
.subst .subst-adaptation { color: var(--warn); }
.subst .subst-blocked { color: light-dark(#b91c1c, #f87171); }
.tscroll { overflow-x: auto; max-width: 100%; }
.guild p[title], #eligibility p[title] { cursor: help; }
table.spacing { border-collapse: collapse; margin: .4rem 0; font-size: var(--fs-1); }
table.spacing th, table.spacing td { border: 1px solid var(--line); padding: .15rem .5rem; text-align: left; }
table.spacing td:last-child { color: var(--muted); font-size: var(--fs-0); }
.hint { color: var(--muted); font-size: var(--fs-1); margin: .3rem 0 0; }
#caltasks .caltask { margin: .5rem 0; padding: .45rem .7rem; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 var(--r-1) var(--r-1) 0; font-size: var(--fs-2); }
.logrow { margin: .35rem 0; font-size: var(--fs-2); }
.logrow label { font-weight: 600; }
.logrow input[type="date"] { font: inherit; padding: .15rem .3rem; }
.logrow input[type="text"] { font: inherit; padding: .15rem .3rem; width: 8rem; }
.logrow input[type="number"] { font: inherit; padding: .15rem .3rem; width: 5rem; }
#logview { font-size: var(--fs-2); margin-top: .5rem; }
#logview .season { margin: .4rem 0; }
#logview .entry { margin: .1rem 0 .1rem 1rem; }
#logmsg.err { color: var(--danger); }
#solar { font-size: var(--fs-2); margin-top: .5rem; }
#solar .provenance { color: var(--muted); font-size: var(--fs-1); margin: .15rem 0; }
#solar .heat { color: var(--warn); margin: .15rem 0; }
#frost { font-size: var(--fs-2); margin: .5rem 0; }
#frost .provenance { color: var(--muted); font-size: var(--fs-1); margin: .1rem 0; }
#frost .calibrated { color: var(--ok); margin: .2rem 0; }
#frost .synthetic { color: var(--warn); font-weight: 600; margin: .15rem 0; }
/* the hint above the map reserves two lines so its text changing never shifts the map
   under a finger mid-trace */
#maphint { min-height: 2.6em; }
#mapsvg { display: block; width: 100%; max-width: 26rem; border: 1px solid var(--line); border-radius: var(--r-2); touch-action: manipulation; cursor: crosshair; background: color-mix(in srgb, currentColor 3%, transparent); }
#mapsvg .grid { stroke: color-mix(in srgb, currentColor 18%, transparent); stroke-width: 1; }
#mapsvg .compass { font: 700 14px system-ui; fill: var(--accent); paint-order: stroke; stroke: Canvas; stroke-width: 3px; }
#mapsvg .trace { fill: color-mix(in srgb, var(--accent) 18%, transparent); stroke: var(--accent); stroke-width: 2; }
#mapsvg polyline.trace { fill: none; }
#mapsvg circle.v { fill: var(--accent); }
#mapsvg .savedbed { fill: color-mix(in srgb, var(--accent) 11%, transparent); stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 5 3; }
#mapsvg .bedlabel { font: 600 12px system-ui; fill: var(--accent); text-anchor: middle; paint-order: stroke; stroke: Canvas; stroke-width: 3px; }
#mapsvg .scale { stroke: currentColor; stroke-width: 2; }
#mapsvg .scalelabel { font: 11px system-ui; fill: currentColor; paint-order: stroke; stroke: Canvas; stroke-width: 3px; }
.page.locked > :not(.lockpanel):not(h1):not(.tagline) { display: none !important; }
.lockpanel { border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-bg); border-radius: var(--r-3); padding: .7rem 1rem; margin: 0 0 1rem; font-size: var(--fs-2); }
.lockpanel p { margin: .25rem 0 .5rem; }
.modebtn { font-size: var(--fs-1); padding: .2rem .6rem; }
.modebtn.on { border-color: var(--accent); color: var(--accent-text); background: var(--accent-bg); font-weight: 600; }
#dimsrect input, #dimscircle input { width: 4rem; font: inherit; padding: .15rem .3rem; }
#mapsvg circle.trace { fill: color-mix(in srgb, var(--accent) 18%, transparent); stroke: var(--accent); stroke-width: 2; }
#mapsvg .dimlabel { font: 600 11px system-ui; fill: var(--accent-deep); paint-order: stroke; stroke: Canvas; stroke-width: 3px; text-anchor: middle; }
.arearow { margin: .3rem 0; font-size: var(--fs-2); }
.arearow button { margin-left: .5rem; font-size: var(--fs-0); padding: .1rem .5rem; }
#logfile { width: 100%; font: var(--fs-0)/1.4 ui-monospace, monospace; }
#logfilebox summary { font-size: var(--fs-1); color: var(--muted); cursor: pointer; }
.guild {
  border: 1px solid var(--line); border-radius: var(--r-3); padding: .8rem 1rem; margin: 0 0 .75rem;
}
.guild h3 { margin: 0 0 .15rem; font-size: var(--fs-4); }
.guild .meta { margin: 0; color: var(--muted); font-size: var(--fs-1); }
.guild.greyed { opacity: .62; background: var(--surface); }
.guild .why { margin: .5rem 0 .1rem; }
.guild .offer { margin: 0; font-weight: 600; }

/* ---- Season review ---- */
#reviewbody { font-size: var(--fs-2); }
#reviewbody .entry { margin: .25rem 0; }
#reviewbody .blocked { margin: .15rem 0 .15rem 1rem; }
#reviewbody .suggest { margin: .3rem 0 .15rem 1rem; color: var(--ok); }
#reviewbody .ok { color: var(--ok); margin: .2rem 0; }

/* ---- Why page ---- */
#whyq { width: 100%; font: inherit; padding: .4rem .6rem; border: 1px solid var(--line); border-radius: var(--r-2); }
#beliefs h2, #rules h2 { font-size: 1.1rem; margin: 1.2rem 0 .2rem; }
.why-card { border: 1px solid var(--line); border-radius: var(--r-3); padding: .6rem .9rem; margin: .6rem 0; font-size: var(--fs-2); }
.why-card h3 { margin: 0 0 .15rem; font-size: var(--fs-3); }
.why-card .meta { margin: 0 0 .3rem; color: var(--muted); font-size: var(--fs-1); }
.why-card p { margin: .25rem 0; }
.why-card .ev { color: var(--warn); font-size: var(--fs-1); }
.why-card .ev.ok { color: var(--ok); font-size: var(--fs-1); }
.why-card details summary { cursor: pointer; color: var(--muted); font-size: var(--fs-1); }

/* ---- a11y (Phase A audit) ---- */
/* one visible focus style everywhere — the UA default drowns next to our borders */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }