/* ForestPro — forest inventory, mensuration, biomass, carbon and agroforestry, in the browser.
   Copyright (C) 2026  Luis Ángel Barrera-Guzmán

   This program is free software: you can redistribute it and/or modify it under
   the terms of the GNU General Public License as published by the Free Software
   Foundation, either version 3 of the License, or (at your option) any later
   version. It is distributed in the hope that it will be useful, but WITHOUT ANY
   WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
   A PARTICULAR PURPOSE. See the GNU General Public License, in the file LICENSE
   at the root of this program, or <https://www.gnu.org/licenses/>. */

/* ForestPro — the app's own stylesheet. Neutrals, scales, focus ring, top bar,
   block bar, buttons, messages and print come from labg-base.css (shared by the
   LABG Suite, loaded before this file); here go only the identity of ForestPro
   and what is its own.
   Identity: forest green, moss and bark over the black and gold of the LABG
   brand; neutrals with a touch of green, like paper in the shade of a canopy. */

:root {
  --bg: #F3F5EF; --bg-soft: #E7ECE1; --card-bg: #FFFFFF;
  --text: #121A10; --text-muted: #4D5A48;
  --border: #D9E0D1; --border-strong: #B4BFA9; --field-border: #6C7865;
  --primary-rgb: 27, 94, 32; --primary: #1B5E20; --primary-dark: #124417; --on-primary: #FFFFFF;
  --accent-rgb: 93, 64, 55; --accent: #5D4037; --accent-text: #5D4037;
  --musgo: #558B2F; --musgo-text: #3B6A1C; --corteza: #5D4037; --bosque: #1B5E20;
  --oro: #D4A848; --oro-claro: #E6C470; --negro: #0B0D0A;
  /* figures */
  --fig-bg: #FFFFFF; --fig-ink: #172015; --fig-muted: #5F6A5A; --fig-grid: #E6EBE1; --fig-axis: #44503F;
  --fig-point: #2E5E2A; --fig-font: system-ui, "Segoe UI", sans-serif;
  --shadow: 0 1px 2px rgba(20, 40, 18, 0.05), 0 8px 24px rgba(20, 40, 18, 0.07);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A0E09; --bg-soft: #121810; --card-bg: #161D14;
    --text: #E9F0E5; --text-muted: #A3B09C;
    --border: #253021; --border-strong: #3A4835; --field-border: #77856F;
    --primary-rgb: 129, 199, 132; --primary: #81C784; --primary-dark: #A5D6A7; --on-primary: #0B160B;
    --accent-rgb: 188, 170, 164; --accent: #BCAAA4; --accent-text: #D7CCC8;
    --musgo: #9CCC65; --musgo-text: #B5DB86; --corteza: #BCAAA4; --bosque: #81C784;
    --fig-bg: #121810; --fig-ink: #E5EDE0; --fig-muted: #A2AE9B; --fig-grid: #243021; --fig-axis: #B9C6B2;
    --fig-point: #A5D6A7;
  }
}
:root[data-theme="dark"] {
  --bg: #0A0E09; --bg-soft: #121810; --card-bg: #161D14;
  --text: #E9F0E5; --text-muted: #A3B09C;
  --border: #253021; --border-strong: #3A4835; --field-border: #77856F;
  --primary-rgb: 129, 199, 132; --primary: #81C784; --primary-dark: #A5D6A7; --on-primary: #0B160B;
  --accent-rgb: 188, 170, 164; --accent: #BCAAA4; --accent-text: #D7CCC8;
  --musgo: #9CCC65; --musgo-text: #B5DB86; --corteza: #BCAAA4; --bosque: #81C784;
  --fig-bg: #121810; --fig-ink: #E5EDE0; --fig-muted: #A2AE9B; --fig-grid: #243021; --fig-axis: #B9C6B2;
  --fig-point: #A5D6A7;
}
/* ---------- language: both texts live in the page, one is hidden ---------- */
html[lang="es"] [data-l="en"], html[lang="en"] [data-l="es"] { display: none !important; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

body { transition: background-color .25s, color .25s; }
main { max-width: 1200px; margin: 0 auto; padding: 0 20px 80px; }
sub, sup { line-height: 0; }
.brand-pro { color: var(--primary-text); }
#brandLogo svg { width: 30px; height: 30px; display: block; }

/* ---------- Hero: the dark forest in both themes ---------- */
.hero {
  position: relative; overflow: hidden; border-radius: 26px; margin: 22px 0 26px;
  background:
    radial-gradient(900px 480px at 0% -10%, rgba(46, 125, 50, 0.45), transparent 62%),
    radial-gradient(800px 420px at 105% 10%, rgba(212, 168, 72, 0.20), transparent 60%),
    radial-gradient(700px 300px at 60% 120%, rgba(93, 64, 55, 0.40), transparent 60%),
    linear-gradient(160deg, #0D140C 0%, #080B07 55%, #11160F 100%);
  border: 1px solid #2B3A26; box-shadow: 0 20px 60px rgba(6, 14, 6, 0.35);
  color: #EEF4EA; container-type: inline-size;
}
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-radial-gradient(circle at 88% 60%, rgba(212, 168, 72, 0.045) 0 1px, transparent 1px 16px); }
.hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: 26px; align-items: center; padding: 46px 44px 40px; }
@container (max-width: 820px) { .hero-inner { grid-template-columns: minmax(0, 1fr); padding: 28px 18px; } .hero-art { max-width: 440px; margin: 0 auto; width: 100%; } }
.hero h1 { font-size: 2.9rem; line-height: 1.05; margin: 0 0 14px; letter-spacing: -1.2px; font-weight: 800; color: #F6FBF2; }
@container (max-width: 1000px) { .hero h1 { font-size: 2.3rem; } }
@media (max-width: 640px) { .hero h1 { font-size: 2rem; } }
.hero h1 .verde { color: #9BD47E; }
.hero h1 .oro { color: var(--oro-claro); }
.hero .lead { font-size: 1.08rem; color: #CFDACA; margin: 0 0 22px; max-width: 610px; }
.hero .lead b { color: #F6FBF2; }
.hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--oro-claro); margin-bottom: 14px; }
.hero .eyebrow::before { content: ""; width: 28px; height: 2px; background: #9BD47E; border-radius: 2px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero .btn-ghost { color: var(--oro-claro); border-color: rgba(230, 196, 112, 0.45); }
.hero .btn-ghost:hover { background: rgba(230, 196, 112, 0.12); }
.hero .btn-secondary { color: var(--oro-claro); border-color: rgba(230, 196, 112, 0.6); background: transparent; }
.badge-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.badge-row .badge { font-size: 0.74rem; padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(230, 196, 112, 0.28); color: #DDE7D8; }
.badge-row .badge.ok::before { content: "✓ "; color: var(--oro-claro); }
.hero-art { position: relative; min-width: 0; }
.hero-art svg { width: 100%; height: auto; display: block; max-height: 440px; }
.hero-art .ha-caption { font-size: 0.8rem; color: #C3CFBE; text-align: center; min-height: 1.3em; margin: 4px 0 0; }

.section-title { font-size: 1.5rem; letter-spacing: -0.5px; margin: 42px 0 6px; }
.section-sub { color: var(--text-muted); margin: 0 0 18px; max-width: 860px; }

/* ---------- Workflow strip and block cards (home) ---------- */
/* six steps: two rows of three (or one row of six on a very wide screen, two columns on a phone), never five and one */
.workflow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 6px 0 12px; }
@media (min-width: 560px) { .workflow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1700px) { .workflow { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.wf-step { position: relative; padding: 12px 14px 12px 16px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; border-top: 3px solid var(--primary); }
.wf-step .wf-n { font-size: 0.68rem; color: var(--accent-text); font-weight: 700; letter-spacing: .08em; }
.wf-step .wf-t { font-weight: 600; font-size: 0.86rem; }
.wf-step .wf-d { font-size: 0.76rem; color: var(--text-muted); }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.feature {
  font: inherit; text-align: left; color: var(--text);
  position: relative; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius, 14px);
  padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; cursor: pointer;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.feature:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: var(--shadow); }
.feature .f-art { height: 108px; border-radius: 10px; background: var(--fig-bg); border: 1px solid var(--border); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.feature .f-art svg { width: 100%; height: 100%; }
.feature .f-num { font-size: 0.68rem; font-weight: 800; color: var(--accent-text); letter-spacing: .08em; text-transform: uppercase; }
.feature h3 { margin: 0; font-size: 1rem; }
.feature p { margin: 0; font-size: 0.82rem; color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .feature, .feature:hover { transition: none; transform: none; } }
.ex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.ex-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ex-card h3 { margin: 0; font-size: 0.95rem; }
.ex-card p { margin: 0; font-size: 0.8rem; color: var(--text-muted); }
.ex-card .ex-f { font-size: 0.72rem; color: var(--musgo-text); font-weight: 600; }
.ex-card .btn-row { margin-top: auto; }
.notdo { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.notdo div { background: var(--card-bg); border: 1px dashed var(--border-strong); border-radius: 12px; padding: 12px 14px; font-size: 0.84rem; color: var(--text-muted); }
.notdo b { display: block; color: var(--text); font-size: 0.88rem; margin-bottom: 2px; }

/* ---------- Cards and panels ---------- */
.card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius, 14px); padding: 22px 24px; margin-bottom: 18px; box-shadow: var(--shadow); min-width: 0; }
@media (max-width: 640px) { .card { padding: 16px 14px; } }
.card h2 { margin: 0 0 4px; font-size: 1.24rem; letter-spacing: -0.3px; }
.card h3 { font-size: 1.02rem; margin: 18px 0 6px; }
.hint { color: var(--text-muted); font-size: 0.88rem; margin: 4px 0 12px; }
.step-panel { display: none; }
.step-panel.active { display: block; }
.panel-title { display: flex; align-items: center; gap: 14px; margin: 22px 0 8px; }
.panel-title .pt-num { width: 42px; height: 42px; border-radius: 12px; background: var(--primary); color: var(--on-primary); font-weight: 800; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.panel-title h2 { margin: 0; font-size: 1.5rem; letter-spacing: -0.5px; }
.panel-title p { margin: 0; color: var(--text-muted); font-size: 0.9rem; }
.panel-intro { color: var(--text-muted); margin: 0 0 18px; max-width: 900px; font-size: 0.94rem; }
.sub-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 16px; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 14px; align-items: start; }
.three-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; align-items: start; }

/* ---------- Forms ---------- */
input[type=text], input[type=number], input[type=search], select, textarea {
  font-family: inherit; font-size: 0.88rem; padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--field-border); background: var(--card-bg); color: var(--text);
}
input[type=number] { font-variant-numeric: tabular-nums; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 10px 14px; margin: 10px 0; align-items: end; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field > label, .field-label { font-size: 0.74rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.field input, .field select { width: 100%; box-sizing: border-box; }
/* symbols and units keep their case inside the labels written in capitals (Mg is not MG, λ is not Λ) */
.nc { text-transform: none; }
/* fields whose lists carry long names take two or three columns of the grid on a wide screen */
@media (min-width: 761px) { .form-grid > .field.wide { grid-column: span 2; } .form-grid > .field.wider { grid-column: span 3; } }
.checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; cursor: pointer; margin: 4px 0; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0 0; }
.inline-label { font-size: 0.86rem; color: var(--text-muted); display: inline-flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.paste-area { width: 100%; box-sizing: border-box; font-family: var(--mono, monospace); font-size: 0.8rem; }

/* ---------- Data card ---------- */
.data-card { border: 1px dashed var(--border-strong); border-radius: 12px; padding: 12px 14px; background: color-mix(in srgb, var(--bg-soft) 55%, var(--card-bg)); margin: 6px 0 14px; }
.src-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.src-row select { max-width: 100%; }
.ex-note { margin: 8px 0 0; font-size: 0.82rem; }
.ex-note:empty { display: none; }
.data-status { font-size: 0.84rem; color: var(--text-muted); margin: 8px 0 0; }
.data-status:empty { display: none; }
.data-preview > summary { cursor: pointer; font-size: 0.84rem; color: var(--primary-text); font-weight: 600; margin-top: 8px; }
.col-match { margin-top: 10px; }
.sheet-pick { margin: 10px 0 0; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 0.86rem; }
.edit-grid { font-size: 0.82rem; width: max-content; min-width: 100%; }
.edit-grid td { padding: 3px 4px; }
.edit-grid input, .edit-grid select { padding: 4px 6px; font-size: 0.82rem; max-width: 160px; }
.edit-grid select { max-width: 420px; }
.edit-grid input[type=number] { width: 84px; }
.grid-del { width: 28px; height: 28px; font-size: 1rem; }

/* ---------- Tables ---------- */
table { border-collapse: collapse; width: 100%; font-size: 0.86rem; }
thead th { background: var(--bg-soft); text-align: left; padding: 8px 11px; font-weight: 600; border-bottom: 1px solid var(--border); }
tbody td { padding: 6px 11px; border-bottom: 1px solid var(--border); }
tbody tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.res-table td, .res-table th { white-space: nowrap; }
/* result tables fit the column: headers wrap to two lines, cells keep their numbers on one; a table with long
   text (the catalogue of equations) also wraps its cells */
.table-scroll .res-table thead th { white-space: normal; vertical-align: bottom; min-width: 3.2em; overflow-wrap: normal; hyphens: manual; }
.table-scroll .res-table td, .table-scroll .res-table th { padding-left: 8px; padding-right: 8px; }
.table-scroll .res-table td:not(.num) { white-space: normal; min-width: 5.5em; }
.table-scroll .res-table.wrap td { min-width: 7em; }
.edit-grid th, .edit-grid th.num { text-align: left; vertical-align: bottom; }
.data-grid { font-size: 0.78rem; width: max-content; min-width: 100%; }
.data-grid td { padding: 3px 10px; white-space: nowrap; }
.tbl-card { margin: 12px 0 6px; min-width: 0; }
.tbl-title { margin: 0 0 6px; font-size: 0.92rem; }
.tbl-tools { margin-top: 6px; }
tr.row-total td { font-weight: 700; background: color-mix(in srgb, var(--bg-soft) 70%, transparent); }
tr.row-sel td { background: color-mix(in srgb, var(--primary) 9%, transparent); }

/* ---------- Results ---------- */
.results-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
.stat-tile { background: var(--bg-soft); border-radius: 10px; padding: 10px 13px; min-width: 0; }
.stat-tile .stat-label { font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.stat-tile .stat-value { font-size: 1.16rem; font-weight: 700; margin-top: 2px; line-height: 1.25; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat-tile .stat-sub { font-size: 0.74rem; color: var(--text-muted); }
.stat-tile.ok { box-shadow: inset 3px 0 0 var(--success); }
.stat-tile.warn { box-shadow: inset 3px 0 0 var(--warning); }
.stat-tile.bad { box-shadow: inset 3px 0 0 var(--danger); }
.messages { margin-top: 10px; }
.messages:empty { display: none; }
.messages .msg + .msg { margin-top: 6px; }
.interp { border-left: 3px solid var(--musgo); background: color-mix(in srgb, var(--musgo) 8%, var(--card-bg)); border-radius: 0 10px 10px 0; padding: 10px 14px; margin: 12px 0; font-size: 0.9rem; }
.interp .interp-k { display: block; font-size: 0.66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--musgo-text); margin-bottom: 2px; }
.interp.warn { border-left-color: var(--warning); background: var(--warning-soft); }
.method-box { margin: 12px 0 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg); }
.method-box > summary { cursor: pointer; padding: 9px 12px; font-size: 0.84rem; font-weight: 700; color: var(--accent-text); }
.method-box > summary::before { content: "∑ "; }
.method-body { padding: 0 14px 12px; font-size: 0.86rem; }
.method-body p { margin: 6px 0; }
.method-body .eq { font-family: var(--mono, monospace); font-size: 0.82rem; background: var(--bg-soft); border-radius: 6px; padding: 6px 9px; display: block; margin: 6px 0; overflow-x: auto; white-space: pre-wrap; }
.ref-mini { font-size: 0.78rem; color: var(--text-muted); padding-left: 18px; margin: 8px 0 0; }
.ref-mini li { margin-bottom: 4px; }
.res-host:empty { display: none; }
.pill { display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; background: var(--bg-soft); color: var(--text-muted); }
.pill.ok { background: var(--success-soft); color: var(--success-text); }
.pill.warn { background: var(--warning-soft); color: var(--warning-text); }
.pill.bad { background: var(--danger-soft); color: var(--danger-text); }
.ok-t { color: var(--success-text); } .warn-t { color: var(--warning-text); font-weight: 600; } .bad-t { color: var(--danger-text); font-weight: 700; }

/* ---------- Figures ---------- */
.fig-card { margin: 12px 0; border: 1px solid var(--border); border-radius: 12px; background: var(--fig-bg); overflow: hidden; min-width: 0; }
.fig-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px 0; }
.fig-head h4 { margin: 0; font-size: 0.82rem; color: var(--text-muted); font-weight: 700; }
.fig-body { padding: 4px 6px 6px; }
.fig-body svg { display: block; width: 100%; height: auto; max-height: 640px; }
.fig-note { font-size: 0.76rem; color: var(--text-muted); padding: 0 12px 10px; }
.figs-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 12px; }
.figs-2 .fig-card { margin: 0; }
.pl { font-family: var(--fig-font); }
.pl .pl-bg { fill: var(--fig-bg); }
.pl .pl-grid line { stroke: var(--fig-grid); stroke-width: 1; }
.pl .pl-axis line { stroke: var(--fig-axis); stroke-width: 1; }
.pl .pl-tick line { stroke: var(--fig-axis); stroke-width: 1; }
.pl .pl-tick text { fill: var(--fig-muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.pl .pl-lab { fill: var(--fig-ink); font-size: 11.5px; font-weight: 600; }
.pl .pl-title { fill: var(--fig-ink); font-size: 13px; font-weight: 700; }
.pl .pl-pts circle { stroke: var(--fig-bg); stroke-width: .7; }
.pl .pl-legend text { fill: var(--fig-ink); font-size: 11px; }
.pl .pl-legend-title { font-weight: 700; fill: var(--fig-muted); font-size: 10px; letter-spacing: .02em; }
.pl .pl-err { stroke: var(--fig-ink); stroke-width: 1.2; fill: none; }
.pl .pl-vlab, .pl .pl-ptlab { fill: var(--fig-ink); font-size: 10px; font-variant-numeric: tabular-nums; }
.pl .pl-dendro path { fill: none; stroke: var(--fig-ink); stroke-width: 1.4; }
.pl .pl-dlab text { fill: var(--fig-ink); font-size: 10.5px; }
.pl .pl-cellnum { font-size: 9.5px; font-variant-numeric: tabular-nums; }
.pl .pl-cbtick { stroke: var(--fig-axis); }
.pl .pl-cbtext { fill: var(--fig-muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.pl .pl-bars rect { stroke: var(--fig-bg); stroke-width: .6; }
.art-txt { fill: var(--fig-ink); font-family: var(--fig-font); }
.art-mut { fill: var(--fig-muted); font-family: var(--fig-font); }

/* ---------- Cite & references ---------- */
.cite-box { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; font-size: 0.86rem; }
.cite-box .cite-ref { font-family: var(--mono, monospace); font-size: 0.8rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin: 0 0 10px; white-space: pre-wrap; overflow-x: auto; }
.ref-list { font-size: 0.82rem; color: var(--text-muted); columns: 2; column-gap: 28px; padding-left: 22px; }
@media (max-width: 760px) { .ref-list { columns: 1; } }
.ref-list li { margin-bottom: 7px; break-inside: avoid; }
.footer-note { text-align: center; color: var(--text-muted); font-size: 0.8rem; padding: 26px 20px 40px; border-top: 1px solid var(--border); margin-top: 40px; }

/* ---------- Maps (Block 8) ---------- */
.map-wrap { position: relative; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--fig-bg); height: 520px; touch-action: none; user-select: none; }
@media (max-width: 640px) { .map-wrap { height: 420px; } }
.map-wrap.drawing { cursor: crosshair; }
.map-tiles, .map-svg, .map-canvas { position: absolute; inset: 0; }
.map-tiles img { position: absolute; width: 256px; height: 256px; max-width: none; image-rendering: auto; }
.map-svg { width: 100%; height: 100%; overflow: visible; }
.map-tools { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 4px; z-index: 2; }
.map-tools button { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--card-bg); color: var(--text); font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.map-tools button:hover { border-color: var(--primary); }
.map-attrib { position: absolute; right: 0; bottom: 0; font-size: 0.68rem; background: color-mix(in srgb, var(--card-bg) 85%, transparent); color: var(--text); padding: 2px 6px; border-top-left-radius: 6px; z-index: 2; }
.map-attrib a { color: var(--primary-text); }
.map-scale { position: absolute; left: 10px; bottom: 8px; font-size: 0.7rem; color: var(--fig-ink); z-index: 2; }
.map-scale i { display: block; height: 5px; border: 1.5px solid var(--fig-ink); border-top: 0; margin-top: 1px; }
.map-coord { position: absolute; right: 8px; top: 8px; font-size: 0.7rem; background: color-mix(in srgb, var(--card-bg) 85%, transparent); color: var(--text); padding: 2px 6px; border-radius: 6px; z-index: 2; font-variant-numeric: tabular-nums; }
.map-coord:empty { display: none; }
.map-grat line { stroke: var(--fig-grid); stroke-width: 1; }
.map-grat text { fill: var(--fig-muted); font-size: 10px; }

/* ---------- Agroforestry photo (Block 7) ---------- */
.photo-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; margin-top: 10px; }
.photo-pair canvas { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-soft); display: block; }
.photo-pair .cap { font-size: 0.76rem; color: var(--text-muted); margin-top: 4px; }

/* ---------- Top bar on phones ---------- */
@media (max-width: 480px) {
  .topbar-row { flex-wrap: wrap; row-gap: 2px; }
  .brand { flex: 1 1 auto; min-width: max-content; }
  .top-tools { margin-left: auto; }
}

/* ---------- Print ---------- */
@media print {
  .data-card, .src-row, .tbl-tools, .method-box > summary::before { display: none !important; }
  .method-box { border: 0; }
  .card { box-shadow: none; break-inside: avoid-page; }
}

/* ---------- Cover animation: rings from the pith outward, then the contour lines ---------- */
.hero-svg .ha-ring, .hero-svg .ha-cont { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ha-draw 1.1s cubic-bezier(.3, .7, .3, 1) var(--d, 0s) forwards; }
.hero-svg .ha-plot, .hero-svg .ha-pt, .hero-svg .ha-lab, .hero-svg .ha-core { opacity: 0; animation: ha-in .6s ease var(--d, 0s) forwards; }
@keyframes ha-draw { to { stroke-dashoffset: 0; } }
@keyframes ha-in { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hero-svg .ha-ring, .hero-svg .ha-cont { animation: none; stroke-dashoffset: 0; }
  .hero-svg .ha-plot, .hero-svg .ha-pt, .hero-svg .ha-lab, .hero-svg .ha-core { animation: none; opacity: 1; }
}
html.lfx-still .hero-svg .ha-ring, html.lfx-still .hero-svg .ha-cont { animation: none; stroke-dashoffset: 0; }
html.lfx-still .hero-svg .ha-plot, html.lfx-still .hero-svg .ha-pt, html.lfx-still .hero-svg .ha-lab, html.lfx-still .hero-svg .ha-core { animation: none; opacity: 1; }

/* Block 10: report, tables, project */
.inc-set { border: 1px solid var(--border); border-radius: 10px; padding: 8px 14px 10px; margin: 12px 0 4px; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.inc-set legend { font-size: 0.74rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 0 4px; }
.report-frame { width: 100%; height: 760px; border: 1px solid var(--border); border-radius: 12px; background: #fff; margin-top: 10px; }
@media (max-width: 640px) { .report-frame { height: 560px; } }
.cite-apa { font-size: 0.9rem; }
.cite-bib { font-family: var(--mono, monospace); font-size: 0.8rem; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; white-space: pre-wrap; overflow-x: auto; }
.fp-replay { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 9000; background: var(--card-bg); color: var(--text); border: 1px solid var(--border-strong); border-radius: 999px; padding: 8px 18px; box-shadow: 0 6px 24px rgba(0,0,0,.18); font-size: 0.9rem; display: flex; align-items: center; gap: 10px; }
.fp-replay .spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--primary); animation: fp-spin 0.8s linear infinite; }
@keyframes fp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fp-replay .spinner { animation: none; } }