/* =========================================================================
   Climate Farmers Community Platform — design system
   Mobile-first: base rules target small screens (bottom nav, single
   column, large tap targets for outdoor/gloved use); the sidebar layout
   from the original wireframes only appears from --bp-desktop up.
   Colors/fonts are the same tokens used in index.html/profile.html/etc.
   ========================================================================= */

:root{
  --cf-text:#204832; --cf-lime:#e3ef89; --cf-lime-pale:#f9fce7; --cf-lime-mid:#d4e46a;
  --cf-white:#ffffff; --cf-off-white:#fafaf7; --cf-border:#e8edcc; --cf-muted:#4d7060;
  --cf-stone:#6b7a6e; --cf-danger:#b94040; --cf-warn:#c47c2a; --cf-info:#2d6fa8;
  --radius:6px; --shadow:0 1px 10px rgba(32,72,50,.08);
  --tap:44px; /* minimum comfortable touch target */
  --bp-tablet:640px; --bp-desktop:900px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Inter',system-ui,sans-serif;font-size:15px;color:var(--cf-text);
  background:var(--cf-off-white);font-weight:400;-webkit-text-size-adjust:100%;
}
h1,h2,.serif,.kpi-number,.logo-text{font-family:'Playfair Display',Georgia,serif;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button,input,select,textarea{font-family:inherit;font-size:1rem;}

/* ---- App shell -------------------------------------------------------- */
.app-shell{display:flex;min-height:100vh;flex-direction:column;}
.main{flex:1;display:flex;flex-direction:column;min-width:0;width:100%;}

/* Topbar — simplified on mobile, full on desktop */
.topbar{
  height:56px;background:var(--cf-white);border-bottom:2px solid var(--cf-lime);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 .9rem;position:sticky;top:0;z-index:50;flex-shrink:0;
}
.topbar-logo img{height:26px;display:block;}
.topbar-right{display:flex;align-items:center;gap:.5rem;}
.lang-switch{display:flex;gap:.15rem;background:var(--cf-off-white);border:1px solid var(--cf-border);border-radius:20px;padding:.15rem;}
.lang-pill{padding:.3rem .5rem;border-radius:16px;font-size:.66rem;font-weight:600;color:var(--cf-stone);min-height:28px;display:flex;align-items:center;}
.lang-pill.active{background:var(--cf-lime);color:var(--cf-text);}
.user-chip{display:flex;align-items:center;gap:.4rem;padding:.2rem .5rem .2rem .2rem;border:1px solid var(--cf-border);border-radius:20px;background:none;cursor:pointer;font-family:inherit;}
.user-avatar{width:30px;height:30px;border-radius:50%;background:var(--cf-text);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:600;flex-shrink:0;}
.user-name{font-size:.78rem;font-weight:500;display:none;}
.user-menu{position:relative;}
.user-menu-dropdown{
  display:none;position:absolute;top:calc(100% + 10px);right:0;background:var(--cf-white);
  border:1px solid var(--cf-border);border-radius:10px;box-shadow:0 8px 28px rgba(32,72,50,.18);
  min-width:190px;z-index:70;overflow:hidden;flex-direction:column;padding:.35rem;
}
.user-menu-dropdown.open{display:flex;}
/* Small caret pointing back at the chip, so the menu reads as attached to
   it rather than a stray box floating under the topbar. */
.user-menu-dropdown::before{
  content:'';position:absolute;top:-6px;right:18px;width:12px;height:12px;
  background:var(--cf-white);border:1px solid var(--cf-border);border-bottom:none;border-right:none;
  transform:rotate(45deg);
}
.user-menu-dropdown a{display:flex;align-items:center;gap:.6rem;padding:.6rem .7rem;font-size:.82rem;font-weight:500;color:var(--cf-text);text-decoration:none;border-radius:6px;}
.user-menu-dropdown a:hover{background:var(--cf-lime-pale);}
.user-menu-dropdown a .cf-icon{color:var(--cf-stone);}
.user-menu-dropdown .menu-divider{height:1px;background:var(--cf-border);margin:.3rem .2rem;}
.user-menu-dropdown a.logout-link{color:var(--cf-danger);}
.user-menu-dropdown a.logout-link .cf-icon{color:var(--cf-danger);}
.user-menu-dropdown a.logout-link:hover{background:#fde8e8;}
.tier-badge{display:none;align-items:center;gap:.3rem;background:var(--cf-lime-mid);color:var(--cf-text);border-radius:20px;padding:.22rem .65rem;font-size:.68rem;font-weight:600;}

/* Sidebar: hidden on mobile, becomes the primary nav on desktop */
.sidebar{display:none;}

/* Bottom tab bar: primary nav on mobile/tablet */
.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;z-index:55;background:var(--cf-white);
  border-top:2px solid var(--cf-lime);display:flex;justify-content:space-around;
  padding:.25rem .25rem calc(.25rem + env(safe-area-inset-bottom));
}
.bottom-nav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.15rem;padding:.4rem 0;min-height:var(--tap);color:var(--cf-stone);font-size:.62rem;font-weight:600;
}
.bottom-nav-item .nav-icon{font-size:1.15rem;}
.bottom-nav-item.active{color:var(--cf-text);}

/* Calm monochrome icons (see View::icon()) -- currentColor lets them pick
   up the surrounding text color/weight automatically (muted, active-dark,
   etc.) instead of rendering as loud native-color emoji. */
.cf-icon{display:inline-block;vertical-align:-0.2em;flex-shrink:0;}
.nav-icon{display:inline-flex;align-items:center;justify-content:center;}
.cf-icon.primary-star{color:var(--cf-warn);fill:var(--cf-warn);}

/* Content area needs bottom padding so it clears the fixed bottom nav */
.content{padding:1rem .9rem calc(76px + env(safe-area-inset-bottom));}

