/* ============================================================
   SEEDS — shared styles for the narrative pages
   (today.html · timeline.html · participate.html · archive.html)
   Loaded AFTER styles.css; relies on its tokens and primitives.
   ============================================================ */

/* ---------- Page intro (compact hero, no photo) ---------- */
.page-intro{
  background:linear-gradient(168deg,var(--forest-deep) 0%,var(--forest) 78%,#2f5039 100%);
  color:var(--on-dark);
  padding-block:clamp(2.8rem,7vw,4.6rem);
}
.page-intro .eyebrow{color:var(--seafoam);}
.page-intro h1,.page-intro h2,.page-intro h3{color:var(--white);}
.page-intro h1{
  font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.08;margin-top:0.3rem;max-width:18em;
}
.page-intro a:not(.btn){color:var(--spring);}
.page-intro .lede{
  color:var(--sand);font-size:clamp(1.05rem,1.7vw,1.22rem);max-width:44em;margin-top:1rem;
}
.page-intro .lede + .lede{margin-top:0.8rem;color:var(--on-dark-soft);font-size:1.02rem;}
.page-intro-actions{display:flex;flex-wrap:wrap;gap:0.8rem;margin-top:1.9rem;}

/* ---------- Status chips ---------- */
.status{
  display:inline-flex;align-items:center;gap:0.45em;
  font-family:var(--font-body);font-weight:700;font-size:0.72rem;
  letter-spacing:0.1em;text-transform:uppercase;
  padding:0.4em 0.85em;border-radius:999px;border:1px solid transparent;white-space:nowrap;
}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;}
.status--live{background:#e2f7e4;color:#1c5c2a;border-color:#a9dfb3;}
.status--legacy{background:#f1efe4;color:#6b5c2e;border-color:#ddd5b6;}
.status--paused{background:#f6e9e2;color:#8a4a2b;border-color:#e6c7b4;}
.status--planned{background:#e6eef7;color:#2d4f76;border-color:#bcd0e5;}
.status--archive{background:#eceee6;color:#4a5548;border-color:#cfd5c8;}

/* On dark backgrounds */
.band-dark .status--live{background:rgba(47,241,65,0.16);color:#9dfbab;border-color:rgba(47,241,65,0.35);}
.band-dark .status--legacy{background:rgba(233,237,217,0.12);color:#ded8b8;border-color:rgba(233,237,217,0.28);}
.band-dark .status--planned{background:rgba(150,190,235,0.14);color:#b9d3ef;border-color:rgba(150,190,235,0.32);}

/* ---------- Honesty callout ---------- */
.callout{
  border-left:5px solid var(--fern);
  background:var(--card-warm);
  border-radius:var(--radius-sm);
  padding:1.15rem 1.35rem;
  margin-block:1.6rem;
}
.callout h3,.callout p:first-child strong{font-size:1.02rem;}
.callout p{color:var(--ink-soft);margin-top:0.5rem;}
.callout p:first-child{margin-top:0;}
.callout--caution{border-left-color:var(--clay);background:#fbf4ef;}
.callout--note{border-left-color:var(--sage);}

/* ---------- Three-state status board (today.html) ---------- */
.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.1rem,2.5vw,1.7rem);align-items:start;}
.board-col{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);padding:clamp(1.3rem,3vw,1.8rem);height:100%;
}
.board-col > h3{font-size:1.22rem;margin:0.75rem 0 0.35rem;}
.board-col > p.board-note{color:var(--ink-soft);font-size:0.95rem;margin-bottom:1.1rem;}
.board-list{list-style:none;padding:0;margin:0;display:grid;gap:1rem;}
.board-list li{border-top:1px solid var(--line);padding-top:0.9rem;}
.board-list li:first-child{border-top:0;padding-top:0;}
.board-list strong{display:block;color:var(--ink);font-size:1rem;}
.board-list span{display:block;color:var(--ink-soft);font-size:0.93rem;margin-top:0.25rem;}
.board-list a{color:var(--link);}

/* ---------- Fact rows (dated, sourced figures) ---------- */
.facts{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;
}
.facts li{background:var(--card);padding:1.15rem 1.2rem;}
.facts b{display:block;font-family:var(--font-head);font-size:1.75rem;line-height:1;color:var(--forest);}
.facts span{display:block;color:var(--ink-soft);font-size:0.9rem;margin-top:0.45rem;}
.facts em{display:block;font-style:normal;color:#6a7568;font-size:0.78rem;margin-top:0.4rem;letter-spacing:0.02em;}
.band-dark .facts{background:rgba(233,237,217,0.18);border-color:rgba(233,237,217,0.22);}
.band-dark .facts li{background:rgba(19,57,28,0.72);}
.band-dark .facts b{color:var(--spring);}
.band-dark .facts span{color:var(--sand);}
.band-dark .facts em{color:var(--on-dark-soft);}

/* ---------- Timeline ---------- */
.era{padding-block:clamp(2.6rem,6vw,4.2rem);}
.era + .era{border-top:1px solid var(--line);}
.era-head{max-width:44em;}
.era-head .era-span{
  font-family:var(--font-body);font-weight:700;font-size:0.8rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--link);
}
.era-head h2{font-size:clamp(1.6rem,3.2vw,2.3rem);margin-top:0.4rem;}
.era-head p{color:var(--ink-soft);margin-top:0.7rem;}
.era--break{background:#faf3ee;}
.era--break .era-head .era-span{color:#9a4f2c;}
.era--hibernation{background:var(--sand);}
.era--regenesis{background:#eef3f8;}
.era--regenesis .era-head .era-span{color:#2d4f76;}

.tl{list-style:none;margin:2.2rem 0 0;padding:0 0 0 1.65rem;position:relative;}
.tl::before{
  content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(var(--canopy),var(--sage));border-radius:2px;
}
.era--break .tl::before{background:linear-gradient(#c98a63,#d9c3b3);}
.era--regenesis .tl::before{background:linear-gradient(#7fa5cc,#c3d4e6);}
.tl > li{position:relative;padding:0 0 1.9rem 0.9rem;}
.tl > li:last-child{padding-bottom:0;}
.tl > li::before{
  content:"";position:absolute;left:-1.65rem;top:0.42rem;width:12px;height:12px;border-radius:50%;
  background:var(--card);border:3px solid var(--canopy);box-sizing:border-box;
}
.era--break .tl > li::before{border-color:#c07a52;}
.era--hibernation .tl > li::before{border-color:var(--fern);background:var(--sand);}
.era--regenesis .tl > li::before{border-color:#5b86b3;background:#eef3f8;}
.tl-when{
  font-family:var(--font-body);font-weight:700;font-size:0.82rem;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--ink-soft);
}
.tl-head{display:flex;flex-wrap:wrap;align-items:center;gap:0.6rem 0.8rem;}
.tl h3{font-size:1.14rem;margin:0.25rem 0 0;width:100%;}
.tl p{color:var(--ink-soft);margin-top:0.45rem;max-width:52em;}
.tl .tl-source{font-size:0.83rem;color:#6a7568;margin-top:0.5rem;}
.tl .tl-source a{color:var(--link);}

/* ---------- Archive ---------- */
.archive-banner{
  background:var(--dark-forest);color:var(--on-dark);
  padding:0.95rem 0;font-size:0.95rem;
}
.archive-banner .container{display:flex;flex-wrap:wrap;gap:0.7rem 1.1rem;align-items:center;}
.archive-banner strong{color:var(--spring);}
.archive-banner a{color:var(--sand);}

.doc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(1rem,2.4vw,1.6rem);}
.doc{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:1.3rem 1.4rem;display:flex;flex-direction:column;gap:0.55rem;
}
.doc h3{font-size:1.08rem;margin:0;}
.doc p{color:var(--ink-soft);font-size:0.95rem;margin:0;}
.doc .doc-meta{
  font-family:var(--font-body);font-size:0.8rem;letter-spacing:0.06em;text-transform:uppercase;
  color:#6a7568;font-weight:600;
}
.doc a.doc-link{
  margin-top:auto;color:var(--link);font-weight:600;text-decoration:none;
  border-bottom:2px solid rgba(40,105,50,0.28);align-self:flex-start;padding-bottom:2px;
}
.doc a.doc-link:hover{border-bottom-color:var(--forest);}

/* ---------- Step list (participate) ---------- */
.steps{list-style:none;counter-reset:step;padding:0;margin:0;display:grid;gap:1.1rem;}
.steps > li{
  counter-increment:step;position:relative;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:1.35rem 1.5rem 1.35rem 4.2rem;box-shadow:var(--shadow-soft);
}
.steps > li::before{
  content:counter(step);position:absolute;left:1.35rem;top:1.3rem;
  width:2rem;height:2rem;border-radius:50%;background:var(--forest);color:var(--spring);
  display:grid;place-items:center;font-family:var(--font-head);font-size:1.05rem;
}
.steps h3{font-size:1.1rem;margin:0 0 0.4rem;}
.steps p{color:var(--ink-soft);margin:0.4rem 0 0;}
.steps p:first-of-type{margin-top:0;}

/* ---------- Requirement table (membership tiers) ---------- */
.req-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--card);}
table.req{border-collapse:collapse;width:100%;min-width:540px;}
table.req caption{text-align:left;padding:1rem 1.2rem 0;color:var(--ink-soft);font-size:0.92rem;}
table.req th,table.req td{padding:0.85rem 1.2rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;}
table.req thead th{
  font-family:var(--font-body);font-size:0.8rem;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--link);background:var(--card-warm);
}
table.req tbody th{font-family:var(--font-body);font-weight:600;color:var(--ink);white-space:nowrap;}
table.req td{color:var(--ink-soft);}
table.req tbody tr:last-child th,table.req tbody tr:last-child td{border-bottom:0;}

/* ---------- Prose blocks ----------
   `.prose` on its own caps the measure. Combined with `.container` it must NOT
   shrink the container (that would re-centre it and make the page's left edge
   wander); instead the container keeps its geometry and the children are capped. */
.prose{max-width:44em;}
.container.prose{max-width:min(1160px,100% - 2.5rem);}
.container.prose > *{max-width:48em;}

/* Sections that hold a single note rather than a full block of content */
.section-tight{padding-block:clamp(1.8rem,4vw,3rem);}
.prose p{color:var(--ink-soft);margin-top:0.9rem;}
.prose h3{margin-top:2rem;font-size:1.2rem;}
.prose ul{margin-top:0.9rem;padding-left:1.2rem;color:var(--ink-soft);display:grid;gap:0.45rem;}
.prose a{color:var(--link);}

/* ---------- Homepage: status strip ---------- */
.status-strip{background:var(--dark-forest);color:var(--on-dark);padding-block:clamp(1.6rem,3.5vw,2.2rem);}
.status-strip .strip-inner{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.2rem 2rem;align-items:center;
}
.status-strip p{margin:0;color:var(--sand);max-width:58em;}
.status-strip p strong{color:var(--spring);}
.status-strip .status{margin-bottom:0.7rem;}

/* ---------- Homepage: two-moment stat band ---------- */
.moments{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.2rem,3vw,2.2rem);}
.moment{
  background:rgba(19,57,28,0.55);border:1px solid rgba(233,237,217,0.22);
  border-radius:var(--radius-lg);padding:clamp(1.4rem,3vw,2rem);
}
.moment > .status{margin-bottom:0.9rem;}
.moment h3{color:var(--sand);font-size:1.24rem;margin-bottom:0.3rem;}
.moment > p{color:var(--on-dark-soft);font-size:0.96rem;margin-bottom:1.2rem;}
.moment dl{display:grid;gap:0.85rem;margin:0;}
.moment .m-row{display:flex;align-items:baseline;gap:0.9rem;border-top:1px solid rgba(233,237,217,0.16);padding-top:0.8rem;}
.moment .m-row:first-child{border-top:0;padding-top:0;}
.moment dt{color:var(--on-dark-soft);font-size:0.95rem;order:2;}
.moment dd{
  font-family:var(--font-head);font-size:1.5rem;line-height:1;color:var(--spring);
  margin:0;min-width:4.6em;order:1;
}
.moment--past dd{color:var(--sand);}

/* ---------- Homepage: timeline preview ---------- */
.tl-preview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(0.9rem,2vw,1.4rem);}
.tl-step{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:1.3rem 1.35rem;display:flex;flex-direction:column;gap:0.5rem;
  border-top:5px solid var(--canopy);
}
.tl-step:nth-child(2){border-top-color:#c07a52;}
.tl-step:nth-child(3){border-top-color:var(--sage);}
.tl-step:nth-child(4){border-top-color:#5b86b3;}
.tl-step .tl-years{
  font-family:var(--font-body);font-weight:700;font-size:0.78rem;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--ink-soft);
}
.tl-step h3{font-size:1.08rem;margin:0;}
.tl-step p{color:var(--ink-soft);font-size:0.94rem;margin:0;}

/* ---------- Homepage: signal list (honest hero meta) ---------- */
.hero-signals{
  margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:0.5rem 1.5rem;
  font-size:0.9rem;color:var(--on-dark-soft);list-style:none;padding:0;
}
.hero-signals li{display:flex;align-items:flex-start;gap:0.5rem;}
.hero-signals li::before{content:"";width:7px;height:7px;margin-top:0.55em;border-radius:50%;background:var(--spring);flex:none;}

/* ---------- Homepage: where you can spend Seeds ---------- */
.spend-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.1rem,2.5vw,1.8rem);}
.spend-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);overflow:hidden;display:flex;flex-direction:column;
  border-top:5px solid var(--canopy);
}
.spend-card:nth-child(2){border-top-color:var(--fern);}
.spend-card:nth-child(3){border-top-color:var(--jungle);}
.spend-body{padding:1.5rem 1.6rem 1.7rem;display:flex;flex-direction:column;flex:1;gap:0.55rem;}
.spend-kind{
  font-family:var(--font-body);font-size:0.76rem;font-weight:700;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--link);margin:0;
}
.spend-body h3{margin:0;font-size:1.2rem;}
.spend-body p{color:var(--ink-soft);margin:0;}
.spend-where{
  margin-top:auto;padding-top:1rem;display:flex;flex-direction:column;align-items:flex-start;gap:0.7rem;
}
.spend-where a{
  color:var(--link);font-weight:600;text-decoration:none;
  border-bottom:2px solid rgba(40,105,50,0.28);padding-bottom:2px;
}
.spend-where a:hover{border-bottom-color:var(--forest);}

/* CTA buttons (e.g. "View event") inside a card's link row keep normal .btn styling,
   not the plain-text-link treatment above. */
.spend-where .btn{border-bottom:none;padding:0.72em 1.5em;}
.spend-where .btn-forest{color:var(--sand);}
.spend-where .btn-forest:hover{color:var(--sand);}

/* Wallet download strip */
.wallet-strip{
  margin-top:clamp(2rem,4vw,3rem);
  background:linear-gradient(160deg,var(--dark-forest),var(--forest-deep));
  color:var(--on-dark);border-radius:var(--radius-lg);
  padding:clamp(1.5rem,3.5vw,2.2rem);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.2rem 2rem;align-items:center;
}
.wallet-strip h3{color:var(--white);margin:0 0 0.4rem;font-size:1.3rem;}
.wallet-strip p{color:var(--on-dark-soft);margin:0;max-width:46em;}
.wallet-strip .store-links{display:flex;flex-wrap:wrap;gap:0.7rem;}

/* ---------- Homepage: honest newsletter card ---------- */
.follow-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lift);padding:clamp(1.8rem,4vw,3rem);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(1.5rem,3vw,2.5rem);align-items:center;
}
.follow-card p{color:var(--ink-soft);}
.follow-card .follow-actions{display:flex;flex-wrap:wrap;gap:0.8rem;}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .board{grid-template-columns:1fr;}
  .spend-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .spend-card:last-child{grid-column:1 / -1;}
  .wallet-strip{grid-template-columns:1fr;}
  .tl-preview{grid-template-columns:repeat(2,minmax(0,1fr));}
  .moments{grid-template-columns:1fr;}
  .status-strip .strip-inner{grid-template-columns:1fr;}
  .follow-card{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .facts{grid-template-columns:1fr;}
  .steps > li{padding-left:1.4rem;padding-top:3.4rem;}
  .steps > li::before{top:1.1rem;left:1.4rem;}
  .tl-preview{grid-template-columns:1fr;}
  .spend-grid{grid-template-columns:1fr;}
  .spend-card:last-child{grid-column:auto;}
  .archive-banner .container{align-items:flex-start;}
}

/* ---------- Spend directory: open slot + add-a-place form ---------- */
.spend-card--open{
  border-top-color:var(--sage);
  background:repeating-linear-gradient(135deg,#fbfcf7,#fbfcf7 10px,#f4f7ee 10px,#f4f7ee 20px);
  border-style:dashed;
}
.spend-card--open .spend-where{padding-top:1.1rem;}

.add-form{max-width:52rem;}
.add-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem 1.4rem;}
.add-grid .field--wide{grid-column:1 / -1;}
.add-form .field label{display:block;font-weight:600;margin-bottom:0.4rem;color:var(--ink);}
.add-form .field-hint{font-weight:400;color:var(--ink-soft);font-size:0.9em;}
.add-form input,.add-form select,.add-form textarea{
  width:100%;font:inherit;padding:0.62em 0.85em;
  border:1.5px solid var(--line);border-radius:10px;background:var(--white);color:var(--ink);
}
.add-form input:focus-visible,.add-form select:focus-visible,.add-form textarea:focus-visible{
  outline:3px solid var(--forest);outline-offset:1px;border-color:var(--forest);
}
.add-form .form-note{margin-top:1.2rem;color:var(--ink-soft);font-size:0.95rem;}
.add-form .form-error{color:#9a3b32;font-weight:600;margin-top:0.6rem;}
.add-form button[type="submit"]{margin-top:1rem;}
.add-success-title{font-weight:700;color:var(--forest);margin-bottom:0.4rem;}
.add-form .form-success{
  margin-top:1.8rem;padding:1.4rem 1.5rem;background:var(--card-warm);
  border:1px solid var(--line);border-radius:var(--radius-md);
}
.add-form .submission-out{
  white-space:pre-wrap;word-break:break-word;background:var(--white);
  border:1px solid var(--line);border-radius:10px;padding:1rem 1.1rem;margin:0.9rem 0;
  font-size:0.9rem;line-height:1.55;max-height:20rem;overflow:auto;
}
.add-form .submission-actions{display:flex;flex-wrap:wrap;gap:0.6rem;}
.add-form .form-fineprint{margin-top:0.9rem;color:var(--ink-soft);font-size:0.9rem;}

@media (max-width:640px){
  .add-grid{grid-template-columns:1fr;}
}

/* Archive documents that also have a live community doc behind them */
.doc-links{margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;gap:0.45rem;padding-top:0.4rem;}
.doc-links .doc-link{margin-top:0;}
.doc-link--alt{
  color:var(--ink-soft);font-weight:600;font-size:0.92rem;
  border-bottom-color:rgba(58,74,64,0.25);
}
.doc-link--alt:hover{color:var(--forest);border-bottom-color:var(--forest);}

/* Go-deeper grid: four equal doors */
.deeper-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
.deeper-grid .eco-card{gap:0.2rem;}
@media (max-width:1000px){ .deeper-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .deeper-grid{grid-template-columns:1fr;} }

/* Directory page: the grid flexes so the "add yours" slot never strands alone */
.spend-grid--dir{grid-template-columns:repeat(auto-fit,minmax(255px,1fr));}
@media (max-width:900px){ .spend-grid--dir{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .spend-grid--dir{grid-template-columns:1fr;} }