/* Visual language per docs/design/community-qa-mockup-2026-08-31.jpeg:
   white cards on cream, 14-16px radii, soft shadows, rectangular deep green buttons,
   stacked wordmark, sage accents, palm watermarks. */
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--ground);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
}
h1,h2{font-family:var(--font-display);color:var(--green-900);line-height:1.25}
h1{font-size:2.1rem;margin:0 0 .5rem}
h2{font-size:1.35rem;margin:0 0 .4rem}
a{color:var(--teal-600)}
main{max-width:1120px;margin:0 auto;padding:0 1.25rem 4rem}

/* Cards: the one surface everything sits on */
.card-surface{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);
}

/* Header */
.site-header{
  max-width:1120px;margin:0 auto;padding:1.1rem 1.25rem;
  display:flex;align-items:center;justify-content:space-between;gap:1.25rem;flex-wrap:wrap;
  position:relative;
}
.brand{text-decoration:none;display:flex;flex-direction:column;line-height:1.05}
.brand-top{font-weight:700;letter-spacing:.28em;color:var(--green-700);font-size:.72rem}
.brand-main{font-family:var(--font-display);font-weight:600;color:var(--green-900);font-size:1.65rem;letter-spacing:.06em}
.brand-sub{font-weight:700;letter-spacing:.3em;color:var(--green-900);font-size:.68rem}
.brand-claim{display:none}
.site-nav{display:flex;align-items:center;gap:1.35rem;flex-wrap:wrap}
.site-nav a{color:var(--ink-900);text-decoration:none;font-weight:400;padding-bottom:.35rem;border-bottom:2px solid transparent}
.site-nav a:hover{color:var(--green-900)}
.site-nav a.active{color:var(--green-900);font-weight:700;border-bottom-color:var(--green-900)}
.site-nav a.btn{color:#fff;border-bottom:0;padding:.6rem 1.25rem}
.inline{display:inline}

/* Buttons: rectangular with soft corners, like the mockup */
.btn{
  display:inline-block;border:0;cursor:pointer;text-decoration:none;
  font-family:var(--font-body);font-weight:700;font-size:.98rem;
  padding:.62rem 1.25rem;border-radius:var(--r-md);
}
.btn-primary{background:var(--green-900);color:#fff}
.btn-secondary{background:var(--surface);color:var(--ink-900);border:1px solid var(--line-strong)}
.btn-accent{background:var(--terra-700);color:#fff}

/* Palm watermark */
.palm-deco{
  position:absolute;pointer-events:none;opacity:.5;
}
.palm-deco.header-left{left:-30px;top:-10px;width:110px;color:var(--sage-500)}

/* Hero */
.hero{position:relative;border-radius:var(--r-lg);overflow:hidden;margin-top:.5rem;box-shadow:var(--shadow-1)}
.hero-img{display:block;width:100%;height:420px;object-fit:cover}
.hero-text{
  position:absolute;inset:auto 0 0 0;padding:2rem 1.6rem 1.75rem;
  background:linear-gradient(transparent,rgba(31,45,38,.82));
}
.hero-text h1,.hero-text p{color:#fff;max-width:34rem;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.hero-text p{margin:.25rem 0 1rem}
.hero-actions{display:flex;gap:.75rem;flex-wrap:wrap}

/* Cards row (home) */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.25rem;margin-top:2rem}
.card{
  display:block;text-decoration:none;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-1);padding-bottom:1.2rem;
}
.card:hover{border-color:var(--sage-500)}
.card img{width:100%;height:170px;object-fit:cover;display:block;margin-bottom:.4rem}
.card h2,.card p{padding:0 1.2rem}
.card p{color:var(--ink-900);margin:.2rem 0 0}

/* Chips and badges */
.chip{
  display:inline-block;background:var(--sand-100);color:var(--ink-900);
  border-radius:var(--r-sm);padding:.14rem .55rem;font-size:.74rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
}
.badge{
  display:inline-block;background:var(--sand-100);color:var(--ink-900);
  border-radius:var(--r-sm);padding:.1rem .5rem;font-size:.8rem;font-weight:400;
}

/* Forms */
.form-page{max-width:31rem;margin:2.5rem auto 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1);padding:1.6rem 1.6rem 1.8rem}
.form-page form{display:flex;flex-direction:column;gap:.7rem;margin-top:1rem}
label{font-weight:700}
input[type=email],input[type=search]{
  padding:.7rem .9rem;border-radius:var(--r-md);border:1px solid var(--line-strong);
  font:inherit;background:var(--surface);color:var(--ink-900);
}
.consent-box{background:var(--cream-50);border:1px solid var(--line);border-radius:var(--r-md);padding:1rem 1.1rem;margin:.4rem 0}
.consent-text{margin:0 0 .7rem;font-size:.95rem}
.consent-label{display:flex;gap:.6rem;align-items:flex-start;font-weight:400}
.form-hint{margin-top:1.2rem}
.form-error{background:var(--terra-700);color:#fff;padding:.7rem 1rem;border-radius:var(--r-md);font-weight:700}
.dev-link{background:var(--sand-100);border-radius:var(--r-sm);padding:.6rem .8rem;overflow-wrap:anywhere;font-size:.9rem}

/* Account */
.plan-badge{text-transform:capitalize}

/* Map page */
.map-page{position:relative}
#map{height:72vh;min-height:420px;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-1)}
.desa-panel{
  position:absolute;top:4.5rem;right:.75rem;width:300px;max-width:80vw;
  max-height:calc(100% - 5.25rem);overflow-y:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1rem 1.1rem;
  box-shadow:var(--shadow-3);
}
.desa-panel h2{margin:0 0 .5rem}
.desa-panel dl{display:grid;grid-template-columns:auto 1fr;gap:.25rem .8rem;margin:0;font-size:.92rem}
.desa-panel dl[hidden]{display:none}
.desa-panel dt{font-weight:700}
.desa-panel dd{margin:0;overflow-wrap:anywhere}
.panel-close{position:absolute;top:.4rem;right:.6rem;border:0;background:none;font-size:1.3rem;cursor:pointer;color:var(--ink-900)}
.panel-hint{font-size:.85rem;color:var(--green-700);margin:.8rem 0 0}
.panel-places{list-style:none;margin:.6rem 0 0;padding:0;font-size:.9rem;columns:2}
.panel-locked{background:var(--sand-100);border-radius:var(--r-sm);padding:.5rem .7rem;font-size:.88rem;margin:.6rem 0 0}

/* Guides */
.guide,.category,.search-page{max-width:48rem;margin:1.5rem auto 0}
.guide{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1);padding:1.8rem 2rem 2rem;position:relative}
.crumb{margin:0 0 .5rem;font-size:.88rem;color:var(--green-700)}
.crumb a{color:var(--green-700);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.verified{color:var(--green-700);font-size:.88rem}
.guide-body h2{margin-top:1.6rem}
.guide-body table{border-collapse:collapse;width:100%;font-size:.92rem;display:block;overflow-x:auto}
.guide-body th,.guide-body td{border:1px solid var(--line);padding:.45rem .6rem;text-align:left}
.guide-body th{background:var(--cream-50)}
.sources{margin-top:2rem;font-size:.9rem}
.sources a{overflow-wrap:anywhere}
.guide-list{display:grid;gap:1rem;margin-top:1.4rem}
.guide-card{
  display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);padding:1.1rem 1.3rem;
  text-decoration:none;color:var(--ink-900);
}
.guide-card:hover{border-color:var(--sage-500)}
.guide-card h2{margin:0 0 .3rem;font-size:1.15rem}
.guide-card p{margin:0 0 .4rem}

/* Search */
.search-form{display:flex;gap:.6rem;margin:1rem 0 1.5rem}
.search-form input{flex:1}
.search-hits{list-style:none;padding:0;display:grid;gap:1rem}
.search-hits li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1rem 1.2rem;box-shadow:var(--shadow-1)}
.search-hits a{font-weight:700;font-size:1.05rem}
.search-hits p{margin:.2rem 0 0}
.search-hits mark{background:var(--sand-100);color:var(--ink-900)}
.nav-search{text-decoration:none}

