/* ============================================================================
 * Forest Protocol — Styles
 * File:    css/app.css
 * Version: 1.4.7
 * Build:   2026-07-03  (added dark theme via [data-theme="dark"] + toggle)
 * Type:    Barlow only (SIL OFL 1.1), self-hosted woff2 — no external CDN (GDPR).
 * ==========================================================================*/

/* ---- Self-hosted Barlow (latin + latin-ext for Slovenian diacritics) ----- */
@font-face{font-family:Barlow;font-style:normal;font-weight:400;font-display:swap;
  src:url("/shared/fonts/barlow-latin-400.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:Barlow;font-style:normal;font-weight:400;font-display:swap;
  src:url("/shared/fonts/barlow-latin-ext-400.woff2") format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:Barlow;font-style:normal;font-weight:500;font-display:swap;
  src:url("/shared/fonts/barlow-latin-500.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:Barlow;font-style:normal;font-weight:500;font-display:swap;
  src:url("/shared/fonts/barlow-latin-ext-500.woff2") format("woff2");unicode-range:U+0100-024F,U+1E00-1EFF,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:Barlow;font-style:normal;font-weight:600;font-display:swap;
  src:url("/shared/fonts/barlow-latin-600.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:Barlow;font-style:normal;font-weight:600;font-display:swap;
  src:url("/shared/fonts/barlow-latin-ext-600.woff2") format("woff2");unicode-range:U+0100-024F,U+1E00-1EFF,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:Barlow;font-style:normal;font-weight:700;font-display:swap;
  src:url("/shared/fonts/barlow-latin-700.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:Barlow;font-style:normal;font-weight:700;font-display:swap;
  src:url("/shared/fonts/barlow-latin-ext-700.woff2") format("woff2");unicode-range:U+0100-024F,U+1E00-1EFF,U+2C60-2C7F,U+A720-A7FF;}

/* ---- Design tokens ------------------------------------------------------- */
:root{
  --paper:#EBEEE8;        /* cool misty sage — deliberately not warm cream */
  --paper-2:#E3E7DE;
  --card:#F4F6F1;
  --ink:#16231B;         /* deep conifer ink */
  --ink-2:#46554A;
  --mist:#C9D2C6;        /* hairlines */
  --moss:#3A6B45;        /* primary */
  --moss-deep:#244530;
  --canopy:#6E9A6A;      /* secondary green */
  --phyto:#C57B2C;       /* amber — warmth / post-rain / signature accent, used sparingly */
  --phyto-soft:#E9C9A0;
  --warn:#9A3B2C;
  --good:#3A6B45;
  --mid:#9A7B2C;
  --low:#8A8F86;

  --r:14px; --r-sm:9px;
  --pad:clamp(16px,4vw,28px);
  --maxw:760px;
  --shadow:0 1px 0 rgba(22,35,27,.04), 0 8px 28px -18px rgba(22,35,27,.35);
  --t:240ms cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:Barlow,system-ui,sans-serif;
  background:
    radial-gradient(120% 80% at 50% -10%, #F1F4ED 0%, var(--paper) 46%, var(--paper-2) 100%) fixed;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.45;
  font-variant-numeric:tabular-nums;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:var(--pad)}

/* ---- Type system --------------------------------------------------------- */
.eyebrow{font-weight:600;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
h1{font-weight:700;font-size:clamp(26px,6vw,38px);letter-spacing:-.02em;line-height:1.02;margin:.1em 0 0}
h2{font-weight:700;font-size:15px;letter-spacing:.02em;margin:0}
.num{font-weight:700;font-feature-settings:"tnum" 1;letter-spacing:-.01em}
.muted{color:var(--ink-2)}
.tiny{font-size:12px;line-height:1.4}

/* ---- Header -------------------------------------------------------------- */
header.app{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-top:6px}
.brandmark{display:flex;align-items:center;gap:12px}
.brandmark .logo{width:42px;height:42px;border-radius:11px;flex:none;display:block}
.datechip{font-weight:600;font-size:12px;color:var(--ink-2);text-align:right;white-space:nowrap}
#installBtn{margin-top:8px;display:none}
/* header right cluster + inline home button (→ /health/), fun-app philosophy */
.head-actions{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.action-row{display:flex;align-items:center;gap:8px}
.action-row #installBtn{margin-top:0}
/* .btn.ghost.home-link (3 classes) so font-size beats .btn.ghost's 13px */
.btn.ghost.home-link{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;font-size:18px;line-height:1}

/* ---- Cards --------------------------------------------------------------- */
.grid{display:grid;gap:16px;margin-top:22px}
@media(min-width:620px){.grid.two{grid-template-columns:1fr 1fr}}
.card{
  background:var(--card);border:1px solid var(--mist);border-radius:var(--r);
  padding:18px;box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.card .head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px}
.card .basis{font-size:11px;color:var(--ink-2);border-top:1px dashed var(--mist);margin-top:14px;padding-top:9px}

/* ---- Weekly pips (stress cadence) ---------------------------------------- */
.pips{display:flex;gap:7px;align-items:center;margin:4px 0 2px}
.pip{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--mist);background:transparent;transition:var(--t)}
.pip.on{background:var(--moss);border-color:var(--moss)}
.pip.extra{border-style:dashed}
.bigstat{display:flex;align-items:baseline;gap:8px;margin-top:2px}
.bigstat .num{font-size:34px}
.bigstat .of{font-size:15px;color:var(--ink-2);font-weight:600}

/* ---- Dose curve hero (signature) ----------------------------------------- */
.curveWrap{margin-top:6px}
svg.curve{display:block;width:100%;height:auto}
.curve .band{fill:var(--phyto);opacity:.14}
.curve .line{fill:none;stroke:var(--moss);stroke-width:2.4}
.curve .axis{stroke:var(--mist);stroke-width:1}
.curve .tick{fill:var(--ink-2);font-size:9px;font-family:Barlow}
.curve .marker{fill:var(--phyto)}
.curve .markerline{stroke:var(--phyto);stroke-width:1.4;stroke-dasharray:3 3}
.curve .bandlabel{fill:var(--phyto);font-size:9px;font-weight:600;font-family:Barlow;letter-spacing:.08em}

/* ---- Immune meter -------------------------------------------------------- */
.meter{height:12px;border-radius:7px;background:var(--paper-2);overflow:hidden;border:1px solid var(--mist);margin:10px 0 6px}
.meter > span{display:block;height:100%;border-radius:7px;transition:width var(--t)}
.phase{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:13px;margin-top:2px}
.dot{width:9px;height:9px;border-radius:50%;flex:none}
.phase.protected .dot{background:var(--good)} .phase.protected{color:var(--good)}
.phase.tapering .dot{background:var(--mid)}   .phase.tapering{color:var(--mid)}
.phase.lapsed .dot{background:var(--warn)}    .phase.lapsed{color:var(--warn)}
.phase.none .dot{background:var(--low)}       .phase.none{color:var(--ink-2)}

/* ---- Log form ------------------------------------------------------------ */
.seg{display:flex;background:var(--paper-2);border:1px solid var(--mist);border-radius:11px;padding:4px;gap:4px}
.seg button{flex:1;border:0;background:transparent;font-family:inherit;font-weight:600;font-size:14px;
  color:var(--ink-2);padding:10px 8px;border-radius:8px;cursor:pointer;transition:var(--t)}
.seg button[aria-pressed="true"]{background:var(--moss);color:#fff;box-shadow:var(--shadow)}
.seg button .h{display:block;font-weight:500;font-size:11px;opacity:.85}

.field{margin-top:16px}
.field > label{display:block;font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);margin-bottom:8px}
.rangeRow{display:flex;align-items:center;gap:14px}
input[type=range]{flex:1;accent-color:var(--moss);height:24px}
.durBadge{min-width:96px;text-align:right;font-weight:700;font-size:20px}
.durBadge small{font-size:12px;color:var(--ink-2);font-weight:600}
.dosehint{font-size:12px;font-weight:600;margin-top:6px}
.dosehint.under{color:var(--mid)} .dosehint.sweet{color:var(--good)} .dosehint.over{color:var(--ink-2)}

select{width:100%;font-family:inherit;font-size:15px;padding:11px 12px;border:1px solid var(--mist);
  border-radius:10px;background:var(--card);color:var(--ink);appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%2346554A' stroke-width='1.6' fill='none'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--mist);background:var(--card);
  border-radius:999px;padding:8px 13px;font-weight:600;font-size:13px;cursor:pointer;user-select:none;transition:var(--t);color:var(--ink-2)}
.chip[aria-pressed="true"]{background:var(--moss-deep);border-color:var(--moss-deep);color:#fff}
.chip[data-cond="postRain"][aria-pressed="true"],
.chip[data-cond="warm"][aria-pressed="true"]{background:var(--phyto);border-color:var(--phyto)}
.chip .req{font-size:10px;opacity:.7;font-weight:600}

textarea,input[type=text],input[type=url]{width:100%;font-family:inherit;font-size:14px;padding:11px 12px;border:1px solid var(--mist);
  border-radius:10px;background:var(--card);color:var(--ink);resize:vertical}
input[type=text],input[type=url]{resize:none}

.btn{font-family:inherit;font-weight:700;font-size:15px;border:0;border-radius:11px;padding:13px 18px;cursor:pointer;transition:var(--t)}
.btn.primary{background:var(--moss);color:#fff;width:100%;margin-top:18px;box-shadow:var(--shadow)}
.btn.primary:hover{background:var(--moss-deep)}
.btn.ghost{background:transparent;border:1px solid var(--mist);color:var(--ink);font-weight:600;font-size:13px;padding:9px 13px}
.btn.ghost:hover{border-color:var(--ink-2)}

/* ---- History ------------------------------------------------------------- */
.log{list-style:none;margin:0;padding:0}
.log li{display:flex;align-items:center;gap:12px;padding:12px 2px;border-top:1px solid var(--mist)}
.log li:first-child{border-top:0}
.logIcon{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;background:var(--paper-2);color:var(--moss-deep);font-weight:700;font-size:12px}
.logIcon.trip{background:var(--moss);color:#fff}
.logMain{flex:1;min-width:0}
.logMain .t{font-weight:600;font-size:14px}
.logMain .s{font-size:12px;color:var(--ink-2);line-height:1.4}
.logMain .note{font-size:12px;color:var(--ink);margin-top:3px;white-space:normal;line-height:1.35;
  padding-left:9px;border-left:2px solid var(--mist)}
.logMain .conds{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.logMain .cpill{font-size:10px;font-weight:600;color:var(--low);background:transparent;
  border:1px solid var(--mist);border-radius:5px;padding:2px 6px;line-height:1.3}
.logMain .cpill.on{color:#fff;background:var(--moss);border-color:var(--moss)}
.logMain .cpill.on.phyto{background:var(--phyto);border-color:var(--phyto)}
.badge{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:6px;white-space:nowrap}
.badge.good{background:rgba(58,107,69,.13);color:var(--good)}
.badge.mid{background:rgba(154,123,44,.15);color:var(--mid)}
.badge.low{background:rgba(138,143,134,.18);color:var(--low)}
.del{border:0;background:transparent;color:var(--ink-2);cursor:pointer;font-size:18px;line-height:1;padding:4px 6px;border-radius:6px}
.del:hover{color:var(--warn);background:rgba(154,59,44,.08)}
.empty{text-align:center;color:var(--ink-2);padding:26px 10px;font-size:14px}

/* ---- Science / references ------------------------------------------------ */
details.science{margin-top:16px}
details.science > summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between}
details.science > summary::-webkit-details-marker{display:none}
details.science summary .chev{transition:var(--t)}
details.science[open] summary .chev{transform:rotate(180deg)}
.ref{border-top:1px solid var(--mist);padding:11px 0}
.ref .tag{font-weight:700;font-size:12px;color:var(--moss-deep)}
.ref .claim{font-size:13px;margin:3px 0}
.ref .src{font-size:11px;color:var(--ink-2)}
.ref a{color:var(--moss);text-decoration:none;border-bottom:1px solid var(--canopy)}
.caveat{font-size:12px;color:var(--ink-2);background:var(--paper-2);border-radius:9px;padding:10px 12px;margin-top:10px}
.caveat b{color:var(--warn)}

/* ---- Footer / data ------------------------------------------------------- */
footer.app{margin:26px 0 40px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.dataBtns{display:flex;gap:8px}
.ver{font-size:11px;color:var(--ink-2)}

/* ---- Toast --------------------------------------------------------------- */
#toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,140%);background:var(--moss-deep);color:#fff;
  font-weight:600;font-size:14px;padding:12px 18px;border-radius:12px;box-shadow:var(--shadow);transition:transform var(--t);z-index:40;max-width:90vw}
#toast.show{transform:translate(-50%,0)}

:focus-visible{outline:2.5px solid var(--phyto);outline-offset:2px;border-radius:6px}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- Dark theme (forest at night) --------------------------------------- *
 * Overrides the design tokens; nearly everything is token-driven so the whole
 * UI follows. A few hardcoded light values (body gradient, the <select> arrow,
 * the science chevron) are overridden explicitly. Theme is shared site-wide via
 * the `toolbox-theme` localStorage key. */
:root[data-theme="dark"]{
  --paper:#0F1512;
  --paper-2:#151C17;
  --card:#19211B;
  --ink:#E9EFE6;
  --ink-2:#A3AEA1;
  --mist:#2B3A2E;
  --moss:#5AA267;
  --moss-deep:#3E7A4D;
  --canopy:#7FB07A;
  --phyto:#E0A458;
  --phyto-soft:#5E4A2E;
  --warn:#D2685A;
  --good:#5AA267;
  --mid:#C79A3E;
  --low:#8A928A;
  --shadow:0 1px 0 rgba(0,0,0,.25), 0 10px 30px -18px rgba(0,0,0,.75);
}
:root[data-theme="dark"] body{
  background:radial-gradient(120% 80% at 50% -10%, #17221A 0%, var(--paper) 46%, var(--paper-2) 100%) fixed;
}
:root[data-theme="dark"] select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%23A3AEA1' stroke-width='1.6' fill='none'/></svg>");
}
/* science chevron follows the theme (CSS beats the inline stroke attribute);
   light --ink-2 (#46554A) matches the original hardcoded value. */
details.science summary .chev path{stroke:var(--ink-2)}

/* ---- Theme toggle button (icon-only moon/sun, matches .btn.ghost) -------- */
.btn.ghost.theme-toggle{font-size:17px;line-height:1;padding:9px 12px}
.theme-toggle .i-sun{display:none}
:root[data-theme="dark"] .theme-toggle .i-moon{display:none}
:root[data-theme="dark"] .theme-toggle .i-sun{display:inline}