/* KilimoMahindi mobile-first UI */
:root{
  --green:#1f7a46;
  --green-dark:#155f35;
  --green-soft:#e9f6ef;
  --orange:#f08a13;
  --orange-soft:#fff3e2;
  --sand:#f8f5ef;
  --ink:#1e2939;
  --muted:#667085;
  --line:#e9e2d8;
  --card:#ffffff;
  --shadow:0 10px 28px rgba(16,24,40,.08);
  --radius:18px;
  --radius-sm:12px;
  --container:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--sand);
  line-height:1.5;
}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}

.container{
  width:min(100% - 1rem, var(--container));
  margin-inline:auto;
}

.srOnly{
  position:absolute;
  inline-size:1px;
  block-size:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

.topbar{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(248,245,239,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar__inner{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
}
.brand{
  display:flex;
  align-items:center;
  gap:.75rem;
  color:inherit;
}
.brand:hover{text-decoration:none}
.brand__logo{
  inline-size:44px;
  block-size:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:var(--green);
  color:#fff;
  box-shadow:var(--shadow);
}
.brand__name{
  display:block;
  font-weight:800;
  letter-spacing:.01em;
}
.brand__version{
  display:block;
  font-size:.78rem;
  color:var(--muted);
}
.topbar__actions{display:flex;align-items:center;gap:.5rem}
.iconBtn{
  min-inline-size:44px;
  min-block-size:44px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  color:var(--green-dark);
}
.icon{inline-size:22px;block-size:22px}

.mobilePanel{
  border-top:1px solid var(--line);
  background:#fff;
}
.mobilePanel__content{
  padding:1rem 0 1rem;
  display:grid;
  gap:.875rem;
}

.fieldLabel{
  display:block;
  margin-bottom:.35rem;
  color:var(--muted);
  font-size:.95rem;
}
.control{
  inline-size:100%;
  min-block-size:48px;
  border:1px solid #ddd6cb;
  border-radius:14px;
  background:#fff;
  padding:.85rem .95rem;
  color:var(--ink);
}
.control:focus{
  outline:none;
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(31,122,70,.18);
}

.btn{
  min-block-size:46px;
  border-radius:14px;
  padding:.8rem 1rem;
  border:1px solid transparent;
  font-weight:700;
}
.btn--full{inline-size:100%}
.btn--primary{
  background:var(--green);
  color:#fff;
}
.btn--primary:hover{background:var(--green-dark)}
.btn--secondary{
  background:#fff;
  color:var(--green);
  border-color:var(--green);
}
.btn--accent{
  background:var(--orange);
  color:#fff;
}
.btn--ghost{
  background:transparent;
  color:var(--green-dark);
  border-style:dashed;
  border-color:var(--green);
}

.langSwitch{
  display:flex;
  gap:.5rem;
}
.chipBtn{
  flex:1;
  min-block-size:44px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  font-weight:700;
}
.chipBtn.active{
  background:var(--green);
  color:#fff;
  border-color:var(--green);
}

.hero{
  padding:1rem 0 0;
}
.hero__inner{
  display:grid;
  gap:1rem;
}
.heroCard{
  background:linear-gradient(135deg,var(--green),#0f5a32);
  color:#fff;
  border-radius:26px;
  padding:1.1rem;
  box-shadow:var(--shadow);
}
.eyebrow{
  margin:0 0 .5rem;
  color:#e1f2e7;
  font-weight:700;
  font-size:.88rem;
}
.heroCard h1{
  margin:.1rem 0 .55rem;
  font-size:1.65rem;
  line-height:1.15;
}
.heroCard__text{
  margin:0;
  color:#e7f5ec;
}
.heroChips{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:1rem;
}
.chip{
  background:rgba(255,255,255,.16);
  padding:.48rem .7rem;
  border-radius:999px;
  font-size:.92rem;
}
.searchBar{
  margin-top:1rem;
  display:grid;
  gap:.65rem;
}
.searchBar__button{inline-size:100%}

.heroSide{
  display:grid;
  gap:1rem;
}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1rem;
}
.imageCard{padding:.75rem}
.imagePlaceholder{
  min-block-size:200px;
  border-radius:20px;
  background:linear-gradient(180deg,#eef8f2,#fef5e9);
  border:1px dashed #d3e6d8;
  display:grid;
  align-content:space-between;
  padding:1rem;
}
.imagePlaceholder__badge{
  justify-self:start;
  padding:.4rem .75rem;
  border-radius:999px;
  background:#fff;
  color:var(--green-dark);
  font-size:.88rem;
  font-weight:700;
}
.imagePlaceholder__art{
  align-self:center;
  justify-self:center;
  font-size:4.2rem;
}

.metricsGrid{
  display:grid;
  gap:.85rem;
}
.metricCard{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:1rem;
  box-shadow:var(--shadow);
}
.metricCard__label{
  color:var(--muted);
  margin-bottom:.35rem;
  font-size:.92rem;
}
.metricCard__value{
  font-weight:800;
  font-size:1.1rem;
}

.quickStats{
  padding:1rem 0 0;
}
.quickStats__inner{
  display:grid;
  gap:.75rem;
}
.statBox{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:.95rem 1rem;
}
.statBox__label{
  display:block;
  color:var(--muted);
  font-size:.9rem;
  margin-bottom:.2rem;
}

.section{padding:1.1rem 0 0}
.sectionHeader{
  margin-bottom:.85rem;
}
.sectionHeader h2{
  margin:0 0 .2rem;
  font-size:1.35rem;
}
.sectionHeader p{
  margin:0;
  color:var(--muted);
}

.knowledgeGrid,
.infoGrid,
.communityGrid{
  display:grid;
  gap:1rem;
}

.knowledgeCard{
  overflow:hidden;
  padding:0;
}
.knowledgeCard__media{
  min-block-size:120px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#eef8f1,#fff0df);
  border-bottom:1px solid var(--line);
  font-size:2.3rem;
}
.knowledgeCard__body{
  padding:1rem;
}
.knowledgeCard h3{
  margin:0 0 .65rem;
  font-size:1.1rem;
}
.knowledgeList{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:.55rem;
}
.knowledgeList li{
  display:flex;
  gap:.55rem;
  align-items:flex-start;
}
.tick{
  flex:0 0 20px;
  inline-size:20px;
  block-size:20px;
  margin-top:.18rem;
  color:var(--green);
}

.sectionTitleRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:.9rem;
}
.sectionTitleRow h3{
  margin:0;
  font-size:1.08rem;
}
.pill{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:.35rem .7rem;
  background:var(--green-soft);
  color:var(--green-dark);
  font-size:.82rem;
  font-weight:700;
}

.stack{
  display:grid;
  gap:.75rem;
}
.listItem{
  display:flex;
  gap:.75rem;
  align-items:flex-start;
  padding:.8rem;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
}
.listItem__icon{
  flex:0 0 38px;
  inline-size:38px;
  block-size:38px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:var(--green-soft);
  color:var(--green-dark);
}
.listItem__title{
  margin:0 0 .15rem;
  font-weight:700;
}
.listItem__meta{
  color:var(--muted);
  font-size:.92rem;
}

.alertBox{
  border-left:5px solid var(--orange);
  background:var(--orange-soft);
  border-radius:14px;
  padding:.8rem .9rem;
}
.alertBox strong{display:block;margin-bottom:.2rem}
.helperText{
  color:var(--muted);
  font-size:.92rem;
}

.composer{
  margin-top:1rem;
  padding-top:1rem;
  border-top:1px solid var(--line);
}
.composer__area{
  resize:vertical;
  min-block-size:110px;
}
.composer__footer{
  margin-top:.75rem;
  display:grid;
  gap:.75rem;
}
.composer__footer--wrap .buttonRow{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.buttonRow{display:flex;gap:.5rem;flex-wrap:wrap}

.tabs{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  margin-bottom:.9rem;
}
.tab{
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  border-radius:999px;
  padding:.65rem .95rem;
  font-weight:700;
}
.tab.active{
  background:var(--green);
  color:#fff;
  border-color:var(--green);
}

.isHidden{display:none !important}

.footer{
  margin-top:1.5rem;
  padding:1.5rem 0 2rem;
  border-top:1px solid var(--line);
}
.footer__grid{
  display:grid;
  gap:1rem;
}
.footer h3{
  margin:.1rem 0 .45rem;
  font-size:1rem;
}
.footer p,.footer li{
  color:var(--muted);
}
.footerLinks{
  margin:.2rem 0 0;
  padding-left:1.15rem;
}

.dialog{
  border:none;
  border-radius:20px;
  inline-size:min(92vw, 420px);
  padding:0;
  box-shadow:var(--shadow);
}
.dialog::backdrop{
  background:rgba(15,23,42,.42);
}
.dialog__panel{
  padding:1rem;
}
.dialog__header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:.8rem;
}
.dialog__header h3{margin:0}
.dialog__footer{
  margin-top:1rem;
  display:flex;
  justify-content:flex-end;
}

.toast{
  position:fixed;
  left:50%;
  bottom:1rem;
  transform:translateX(-50%) translateY(10px);
  background:var(--ink);
  color:#fff;
  border-radius:999px;
  padding:.7rem 1rem;
  box-shadow:var(--shadow);
  opacity:0;
  visibility:hidden;
  transition:all .2s ease;
  z-index:70;
  max-inline-size:calc(100vw - 2rem);
  text-align:center;
}
.toast.show{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}

@media (min-width: 700px){
  .container{width:min(100% - 2rem, var(--container))}
  .hero{padding:1.2rem 0 0}
  .heroCard{padding:1.4rem}
  .heroCard h1{font-size:2.2rem}
  .searchBar{
    grid-template-columns:1fr auto;
    align-items:center;
  }
  .searchBar__button{inline-size:auto}
  .quickStats__inner{grid-template-columns:repeat(3,1fr)}
  .knowledgeGrid{grid-template-columns:repeat(2,1fr)}
  .infoGrid{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:repeat(2,1fr)}
  .composer__footer{
    grid-template-columns:1fr auto;
    align-items:center;
  }
}

@media (min-width: 980px){
  .topbar__actions{display:none}
  .mobilePanel{display:block !important}
  .mobilePanel[hidden]{display:block !important}
  .mobilePanel__content{
    display:grid;
    grid-template-columns:1.2fr .6fr .9fr .9fr;
    align-items:end;
    gap:.75rem;
    padding:0 0 .9rem;
  }
  .hero__inner{
    grid-template-columns:1.18fr .82fr;
    align-items:start;
  }
  .knowledgeGrid{grid-template-columns:repeat(4,1fr)}
  .infoGrid{grid-template-columns:repeat(3,1fr)}
  .communityGrid{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:repeat(4,1fr)}
}