/* Footer */
.site-footer{
  max-width:1120px;margin:0 auto;padding:1.25rem;
  display:flex;justify-content:space-between;gap:1rem;
  color:var(--green-700);font-size:.9rem;
}

/* Mobile: checked at 390px */
@media (max-width: 640px){
  h1{font-size:1.7rem}
  .site-header{padding:1rem}
  .site-nav{gap:.8rem;font-size:.95rem}
  .hero-img{height:220px}
  .hero-text{position:static;background:var(--green-900);padding:1.25rem 1rem 1.35rem}
  .hero-text h1,.hero-text p{text-shadow:none}
  .hero-actions .btn{padding:.6rem 1rem}
  main{padding:0 .9rem 3rem}
  .guide{padding:1.2rem 1.1rem 1.4rem}
  #map{height:60vh}
  .desa-panel{top:auto;bottom:.75rem;left:.75rem;right:.75rem;width:auto}
}

/* Map search */
.map-search{position:absolute;top:4.5rem;left:.75rem;z-index:5;width:300px;max-width:76vw}
.map-search input{width:100%;padding:.6rem .9rem;border-radius:var(--r-md);border:1px solid var(--line-strong);font:inherit;box-shadow:var(--shadow-2);background:var(--surface)}
.map-search ul{list-style:none;margin:.3rem 0 0;padding:.3rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-3)}
.map-search li{padding:.45rem .6rem;border-radius:var(--r-sm);cursor:pointer}
.map-search li:hover{background:var(--cream-50)}
.map-search li small{color:var(--green-700)}
@media (max-width:640px){.map-search{top:3.6rem}}

/* App shell: mockup three column layout */
.site-header{background:var(--surface);border-bottom:1px solid var(--line);max-width:none;padding-left:2rem;padding-right:2rem}
.site-header .palm-deco.header-left{opacity:.35}
.site-actions{display:flex;align-items:center;gap:1rem}
.icon-link{display:inline-flex;color:var(--ink-900)}
.icon-link svg{width:21px;height:21px}
.nav-plain{color:var(--ink-900);text-decoration:none;font-weight:400}
.avatar-link{text-decoration:none}
.avatar-circle{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:var(--sand-100);color:var(--green-900);font-size:1.05rem;
}

.app-grid{
  display:grid;grid-template-columns:240px minmax(0,1fr) 300px;gap:1.6rem;
  max-width:1360px;margin:0 auto;padding:1.4rem 2rem 4rem;align-items:start;
}
/* The global main{} rule (plain pages) sets margin:0 auto, and auto margins stop a grid
   item from stretching, which collapsed sparse pages like /de/suche to content width. */
.app-main{min-width:0;width:100%;max-width:none;margin:0;padding:0}

/* Sidebar */
.sidebar-block{padding-top:.4rem}
.sidebar-label{
  font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--green-900);margin:0 0 .7rem;
}
.sidebar-label-sub{margin-top:1.4rem;color:var(--green-700)}
.sidebar-nav{display:flex;flex-direction:column;gap:.15rem}
.sidebar-item{
  display:flex;align-items:center;gap:.6rem;
  padding:.5rem .7rem;border-radius:var(--r-md);
  color:var(--ink-900);text-decoration:none;font-size:.95rem;line-height:1.3;
}
.sidebar-item svg{width:18px;height:18px;flex:none;color:var(--green-700)}
.sidebar-item:hover{background:var(--surface)}
.sidebar-item.active{background:#E5EDE2;color:var(--green-900);font-weight:700}
.sidebar-muted{list-style:none;margin:0;padding:0 .7rem;color:var(--green-700);font-size:.88rem}
.sidebar-muted li{padding:.22rem 0}
.sidebar-promo{
  margin-top:1.6rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-1);
}
.sidebar-promo img{width:100%;height:120px;object-fit:cover;display:block}
.sidebar-promo p{padding:.9rem 1rem 0;margin:0 0 .8rem;font-size:.92rem}
.sidebar-promo .btn{margin:0 1rem 1rem}

/* Content card */
.content-card{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);padding:1.8rem 2rem 2rem;overflow:hidden;
}
.chips-row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-bottom:.7rem}
.palm-deco.card-corner{top:-8px;right:-8px;width:120px;color:var(--sage-500);opacity:.35}
.area-title{margin-top:.2rem}