/* ---- Cards, pills, buttons (shared across breakpoints) ---------------- */
.card{background:var(--cf-white);border:1px solid var(--cf-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.1rem;}
.card + .card{margin-top:1rem;}

.pill{display:inline-flex;align-items:center;border-radius:20px;padding:.22rem .6rem;font-size:.68rem;font-weight:600;line-height:1.3;}
.pill-lime{background:var(--cf-lime-pale);color:var(--cf-muted);border:1px solid var(--cf-border);}
.pill-tier{background:var(--cf-lime-mid);color:var(--cf-text);}
.pill-role{background:var(--cf-lime-pale);color:var(--cf-text);border:1px solid var(--cf-lime-mid);}
.pill-topic{background:var(--cf-off-white);color:var(--cf-muted);border:1px solid var(--cf-border);}
.pill-system{background:#eef3ee;color:var(--cf-stone);}
.pill-flag{background:#f6e3e3;color:var(--cf-danger);}
.pill-active{background:var(--cf-lime-pale);color:var(--cf-muted);border:1px solid var(--cf-lime-mid);}
.pill-pending{background:#fbf1e2;color:var(--cf-warn);}
.pill-paid{background:var(--cf-lime-pale);color:var(--cf-muted);}
.pill-overdue{background:#f6e3e3;color:var(--cf-danger);}

.btn-primary,.btn-secondary{
  border-radius:6px;padding:.65rem 1.1rem;font-size:.85rem;font-weight:600;cursor:pointer;
  font-family:inherit;min-height:var(--tap);display:inline-flex;align-items:center;justify-content:center;
  border:none;
}
.btn-primary{background:var(--cf-text);color:#fff;}
.btn-secondary{background:#fff;color:var(--cf-text);border:1px solid var(--cf-border);}
.btn-block{width:100%;}
.btn-approve{background:var(--cf-lime-mid);color:var(--cf-text);border:none;border-radius:6px;padding:.4rem .8rem;font-size:.74rem;font-weight:600;cursor:pointer;font-family:inherit;min-height:var(--tap);}
.btn-reject{background:#fff;color:var(--cf-danger);border:1px solid var(--cf-danger);border-radius:6px;padding:.4rem .8rem;font-size:.74rem;font-weight:600;cursor:pointer;font-family:inherit;min-height:var(--tap);}
.staff-badge{background:var(--cf-text);color:#fff;border-radius:20px;padding:.2rem .6rem;font-size:.64rem;font-weight:600;flex-shrink:0;}
.applicant-item{display:flex;justify-content:space-between;align-items:center;padding:.8rem 0;border-bottom:1px solid var(--cf-border);gap:.6rem;flex-wrap:wrap;}
.applicant-item:last-child{border-bottom:none;}
.ai-later-card{border:1px dashed var(--cf-border);background:var(--cf-off-white);box-shadow:none;display:flex;align-items:center;gap:.8rem;}
.ai-later-icon{width:34px;height:34px;border-radius:50%;background:var(--cf-lime-pale);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;}

form label.form-label{display:block;font-size:.7rem;font-weight:600;color:var(--cf-stone);text-transform:uppercase;letter-spacing:.06em;margin:.9rem 0 .3rem;}
.form-label .req{color:var(--cf-danger);}
.campaign-badge{display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.04em;color:#8a7a1f;background:#f3ecc4;border-radius:3px;padding:.05rem .35rem;margin-left:.4rem;vertical-align:middle;text-transform:uppercase;}
.campaign-field{background:#fcf9e9;border:1px solid #ece0a6;border-radius:var(--radius);padding:.6rem .7rem .7rem;margin:-.1rem -.1rem .6rem;}
.campaign-field .form-label{margin-top:0;}

/* ---- Farm profile: profile-actions bar + completeness trackers -------- */
.profile-actions-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;background:var(--cf-off-white);border:1px solid var(--cf-border);border-radius:var(--radius);padding:.7rem .9rem;margin-bottom:.8rem;}
.pa-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--cf-stone);margin-right:.15rem;}
.pa-btn{padding:.4rem .8rem;border:1px solid var(--cf-border);border-radius:6px;background:var(--cf-white);font-size:.78rem;font-weight:500;cursor:pointer;font-family:inherit;color:var(--cf-text);display:inline-flex;align-items:center;gap:.4rem;transition:box-shadow .15s;min-height:var(--tap);}
.pa-btn:hover{box-shadow:0 2px 8px rgba(32,72,50,.15);}
.pa-btn.primary{border-color:var(--cf-lime-mid);background:var(--cf-lime);color:var(--cf-text);font-weight:600;}
.pa-btn.warn{border-color:#f0d5b0;background:#fdf6ec;color:#8a5a1f;}
.pa-btn.danger{border-color:#f5b8b8;background:#fde8e8;color:var(--cf-danger);}
.pa-note{flex-basis:100%;font-size:.72rem;color:var(--cf-stone);display:flex;align-items:center;gap:.3rem;margin-top:.1rem;}

.comp-bar-wrap{background:var(--cf-lime-pale);border:1px solid var(--cf-lime);border-radius:var(--radius);padding:1rem 1.25rem;margin-bottom:.75rem;display:flex;align-items:center;gap:1rem;}
.camp-bar-wrap{background:#fcf9e9;border:1px solid #ece0a6;border-radius:var(--radius);padding:1rem 1.25rem;margin-bottom:1.25rem;display:flex;align-items:center;gap:1rem;}
.comp-pct{font-family:'Playfair Display',serif;font-size:2.2rem;color:var(--cf-text);line-height:1;flex-shrink:0;}
.camp-bar-wrap .comp-pct{color:#8a7a1f;}
.comp-track{flex:1;min-width:0;}
.comp-label{font-size:.7rem;font-weight:600;color:var(--cf-stone);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.3rem;}
.comp-bar{height:8px;background:var(--cf-border);border-radius:4px;overflow:hidden;margin-bottom:.4rem;}
.comp-fill{height:100%;border-radius:4px;transition:width .5s,background .5s;background:var(--cf-lime-mid);}
.camp-bar-wrap .comp-fill{background:#e9d97a;}
.comp-missing{font-size:.75rem;color:var(--cf-stone);}
.mpill{display:inline-block;padding:.1rem .45rem;background:#fce8e8;color:var(--cf-danger);border-radius:4px;font-size:.68rem;margin:.1rem;cursor:pointer;transition:box-shadow .15s;border:none;font-family:inherit;}
.mpill:hover{box-shadow:0 0 0 2px rgba(0,0,0,.15);}
.mpill.camp{background:#f3ecc4;color:#8a7a1f;}
@media(max-width:580px){.comp-bar-wrap,.camp-bar-wrap{flex-direction:column;text-align:center;}}
.field-flash{animation:fieldFlash .9s ease-out 2;border-radius:6px;}
@keyframes fieldFlash{0%,100%{background:transparent;}50%{background:var(--cf-lime-pale);}}
input.form-input,select.form-input,textarea.form-input{
  width:100%;border:1px solid var(--cf-border);border-radius:6px;padding:.7rem .8rem;
  font-size:.9rem;font-family:inherit;background:var(--cf-off-white);min-height:var(--tap);
}

/* ---- Page headers ------------------------------------------------------ */
h1.page-title{font-size:1.3rem;font-weight:500;margin:0 0 .2rem;}
.page-sub{color:var(--cf-stone);font-size:.82rem;margin:0 0 1.1rem;}

/* ---- Feed / posts ------------------------------------------------------ */
.post{border-bottom:1px solid var(--cf-border);padding:1rem 0;}
.post:first-of-type{padding-top:0;}
.post:last-of-type{border-bottom:none;padding-bottom:0;}
.post-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem;}
.post-avatar{width:36px;height:36px;border-radius:50%;background:var(--cf-lime);display:flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:600;color:var(--cf-text);flex-shrink:0;}
.post-author{font-weight:600;font-size:.85rem;}
.post-meta{font-size:.72rem;color:var(--cf-stone);}
.post-body{font-size:.87rem;line-height:1.55;margin:.4rem 0 .6rem;}
.post-tags{display:flex;gap:.4rem;margin-bottom:.6rem;flex-wrap:wrap;}
.post-actions{display:flex;gap:1rem;font-size:.78rem;color:var(--cf-stone);flex-wrap:wrap;}
.post-actions button,.post-actions span{display:inline-flex;align-items:center;gap:.3rem;}
.post-actions button{background:none;border:none;color:inherit;font:inherit;padding:.3rem 0;min-height:var(--tap);cursor:pointer;}

.ai-box{margin-top:.7rem;background:var(--cf-lime-pale);border:1px solid var(--cf-lime-mid);border-radius:var(--radius);padding:.75rem .9rem;}
.ai-box-label{font-size:.68rem;font-weight:600;color:var(--cf-muted);display:flex;align-items:center;gap:.35rem;margin-bottom:.5rem;}
.ai-resource{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;padding:.5rem 0;border-top:1px dashed var(--cf-lime-mid);gap:.6rem;}
.ai-resource:first-of-type{border-top:none;}
.ai-resource a{font-weight:600;color:var(--cf-text);}
.ai-resource span{color:var(--cf-stone);font-size:.68rem;flex-shrink:0;}

/* ---- Widgets (events, connections, learning journey) ------------------ */
.widget-title{font-size:.76rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--cf-muted);margin:0 0 .8rem;}
.event-item{display:flex;gap:.7rem;padding:.6rem 0;border-bottom:1px solid var(--cf-border);}
.event-item:last-child{border-bottom:none;}
.event-date{width:42px;text-align:center;background:var(--cf-lime-pale);border-radius:5px;padding:.3rem 0;flex-shrink:0;}
.event-date .d{font-family:'Playfair Display',serif;font-size:1rem;line-height:1;}
.event-date .m{font-size:.6rem;text-transform:uppercase;color:var(--cf-stone);}
.event-title{font-size:.82rem;font-weight:600;}
.event-sub{font-size:.7rem;color:var(--cf-stone);}
.conn-item{display:flex;align-items:center;gap:.6rem;padding:.55rem 0;border-bottom:1px solid var(--cf-border);}
.conn-item:last-child{border-bottom:none;}
.conn-avatar{width:34px;height:34px;border-radius:50%;background:var(--cf-lime-mid);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.8rem;color:var(--cf-text);flex-shrink:0;}
.conn-name{font-size:.82rem;font-weight:600;}
.conn-sub{font-size:.7rem;color:var(--cf-stone);}
.progress-track{background:var(--cf-border);border-radius:20px;height:8px;overflow:hidden;margin-top:.4rem;}
.progress-fill{background:var(--cf-lime-mid);height:100%;border-radius:20px;}

/* ---- Profile ------------------------------------------------------------*/
.cover{height:110px;background:linear-gradient(120deg,var(--cf-text),var(--cf-lime-mid));position:relative;z-index:0;}
.profile-header{padding:0 .9rem;margin-top:-38px;display:flex;align-items:flex-end;gap:1rem;position:relative;z-index:1;}
.avatar-lg{width:78px;height:78px;border-radius:50%;background:var(--cf-lime);border:4px solid #fff;display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:600;color:var(--cf-text);box-shadow:var(--shadow);flex-shrink:0;}
.profile-name{font-family:'Playfair Display',serif;font-size:1.3rem;margin:0;}
.profile-sub{font-size:.78rem;color:var(--cf-stone);margin:.15rem 0 .5rem;}

.tabs-bar{display:flex;gap:1rem;overflow-x:auto;border-bottom:1px solid var(--cf-border);padding:0 .9rem;margin-top:1.1rem;-webkit-overflow-scrolling:touch;}
.tab-label{padding:.7rem 0;font-size:.8rem;font-weight:500;color:var(--cf-stone);cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap;min-height:var(--tap);display:flex;align-items:center;}
.tab-panel{display:none;padding:1.2rem .9rem;}
.tab-panel.active{display:block;}

.kpi-row{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;margin-bottom:1.2rem;}
.kpi-tile{background:#fff;border:1px solid var(--cf-border);border-top:3px solid var(--cf-lime);border-radius:var(--radius);box-shadow:var(--shadow);padding:.9rem 1rem;}
.kpi-number{font-size:1.5rem;color:var(--cf-text);line-height:1;}
.kpi-label{font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--cf-stone);margin-top:.35rem;}

.bio-text{font-size:.87rem;line-height:1.6;color:var(--cf-text);}
.detail-grid{display:grid;grid-template-columns:1fr;gap:.7rem;margin-top:1rem;font-size:.85rem;}
.detail-grid dt{color:var(--cf-stone);font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;}
.detail-grid dd{margin:.15rem 0 0;font-weight:500;}
.detail-grid .full{grid-column:1/-1;}

.ladder{display:flex;justify-content:space-between;align-items:center;margin:1.4rem 0 1.8rem;position:relative;}
.ladder::before{content:'';position:absolute;top:20px;left:5%;right:5%;height:2px;background:var(--cf-border);z-index:0;}
.rung{text-align:center;position:relative;z-index:1;flex:1;}
.rung-circle{width:38px;height:38px;border-radius:50%;background:#fff;border:2px solid var(--cf-border);display:flex;align-items:center;justify-content:center;margin:0 auto .5rem;font-size:1.05rem;}
.rung.active .rung-circle{background:var(--cf-lime-mid);border-color:var(--cf-lime-mid);}
.rung.current .rung-circle{background:var(--cf-text);border-color:var(--cf-text);color:#fff;}
.rung-label{font-size:.68rem;font-weight:600;}
.rung-you{font-size:.58rem;color:var(--cf-muted);font-weight:700;margin-top:.2rem;}

.badge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;}
.badge-tile{text-align:center;background:var(--cf-off-white);border:1px solid var(--cf-border);border-radius:var(--radius);padding:.9rem .4rem;}
.badge-icon{width:44px;height:44px;border-radius:50%;background:var(--cf-lime-pale);border:1px solid var(--cf-lime-mid);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin:0 auto .45rem;}
.badge-name{font-size:.68rem;font-weight:600;}
.badge-sub{font-size:.6rem;color:var(--cf-stone);margin-top:.15rem;}

/* ---- Map / directory ----------------------------------------------------*/
.filterbar{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-bottom:1rem;}
.toggle-group{display:flex;align-items:center;gap:.4rem;font-size:.76rem;font-weight:500;}
.switch{position:relative;display:inline-block;width:36px;height:20px;flex-shrink:0;}
.switch input{display:none;}
.slider{position:absolute;inset:0;background:var(--cf-border);border-radius:20px;transition:.15s;cursor:pointer;}
.slider::before{content:'';position:absolute;width:16px;height:16px;left:2px;top:2px;background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:.15s;}
.switch input:checked + .slider{background:var(--cf-lime-mid);}
.switch input:checked + .slider::before{transform:translateX(16px);}
/* Larger variant -- matches farmer.html's own consent/settings toggle
   exactly (44x24, dark-green when on) rather than the smaller utility
   switch used for map filter toggles. */
.switch.switch-lg{width:44px;height:24px;}
.switch-lg .slider::before{width:18px;height:18px;}
.switch-lg input:checked + .slider{background:var(--cf-text);}
.switch-lg input:checked + .slider::before{transform:translateX(20px);}

/* Native checkbox/radio accent -- without this they render in the
   browser's default blue, which clashes with the rest of the palette. */
input[type="checkbox"],input[type="radio"]{accent-color:var(--cf-text);}
.view-toggle{display:inline-flex;border:1px solid var(--cf-border);border-radius:20px;overflow:hidden;width:100%;}
.view-toggle label{flex:1;text-align:center;padding:.55rem 0;font-size:.78rem;font-weight:600;color:var(--cf-stone);cursor:pointer;min-height:var(--tap);}
.view-toggle input{display:none;}
.view-toggle input:checked + label{background:var(--cf-text);color:#fff;}

.map-area{position:relative;height:340px;border-radius:var(--radius);overflow:hidden;}
table{width:100%;border-collapse:collapse;font-size:.8rem;}
th{text-align:left;font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--cf-stone);padding:.6rem .4rem;border-bottom:1px solid var(--cf-border);white-space:nowrap;}
td{padding:.7rem .4rem;border-bottom:1px solid var(--cf-border);}
tr:last-child td{border-bottom:none;}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.row-action{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .6rem;font-size:.7rem;white-space:nowrap;}

/* ---- Sprout AI assistant ------------------------------------------------*/
.sprout-fab{position:fixed;bottom:calc(70px + env(safe-area-inset-bottom));right:1rem;width:52px;height:52px;border-radius:50%;background:var(--cf-lime);box-shadow:0 4px 16px rgba(32,72,50,.25);display:flex;align-items:center;justify-content:center;font-size:1.4rem;cursor:pointer;z-index:60;border:1px solid var(--cf-lime-mid);}
.sprout-panel{display:none;position:fixed;inset:0;background:#fff;z-index:65;flex-direction:column;overflow:hidden;}
.sprout-panel.open{display:flex;}
.sprout-header{background:var(--cf-lime-pale);padding:.9rem 1rem;display:flex;align-items:flex-start;gap:.6rem;border-bottom:1px solid var(--cf-border);padding-top:calc(.9rem + env(safe-area-inset-top));}
.sprout-avatar{width:34px;height:34px;border-radius:50%;background:var(--cf-lime-mid);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;}
.sprout-name{font-weight:600;font-size:.88rem;}
.sprout-powered{font-size:.62rem;color:var(--cf-stone);}
.sprout-context{display:inline-block;margin-top:.35rem;background:#fff;border:1px solid var(--cf-lime-mid);border-radius:14px;padding:.15rem .5rem;font-size:.62rem;color:var(--cf-muted);font-weight:500;}
.sprout-close{margin-left:auto;cursor:pointer;font-size:1.3rem;color:var(--cf-stone);line-height:1;min-height:var(--tap);min-width:var(--tap);display:flex;align-items:center;justify-content:center;}
.sprout-consent{font-size:.66rem;color:var(--cf-stone);padding:.5rem 1rem;border-bottom:1px solid var(--cf-border);background:var(--cf-lime-pale);display:flex;align-items:center;justify-content:space-between;gap:.5rem;}
.consent-manage{color:var(--cf-info);font-weight:600;text-decoration:underline;cursor:pointer;flex-shrink:0;}
.sprout-body{padding:1rem;overflow-y:auto;flex:1;font-size:.85rem;}
.sprout-prompts{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.1rem;}
.sprout-chip{background:var(--cf-off-white);border:1px solid var(--cf-border);border-radius:20px;padding:.5rem .8rem;font-size:.75rem;cursor:default;}
.sprout-chip:hover{background:var(--cf-lime-pale);}
.sprout-footer{border-top:1px solid var(--cf-border);padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));display:flex;gap:.5rem;}
.sprout-input{flex:1;border:1px solid var(--cf-border);border-radius:20px;padding:.6rem .9rem;font-size:.85rem;font-family:inherit;background:var(--cf-off-white);}
.sprout-send{background:var(--cf-text);color:#fff;border:none;border-radius:50%;width:40px;height:40px;flex-shrink:0;}
.bubble{max-width:85%;padding:.6rem .8rem;border-radius:12px;font-size:.82rem;line-height:1.45;}
.bubble.user{background:var(--cf-text);color:#fff;border-radius:12px 12px 2px 12px;margin-left:auto;}
.bubble.bot{background:var(--cf-lime-pale);color:var(--cf-text);border-radius:12px 12px 12px 2px;}
.bubble.bot .cta-link{display:inline-block;margin-top:.4rem;color:var(--cf-info);font-weight:600;text-decoration:underline;cursor:default;}
.sprout-msg{margin-bottom:.8rem;display:flex;}
.sprout-msg.user{justify-content:flex-end;}

/* =========================================================================
   Tablet / desktop enhancements
   ========================================================================= */
@media (min-width: 640px){
  .kpi-row{grid-template-columns:repeat(4,1fr);}
  .badge-grid{grid-template-columns:repeat(5,1fr);}
}

@media (min-width: 900px){
  .app-shell{flex-direction:row;}
  .bottom-nav{display:none;}
  .sidebar{
    display:flex;width:236px;flex-shrink:0;background:var(--cf-white);
    border-right:2px solid var(--cf-lime);flex-direction:column;justify-content:space-between;
    position:sticky;top:0;height:100vh;
  }
  .sidebar-top{padding-top:.5rem;}
  .sidebar-section-label{font-size:.62rem;letter-spacing:.13em;opacity:.4;text-transform:uppercase;padding:1.1rem 1.2rem .35rem;font-weight:600;}
  .nav-item{display:flex;align-items:center;gap:.65rem;padding:.55rem 1.2rem;font-size:.85rem;font-weight:500;color:var(--cf-text);border-right:3px solid transparent;}
  .nav-item:hover{background:var(--cf-lime-pale);}
  .nav-item.active{background:var(--cf-lime-pale);border-right:3px solid var(--cf-text);font-weight:600;}
  .nav-icon{font-size:1rem;width:1.2rem;text-align:center;}
  .sidebar-tier{margin:1rem;padding:1rem;background:var(--cf-lime-pale);border:1px solid var(--cf-border);border-radius:var(--radius);}
  .sidebar-tier-label{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;opacity:.6;margin-bottom:.3rem;}
  .sidebar-tier-name{font-family:'Playfair Display',serif;font-size:1.1rem;margin-bottom:.5rem;}
  .sidebar-badges{display:flex;gap:.4rem;}
  .mini-badge{width:28px;height:28px;border-radius:50%;background:var(--cf-lime-mid);display:flex;align-items:center;justify-content:center;font-size:.85rem;border:1px solid var(--cf-border);}

  .topbar{height:60px;padding:0 1.6rem;}
  .user-name{display:inline;}
  .tier-badge{display:inline-flex;}

  .content{padding:1.6rem 1.8rem;}
  h1.page-title{font-size:1.5rem;}

  .content.with-rail{display:grid;grid-template-columns:1fr 320px;gap:1.6rem;align-items:start;}

  .cover{height:150px;}
  .profile-header{padding:0 1.8rem;margin-top:-46px;}
  .kpi-row{grid-template-columns:repeat(4,1fr);}
  .avatar-lg{width:96px;height:96px;font-size:2rem;}
  .profile-name{font-size:1.6rem;}
  .tabs-bar{padding:0 1.8rem;}
  .tab-panel{padding:1.6rem 1.8rem;}
  .detail-grid{grid-template-columns:1fr 1fr;}

  .sprout-fab{bottom:1.8rem;right:1.8rem;width:56px;height:56px;font-size:1.5rem;}
  .sprout-panel{inset:auto;bottom:1.8rem;right:1.8rem;width:380px;max-height:78vh;border-radius:14px 14px 6px 14px;box-shadow:0 8px 40px rgba(32,72,50,.28);border:1px solid var(--cf-border);}
  .sprout-header{padding-top:.9rem;}
  .sprout-body{font-size:.82rem;}
  .bubble{font-size:.78rem;}
  .sprout-input{padding:.5rem .9rem;font-size:.78rem;}
  .sprout-send{width:34px;height:34px;}
}

/* ---- Farm profile (farmer.html-equivalent) ------------------------------*/
.fp-savebar{position:sticky;top:0;z-index:40;background:var(--cf-white);border-bottom:1px solid var(--cf-border);padding:.7rem .9rem;display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;margin:-1rem -.9rem 1rem;}
.fp-save-status{font-size:.72rem;color:var(--cf-stone);display:flex;align-items:center;gap:.4rem;}
.fp-save-status.saving{color:var(--cf-warn);}
.fp-save-status.saved{color:var(--cf-muted);}
.fp-save-status.error{color:var(--cf-danger);}
/* 3-column grid, two rows: row 1 is the must-fill tabs (bold, colored --
   General Farm Data / Farm Contacts / Data Permissions), row 2 the
   optional-programs tabs -- same visual hierarchy as farmer.html's own
   .tab-nav/.tab-btn, which this is meant to match exactly. */
.fp-tabs{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:2px solid var(--cf-lime);margin-bottom:1.25rem;}
.fp-tab{padding:.9rem .5rem;font-size:.8rem;font-weight:500;color:var(--cf-stone);border:none;background:none;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;white-space:normal;text-align:center;line-height:1.3;font-family:inherit;transition:all .15s;border-radius:var(--radius) var(--radius) 0 0;min-height:var(--tap);}
.fp-tab.active{color:var(--cf-text);border-bottom-color:var(--cf-text);font-weight:600;background:var(--cf-lime-pale);}
.fp-tabs .fp-tab:nth-child(-n+3){font-weight:700;color:var(--cf-text);}
.fp-tabs .fp-tab:nth-child(-n+3).active{font-weight:800;}
.fp-pane{display:none;}
.fp-pane.active{display:block;}
.map-wrap{border:1.5px solid var(--cf-border);border-radius:var(--radius);overflow:hidden;margin-bottom:.8rem;}
.map-cap{font-size:.7rem;font-weight:600;color:var(--cf-stone);padding:.4rem .75rem;background:var(--cf-lime-pale);border-bottom:1px solid var(--cf-border);text-transform:uppercase;letter-spacing:.05em;}
.map-coords{font-size:.7rem;color:var(--cf-muted);padding:.35rem .75rem;background:var(--cf-off-white);border-top:1px solid var(--cf-border);}

.section-title{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--cf-muted);border-bottom:1px solid var(--cf-border);padding-bottom:.5rem;margin-bottom:.9rem;}
/* Page-level section headings (admin.php) -- distinct from the small
   uppercase card-internal label above, which .section-title also serves
   as (farm-profile.php's card sub-headers). */
h2.section-title{font-size:1.05rem;font-weight:600;text-transform:none;letter-spacing:normal;color:var(--cf-text);border-bottom:none;padding-bottom:0;margin:1.8rem 0 .8rem;display:flex;align-items:center;gap:.6rem;}
h2.section-title .cf-icon{color:var(--cf-muted);}
.form-row{display:flex;gap:.8rem;flex-wrap:wrap;}
.form-row > .form-group{flex:1;min-width:180px;}
.form-group.full{width:100%;flex-basis:100%;}
.hint{font-size:.68rem;color:var(--cf-stone);margin-top:.25rem;}

/* Accordion (produce categories) */
.accordion{border:1px solid var(--cf-border);border-radius:var(--radius);overflow:hidden;margin-bottom:.7rem;}
.accordion-header{background:var(--cf-lime-pale);padding:.7rem .9rem;font-size:.8rem;font-weight:600;display:flex;align-items:center;justify-content:space-between;cursor:pointer;min-height:var(--tap);}
.accordion-header .arrow{transition:transform .15s;}
.accordion.open .accordion-header .arrow{transform:rotate(180deg);}
.accordion-body{display:none;padding:.8rem .9rem;}
.accordion.open .accordion-body{display:block;}

/* Multi-choice pill rows (produce/cert/consent checklists) */
.mc-grid{display:flex;flex-direction:column;gap:.5rem;}
.mc-item{display:flex;align-items:flex-start;gap:.6rem;border:1px solid var(--cf-border);border-radius:var(--radius);padding:.6rem .8rem;cursor:pointer;font-size:.82rem;transition:border-color .15s,background .15s;}
.mc-item:hover{border-color:var(--cf-lime-mid);background:var(--cf-lime-pale);}
.mc-item.sel{background:var(--cf-lime-pale);border-color:var(--cf-text);}
.mc-item.excl{border-style:dashed;}
.mc-item input{margin-top:.15rem;flex-shrink:0;}
.mc-sub{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.5rem;padding-left:1.6rem;}
.mc-sub label{font-size:.72rem;color:var(--cf-stone);display:flex;align-items:center;gap:.3rem;}

.consent-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--cf-border);}
.consent-row:last-child{border-bottom:none;}
.consent-title{font-size:.85rem;font-weight:600;}
.consent-sub{font-size:.75rem;color:var(--cf-stone);margin-top:.15rem;}
.consent-important{background:#fdf6ec;border:1px solid #f0d5b0;border-radius:var(--radius);padding:.8rem .9rem;margin-bottom:.8rem;}

.contact-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.7rem 0;border-bottom:1px solid var(--cf-border);flex-wrap:wrap;}
.contact-row:last-child{border-bottom:none;}
.contact-name{font-size:.85rem;font-weight:600;}
.contact-sub{font-size:.72rem;color:var(--cf-stone);}
.contact-actions{display:flex;gap:.5rem;flex-wrap:wrap;}

.pic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.7rem;margin-top:.6rem;}
.pic-tile{position:relative;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;border:1px solid var(--cf-border);background:var(--cf-off-white);}
.pic-tile img{width:100%;height:100%;object-fit:cover;display:block;}
.pic-tile .pic-main-badge{position:absolute;top:.3rem;left:.3rem;background:var(--cf-text);color:#fff;font-size:.6rem;font-weight:700;padding:.15rem .4rem;border-radius:4px;}
.pic-tile .pic-actions{position:absolute;bottom:0;left:0;right:0;display:flex;gap:.3rem;padding:.3rem;background:linear-gradient(transparent,rgba(0,0,0,.55));}
.pic-tile .pic-actions button{flex:1;font-size:.62rem;padding:.25rem;border-radius:4px;border:none;background:rgba(255,255,255,.9);cursor:pointer;}
.pic-upload-btn{aspect-ratio:4/3;border:2px dashed var(--cf-border);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.3rem;font-size:.7rem;color:var(--cf-stone);cursor:pointer;background:var(--cf-off-white);text-align:center;padding:.5rem;}
.single-pic-tile{width:120px;}

.loc-type-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:.5rem;margin-bottom:.8rem;}
.loc-type-btn{border:1px solid var(--cf-border);border-radius:var(--radius);padding:.6rem .4rem;text-align:center;font-size:.68rem;font-weight:600;color:var(--cf-stone);cursor:pointer;background:#fff;min-height:var(--tap);}
.loc-type-btn.active{border-color:var(--cf-text);background:var(--cf-lime-pale);color:var(--cf-text);}
.sell-loc-card{border:1px solid var(--cf-border);border-radius:var(--radius);padding:.9rem;margin-bottom:.9rem;}
.hours-grid{display:grid;grid-template-columns:auto 1fr auto auto;gap:.4rem .6rem;align-items:center;font-size:.76rem;margin-top:.5rem;}

.modal-overlay{display:none;position:fixed;inset:0;background:rgba(32,72,50,.45);z-index:80;align-items:flex-end;justify-content:center;}
.modal-overlay.open{display:flex;}
.modal-box{background:#fff;border-radius:14px 14px 0 0;width:100%;max-width:480px;max-height:88vh;overflow-y:auto;padding:1.2rem;}
.modal-box .modal-title{font-family:'Playfair Display',serif;font-size:1.1rem;margin:0 0 1rem;}
.modal-actions{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1.2rem;}

@media (min-width:640px){
  .modal-overlay{align-items:center;}
  .modal-box{border-radius:14px;}
}
@media (min-width:900px){
  .fp-savebar{margin:-1.6rem -1.8rem 1.2rem;padding:.8rem 1.8rem;}
}

/* ---- Messages (messages.php) -------------------------------------------
   Mobile: single column, [data-mobile-view] on .msg-shell toggles which of
   .msg-list / .msg-thread is visible, with a back button in the thread
   header to return to the list. Desktop (>=900px): both panels always
   visible side by side, back button hidden — see the trailing media query
   below, which deliberately matches the hide rules' specificity
   (.msg-shell[data-mobile-view] ...) so it reliably overrides them
   regardless of which view was left active before the viewport grew. */
.msg-shell{background:var(--cf-white);border:1px solid var(--cf-border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;height:70vh;min-height:460px;}
.msg-list{overflow-y:auto;flex:1;}
.msg-shell[data-mobile-view="thread"] .msg-list{display:none;}
.msg-thread{display:flex;flex-direction:column;flex:1;min-height:0;}
.msg-shell[data-mobile-view="list"] .msg-thread{display:none;}
.msg-empty{padding:1.4rem .9rem;text-align:center;}
.msg-list-item{display:flex;align-items:center;gap:.6rem;padding:.75rem .9rem;border-bottom:1px solid var(--cf-border);cursor:pointer;}
.msg-list-item:hover{background:var(--cf-lime-pale);}
.msg-list-item.active{background:var(--cf-lime-pale);}
.msg-avatar{width:40px;height:40px;border-radius:50%;background:var(--cf-lime-mid);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.85rem;color:var(--cf-text);flex-shrink:0;}
.msg-list-main{flex:1;min-width:0;}
.msg-list-top{display:flex;justify-content:space-between;align-items:baseline;gap:.4rem;}
.msg-list-name{font-size:.85rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.msg-list-time{font-size:.65rem;color:var(--cf-stone);flex-shrink:0;}
.msg-list-bottom{display:flex;justify-content:space-between;align-items:center;gap:.4rem;margin-top:.15rem;}
.msg-list-preview{font-size:.76rem;color:var(--cf-stone);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;}
.msg-unread-badge{background:var(--cf-text);color:#fff;border-radius:20px;min-width:18px;height:18px;padding:0 .35rem;font-size:.62rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.msg-thread-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;color:var(--cf-stone);font-size:.82rem;}
.msg-thread-empty .cf-icon{color:var(--cf-border);}
.msg-thread-active{display:flex;flex-direction:column;flex:1;min-height:0;}
.msg-thread-header{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;border-bottom:1px solid var(--cf-border);flex-shrink:0;}
.msg-back-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:none;color:var(--cf-text);cursor:pointer;flex-shrink:0;padding:0;}
.msg-thread-name{font-size:.88rem;font-weight:600;}
.msg-bubbles{flex:1;overflow-y:auto;padding:.9rem;display:flex;flex-direction:column;gap:.5rem;}
.msg-day-sep{align-self:center;font-size:.65rem;color:var(--cf-stone);text-transform:uppercase;letter-spacing:.05em;margin:.4rem 0;}
.msg-bubble-row{display:flex;flex-direction:column;max-width:78%;}
.msg-bubble-row.mine{align-self:flex-end;align-items:flex-end;}
.msg-bubble-row.theirs{align-self:flex-start;align-items:flex-start;}
.msg-bubble{padding:.55rem .8rem;border-radius:12px;font-size:.83rem;line-height:1.45;white-space:pre-wrap;word-break:break-word;}
.msg-bubble-row.mine .msg-bubble{background:var(--cf-text);color:#fff;border-radius:12px 12px 2px 12px;}
.msg-bubble-row.theirs .msg-bubble{background:var(--cf-lime-pale);color:var(--cf-text);border-radius:12px 12px 12px 2px;}
.msg-bubble-time{font-size:.62rem;color:var(--cf-stone);margin-top:.2rem;padding:0 .2rem;}
.msg-composer{display:flex;align-items:flex-end;gap:.5rem;padding:.7rem .9rem;border-top:1px solid var(--cf-border);flex-shrink:0;}
.msg-input{flex:1;resize:none;border:1px solid var(--cf-border);border-radius:18px;padding:.55rem .9rem;font-size:.85rem;max-height:100px;font-family:inherit;line-height:1.4;}
.msg-input:focus{outline:none;border-color:var(--cf-lime-mid);}
.msg-send-btn{width:40px;height:40px;border-radius:50%;border:none;background:var(--cf-text);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
.msg-send-btn:disabled{opacity:.5;cursor:default;}
/* The Sprout FAB is fixed bottom-right on every page and would otherwise
   sit on top of (and intercept clicks on) the composer's send button,
   which lives in that same corner while a thread is open -- see
   messages.js, which toggles this class. ID selectors so this reliably
   beats .sprout-panel.open{display:flex} regardless of the panel's own
   open/closed state. */
body.msg-thread-open #sprout-fab,
body.msg-thread-open #sprout-panel{display:none;}

@media (min-width:900px){
  .msg-shell{flex-direction:row;height:75vh;}
  .msg-list{width:320px;flex-shrink:0;border-right:1px solid var(--cf-border);}
  .msg-shell[data-mobile-view] .msg-list{display:block;}
  .msg-shell[data-mobile-view] .msg-thread{display:flex;}
  .msg-back-btn{display:none;}
}

/* ---- Groups: page head, pending invites, settings/thread chrome -------- */
.msg-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.msg-page-head .btn-primary{display:inline-flex;align-items:center;gap:.35rem;flex-shrink:0;}

.msg-invites-card{margin-top:1rem;}
.msg-invites-title{display:flex;align-items:center;gap:.4rem;font-weight:600;font-size:.82rem;margin-bottom:.6rem;}
.msg-invite-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.5rem 0;border-top:1px solid var(--cf-border);flex-wrap:wrap;}
.msg-invite-row:first-of-type{border-top:none;}
.msg-invite-info{display:flex;flex-direction:column;gap:.1rem;min-width:0;}
.msg-invite-actions{display:flex;gap:.4rem;flex-shrink:0;}

.msg-settings-btn{margin-left:auto;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:none;background:none;color:var(--cf-text);cursor:pointer;flex-shrink:0;border-radius:8px;}
.msg-settings-btn:hover{background:var(--cf-lime-pale);}
.msg-group-banner{background:#fbf1e2;color:var(--cf-warn);font-size:.74rem;padding:.5rem .9rem;border-bottom:1px solid var(--cf-border);flex-shrink:0;}

/* Cover preset picker (create-group modal) */
.cg-cover-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:.5rem;}
.cg-cover-tile{position:relative;border:2px solid transparent;border-radius:10px;overflow:hidden;height:64px;background:var(--cf-lime-pale);cursor:pointer;padding:0;display:flex;align-items:flex-end;}
.cg-cover-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.cg-cover-tile span{position:relative;z-index:1;background:rgba(0,0,0,.45);color:#fff;font-size:.6rem;padding:.15rem .35rem;width:100%;text-align:left;line-height:1.2;}
.cg-cover-tile.selected{border-color:var(--cf-lime-mid);box-shadow:0 0 0 2px var(--cf-text);}
.cg-cover-tile.selected::after{content:"✓";position:absolute;top:4px;right:4px;z-index:2;width:18px;height:18px;border-radius:50%;background:var(--cf-text);color:#fff;font-size:.7rem;display:flex;align-items:center;justify-content:center;}
.cg-upload-label{cursor:pointer;align-items:center;gap:.35rem;}

/* Resource-link chips under a message that matched a known topic */
.msg-resource-chips{display:flex;flex-direction:column;gap:.3rem;margin-top:.3rem;max-width:100%;}
.msg-resource-chip{display:flex;align-items:center;gap:.35rem;background:var(--cf-lime-pale);border:1px solid var(--cf-lime-mid);border-radius:8px;padding:.35rem .55rem;font-size:.72rem;color:var(--cf-text);text-decoration:none;}
.msg-resource-chip:hover{background:var(--cf-lime-mid);}
.msg-resource-chip .cf-icon{flex-shrink:0;}
.msg-resource-chip-topic{font-size:.6rem;text-transform:uppercase;letter-spacing:.04em;color:var(--cf-stone);}

/* Moderator delete-message control */
.msg-bubble-row{position:relative;}
.msg-bubble-mod-delete{display:none;position:absolute;top:-6px;background:#fff;border:1px solid var(--cf-border);border-radius:50%;width:20px;height:20px;align-items:center;justify-content:center;cursor:pointer;color:var(--cf-danger);padding:0;}
.msg-bubble-row.mine .msg-bubble-mod-delete{right:-6px;}
.msg-bubble-row.theirs .msg-bubble-mod-delete{left:-6px;}
.msg-bubble-row:hover .msg-bubble-mod-delete{display:flex;}
.msg-bubble-removed{font-style:italic;color:var(--cf-stone);}
.msg-bubble-sender{font-size:.65rem;font-weight:600;color:var(--cf-stone);margin:0 .2rem .15rem;}

/* Group settings modal: participants list */
.gs-section-title{font-size:.78rem;font-weight:600;margin:1rem 0 .5rem;}
.gs-section-title:first-child{margin-top:0;}
.gs-participant-row{display:flex;align-items:center;gap:.6rem;padding:.5rem 0;border-top:1px solid var(--cf-border);}
.gs-participant-row:first-of-type{border-top:none;}
.gs-participant-name{flex:1;min-width:0;font-size:.82rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gs-participant-role{font-size:.65rem;text-transform:uppercase;letter-spacing:.03em;color:var(--cf-stone);flex-shrink:0;}
.gs-participant-actions{display:flex;gap:.3rem;flex-wrap:wrap;flex-shrink:0;}
.gs-participant-actions button{background:none;border:1px solid var(--cf-border);border-radius:6px;padding:.25rem .5rem;font-size:.65rem;cursor:pointer;font-family:inherit;color:var(--cf-text);}
.gs-participant-actions button:hover{background:var(--cf-lime-pale);}
.gs-participant-actions button.danger{color:var(--cf-danger);border-color:var(--cf-danger);}
.gs-danger-zone{margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--cf-border);display:flex;gap:.5rem;flex-wrap:wrap;}

/* Invite-members modal */
.im-results{max-height:180px;overflow-y:auto;border:1px solid var(--cf-border);border-radius:8px;margin-bottom:.6rem;}
.im-results:empty{display:none;}
.im-result-row{display:flex;align-items:center;justify-content:between;gap:.5rem;padding:.5rem .7rem;cursor:pointer;font-size:.8rem;}
.im-result-row:hover{background:var(--cf-lime-pale);}
.im-selected{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.6rem;}
.im-selected:empty{display:none;}
.im-selected-chip{display:flex;align-items:center;gap:.3rem;background:var(--cf-lime-pale);border-radius:20px;padding:.25rem .3rem .25rem .6rem;font-size:.74rem;}
.im-selected-chip button{background:none;border:none;cursor:pointer;color:var(--cf-stone);display:flex;padding:2px;}

/* =========================================================================
   Groups overview (groups.php), Group Hub detail (group.php), Living Lab
   detail (living-lab.php)
   ========================================================================= */
.group-hub-grid{display:grid;grid-template-columns:1fr;gap:1rem;}
@media (min-width:640px){.group-hub-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1000px){.group-hub-grid{grid-template-columns:repeat(3,1fr);}}

.group-hub-card{display:block;border-radius:var(--radius);overflow:hidden;border:1px solid var(--cf-border);box-shadow:var(--shadow);background:var(--cf-white);}
.group-hub-card:hover{box-shadow:0 4px 18px rgba(32,72,50,.14);}
.group-hub-cover{height:110px;background:var(--cf-lime-pale) center/cover no-repeat;position:relative;display:flex;align-items:flex-end;}
.group-hub-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.group-hub-kind{position:relative;z-index:1;margin:.5rem;background:rgba(32,72,50,.75);color:#fff;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:.2rem .5rem;border-radius:20px;}
.group-hub-body{padding:.85rem .95rem 1rem;}
.group-hub-title{font-family:'Playfair Display',serif;font-size:1.02rem;margin:0 0 .3rem;}
.group-hub-desc{font-size:.76rem;color:var(--cf-stone);margin:0;line-height:1.4;}
.group-hub-stats{display:flex;gap:.8rem;margin-top:.6rem;padding-top:.6rem;border-top:1px solid var(--cf-border);}
.group-hub-stat{display:flex;align-items:center;gap:.25rem;font-size:.7rem;color:var(--cf-muted);font-weight:600;}

.living-lab-strip{display:grid;grid-template-columns:1fr;gap:1rem;}
@media (min-width:640px){.living-lab-strip{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1000px){.living-lab-strip{grid-template-columns:repeat(5,1fr);}}
.living-lab-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;border:1px solid var(--cf-border);border-radius:var(--radius);background:var(--cf-white);box-shadow:var(--shadow);padding:1.1rem .8rem;}
.living-lab-card:hover{box-shadow:0 4px 18px rgba(32,72,50,.14);}
.living-lab-logo{height:44px;max-width:100%;object-fit:contain;}
.living-lab-badge{width:56px;height:56px;border-radius:50%;background:var(--cf-lime-mid);display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-weight:600;font-size:.95rem;color:var(--cf-text);}
.living-lab-name{font-weight:600;font-size:.82rem;}
.living-lab-countries{font-size:.7rem;color:var(--cf-stone);}

/* Group Hub detail: header + tabs */
.group-hub-header{display:flex;gap:1rem;align-items:center;margin-bottom:1.2rem;flex-wrap:wrap;}
.group-hub-header-cover{width:88px;height:88px;border-radius:var(--radius);background:var(--cf-lime-pale) center/cover no-repeat;flex-shrink:0;position:relative;overflow:hidden;}
.group-hub-header-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.back-link{display:inline-flex;align-items:center;gap:.3rem;font-size:.76rem;font-weight:600;color:var(--cf-muted);margin-bottom:.6rem;}

.hub-tabs{display:flex;gap:.3rem;overflow-x:auto;border-bottom:1px solid var(--cf-border);margin-bottom:1.2rem;}
.hub-tab{display:flex;align-items:center;gap:.4rem;padding:.6rem .9rem;font-size:.8rem;font-weight:600;color:var(--cf-stone);white-space:nowrap;border-bottom:2px solid transparent;cursor:pointer;background:none;border-left:none;border-right:none;border-top:none;font-family:inherit;}
.hub-tab:hover{color:var(--cf-text);}
.hub-tab.active{color:var(--cf-text);border-bottom-color:var(--cf-text);}
.hub-panel{display:none;}
.hub-panel.active{display:block;}

.subtopic-card{margin-bottom:1.2rem;}
.subtopic-title{display:flex;align-items:center;gap:.4rem;font-weight:600;font-size:.9rem;margin:0 0 .2rem;}
.subtopic-desc{font-size:.74rem;color:var(--cf-stone);margin:0 0 .8rem;}
.hub-post-form{display:flex;gap:.5rem;margin-bottom:1rem;align-items:flex-start;}
.hub-post-form textarea{flex:1;resize:vertical;min-height:44px;border:1px solid var(--cf-border);border-radius:8px;padding:.5rem .7rem;font-size:.8rem;font-family:inherit;}
.hub-post{border-top:1px solid var(--cf-border);padding:.9rem 0;}
.hub-post:first-child{border-top:none;padding-top:0;}
.hub-post-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.35rem;}
.hub-post-avatar{width:30px;height:30px;border-radius:50%;background:var(--cf-lime-mid);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.7rem;color:var(--cf-text);flex-shrink:0;}
.hub-post-author{font-weight:600;font-size:.8rem;}
.hub-post-time{font-size:.65rem;color:var(--cf-stone);}
.hub-post-body{font-size:.82rem;line-height:1.5;white-space:pre-wrap;word-break:break-word;margin:0 0 .4rem;}
.hub-post-actions{display:flex;gap:.9rem;font-size:.72rem;color:var(--cf-stone);}
.hub-post-actions button{background:none;border:none;cursor:pointer;color:inherit;font:inherit;padding:0;display:flex;align-items:center;gap:.25rem;}
.hub-post-actions button.liked{color:var(--cf-text);font-weight:600;}
.hub-comments{margin-top:.6rem;padding-left:2.3rem;display:flex;flex-direction:column;gap:.5rem;}
.hub-comment{font-size:.78rem;}
.hub-comment-author{font-weight:600;}
.hub-comment-form{display:flex;gap:.4rem;margin-top:.5rem;padding-left:2.3rem;}
.hub-comment-form input{flex:1;border:1px solid var(--cf-border);border-radius:16px;padding:.4rem .8rem;font-size:.76rem;font-family:inherit;}

.expert-row{display:flex;align-items:center;gap:.6rem;padding:.6rem 0;border-top:1px solid var(--cf-border);}
.expert-row:first-child{border-top:none;}
.expert-avatar{width:34px;height:34px;border-radius:50%;background:var(--cf-lime-mid);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.75rem;color:var(--cf-text);flex-shrink:0;}
.expert-name{font-weight:600;font-size:.82rem;}
.expert-headline{font-size:.72rem;color:var(--cf-stone);}

.resource-row,.event-row,.news-row{display:flex;justify-content:space-between;align-items:flex-start;gap:.8rem;padding:.7rem 0;border-top:1px solid var(--cf-border);}
.resource-row:first-child,.event-row:first-child,.news-row:first-child{border-top:none;}
.event-date{font-size:.68rem;color:var(--cf-stone);white-space:nowrap;}
.news-source{font-size:.68rem;color:var(--cf-stone);}
.news-title a{font-weight:600;font-size:.82rem;}
.news-summary{font-size:.74rem;color:var(--cf-stone);margin:.15rem 0 0;}

/* Living Lab detail */
.living-lab-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.2rem;flex-wrap:wrap;}
.living-lab-header .living-lab-logo{height:56px;}
.living-lab-header .living-lab-badge{width:72px;height:72px;font-size:1.2rem;}
.service-row{padding:.7rem 0;border-top:1px solid var(--cf-border);}
.service-row:first-child{border-top:none;}
.service-title{font-weight:600;font-size:.84rem;}
.service-desc{font-size:.76rem;color:var(--cf-stone);margin:.15rem 0 0;}
.member-preview-note{font-size:.7rem;color:var(--cf-warn);background:#fbf1e2;padding:.5rem .7rem;border-radius:6px;margin-bottom:.7rem;}
.readonly-notice{font-size:.78rem;color:var(--cf-warn);background:#fbf1e2;padding:.6rem .9rem;border-radius:8px;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem;border:1px solid #f0dcb8;}

/* =========================================================================
   Learning Hub (learning.php, course.php, certificate.php) + Events
   (events.php, event.php)
   ========================================================================= */
.course-row{display:flex;align-items:center;gap:1rem;padding:.7rem 0;border-top:1px solid var(--cf-border);text-decoration:none;color:inherit;}
.course-row:first-child{border-top:none;}

.course-grid{display:grid;grid-template-columns:1fr;gap:1rem;}
@media (min-width:640px){.course-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1000px){.course-grid{grid-template-columns:repeat(3,1fr);}}

.course-card{display:block;border-radius:var(--radius);overflow:hidden;border:1px solid var(--cf-border);box-shadow:var(--shadow);background:var(--cf-white);text-decoration:none;color:inherit;}
.course-card:hover{box-shadow:0 4px 18px rgba(32,72,50,.14);}
.course-card-cover{height:110px;background:var(--cf-lime-pale) center/cover no-repeat;position:relative;}
.course-card-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.course-card-body{padding:.85rem .95rem 1rem;}
.course-card-title{font-family:'Playfair Display',serif;font-size:1.02rem;margin:.4rem 0 .3rem;}
.course-card-desc{font-size:.76rem;color:var(--cf-stone);margin:0;line-height:1.4;}
.course-card-foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.7rem;padding-top:.6rem;border-top:1px solid var(--cf-border);font-size:.78rem;font-weight:600;}

.course-header{display:flex;gap:1rem;align-items:center;margin-bottom:1.2rem;flex-wrap:wrap;}
.course-header-cover{width:88px;height:88px;border-radius:var(--radius);background:var(--cf-lime-pale) center/cover no-repeat;flex-shrink:0;position:relative;overflow:hidden;}
.course-header-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

.course-grid-2col{display:grid;grid-template-columns:1fr;gap:1.4rem;align-items:start;}
@media (min-width:860px){.course-grid-2col{grid-template-columns:1fr 300px;}}

.course-step-list{list-style:none;margin:0;padding:0;}
.course-step{display:flex;gap:.7rem;padding:.6rem 0;border-top:1px solid var(--cf-border);}
.course-step:first-child{border-top:none;}
.course-step-check{width:22px;height:22px;border-radius:50%;border:2px solid var(--cf-border);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:var(--cf-white);margin-top:.1rem;}
.course-step[data-complete-step],.course-step .course-step-check[role="button"]{cursor:pointer;}
.course-step.done .course-step-check{background:var(--cf-lime-mid);border-color:var(--cf-lime-mid);color:var(--cf-text);}
.course-step-title{font-weight:600;font-size:.84rem;}
.course-step-desc{font-size:.74rem;color:var(--cf-stone);margin-top:.1rem;}

.quiz-question{padding:.8rem 0;border-top:1px solid var(--cf-border);}
.quiz-question:first-child{border-top:none;}
.quiz-question-text{font-weight:600;font-size:.84rem;margin-bottom:.5rem;}
.quiz-option{display:flex;align-items:center;gap:.5rem;font-size:.8rem;padding:.3rem 0;cursor:pointer;}
.quiz-option input{margin:0;}

.certificate-sheet{border:1px solid var(--cf-border);border-radius:var(--radius);background:var(--cf-white);box-shadow:var(--shadow);padding:2.5rem 1.5rem;}
.certificate-inner{max-width:520px;margin:0 auto;text-align:center;}
.certificate-logo{height:36px;margin-bottom:1.2rem;}
.certificate-kicker{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--cf-muted);margin-bottom:.6rem;}
.certificate-name{font-family:'Playfair Display',serif;font-size:1.9rem;margin:0 0 .8rem;}
.certificate-body{font-size:.85rem;color:var(--cf-stone);margin:0 0 .4rem;}
.certificate-course-title{font-weight:700;font-size:1.05rem;margin-bottom:1.4rem;}
.certificate-date{font-size:.76rem;color:var(--cf-stone);}
@media print{.sidebar,.bottom-nav,.topbar,.back-link,.sprout-fab{display:none !important;}}

.event-filter-form{display:flex;gap:.6rem;flex-wrap:wrap;}
.event-filter-form input[type="text"]{flex:1;min-width:180px;border:1px solid var(--cf-border);border-radius:8px;padding:.5rem .7rem;font-size:.8rem;font-family:inherit;}
.event-filter-form select{border:1px solid var(--cf-border);border-radius:8px;padding:.5rem .7rem;font-size:.8rem;font-family:inherit;background:var(--cf-white);}

.event-card-list{display:flex;flex-direction:column;}
.event-card{display:flex;align-items:center;gap:.9rem;padding:.8rem 0;border-top:1px solid var(--cf-border);text-decoration:none;color:inherit;}
.event-card:first-child{border-top:none;}
.event-card-date{width:48px;text-align:center;background:var(--cf-lime-pale);border-radius:8px;padding:.4rem 0;flex-shrink:0;}
.event-card-day{font-family:'Playfair Display',serif;font-size:1.1rem;line-height:1;}
.event-card-month{font-size:.62rem;text-transform:uppercase;color:var(--cf-stone);}
.event-card-body{flex:1;min-width:0;}
.event-detail-row{display:flex;align-items:center;gap:.5rem;font-size:.82rem;padding:.5rem 0;border-top:1px solid var(--cf-border);}
.event-detail-row:first-child{border-top:none;}
.readonly-notice .cf-icon{flex-shrink:0;}

/* ---- Rich text editor (event description / speaker bio / reminder message) */
.rte-wrap{border:1px solid var(--cf-border);border-radius:6px;overflow:hidden;background:var(--cf-off-white);}
.rte-toolbar{display:flex;gap:.15rem;padding:.35rem;background:var(--cf-lime-pale);border-bottom:1px solid var(--cf-border);flex-wrap:wrap;}
.rte-btn{border:none;background:none;min-width:28px;min-height:28px;border-radius:5px;cursor:pointer;font-family:inherit;font-size:.78rem;color:var(--cf-text);display:flex;align-items:center;justify-content:center;padding:0 .3rem;}
.rte-btn:hover{background:var(--cf-lime-mid);}
.rte-btn.b{font-weight:700;}
.rte-btn.i{font-style:italic;}
.rte-btn.u{text-decoration:underline;}
.rte-editor{min-height:90px;padding:.7rem .8rem;font-size:.9rem;line-height:1.5;outline:none;background:var(--cf-white);}
.rte-editor.small{min-height:56px;}
.rte-editor:empty:before{content:attr(data-placeholder);color:var(--cf-stone);}
.rte-editor p{margin:0 0 .6rem;}
.rte-editor p:last-child{margin-bottom:0;}
.rte-editor ul,.rte-editor ol{margin:.2rem 0 .6rem 1.2rem;padding:0;}
.rte-editor a{color:var(--cf-info);}
/* Read-only rendering of the same sanitized HTML (event description,
   speaker bio) on event.php -- no toolbar/editing chrome, just sane
   paragraph/list spacing so View::rich() output doesn't run together. */
.rich-text-content p{margin:0 0 .6rem;}
.rich-text-content p:last-child{margin-bottom:0;}
.rich-text-content ul,.rich-text-content ol{margin:.2rem 0 .6rem 1.2rem;padding:0;}
.rich-text-content a{color:var(--cf-info);}

/* Check-in QR scanner: the video feed and its full-stage result overlay
   (success/already-checked-in/error) -- see checkin.php. */
.scan-stage{position:relative;border-radius:var(--radius);overflow:hidden;background:#000;}
.scan-stage video{width:100%;display:block;}
.scan-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;padding:1.4rem;text-align:center;color:#fff;}
.scan-overlay.success,.scan-overlay.already{background:rgba(32,72,50,.94);} /* var(--cf-text) */
.scan-overlay.error{background:rgba(185,64,64,.94);} /* var(--cf-danger) */
.scan-overlay-icon{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;font-size:1.6rem;line-height:1;margin-bottom:.2rem;}
.scan-overlay-message{font-size:1.1rem;font-weight:700;}
.scan-overlay-sub{font-size:.85rem;opacity:.85;}
.scan-overlay-btn{margin-top:.6rem;background:#fff;color:var(--cf-text);border:none;}
.scan-overlay-btn:hover{background:var(--cf-lime-pale);}

/* ---- Event form: section separation, tag input, speaker photo ---------- */
.form-section{border:1px solid var(--cf-border);border-radius:var(--radius);padding:.9rem 1rem;margin:.6rem 0 1rem;background:var(--cf-off-white);}
.form-section-title{display:flex;align-items:center;gap:.4rem;font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--cf-muted);margin-bottom:.7rem;}
.form-section .form-label:first-of-type{margin-top:0;}

.tag-input-wrap{position:relative;}
.tag-chips{display:flex;flex-wrap:wrap;gap:.35rem;border:1px solid var(--cf-border);border-radius:6px;padding:.5rem .6rem;background:var(--cf-off-white);min-height:var(--tap);}
.tag-chip{display:inline-flex;align-items:center;gap:.3rem;background:var(--cf-lime-mid);color:var(--cf-text);border-radius:14px;padding:.2rem .55rem .2rem .7rem;font-size:.76rem;font-weight:600;}
.tag-chip.new-tag{background:var(--cf-lime-pale);border:1px dashed var(--cf-muted);}
.tag-chip button{border:none;background:none;cursor:pointer;color:var(--cf-text);font-size:.85rem;line-height:1;padding:0;display:flex;}
.tag-input{border:none;background:none;flex:1;min-width:120px;font-size:.85rem;font-family:inherit;padding:.15rem;outline:none;}
.tag-suggestions{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--cf-white);border:1px solid var(--cf-border);border-radius:8px;box-shadow:0 8px 24px rgba(32,72,50,.15);z-index:20;max-height:220px;overflow-y:auto;display:none;}
.tag-suggestions.open{display:block;}
.tag-suggestion-item{padding:.55rem .75rem;font-size:.82rem;cursor:pointer;}
.tag-suggestion-item:hover,.tag-suggestion-item.active{background:var(--cf-lime-pale);}
.tag-suggestion-item.create-new{color:var(--cf-muted);font-weight:600;}

.speaker-photo-picker{display:flex;align-items:center;gap:.6rem;}
.speaker-photo-preview{width:52px;height:52px;border-radius:50%;object-fit:cover;background:var(--cf-lime-pale);flex-shrink:0;border:1px solid var(--cf-border);}
.speaker-photo-placeholder{width:52px;height:52px;border-radius:50%;background:var(--cf-lime-pale);border:1px dashed var(--cf-border);flex-shrink:0;}

.test-send-row{display:flex;gap:.5rem;align-items:center;margin-top:.5rem;flex-wrap:wrap;}
.test-send-row input{flex:1;min-width:200px;}
.test-send-status{font-size:.78rem;color:var(--cf-muted);}
.test-send-status.err{color:var(--cf-danger);}