/* SmartAG Plaisia: shared visual theme for /plaisia/ and /plaisia/en/.
   Loaded after the inline styles, so it redefines the same tokens and refines components. */
:root{
  --ground:#F3F5F3; --surface:#FFFFFF; --ink:#0F1A15; --muted:#59665F; --rule:#E0E6E2;
  --pasture:#12805C; --pasture-soft:#E2F1EA; --soil:#C25E12; --grid:#AEBDB5;
  --accent-ink:#0B5E43; --shadow:0 1px 2px rgba(15,26,21,.05),0 4px 16px rgba(15,26,21,.04);
  --radius:12px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#0A100D; --surface:#111914; --ink:#E6EEE9; --muted:#98A79F; --rule:#22302A;
  --pasture:#3CCB93; --pasture-soft:#13261D; --soil:#F29B4B; --grid:#3B4B43;
  --accent-ink:#7FE3BA; --shadow:0 1px 2px rgba(0,0,0,.4); color-scheme:dark}}
:root[data-theme="dark"]{
  --ground:#0A100D; --surface:#111914; --ink:#E6EEE9; --muted:#98A79F; --rule:#22302A;
  --pasture:#3CCB93; --pasture-soft:#13261D; --soil:#F29B4B; --grid:#3B4B43;
  --accent-ink:#7FE3BA; --shadow:0 1px 2px rgba(0,0,0,.4); color-scheme:dark}

body{line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--pasture-soft)}
a{color:var(--accent-ink);text-decoration-thickness:1px;text-underline-offset:3px}

/* Full justification with hyphenation, for running text only */
p,figcaption,.note,.timeline span:last-child{text-align:justify;hyphens:auto;-webkit-hyphens:auto;text-wrap:pretty}
h1,h2,h3,.label,.mono,.tiles b,.facts b,.stamp{text-align:left;hyphens:manual}

/* Header */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--ground) 82%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom-color:var(--rule)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--ground)}
.brand span{color:var(--pasture)}

/* Hero */
.hero{padding-block:64px 48px;gap:22px}
h1{font-weight:750;letter-spacing:-.025em;line-height:1.05}
.hero .lede{font-size:1.18rem;color:var(--muted);max-width:62ch}
.label{letter-spacing:.1em}
section > .label{color:var(--pasture);font-weight:500}
h2{letter-spacing:-.015em;font-size:1.75rem}

/* Cards: facts, tiles, charts, stages, plan */
.facts,.tiles{gap:12px;background:none;border:0}
.facts div,.tiles div{border:1px solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow)}
.facts b,.tiles b{color:var(--ink)}
.tiles b{font-size:1.5rem;letter-spacing:-.01em}
.tiles div:nth-child(2) b{color:var(--pasture)}
.chart,.stage,.plan{border-radius:var(--radius);box-shadow:var(--shadow);border-color:var(--rule)}
.chart{padding:18px 18px 12px;gap:10px}
.chart h3{font-size:1.02rem;letter-spacing:-.005em}
.chart figcaption{font-size:.85rem}
.stage .label{color:var(--pasture)}
.note{border-radius:var(--radius);background:var(--pasture-soft);border:1px solid color-mix(in srgb,var(--pasture) 18%,transparent)}

/* Table */
.tbl{border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)}
.tbl table{margin:0}
.tbl th{background:color-mix(in srgb,var(--pasture-soft) 55%,var(--surface))}
.tbl tr:last-child td{border-bottom:0}
.code{border-radius:6px;background:var(--pasture-soft);border-color:transparent;color:var(--accent-ink);font-weight:500}

/* Timeline */
.timeline{border-left-color:color-mix(in srgb,var(--pasture) 45%,transparent)}
.timeline div::before{background:var(--pasture);border-color:var(--ground);box-shadow:0 0 0 2px var(--pasture)}

/* Buttons */
.copy{border-radius:999px;padding:6px 16px;background:var(--pasture);color:var(--surface);border-color:var(--pasture);font-weight:500}
.copy:hover{filter:brightness(1.08)}

section{border-top-color:var(--rule);padding-block:56px}
footer{border-top-color:var(--rule)}
.maplegend i{border-radius:999px}

@media (max-width:760px){.hero{padding-block:40px 32px}section{padding-block:40px}}
@media (prefers-reduced-motion:no-preference){.chart,.facts div,.tiles div{transition:box-shadow .2s}}

/* Map tooltip */
#cMap{position:relative}
#cMap svg rect[data-i]{cursor:crosshair}
.maptip{position:absolute;z-index:3;pointer-events:none;background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.14);padding:7px 11px;font-size:.8rem;line-height:1.4;white-space:nowrap;text-align:left}
.maptip b{font-family:var(--f-mono);font-weight:500}
.maptip span{color:var(--muted);font-size:.72rem}

/* Full justification for all running text (lists, tables, captions, notes) */
li,td,small,figcaption,.lede,.stamp,.timeline span:last-child,.stage ul li{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
th,.code,.label,.mono,.tiles b,.facts b,.timeline .mono,.maptip{text-align:left}

/* Chart header with segmented control */
.chart-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.seg{display:inline-flex;background:var(--ground);border:1px solid var(--rule);border-radius:999px;padding:3px;gap:2px}
.seg button{font:500 .78rem/1 var(--f-mono);letter-spacing:.04em;color:var(--muted);background:transparent;border:0;border-radius:999px;padding:7px 12px;cursor:pointer}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--accent-ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.seg button:focus-visible{outline:2px solid var(--pasture);outline-offset:1px}
.cv.short{height:230px}
.soilfacts{display:flex;flex-wrap:wrap;gap:8px}
.soilfacts span{font-size:.8rem;color:var(--muted);background:var(--ground);border:1px solid var(--rule);border-radius:999px;padding:4px 10px}
.soilfacts b{color:var(--ink);font-family:var(--f-mono);font-weight:500}
.tiles small,.soilfacts span,.seg button{text-align:left;hyphens:manual}