/* =========================================================================
   ROOTED — Greenhouse skin v2 (theme-forge over style.css)
   Frames = 9-slice border-image (crisp, no white margin, no stretch).
   Foliage falls from the top, not clipped by the bar.
   ========================================================================= */
body{background:#c9d6bd url("../img/theme/bg_greenhouse.png") center/cover fixed!important}
.app{background:transparent}

/* sidebar = frosted potting-bench panel */
.side{position:sticky;z-index:20;background:linear-gradient(180deg,rgba(247,240,219,.86),rgba(236,226,198,.92))!important;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-right:1px solid rgba(102,98,77,.3)}
.nav__i.is-active{background:rgba(255,252,242,.95)}
.logo__mark{background:rgba(255,252,242,.9)}

/* ---- foliage falls from the very top, hanging into the scene (not cut) ---- */
.main{position:relative}
/* full-length foliage — no clip — hangs over the workspace */
.foliage{position:absolute;top:-6px;left:-24px;right:-24px;height:clamp(380px,54vh,580px);z-index:8;pointer-events:none;
  background:url("../img/theme/foliage_top.png") top center/auto no-repeat;
  filter:drop-shadow(0 14px 16px rgba(25,38,12,.3))}
/* content starts below the dense canopy; only thin trailing tips drape across */
.top{position:relative;z-index:16;padding-top:clamp(116px,15vh,168px)}
/* titles ride a dense cream fog halo so the dark serif reads on any busy/dark patch */
.top__h{text-shadow:0 0 5px #fbf7ec,0 0 11px #fbf7ec,0 0 20px #fbf7ec,0 0 33px #fbf7ec,0 0 52px rgba(251,247,236,.95),0 1px 2px rgba(251,247,236,1)}
.top__hi{text-shadow:0 0 5px #fbf7ec,0 0 10px #fbf7ec,0 0 18px #fbf7ec,0 0 30px rgba(251,247,236,.95)}
.sec-head h2{text-shadow:0 0 5px #fbf7ec,0 0 11px #fbf7ec,0 0 20px #fbf7ec,0 0 33px #fbf7ec,0 0 50px rgba(251,247,236,.92)}
.sec-head .link{text-shadow:0 0 8px #fbf7ec,0 0 18px rgba(251,247,236,.9)}

/* ---- glass + wood frames via 9-slice (the trimmed card_frame asset) ---- */
.kpi,.card,.plant{
  border:17px solid transparent!important;border-radius:0!important;
  box-shadow:0 16px 34px rgba(35,50,20,.26)!important}
/* TEXT panels (KPI, side cards, forms): wood frame WITHOUT the frosted-glass centre,
   opaque cream interior → text is crisp, no busy foliage bleeding through */
.kpi,.card{border-image:url("../img/theme/card_frame.png") 46 / 17px / 0 stretch!important}
.kpi{background:#fbf7ed!important;padding:.3rem .5rem!important;align-items:center;gap:.7rem}
.card{background:#fbf7ed!important;padding:1.1rem 1.2rem 1.3rem!important}
/* feature icons = engraved botanical glyphs on soft paper chips (replaces the line icons) */
.kpi__ic,.task__ic{background:rgba(252,248,239,.94)!important;
  box-shadow:inset 0 0 0 1px rgba(102,98,77,.16),0 3px 7px rgba(40,55,20,.16)!important}
.kpi__ic .ico{width:30px;height:30px;object-fit:contain}
.task__ic .ico{width:25px;height:25px;object-fit:contain}
.wtask .ico{width:17px;height:17px;object-fit:contain;flex:0 0 auto}
/* PLANT card: keeps the frosted greenhouse pane behind the illustration (fill),
   title sits on a crisp opaque cream strip */
.plant{padding:0!important;overflow:hidden;background:rgba(250,247,238,.5)!important;
  border-image:url("../img/theme/card_frame.png") 46 fill / 17px / 0 stretch!important}
.plant__art{background:transparent!important;border-bottom:0!important;height:140px;margin-top:.3rem}
.plant__b{padding:.5rem .9rem .8rem;background:#fcf8ef}
.plant:hover{transform:translateY(-5px)}

/* search + Add cluster dropped clear of the hanging foliage */
.top__r{align-self:flex-start;margin-top:4px;position:relative;z-index:17}
.search{background:rgba(252,247,235,.88)!important;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:0 6px 16px rgba(35,50,20,.18)}
.icon-btn{background:rgba(252,247,235,.84)!important}
.avatar{box-shadow:0 4px 12px rgba(35,50,20,.3)}

/* primary button = a kraft plant-label tag, live text on top (you liked this) */
.btn{background:url("../img/theme/btn_tag.png") center/100% 100% no-repeat!important;border:0!important;
  color:#5a4422!important;box-shadow:none!important;padding:.8rem 1.8rem .9rem!important;text-shadow:0 1px 0 rgba(255,250,235,.6)}
.btn .ic{color:#7a4f28}

.streak-card{box-shadow:0 16px 32px rgba(25,40,12,.4)}

/* ---- completed kit: wood sidebar, brand emblem, water ring, side foliage ---- */
/* sidebar = aged potting-bench wood, with a light veil so text keeps ≥4.5:1 contrast */
.side{background:linear-gradient(180deg,rgba(248,243,226,.86),rgba(241,232,207,.9)),url("../img/theme/sidebar_wood.png") center/cover!important}
.logo__txt{color:#46371f!important}
.nav__i{color:#463c26!important;font-weight:600}
.nav__i .ic{color:#7a6843!important}
.nav__i:hover{background:rgba(255,252,242,.72)!important;color:#352b16!important}
.nav__i.is-active{background:rgba(255,252,242,.97)!important;color:#33290f!important}
.nav__i.is-active .ic{color:var(--terra-d)!important}
/* streak card = a little engraved wooden sign hanging among the foliage */
.streak-card{background:url("../img/theme/streak_plaque.png") center/100% 100% no-repeat!important;
  border-radius:0!important;box-shadow:none!important;color:#3a2c18!important;text-align:center;
  display:flex!important;flex-direction:column;align-items:center;justify-content:flex-end;gap:.05rem;
  min-height:166px;padding:3.4rem 1.6rem 1.55rem!important;
  filter:drop-shadow(0 10px 14px rgba(25,40,12,.4))}
.streak-card__n{justify-content:center;color:#352712!important;font-size:2.05rem!important;line-height:1}
.streak-card__n span{opacity:1!important;color:#5c4326!important}
.streak-card__l{opacity:1!important;color:#4a3820!important;font-weight:600;font-size:.7rem!important;line-height:1.25;margin-top:.2rem!important;max-width:15ch}

/* ---- a11y: secondary text was too light on the frosted-green panels ---- */
:root{--muted:#4f4733}
.desc{color:#473f2c!important}
.task__s,.streak__big span,.kpi__l,.plant__b .sp,.bars-x span,.stat__l,.water__t,.streak__cap,.sec-head .pill,.pill{color:#463d2a!important}
.it,.sub2{color:#3d4827!important}
.task__t,.plant__b h3,.kpi__n,.streak__big,.stat__v{color:#2c2513!important}

/* ============================ PER-SCREEN PATTERNS (greenhouse) ============================ */
/* filter chips = little enamel garden labels, lifted clear of the hanging foliage */
.chips{position:relative;z-index:16;gap:.6rem!important;margin-bottom:1.7rem!important}
.chip{background:url("../img/theme/chip_off.png") center/100% 100% no-repeat!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  color:#5a4a2c!important;font-weight:700!important;padding:.62rem 1.55rem .68rem!important;
  text-shadow:0 1px 0 rgba(255,251,238,.55);transition:.16s;filter:drop-shadow(0 4px 7px rgba(35,50,20,.16))}
.chip:hover{filter:drop-shadow(0 6px 10px rgba(35,50,20,.22)) brightness(1.03);transform:translateY(-1px)}
.chip.is-on{background:url("../img/theme/chip_on.png") center/100% 100% no-repeat!important;
  color:#fff2e4!important;text-shadow:0 1px 1px rgba(120,50,25,.55)}

/* SCHEDULE — each day = a light frosted glass panel */
.day{background:rgba(250,247,238,.8)!important;border:1px solid rgba(102,98,77,.24)!important;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 9px 20px rgba(35,50,20,.2)!important}
.day.is-today{border-color:var(--terra)!important;box-shadow:0 0 0 1.5px var(--terra),0 12px 26px rgba(120,60,30,.28)!important}
.day__d{color:#33291a!important}.day__w{color:#5c5440!important}
.wtask{color:#41512f!important;background:rgba(126,139,106,.22)!important}
.wtask--due{color:#9a3f24!important;background:rgba(199,123,87,.24)!important}

/* PLANT DETAIL — hero in a wood/glass frame, stats as light tiles */
.crumb{color:var(--terra-d)!important;text-shadow:0 0 12px rgba(247,241,224,.9)}
.detail__art{background:rgba(250,247,238,.6)!important;border:18px solid transparent!important;border-radius:0!important;
  border-image:url("../img/theme/card_frame.png") 46 fill / 18px / 0 stretch!important;box-shadow:0 16px 34px rgba(35,50,20,.26)!important}
.stat{background:rgba(250,247,238,.82)!important;border:1px solid rgba(102,98,77,.24)!important;box-shadow:0 9px 20px rgba(35,50,20,.18)!important}
.stat__l{color:#5c5440!important}.stat__v{color:#33291a!important}
.guide li{color:#46402d!important;border-bottom-color:rgba(102,98,77,.2)!important}
.bars-x span{color:#5c5440!important}

/* SETTINGS — centred column, sections framed, inputs opaque + legible */
.form{max-width:680px;margin-left:auto;margin-right:auto}
.form-sec{background:#fbf7ed!important;border:17px solid transparent!important;border-radius:0!important;
  border-image:url("../img/theme/card_frame.png") 46 / 17px / 0 stretch!important;box-shadow:0 16px 34px rgba(35,50,20,.26)!important}
.form-sec h2{color:#33291a!important}
.field label{color:#4f4733!important}
.field input,.field select{background:rgba(255,253,247,.94)!important;border:1px solid rgba(102,98,77,.32)!important;color:#33291a!important}
.field input:focus,.field select:focus{border-color:var(--terra)!important}
.row-set{border-bottom-color:rgba(102,98,77,.22)!important}
.row-set p{color:#33291a!important}.row-set small{color:#5c5440!important}

/* DISCOVER */
.badge-diff{color:#46532f!important;background:rgba(126,139,106,.22)!important}

/* add-plant slot = dashed wood/glass (no white) */
.add-card{background:rgba(250,247,238,.45)!important;border:2px dashed rgba(120,90,50,.5)!important;color:#6a5a3e!important;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.add-card:hover{border-color:var(--terra)!important;color:var(--terra-d)!important;background:rgba(252,247,238,.62)!important}

/* ============================ RESPONSIVE (greenhouse) ============================ */
@media (max-width:880px){
  body{background-attachment:scroll!important}
  .foliage{height:clamp(170px,30vh,280px)}
  .top{padding-top:clamp(78px,15vh,128px)}
  .top__r{margin-top:0}
  body::after{display:none}      /* hide side foliage on mobile (avoids clutter / scroll) */
}
.logo__mark{background:none!important;border:0!important;width:42px;height:42px;padding:0;box-shadow:none}
.logo__mark img{width:100%;height:100%;object-fit:contain}
.streak-badge{width:66px!important;height:66px!important}
.col-side{position:relative;z-index:2}
/* side foliage = a small vertical garden filling the empty sidebar gap,
   clear of the nav (top) and the hanging streak sign (bottom) */
body::after{content:"";position:fixed;left:-14px;bottom:196px;width:clamp(150px,13vw,196px);height:clamp(250px,42vh,400px);z-index:21;pointer-events:none;
  background:url("../img/theme/side_foliage.png") bottom left/contain no-repeat;opacity:.92;
  filter:drop-shadow(7px 8px 13px rgba(25,38,12,.3));
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 80%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 80%,transparent 100%)}
.streak-card{position:relative;z-index:23}