/* 61 living stages. Each successful period advances a permanent, subtle step. */
.living-tree { transform-box: view-box; transform-origin: 50% 79.3%; transition: transform .68s cubic-bezier(.18,.75,.2,1), opacity .45s; }
.tree { --growth: 0; --tree-scale: .13; --foliage-opacity: 0; --fruit-opacity: 0; }
.tree .living-tree { transform: scale(var(--tree-scale)); }
.tree .foliage { opacity: var(--foliage-opacity); transition: opacity .55s ease, filter .55s ease; }
.tree .fruit { opacity: var(--fruit-opacity); transition: opacity .55s ease; }
.tree[data-stage="0"] .foliage,.tree[data-stage="0"] .fruit { opacity: 0; }
.tree[data-stage="1"] .foliage { opacity: .22; }
.tree.growing .living-tree { filter:brightness(1.12); }
.tree.dead .living-tree { transform:scale(var(--tree-scale)) rotate(-5deg); }
.tree.dead .foliage { filter: saturate(.15) sepia(.45) brightness(.69); opacity:.48; }
.tree.dead .fruit { opacity: 0; }
.tree.dead .trunk,.tree.dead .branch { stroke: #665b4a; }
.tree.dead .leaves-falling path { opacity: 1; animation: leaf-fall 2.5s ease-in infinite; }
@media (prefers-reduced-motion: reduce) { .living-tree,.tree .foliage,.tree .fruit { transition: none; animation: none!important; } }

/* A successful check-in grows from the soil anchor; nothing translates or
   scales the whole illustration, so its trunk cannot drift sideways. */
.tree.growing, .tree.growth-pulse { animation: none !important; }
.tree .living-tree { transform-box: view-box; transform-origin: 50% 79.3%; }
.tree.growth-pulse .living-tree { filter: brightness(1.1) saturate(1.04); }
.tree.growth-pulse .foliage { animation: canopy-glow .72s ease-out; }
@keyframes canopy-glow {
  0% { filter: brightness(1) saturate(1); }
  45% { filter: brightness(1.2) saturate(1.08); }
  100% { filter: brightness(1) saturate(1); }
}

/* Cohesive, platform-independent form controls instead of browser-gray selects. */
.modal select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 46px;
  padding: 11px 38px 11px 13px;
  border: 1px solid #d5ddd2;
  border-radius: 10px;
  background-color: #f7f8f3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235e795f' stroke-width='1.8'%3E%3Cpath d='m5 7 5 5 5-5'/%3E%3C/svg%3E");
  background-position: right 13px center;
  background-repeat: no-repeat;
  background-size: 15px;
  box-shadow: 0 1px 2px #233d2910, inset 0 1px #ffffffb5;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.modal select:hover { border-color: #aebfa9; background-color: #f1f5ee; }
.modal select:focus-visible { outline: none; border-color: #628366; box-shadow: 0 0 0 3px #7093742c; }
.modal select option { background: #fbfaf6; color: #203022; }

.nav-icon { flex: 0 0 auto; width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.main-nav .nav-item { display: flex; align-items: center; gap: 12px; }
.main-nav .nav-item > span[data-nav-label] { display: inline-block; width: auto; font: 500 14px var(--sans); }
.main-nav .nav-item .nav-icon { width: 19px; height: 19px; opacity: .9; }
.main-nav .nav-item.active .nav-icon { color: #b8d4a5; }
.mobile-nav-item .nav-icon { width: 22px; height: 22px; }
.mobile-nav-item.active .nav-icon { stroke-width: 1.9; }
.language-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 54px; }
.language-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.language-toggle span { font: 700 11px var(--mono); }

/* The create-goal sheet stays compact and scrolls as one panel on touch screens. */
.modal { max-height:min(88dvh, 780px); overflow:auto; overscroll-behavior:contain; border:1px solid #ffffff9c; }
.modal::-webkit-scrollbar { width:5px; }
.modal::-webkit-scrollbar-thumb { background:#c7d2c4; border-radius:8px; }
.modal .eyebrow { color:#6a876b; }
.modal label { gap:8px; }
.modal input { min-height:46px; border-radius:10px; background:#f7f8f3; }
.modal input:focus-visible { outline:none; border-color:#628366; box-shadow:0 0 0 3px #7093742c; }
.form-row { gap:12px; }
.admin .section-heading { align-items:center; gap:16px; }
#broadcast-button { flex:0 1 auto; max-width:100%; white-space:normal; }
.goal-select { position:relative; width:100%; min-width:0; }
.goal-select-native { position:absolute!important; inset:auto!important; width:1px!important; height:1px!important; padding:0!important; border:0!important; opacity:0!important; overflow:hidden!important; pointer-events:none!important; clip-path:inset(50%)!important; }
.goal-select-trigger { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; min-height:46px; padding:10px 13px; border:1px solid #d5ddd2; border-radius:11px; background:linear-gradient(180deg,#fff,#f6f8f3); color:#253529; text-align:left; font:500 14px var(--sans); box-shadow:0 2px 5px #233d2910,inset 0 1px #ffffff; cursor:pointer; transition:border-color .18s,background .18s,box-shadow .18s; }
.goal-select-trigger:hover,.goal-select-trigger[aria-expanded="true"] { border-color:#9fb39b; background:#f5f8f2; }
.goal-select-trigger:focus-visible { outline:none; border-color:#628366; box-shadow:0 0 0 3px #7093742c; }
.goal-select-value { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.goal-select-chevron { width:17px; height:17px; flex:none; fill:none; stroke:#718771; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; transition:transform .18s; }
.goal-select-trigger[aria-expanded="true"] .goal-select-chevron { transform:rotate(180deg); }
.goal-select-menu { position:fixed; z-index:30; display:grid; gap:3px; padding:6px; overflow:auto; overscroll-behavior:contain; border:1px solid #dbe2d8; border-radius:14px; background:#fffefa; box-shadow:0 14px 36px #12231630,0 2px 8px #12231612; animation:select-pop .14s ease-out; }
.goal-select-option { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:42px; padding:9px 11px; border:0; border-radius:9px; background:transparent; color:#334536; text-align:left; font:14px var(--sans); cursor:pointer; }
.goal-select-option:hover,.goal-select-option:focus-visible { outline:none; background:#edf3e9; }
.goal-select-option[aria-selected="true"] { background:#e7efe2; color:#285a38; font-weight:600; }
.goal-select-option svg { width:17px; height:17px; flex:none; fill:none; stroke:#4d7951; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:0; }
.goal-select-option[aria-selected="true"] svg { opacity:1; }
@keyframes select-pop { from {opacity:0; transform:translateY(4px) scale(.99)} to {opacity:1; transform:translateY(0) scale(1)} }
.goal-management { position:relative; display:flex; align-items:center; flex:none; }
.goal-manage-toggle { display:grid; place-items:center; width:39px; height:39px; border:1px solid var(--line); border-radius:50%; background:#fffefa; color:#4e6651; cursor:pointer; }
.goal-manage-toggle svg { width:20px; height:20px; fill:currentColor; }
.goal-manage-toggle:hover,.goal-manage-toggle[aria-expanded="true"] { background:#e8efe4; border-color:#bdcbb8; }
.goal-actions-menu { z-index:35; display:grid; min-width:176px; gap:3px; padding:6px; border:1px solid #dbe2d8; border-radius:13px; background:#fffefa; box-shadow:0 12px 32px #1223162e; }
.goal-actions-menu.hidden { display:none!important; }
.goal-actions-menu button { min-height:40px; padding:9px 11px; border:0; border-radius:8px; background:transparent; color:#334536; text-align:left; font:14px var(--sans); cursor:pointer; }
.goal-actions-menu button:hover { background:#edf3e9; }
.goal-actions-menu .danger-action { color:#a44f47; }
.confirm-backdrop { position:fixed; z-index:50; inset:0; display:grid; place-items:center; padding:20px; background:#10161080; backdrop-filter:blur(4px); }
.confirm-card { width:min(100%,390px); padding:25px; border:1px solid #ffffffa8; border-radius:19px; background:#fbfaf6; color:#203022; box-shadow:0 22px 65px #09100a45; }
.confirm-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#f4e8e1; color:#a45e50; font:600 18px var(--serif); }
.confirm-card h2 { margin:16px 0 8px; font:500 25px var(--serif); }
.confirm-card p { margin:0; color:#6f7d6f; font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
.confirm-card p strong { color:#314334; }
.confirm-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:22px; }
.confirm-actions button { min-height:43px; padding:10px 13px; border:1px solid #d8dfd5; border-radius:10px; background:transparent; color:#445646; font:600 13px var(--sans); cursor:pointer; }
.confirm-actions .confirm-delete { border-color:#a8564c; background:#a8564c; color:white; }
.confirm-actions button:disabled { opacity:.55; cursor:wait; }

:root[data-theme="dark"] .modal select {
  border-color: #3c4a3d;
  background-color: #202b21;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23b8cfb2' stroke-width='1.8'%3E%3Cpath d='m5 7 5 5 5-5'/%3E%3C/svg%3E");
  box-shadow: inset 0 1px #ffffff08;
}
:root[data-theme="dark"] .modal select:hover { background-color: #263528; }
:root[data-theme="dark"] .modal select option { background: #1a241b; color: #e6ebe2; }
:root[data-theme="dark"] .modal input { background:#202b21; border-color:#3c4a3d; color:#e6ebe2; }
:root[data-theme="dark"] .modal::-webkit-scrollbar-thumb { background:#435545; }
:root[data-theme="dark"] .goal-select-trigger { border-color:#3c4a3d; background:linear-gradient(180deg,#263327,#202b21); color:#e6ebe2; box-shadow:inset 0 1px #ffffff08; }
:root[data-theme="dark"] .goal-select-trigger:hover,:root[data-theme="dark"] .goal-select-trigger[aria-expanded="true"] { background:#2a382b; }
:root[data-theme="dark"] .goal-select-menu,:root[data-theme="dark"] .goal-actions-menu { border-color:#3b4b3d; background:#1a241b; box-shadow:0 14px 38px #0008; }
:root[data-theme="dark"] .goal-select-option,:root[data-theme="dark"] .goal-actions-menu button { color:#dfe7dc; }
:root[data-theme="dark"] .goal-select-option:hover,:root[data-theme="dark"] .goal-select-option:focus-visible,:root[data-theme="dark"] .goal-actions-menu button:hover { background:#29392b; }
:root[data-theme="dark"] .goal-select-option[aria-selected="true"] { background:#304332; color:#c6e0bd; }
:root[data-theme="dark"] .goal-manage-toggle { background:#172018; color:#c1d4b9; }
:root[data-theme="dark"] .confirm-card { border-color:#3b4b3d; background:#1a241b; color:#e6ebe2; }
:root[data-theme="dark"] .confirm-card p { color:#adbaaa; }
:root[data-theme="dark"] .confirm-card p strong { color:#e6ebe2; }
:root[data-theme="dark"] .confirm-actions button { border-color:#3b4b3d; color:#dfe7dc; }

@media (max-width: 800px) {
  .modal { max-height:calc(100dvh - env(safe-area-inset-top) - 6px); border:0; border-radius:20px 20px 0 0; padding:24px 18px calc(18px + env(safe-area-inset-bottom)); }
  .modal h2 { max-width:calc(100% - 34px); font-size:27px; line-height:1.08; margin-bottom:16px; }
  .modal .eyebrow { margin-bottom:9px; }
  .modal label { min-width:0; margin-bottom:10px; }
  .form-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; }
  .form-hint { margin:4px 0 13px; }
  .submit-goal { position:sticky; bottom:0; z-index:2; box-shadow:0 -8px 18px #fbfaf6c9; }
  :root[data-theme="dark"] .submit-goal { box-shadow:0 -8px 18px #1a241bd9; }
  #admin .section-heading { align-items:stretch; flex-direction:column; gap:12px; }
  #admin .section-heading > div { min-width:0; }
  #broadcast-button { align-self:stretch; width:100%; min-height:46px; justify-content:center; }
  .goal-manage-toggle { width:40px; height:40px; }
  .confirm-backdrop { align-items:end; padding:12px 12px calc(12px + env(safe-area-inset-bottom)); }
  .confirm-card { width:100%; border-radius:20px; padding:22px 19px; }
}
@media (max-width: 380px) {
  .form-row { grid-template-columns:1fr; gap:0; }
}