@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&display=swap');

:root{
  --bg: #eef1e8;  --bg-soft: #e5eadc;  --card: #f8faf4;  --border: #cbd5bb;
  --text: #1b2318;  --text-dim: #4a5545;
  --accent: #7a5c22;  --accent-soft: #46592e;
  --dark: #1c2417;  --dark-deep: #141a10;
  --on-dark: #f2f5ec;  --on-dark-dim: #bcc6b0;  --on-dark-border: #34402a;
  --accent-on-dark: #c9a468;  --accent-soft-on-dark: #9fb271;
  --on-accent: #ffffff;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
}

.app-container{ max-width: 900px; margin: 0 auto; padding: 40px 20px 80px; }

header h1{
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 30px;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
header .lede{
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.5;
  max-width: 56ch;
  margin: 0 0 24px;
}

.button{
  display:inline-block;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 8px;
  text-decoration:none;
  cursor:pointer;
  background: transparent;
  color: var(--accent-soft);
  border: 1px solid var(--border);
}
.button.primary{ background: var(--accent); color: var(--on-accent); border: none; }
.muted{ color: var(--text-dim); font-size: 13px; }

/* Shared status/ownership pill — used by tree-card.js (map) and
   tree-detail.js (app/albero.html). Kept here rather than in
   forest-map.css so the detail page doesn't need to load the map
   stylesheet just for this one component. */
.badge-pill{
  font-size: 10.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-pill.owned{ background: var(--accent); color: var(--on-accent); }
.badge-pill.other{ background: var(--bg-soft); color: var(--accent-soft); border: 1px solid var(--border); }

footer{ margin-top: 28px; }

/* Navigation between Treekin, the public map and private workspaces. */
.treekin-navigation{display:flex;flex-wrap:wrap;gap:12px 24px;padding:20px;max-width:1400px;margin:auto;align-items:center;}
.treekin-navigation a{color:var(--text);font-size:14px;white-space:normal;}
.treekin-admin-links{border:1px solid var(--border);border-radius:12px;padding:20px;margin:24px auto;max-width:1080px;}
.treekin-admin-links[hidden]{display:none!important;}
.treekin-admin-links h2{font-size:20px;margin:0 0 12px;}
.treekin-admin-links p{line-height:1.6;font-size:14px;}
.treekin-admin-links a{color:var(--accent-soft);text-decoration:underline;display:inline-block;padding:8px 0;}