/* Right rail */
.rail-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);padding:1.1rem 1.2rem;margin-bottom:1.2rem;
}
.rail-card h2{font-family:var(--font-body);font-size:1.02rem;font-weight:700;color:var(--ink-900);margin:0 0 .7rem}
.rail-list{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.rail-list a{color:var(--ink-900);text-decoration:none;font-weight:700;font-size:.94rem}
.rail-list a:hover{color:var(--green-900)}
.rail-meta{display:block;color:var(--green-700);font-size:.82rem;margin-top:.15rem}
.rail-promo{padding:0;overflow:hidden}
.rail-promo img{width:100%;height:130px;object-fit:cover;display:block}
.rail-promo-body{padding:1rem 1.2rem 1.2rem}
.rail-promo-body p{margin:.2rem 0 .9rem;font-size:.92rem}

/* Guide inside the shell */
.app-main .guide{max-width:none;margin:0}
.app-main h1{font-size:1.9rem}
.app-main .search-form{margin-top:.6rem}

@media (max-width: 1100px){
  .app-grid{grid-template-columns:220px minmax(0,1fr)}
  .app-rail{grid-column:1 / -1;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem}
}
@media (max-width: 760px){
  .app-grid{grid-template-columns:1fr;padding:1rem .9rem 3rem}
  .app-sidebar{order:2}
  .app-main{order:1}
  .app-rail{order:3;grid-template-columns:1fr}
  .site-header{padding-left:1rem;padding-right:1rem}
}

/* Pricing (phase 4) */
.pricing{max-width:1120px;margin:1.5rem auto 0}
.pricing-head{text-align:center;max-width:44rem;margin:0 auto 2rem}
.pricing-head .lead{color:var(--ink-900);font-size:1.05rem}
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.25rem;align-items:start}
.plan-card{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);padding:1.5rem 1.5rem 1.7rem;
}
.plan-card-featured{border-color:var(--sage-500);box-shadow:0 6px 26px rgba(38,51,46,.12)}
.plan-flag{
  position:absolute;top:-.7rem;left:1.4rem;background:var(--green-900);color:#fff;
  border-radius:var(--r-sm);padding:.15rem .6rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.plan-price{margin:.2rem 0 .1rem;font-family:var(--font-display);color:var(--green-900)}
.plan-price strong{font-size:2rem;font-weight:600}
.plan-price span{font-family:var(--font-body);font-size:.9rem;color:var(--green-700)}
.plan-line{margin:0 0 1rem;font-size:.88rem;color:var(--green-700)}
.plan-features{list-style:none;margin:0 0 1.4rem;padding:0;display:grid;gap:.5rem;font-size:.95rem}
.plan-features li{padding-left:1.5rem;position:relative}
.plan-features li::before{
  content:"";position:absolute;left:0;top:.5em;width:.7rem;height:.4rem;
  border-left:2px solid var(--green-700);border-bottom:2px solid var(--green-700);
  transform:rotate(-45deg);
}
.plan-current{display:inline-block;background:var(--sand-100);border-radius:var(--r-md);padding:.6rem 1rem;font-weight:700;font-size:.95rem}
.plan-alt{display:block;margin-top:.7rem;font-size:.9rem;color:var(--teal-600)}
.pricing-note{max-width:44rem;margin:1.6rem auto 0;text-align:center;font-size:.9rem;color:var(--green-700)}
.dev-billing{margin-top:1.6rem;background:var(--sand-100);border-radius:var(--r-md);padding:1rem 1.1rem;display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.dev-billing p{margin:0;flex:1 1 100%;font-size:.88rem}
.plan-soon{display:inline-block;border:1px dashed #D8CFBD;border-radius:var(--r-md);padding:.55rem 1rem;font-size:.92rem;color:var(--green-700)}

/* Community (phase 5), visual language from docs/design/community-qa-mockup-2026-08-31.jpeg */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.list-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}
.list-head .lead{margin:.35rem 0 0;color:var(--ink-900)}
.section-head{font-family:var(--font-display);color:var(--green-900);margin:1.8rem 0 .9rem}

.avatar-lg{width:46px;height:46px;font-size:1.15rem}
.avatar-circle{font-weight:700;flex:none}
.author-name{font-weight:700;color:var(--green-900)}
.thread-head{display:flex;gap:.8rem;align-items:flex-start;margin-bottom:.9rem}
.thread-head .badge{margin-left:.4rem}
.thread-meta{color:var(--green-700);font-size:.85rem;margin:.15rem 0 0}
.thread-head .thread-meta{display:inline;margin-left:.5rem}

.chip-quiet{background:#EDE7DA;font-weight:400;text-transform:none;letter-spacing:0}
.chip-private{background:var(--terra-500);color:#fff}
.chip-open{background:#FBE7DF;color:var(--terra-700)}
.chip-accepted{background:#E5EDE2;color:var(--green-900);margin-left:auto}

.question-card h1{margin-top:.4rem}
.question-body{white-space:pre-wrap}
.thread-actions{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-top:1.1rem;padding-top:.9rem;border-top:1px solid #EDE7DA}
.action-count{font-weight:700;color:var(--green-900);font-size:.92rem}
.escalated-note{font-size:.88rem;color:var(--terra-700)}

.answers{margin-top:1.4rem}
.answers-head{font-family:var(--font-body);font-size:1.05rem;font-weight:700;color:var(--ink-900);margin:0 0 .9rem}
.answer-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);padding:1.1rem 1.3rem 1rem;margin-bottom:.9rem;
}
.answer-card p{margin:0;white-space:pre-wrap}
.answer-ai{border-left:4px solid var(--sage-500)}
.answer-accepted{border-color:var(--sage-500);background:#FCFBF7}
.answer-deleted{opacity:.55;border-style:dashed}
.admin-edit{margin-top:.6rem}
.admin-edit summary{cursor:pointer;font-size:.85rem}
.answer-sources{margin-top:.6rem;font-size:.85rem;color:var(--green-700);overflow-wrap:anywhere}
.answer-actions{display:flex;gap:.6rem;margin-top:.8rem;flex-wrap:wrap}
.btn-quiet{
  background:var(--surface);border:1px solid #E4DCCC;border-radius:9px;padding:.34rem .8rem;
  font:inherit;font-size:.86rem;color:var(--ink-900);cursor:pointer;
}
.btn-quiet:hover{border-color:var(--sage-500)}
.answer-form{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1);
  padding:.9rem 1rem;display:flex;gap:.7rem;align-items:flex-end;
}
.answer-form textarea{flex:1}
.answer-login-hint{font-size:.92rem}

textarea,select{
  padding:.7rem .9rem;border-radius:var(--r-md);border:1px solid var(--line-strong);
  font:inherit;background:var(--surface);color:var(--ink-900);width:100%;resize:vertical;
}
.stack-form{display:flex;flex-direction:column;gap:.4rem;margin-top:1.2rem}
.stack-form label{margin-top:.7rem}
.stack-form .btn{align-self:flex-start;margin-top:1.2rem}
.field-hint{margin:.1rem 0 0;font-size:.85rem;color:var(--green-700)}

.similar-box{background:var(--sand-100);border-radius:var(--r-md);padding:.9rem 1rem;margin-top:.6rem}
.similar-head{margin:0 0 .5rem;font-weight:700;font-size:.9rem}
.similar-box ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.similar-box a{font-weight:700;font-size:.94rem}
.similar-box p{margin:.1rem 0 0;font-size:.86rem;color:var(--ink-900)}

.filter-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.2rem}
.filter-pill{
  background:var(--surface);border:1px solid #E4DCCC;border-radius:var(--r-pill);padding:.35rem .95rem;
  text-decoration:none;color:var(--ink-900);font-size:.9rem;
}
.filter-pill.active{background:var(--green-900);color:#fff;border-color:var(--green-900)}

.thread-list{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.thread-item{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);padding:1.1rem 1.3rem;
}
.thread-title{display:block;margin:.4rem 0 .25rem;font-family:var(--font-display);font-size:1.18rem;color:var(--green-900);text-decoration:none}
.thread-title:hover{text-decoration:underline}
.thread-excerpt{margin:0;color:var(--ink-900);font-size:.94rem}

.community-hero .lead{font-size:1.02rem;max-width:38rem}
.stat-row{display:flex;gap:2rem;flex-wrap:wrap;margin:1.3rem 0 1.2rem}
.stat strong{display:block;font-family:var(--font-display);font-size:1.7rem;color:var(--green-900)}
.stat span{font-size:.85rem;color:var(--green-700)}
.empty-state{text-align:center}

.event-list{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.event-item{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1);
  padding:1.1rem 1.3rem;display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:1.2rem;align-items:center;
}
.event-when strong{display:block;color:var(--green-900);font-weight:700;font-size:.95rem}
.event-when span{font-size:.85rem;color:var(--green-700)}
.event-main h2{font-size:1.1rem;margin:0 0 .2rem}
.event-main p{margin:.2rem 0 0;font-size:.93rem}

.member-list{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.member-item{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-1);
  padding:.85rem 1.1rem;display:flex;gap:.9rem;align-items:center;
}
.member-item div{flex:1;min-width:0}
.member-count{font-size:.85rem;color:var(--green-700);white-space:nowrap}
.rail-steps{margin:0;padding-left:1.1rem;font-size:.9rem;display:grid;gap:.5rem;color:var(--ink-900)}
.rail-more{display:inline-block;margin-top:.8rem;font-size:.9rem}
.rail-asker{margin:0 0 .3rem}

@media (max-width:760px){
  .event-item{grid-template-columns:1fr;gap:.6rem}
  .answer-form{flex-direction:column;align-items:stretch}
  .answer-form .btn{align-self:flex-start}
  .list-head{flex-direction:column}
}
.promoted{margin-top:2rem;padding-top:1.2rem;border-top:1px solid #EDE7DA}
.promoted-answer{
  margin:0 0 .9rem;background:var(--cream-50);border-left:4px solid var(--sage-500);
  border-radius:0 12px 12px 0;padding:.9rem 1.1rem;
}
.promoted-answer p{margin:0;white-space:pre-wrap}
.promoted-answer footer{margin-top:.5rem;font-size:.85rem;color:var(--green-700)}
.guide-questions{margin-top:1.6rem}
.panel-line{margin:.7rem 0 0;font-size:.9rem;color:var(--ink-900)}
.panel-line span{font-weight:700;color:var(--green-900)}
.panel-form{display:grid;gap:.4rem;margin-top:.7rem;padding-top:.7rem;border-top:1px solid #EDE7DA}
.panel-form label{font-size:.85rem}
.panel-form select{padding:.5rem .7rem;border-radius:9px;border:1px solid var(--line-strong);font:inherit;background:#fff;color:var(--ink-900)}

/* Comparison and registers (phase 6) */
.compare-page,.desa-page,.schools-page{max-width:1120px;margin:1.5rem auto 0}
.compare-page .lead,.schools-page .lead{max-width:44rem}
.compare-form{display:flex;gap:.6rem;flex-wrap:wrap;margin:1.2rem 0 .3rem}
.compare-form input{flex:1 1 200px;padding:.7rem .9rem;border-radius:var(--r-md);border:1px solid var(--line-strong);font:inherit;background:var(--surface)}
.compare-scroll{overflow-x:auto;margin-top:1.4rem;border-radius:var(--r-lg);box-shadow:var(--shadow-1)}
.compare-table{border-collapse:collapse;width:100%;background:var(--surface);font-size:.93rem;min-width:640px}
.compare-table th,.compare-table td{border-bottom:1px solid var(--line);padding:.8rem .9rem;text-align:left;vertical-align:top}
.compare-table thead th{background:var(--cream-50);font-family:var(--font-display);color:var(--green-900);font-size:1.02rem}
.compare-table thead th a{color:var(--green-900);text-decoration:none}
.compare-table tbody th{font-weight:700;color:var(--ink-900);width:16rem}
.th-code{display:block;font-family:var(--font-body);font-size:.75rem;font-weight:400;color:var(--green-700)}
.cell-value{display:block}
.cell-source{display:block;font-size:.76rem;color:var(--green-700);margin-top:.15rem}
.cell-missing{color:var(--green-700)}
.cell-locked{
  display:inline-block;background:var(--sand-100);border-radius:var(--r-sm);padding:.2rem .6rem;
  font-size:.82rem;font-weight:700;color:var(--green-900);text-decoration:none;
}
.cell-locked:hover{background:var(--sage-500);color:#fff}
.upsell-card{
  margin-top:1.2rem;background:var(--sand-100);border-radius:var(--r-lg);padding:1.1rem 1.3rem;
  display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.upsell-card p{margin:0;max-width:44rem}
.schools-table tbody th{width:auto}
.profile-list{margin:1.4rem 0 0;display:grid;gap:0}
.profile-row{display:grid;grid-template-columns:16rem minmax(0,1fr);gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--line)}
.profile-row dt{font-weight:700}
.profile-row dd{margin:0}
@media (max-width:640px){
  .profile-row{grid-template-columns:1fr;gap:.2rem}
  .upsell-card{flex-direction:column;align-items:flex-start}
}

/* Villa report (phase 8) */
.villa-page{max-width:900px;margin:1.5rem auto 0}
.quota{margin:0 0 1rem;font-size:.95rem;color:var(--green-700)}
.villa-report{margin-top:1.4rem}
.villa-caveat,.villa-legal{margin-top:1.8rem;padding-top:1.1rem;border-top:1px solid #EDE7DA}
.villa-caveat h3,.villa-legal h3{font-family:var(--font-body);font-size:1rem;font-weight:700;color:var(--ink-900);margin:0 0 .5rem}
.villa-caveat p,.villa-legal p{margin:0 0 .6rem;font-size:.94rem}
.sample-note{background:var(--cream-50);border-radius:var(--r-md);padding:.8rem 1rem;font-size:.9rem;color:var(--green-700)}
.attribution{margin-top:1.6rem;font-size:.85rem;color:var(--green-700)}

/* Compliance calendar */
.deadline-page{max-width:900px;margin:1.5rem auto 0}
.deadline-list{list-style:none;margin:1.4rem 0;padding:0;display:grid;gap:.8rem}
.deadline-item{
  background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--sage-500);border-radius:14px;
  box-shadow:var(--shadow-1);padding:1rem 1.2rem;
  display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:1.1rem;align-items:center;
}
.deadline-soon{border-left-color:var(--terra-700)}
.deadline-past{border-left-color:var(--terra-700);background:#FDF6F3}
.deadline-when strong{display:block;color:var(--green-900);font-weight:700}
.deadline-when span{font-size:.85rem;color:var(--green-700)}
.deadline-soon .deadline-when span,.deadline-past .deadline-when span{color:var(--terra-700);font-weight:700}
.deadline-main h2{font-size:1.05rem;margin:.3rem 0 .2rem}
.deadline-main p{margin:.15rem 0 0;font-size:.92rem}
@media (max-width:640px){.deadline-item{grid-template-columns:1fr;gap:.5rem}}

/* Home: the brandbook moodboard's category row, badge overlapping the image */
.cards{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{position:relative;padding-bottom:1.3rem}
.card img{height:150px;margin-bottom:0}
.card-badge{
  position:absolute;top:150px;left:1.2rem;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;
  background:var(--sand-100);border:3px solid #fff;
  display:flex;align-items:center;justify-content:center;color:var(--green-900);
  box-shadow:0 2px 8px rgba(38,51,46,.12);
}
.card-badge svg{width:21px;height:21px}
.card h2{margin-top:1.7rem;font-size:1.18rem}

/* The promise block: cream, calm, no card chrome */
.promise{margin-top:3rem;padding:2rem 0 .5rem;border-top:1px solid #EDE7DA}
.promise .section-head{text-align:center;font-size:1.7rem;margin-bottom:1.6rem}
.promise-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.6rem}
.promise-item h3{font-family:var(--font-display);color:var(--green-900);font-size:1.12rem;margin:0 0 .4rem}
.promise-item p{margin:0;font-size:.96rem}
.promise .hero-actions{justify-content:center;margin-top:2rem}

/* Mobile polish, checked at 390px */
@media (max-width: 640px){
  .site-nav{gap:.7rem;font-size:.9rem;row-gap:.3rem}
  .site-header{padding:.8rem 1rem;gap:.7rem}
  .compare-table{min-width:520px;font-size:.88rem}
  .compare-table tbody th{width:9.5rem}
  .compare-table th,.compare-table td{padding:.6rem .7rem}
  .cell-source{font-size:.72rem}
  .compare-form input{flex:1 1 100%}
  .compare-form .btn{width:100%}
  .stat-row{gap:1.2rem}
  .thread-head{gap:.6rem}
  .content-card{padding:1.2rem 1.1rem 1.4rem}
  .villa-page,.deadline-page,.compare-page,.schools-page,.pricing{margin-top:1rem}
}
.panel-detail{display:block;text-align:center;margin-top:.8rem}

/* Villa report: distribution scale, charts and print. No chart library and no script, because a
   report whose figures only appear after JavaScript runs is a report that prints empty. */
.report-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.report-head h2{margin:0}
.report-sub{margin:.2rem 0 0;font-size:.9rem;color:var(--green-700)}
.report-section{margin-top:1.9rem;padding-top:1.2rem;border-top:1px solid #EDE7DA}
.report-section h3{font-family:var(--font-display);font-size:1.25rem;color:var(--green-900);margin:0 0 .5rem}
.section-lead{margin:0 0 1rem;font-size:.94rem;color:var(--ink-900)}
.field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem}
.field-hint{margin:.25rem 0 .9rem;font-size:.82rem;color:var(--green-700)}


/* The claim against the observed spread. The band is p25 to p90, the line is the median, the
   marker is what the seller said. */

.bar-chart{display:flex;align-items:flex-end;gap:.35rem;height:130px;margin:1rem 0 .4rem}
.bar-slot{flex:1 1 0;display:flex;flex-direction:column;justify-content:flex-end;height:100%;min-width:0}
.bar-value{font-size:.68rem;color:var(--green-900);text-align:center;margin-bottom:.2rem}
.bar{background:var(--sage-500);border-radius:4px 4px 0 0;min-height:2px}
.bar-best{background:var(--green-900)}
.bar-worst{background:var(--terra-500)}
.bar-label{font-size:.68rem;color:var(--green-700);text-align:center;margin-top:.25rem;overflow:hidden}
.spark{width:100%;height:70px;color:var(--green-900);display:block;margin:.6rem 0}

.trend-up{color:var(--green-900);font-weight:700}
.trend-down{color:var(--terra-700);font-weight:700}
.trend-flat{color:var(--green-700)}
/* Supply is the one row where a rise is the warning, so the colours swap rather than the label. */
.trend-inverted.trend-up{color:var(--terra-700)}
.trend-inverted.trend-down{color:var(--green-900)}

@media (max-width: 640px){
  .field-row{grid-template-columns:1fr}
  .bar-chart{height:100px}
  .bar-label{font-size:.6rem}
}

/* Print. The browser's own "save as PDF" is the export: no headless Chrome in the image, no
   render job, and it works offline and on a phone. Everything interactive is dropped, the tables
   stop scrolling sideways, and sections are kept off page breaks. */
@media print{
  .no-print,.site-header,.site-footer,nav,form,.quota,.panel-detail{display:none !important}
  html,body{background:var(--surface);color:#000;font-size:10.5pt}
  main,.villa-page{margin:0;max-width:none}
  .content-card,.villa-report{box-shadow:none;border:0;padding:0;margin:0}
  .report-section{border-top:1px solid #999;margin-top:14pt;padding-top:8pt}
  .report-section h3{color:#000;break-after:avoid;page-break-after:avoid}
  .section-lead{break-after:avoid;page-break-after:avoid}
  /* Never split the thing itself: a half chart or a row torn across pages is unreadable. A long
     table or list may flow, which is what stops a section from pushing a whole blank page. */
  .bar-chart,.spark,.profile-row,tr,.summary-tile{break-inside:avoid;page-break-inside:avoid}
  thead{display:table-header-group}
  /* Figures keep their unit on the same line. */
  .compare-table td,.cell-value{white-space:nowrap}
  .compare-scroll{overflow:visible}
  .compare-table{min-width:0;font-size:9pt}
  .compare-table thead th{background:#eee;color:#000}
  a{color:#000;text-decoration:none}
  /* The attribution is a term of use, so it survives every print rule above it. */
  .attribution{display:block !important;margin-top:14pt;font-size:9pt;color:#000}
  .bar{background:#666}
  .bar-best{background:#000}
  .bar-worst{background:#aaa}
  @page{margin:14mm}
}

/* Two readings of one comparable set, plus the per-market driver list. Both exist because the
   data genuinely does not settle the question, so the design must not make one look like the
   answer: the two cards carry equal weight and differ only in tone. */
.two-readings{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin:.5rem 0 .8rem}
.reading{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:1rem 1.1rem}
.reading.quiet{background:var(--cream-50)}
.eyebrow-sm{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green-700);margin:0}
.reading-count{font-family:var(--font-display);font-size:1.5rem;color:var(--green-900);margin:.3rem 0 .6rem}
.reading-figures{margin:0;display:grid;gap:.4rem}
.reading-figures > div{display:flex;justify-content:space-between;gap:.8rem;font-size:.92rem}
.reading-figures dt{color:var(--green-700)}
.reading-figures dd{margin:0;font-weight:700}
.driver-clear{font-weight:700;color:var(--green-900)}
.driver-weak{color:var(--ink-900)}
.driver-none{color:var(--green-700)}
@media print{.reading{border:1px solid #999;background:var(--surface)}}

/* The report's opening figures. Three tiles, one row on a desktop, stacked on a phone. */
.summary-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem;margin:.9rem 0 .8rem}
.summary-tile{background:var(--sand-100);border-radius:14px;padding:1rem 1.2rem}
.tile-label{margin:0;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;color:var(--green-700)}
.tile-value{margin:.25rem 0 .35rem;font-family:var(--font-display);font-size:1.8rem;line-height:1.1;color:var(--green-900)}
.tile-note{margin:0;font-size:.82rem;color:var(--green-700);line-height:1.45}
@media print{.summary-tile{background:#f4f4f4;border:1px solid #999}}


/* ---------------------------------------------------------------------------
   The account drawer. Slides over whatever page the member was reading.
   Empty in the DOM until opened, so it costs nothing on a page nobody opens it on.
   --------------------------------------------------------------------------- */
.drawer{position:fixed;inset:0;z-index:60}
.drawer-scrim{
  position:absolute;inset:0;background:rgba(31,77,58,.34);
  backdrop-filter:blur(2px);opacity:0;transition:opacity .26s ease;
}
.drawer-sheet{
  position:absolute;top:0;right:0;bottom:0;width:min(29rem,100%);
  background:var(--cream-50);display:flex;flex-direction:column;
  box-shadow:-18px 0 48px rgba(38,51,46,.20);
  transform:translateX(100%);transition:transform .26s cubic-bezier(.22,.7,.3,1);
}
.drawer.is-open .drawer-scrim{opacity:1}
.drawer.is-open .drawer-sheet{transform:translateX(0)}
body.drawer-locked{overflow:hidden}

.drawer-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem 1.25rem;border-bottom:1px solid var(--line);background:var(--surface);
}
.drawer-head h2{margin:0;font-size:1.25rem}
.drawer-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:1.25rem}
.drawer-loading{color:var(--green-700);margin:0}
.icon-btn{
  background:transparent;border:0;cursor:pointer;color:var(--green-900);
  padding:.4rem;border-radius:9px;line-height:0;flex:none;
}
.icon-btn svg{width:20px;height:20px}
.icon-btn:hover{background:var(--sand-100)}

/* The panel content. Rendered identically inside the drawer and on /konto. */
.acct-id{display:flex;align-items:center;gap:.85rem;margin-bottom:1.1rem}
.acct-avatar{
  width:46px;height:46px;flex:none;border-radius:50%;
  background:var(--green-900);color:var(--cream-50);
  display:grid;place-items:center;
}
.acct-avatar svg{width:24px;height:24px}
.acct-id-text{min-width:0}
.acct-email{margin:0;font-weight:700;overflow-wrap:anywhere}
.acct-plan{margin:.15rem 0 0;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.acct-plan-note{font-size:.82rem;color:var(--green-700)}
.plan-badge{
  text-transform:capitalize;font-size:.76rem;font-weight:700;letter-spacing:.04em;
  padding:.16rem .6rem;border-radius:var(--r-pill);background:#EDE7DA;color:var(--green-900);
}
.plan-badge.plan-premium{background:var(--green-900);color:var(--cream-50)}
.plan-badge.plan-basic{background:var(--sage-500);color:#fff}

.acct-nav{display:flex;gap:.4rem;margin-bottom:1.25rem}
.acct-nav a{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:.3rem;
  padding:.7rem .4rem;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);
  color:var(--green-900);text-decoration:none;font-size:.78rem;text-align:center;position:relative;
}
.acct-nav a:hover{border-color:var(--sage-500)}
.acct-nav svg{width:20px;height:20px}
.acct-count{
  position:absolute;top:.35rem;right:.5rem;min-width:1.1rem;height:1.1rem;
  border-radius:var(--r-pill);background:var(--terra-700);color:#fff;
  font-size:.68rem;font-weight:700;display:grid;place-items:center;padding:0 .25rem;
}

.acct-section{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.1rem 1.15rem 1.3rem;margin-bottom:1rem;scroll-margin-top:1rem;
}
.acct-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem}
.acct-section-head h2{margin:0;font-size:1.12rem}
.acct-section-meta{font-size:.82rem;color:var(--green-700);font-weight:700}
.acct-lead{margin:.35rem 0 .9rem;font-size:.9rem;color:var(--ink-900)}
.acct-empty{margin:.2rem 0 .9rem;font-size:.9rem;color:var(--green-700)}
.acct-error{margin:0 0 1rem}
.acct-fineprint{margin:.9rem 0 0;font-size:.78rem;color:var(--green-700)}
.acct-locked{background:var(--sand-100);border-radius:var(--r-md);padding:1rem 1.1rem}
.acct-locked p{margin:0 0 .8rem;font-size:.9rem}

.reminder-list{list-style:none;margin:0 0 .9rem;padding:0;display:grid;gap:.55rem}
.reminder{
  display:flex;gap:.8rem;align-items:flex-start;
  border:1px solid var(--line);border-left:4px solid var(--sage-500);
  border-radius:var(--r-md);padding:.7rem .8rem;background:var(--cream-50);
}
.reminder-soon{border-left-color:var(--terra-500);background:#FDF4F0}
.reminder-past{border-left-color:var(--terra-700);background:#FBE7DF}
.reminder-date{flex:none;width:2.9rem;text-align:center;line-height:1.1}
.reminder-days{display:block;font-family:var(--font-display);font-size:1.35rem;color:var(--green-900)}
.reminder-days-unit{font-size:.68rem;color:var(--green-700)}
.reminder-body{flex:1;min-width:0}
.reminder-title{margin:0;font-weight:700;line-height:1.35}
.reminder-meta{margin:.1rem 0 0;font-size:.78rem;color:var(--green-700)}
.reminder-note{margin:.35rem 0 0;font-size:.85rem}
.reminder-mail{margin:.3rem 0 0;font-size:.72rem;color:var(--green-700)}

.acct-details{border-top:1px dashed var(--line);padding-top:.8rem}
.acct-details summary{cursor:pointer;font-weight:700;color:var(--green-900);list-style:none}
.acct-details summary::-webkit-details-marker{display:none}
.acct-details summary::before{content:"+ ";font-weight:700}
.acct-details[open] summary::before{content:"- "}
.acct-form{margin-top:.6rem}
.acct-form .btn{align-self:stretch;text-align:center}

.acct-rows{margin:.6rem 0 0;display:grid;gap:.35rem}
.acct-rows > div{display:flex;justify-content:space-between;gap:1rem;font-size:.92rem}
.acct-rows dt{color:var(--green-700)}
.acct-rows dd{margin:0;font-weight:700;overflow-wrap:anywhere}
.acct-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
.btn-quiet-outline{background:transparent;color:var(--green-900);border:1px solid var(--line-strong)}

.quota-meter{display:flex;gap:.35rem;margin:.2rem 0 1rem}
.quota-pip{flex:1;height:8px;border-radius:var(--r-pill);background:#EDE7DA}
.quota-pip.filled{background:var(--green-900)}

/* On /konto the panel is the page, so it gets room instead of the narrow form card. */
.account-page{max-width:34rem}
.account-page .acct-section:last-child{margin-bottom:0}

@media (max-width:520px){
  .drawer-sheet{width:100%}
  .acct-nav{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  .drawer-scrim,.drawer-sheet{transition:none}
}

/* ===========================================================================
   Shell pass 2026-09-01. The palette and the typefaces are untouched; what
   changes is depth, motion and the form controls. The old sheet gave every
   surface the same flat border and the same single blur, which reads as a
   printed page rather than an interface, and it left selects, textareas and
   number fields at browser default next to hand-styled text inputs.
   =========================================================================== */

/* Focus. One visible ring everywhere, keyboard only, so a mouse user never
   sees it and a keyboard user is never lost. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--green-900);outline-offset:2px;border-radius:var(--r-sm);
}

/* Header sticks. It is the only navigation on a long guide, and scrolling back
   to the top to reach it is the most common small annoyance in a reading app. */
.site-header{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:saturate(150%) blur(12px);
  transition:box-shadow var(--dur) var(--ease);
}
body.is-scrolled .site-header{box-shadow:var(--shadow-1)}
.site-nav a{transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.icon-link,.avatar-link{transition:transform var(--dur-fast) var(--ease)}
.icon-link:hover,.avatar-link:hover{transform:translateY(-1px)}
.avatar-circle{
  background:var(--green-900);color:var(--cream-50);
  box-shadow:var(--shadow-1);transition:box-shadow var(--dur) var(--ease);
}
.avatar-circle svg{width:19px;height:19px}
.avatar-link:hover .avatar-circle{box-shadow:var(--shadow-2)}

/* Buttons get a press. A control that does not move under the cursor is the
   single clearest tell of a page that was styled once and never used. */
.btn{
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur) var(--ease),
             background var(--dur-fast) var(--ease);
  box-shadow:var(--shadow-1);
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-2)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn-secondary,.btn-quiet-outline{box-shadow:none}
.btn-secondary:hover{border-color:var(--sage-500);box-shadow:var(--shadow-1)}

/* Cards that lead somewhere lift; cards that only hold text do not, so the
   movement still means "this is clickable". */
.card,.guide-card,.search-hits li{
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             border-color var(--dur-fast) var(--ease);
}
.card:hover,.guide-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.card img{transition:transform 400ms var(--ease)}
.card:hover img{transform:scale(1.03)}

/* Sidebar: the active item gets a bar, not just a tint, so it is findable at a
   glance and readable without relying on colour alone. */
.sidebar-item{
  position:relative;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.sidebar-item.active::before{
  content:"";position:absolute;left:-.35rem;top:.45rem;bottom:.45rem;
  width:3px;border-radius:var(--r-pill);background:var(--green-900);
}
.sidebar-item.active svg{color:var(--green-900)}
/* Rails scroll with the page. An inner scrollbar cut cards mid-card and read as broken
   (Sebastian, 2026-09-02), so no sticky, no own scroll container. */
.app-sidebar,.app-rail{align-self:start}

/* Form controls. Every one of them, not just the two that happened to be
   styled: a default select beside a styled text field is what makes a form
   look a decade old. */
input[type=text],input[type=email],input[type=search],input[type=date],
input[type=number],select,textarea{
  width:100%;padding:.65rem .85rem;font:inherit;color:var(--text);
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-md);
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
textarea{resize:vertical;min-height:3.4rem}
select{
  appearance:none;padding-right:2.2rem;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%234F724D' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;background-size:12px;
}
input:hover,select:hover,textarea:hover{border-color:var(--sage-500)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--green-900);box-shadow:var(--focus);
}
::placeholder{color:#9AA79E}
label{display:block}

/* Tables: hairlines and a head that stays while a 24 month history scrolls. */
.compare-table th{position:sticky;top:0;background:var(--surface-sunken);z-index:1}
.compare-scroll{border-radius:var(--r-md);border:1px solid var(--line);overflow:auto;max-height:26rem}
.compare-table td,.compare-table th{border-bottom:1px solid var(--line)}
.compare-table tr:last-child td{border-bottom:0}

/* The report's own sections get air rather than a rule per heading. */
.report-section{border-top-color:var(--line)}
.report-summary{border-top:0;padding-top:0;margin-top:1.2rem}

/* The footer carries what left the navigation: still one click away, just not competing with the
   four content areas for attention. */
.footer-nav{display:flex;gap:1.1rem;flex-wrap:wrap}
.footer-nav a{color:var(--text-muted);text-decoration:none}
.footer-nav a:hover{text-decoration:underline}

/* Community engagement layer */
.bell-link{position:relative}
.bell-badge{
  position:absolute;top:-4px;right:-6px;background:var(--terra-700);color:#fff;
  font-size:.68rem;font-weight:700;line-height:1;padding:.2rem .35rem;border-radius:999px;
}
.activity-list{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.activity-item{
  display:flex;gap:.8rem;align-items:flex-start;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-1);
  padding:.8rem 1rem;
}
.activity-body p{margin:0}
.activity-body a{color:var(--green-900);font-weight:700;text-decoration:none}
.activity-body a:hover{text-decoration:underline}
.activity-unread{border-left:3px solid var(--terra-700)}
.section-row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.nudge-card{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border-left:4px solid var(--terra-700);margin-top:1.2rem;
}
.nudge-card h2{margin:0 0 .2rem;font-size:1.15rem}
.nudge-card p{margin:0}
.topic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin-top:1rem}
.topic-card{
  display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-1);padding:1rem 1.1rem;text-decoration:none;color:var(--ink-900);
}
.topic-card:hover{border-color:var(--sage-500)}
.topic-card h3{margin:0;font-family:var(--font-display);color:var(--green-900);font-size:1.15rem}
.topic-count{color:var(--green-700);font-size:.88rem}
.topic-latest{list-style:none;margin:.5rem 0 0;padding:0;font-size:.88rem;color:var(--ink-900)}
.topic-latest li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.12rem 0}
.rail-members{list-style:none;margin:.6rem 0 0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.rail-members li{display:flex;gap:.6rem;align-items:center}
.rail-members a{color:var(--ink-900);font-weight:700;text-decoration:none}
.rail-members a:hover{color:var(--green-900)}
.rail-members .rail-meta{display:block}
.profile-head{display:flex;gap:1.2rem;align-items:flex-start;flex-wrap:wrap}
.avatar-xl{width:64px;height:64px;font-size:1.6rem}
.profile-id{flex:1;min-width:220px}
.profile-id h1{margin:0 0 .3rem}
.profile-badges{margin:.2rem 0;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.profile-about{margin:.4rem 0}
.profile-stats{margin-top:.2rem}
.profile-edit form{display:flex;flex-direction:column;gap:.5rem;max-width:26rem;margin-top:.6rem}
.answers-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.sort-row{display:flex;gap:.4rem;flex-wrap:wrap}
.btn-quiet svg{width:16px;height:16px;vertical-align:-3px;margin-right:.2rem}
.btn-quiet.is-active{color:var(--terra-700);font-weight:700}
.btn-small{padding:.45rem .9rem;font-size:.9rem;margin-top:.6rem;display:inline-block}
.rail-asker-head{display:flex;gap:.7rem;align-items:center;margin:.5rem 0}
.rail-asker{margin:0}
.rail-about{margin:.3rem 0;font-size:.92rem}
.sidebar-muted .soon-tag{font-size:.72rem;color:var(--green-700);border:1px solid var(--sand-100);border-radius:99px;padding:.05rem .45rem;margin-left:.3rem;white-space:nowrap}
.sidebar-topic-link{display:inline-flex;align-items:center;gap:.45rem;color:var(--green-900);text-decoration:none;font-weight:700}
.sidebar-topic-link:hover{text-decoration:underline}
.sidebar-topic-link svg{width:1rem;height:1rem;flex:none}
.sources-page ul{padding-left:1.1rem}
.sources-page li{margin:.4rem 0}
.panel-add-place{margin-top:.6rem;border-top:1px solid var(--sand-100);padding-top:.6rem}
.panel-add-place summary{cursor:pointer;font-weight:700;color:var(--green-900)}
.panel-add-place textarea,.panel-add-place input[type=text]{padding:.5rem .7rem;border-radius:9px;border:1px solid var(--line-strong);font:inherit;width:100%;box-sizing:border-box}
.maplibregl-popup-content{font:inherit;color:var(--ink-900)}
.maplibregl-popup-content .popup-kind{font-size:.78rem;color:var(--green-700);margin:.15rem 0 .3rem}
.maplibregl-popup-content p{margin:.2rem 0 0;max-width:220px}
.maplibregl-popup-content .popup-address{font-size:.82rem;color:var(--green-700);margin-top:.25rem}
.maplibregl-popup-content .popup-route{margin:.4rem 0 0;font-size:.85rem}