/* Grower calculators page (tools.html). Colours and sizes come from base.css. */
.tools-head{max-width:44em;padding-block:clamp(28px,5vw,56px) clamp(24px,4vw,40px);display:flex;flex-direction:column;gap:14px}
.tools-head h1{font-size:var(--t-hero)}
.tools-head > p:not(.eyebrow){font-size:var(--t-lg);color:var(--muted)}
.tools-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.tools-jump a{font-size:var(--t-sm);font-weight:600;text-decoration:none;padding:8px 14px;border-radius:var(--r-pill);background:var(--soft)}
.tools-jump a:hover{background:var(--honey-soft)}

.tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
@media (max-width:900px){.tools{grid-template-columns:1fr}}
.tool{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:clamp(20px,3vw,30px);display:flex;flex-direction:column;gap:16px;scroll-margin-top:20px;min-width:0}
.tool-head{display:flex;flex-direction:column;gap:6px}
.tool-head h2{font-size:var(--t-xl)}
.tool-head p{color:var(--muted);font-size:.95rem}
.tool h3{font-family:var(--f-body);font-weight:700;font-size:1rem;margin-top:4px}
.tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tool-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:560px){.tool-grid.three{grid-template-columns:1fr 1fr}}
.label{font-size:var(--t-sm);color:var(--muted)}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{font:500 .85rem/1 var(--f-body);padding:8px 13px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.chips button:hover{background:var(--soft)}

.result{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:var(--r);background:var(--bg)}
.result .big{font-family:var(--f-display);font-size:2.4rem;line-height:1.1;font-variant-numeric:tabular-nums}
.result .big small{font-family:var(--f-body);font-size:.95rem;color:var(--muted);margin-left:8px}
.result .verdict{font-size:var(--t-sm);color:var(--muted)}
.result-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.result-row{grid-template-columns:1fr}}

.ranges{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.range{display:flex;justify-content:space-between;gap:12px;padding:8px 4px;border-bottom:1px solid var(--line);font-size:var(--t-sm);color:var(--muted)}
.range.hit{color:var(--ink);font-weight:600;background:linear-gradient(90deg,var(--honey-soft),transparent)}
.range.hit span:first-child::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--honey);margin-right:8px;vertical-align:1px}

.reverse{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:var(--t-sm)}
.reverse label{font-weight:600}
.reverse input{width:90px;padding:8px 12px}
.reverse strong{font-variant-numeric:tabular-nums}
.note{font-size:var(--t-sm);color:var(--muted);padding-left:12px;border-left:2px solid var(--honey)}

.check{font-size:var(--t-sm);padding:12px 14px;border-radius:var(--r);background:var(--bg)}
.check:empty{display:none}
.check.ok{background:color-mix(in srgb,var(--good) 12%,var(--surface));color:var(--good);font-weight:600}
.check.warn{background:color-mix(in srgb,var(--warn) 14%,var(--surface));color:var(--warn);font-weight:600}
.check.bad{background:color-mix(in srgb,var(--bad) 12%,var(--surface));color:var(--bad);font-weight:600}

/* Problem helper (problems.html) */
.helper-note{max-width:60em;padding:14px 18px;border-radius:var(--r);background:var(--honey-soft);box-shadow:inset 3px 0 0 var(--honey);font-size:.95rem;margin-bottom:16px}
.helper-context{max-width:60em;padding:14px 18px;border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);margin-bottom:16px;font-size:.95rem}
.helper-context ul{margin:6px 0 0;padding-left:20px;color:var(--muted)}
.helper{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px;align-items:start}
@media (max-width:900px){.helper{grid-template-columns:1fr}}
.helper-picks{position:sticky;top:16px}
@media (max-width:900px){.helper-picks{position:static}}
.pick-step{display:flex;flex-direction:column;gap:10px}
.pick-step h2{font-size:var(--t-lg);display:flex;align-items:center;gap:10px}
.pick-step h2 span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--honey-soft);color:var(--honey);font-family:var(--f-body);font-size:.85rem;font-weight:700}
.picks{display:flex;flex-wrap:wrap;gap:6px}
.pick{font:500 .88rem/1.2 var(--f-body);padding:9px 13px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;text-align:left;transition:background-color .15s,border-color .15s,color .15s}
.pick:hover{border-color:color-mix(in srgb,var(--ink) 30%,transparent)}
.pick[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.helper-results{display:flex;flex-direction:column;gap:12px}
.helper-results > h2{font-size:var(--t-xl)}
.helper-results .empty{padding:24px;border-radius:var(--r-lg);background:var(--surface);color:var(--muted)}
#results{display:flex;flex-direction:column;gap:12px}
.cause{background:var(--surface);border-radius:var(--r-lg);padding:20px 22px;display:flex;flex-direction:column;gap:10px;box-shadow:0 1px 2px rgb(0 0 0 / .04)}
.cause.first{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--honey) 55%,transparent),var(--shadow)}
.cause-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.cause h3{font-size:1.35rem;margin-top:2px}
.kind{font-size:.75rem;font-weight:700;letter-spacing:.02em;color:var(--muted);text-transform:uppercase}
.strength{flex:none;font-size:.78rem;font-weight:700;padding:4px 11px;border-radius:var(--r-pill);background:var(--soft);color:var(--muted)}
.strength.likely{background:var(--honey-soft);color:var(--honey)}
.matched{font-size:var(--t-sm);color:var(--muted)}
.cause dl{margin:0;display:grid;grid-template-columns:minmax(110px,auto) 1fr;gap:8px 16px;font-size:.95rem}
.cause dt{font-weight:700;font-size:var(--t-sm);padding-top:2px}
.cause dd{margin:0}
@media (max-width:560px){.cause dl{grid-template-columns:1fr;gap:2px}.cause dd{margin-bottom:8px}}
.caution{font-size:var(--t-sm);font-weight:600;color:var(--warn);padding-left:12px;border-left:2px solid var(--warn)}
.cause .btn{align-self:flex-start}

/* Setup guide (setups.html) */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.setup-main{display:flex;flex-direction:column;gap:clamp(28px,4vw,44px)}
.size-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:6px;border-radius:calc(var(--r) + 6px);background:var(--bg)}
.size-tab{display:flex;flex-direction:column;align-items:center;gap:0;padding:10px 6px;border:0;border-radius:var(--r);background:transparent;color:var(--muted);font:500 .8rem/1.3 var(--f-body);cursor:pointer;transition:background-color .15s,color .15s}
.size-tab strong{font-family:var(--f-display);font-weight:400;font-size:1.35rem;color:var(--ink)}
.size-tab:hover{background:var(--soft)}
.size-tab[aria-checked="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgb(0 0 0 / .06),0 6px 16px -8px rgb(0 0 0 / .2)}
.size-tab[aria-checked="true"] strong{color:var(--honey)}
.size-body{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(16px,3vw,36px);align-items:center}
@media (max-width:760px){.size-body{grid-template-columns:1fr}}
.size-art{aspect-ratio:1;max-width:340px;width:100%;justify-self:center;border-radius:var(--r-lg);background:var(--honey-soft)}
.tent-svg{width:100%;height:100%;display:block}
.tent-wall{fill:none;stroke:var(--ink);stroke-width:2}
.tent-floor{fill:var(--surface);stroke:var(--line);stroke-width:1}
.tent-plant .pot{fill:var(--honey-soft);stroke:var(--honey);stroke-width:1.4}
.tent-plant .leaflet{fill:none;stroke:var(--ink);stroke-width:1.1;stroke-linejoin:round}
.tent-plant{transform-box:fill-box;transform-origin:center;animation:sprout .5s cubic-bezier(.3,1.4,.5,1) both;animation-delay:var(--d)}
@keyframes sprout{from{transform:scale(.3);opacity:0}}
.fan{fill:var(--surface);stroke:var(--muted);stroke-width:1.2}
.fan-blade{fill:none;stroke:var(--muted);stroke-width:1.2;stroke-linecap:round}
.dim{font:600 10px var(--f-body);fill:var(--muted)}
.size-info{display:flex;flex-direction:column;gap:10px}
.size-info h2{font-size:var(--t-2xl)}
.size-who{color:var(--muted);font-size:var(--t-lg);line-height:1.45}
.size-facts{margin:6px 0 0;display:grid;grid-template-columns:minmax(100px,auto) 1fr;gap:0}
.size-facts dt,.size-facts dd{padding:10px 0;border-top:1px solid var(--line)}
.size-facts dt{font-size:var(--t-sm);font-weight:600;color:var(--muted)}
.size-facts dd{margin:0;display:flex;flex-direction:column}
.size-facts dd span{font-size:var(--t-sm);color:var(--muted)}
.link-arrow{align-self:flex-start;font-weight:600;font-size:var(--t-sm);text-decoration-color:var(--honey);text-underline-offset:4px}
.link-arrow::after{content:" →"}

.gear-head{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.gear-head h2{font-size:var(--t-2xl)}
.gear-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
@media (max-width:400px){.gear-list{grid-template-columns:1fr}}
.gear-item{background:var(--surface);border-radius:var(--r-lg);padding:20px 22px;display:flex;flex-direction:column;gap:8px;box-shadow:0 1px 2px rgb(0 0 0 / .04);font-size:.95rem}
.gear-item.optional{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.gear-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.gear-top h3{font-size:1.3rem}
.gear-need{flex:none;font-size:.72rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r-pill);background:var(--honey-soft);color:var(--honey)}
.optional .gear-need{background:var(--soft);color:var(--muted)}
.gear-spec{font-weight:700}
.gear-look{color:var(--muted);font-size:var(--t-sm)}
.gear-look strong{color:var(--ink)}
.shops{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:auto;padding-top:8px}
.shops > span{margin-right:4px}
.shop{font-size:.82rem;font-weight:600;text-decoration:none;padding:6px 12px;border-radius:var(--r-pill);border:1px solid var(--line);transition:background-color .15s,border-color .15s}
.shop:hover{background:var(--honey-soft);border-color:color-mix(in srgb,var(--honey) 45%,transparent)}
.shop::after{content:" ↗";color:var(--muted)}
.disclosure{margin-top:16px;font-size:var(--t-sm);color:var(--muted);max-width:52em}

.fit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:760px){.fit-grid{grid-template-columns:1fr 1fr}}
.fit-tent{grid-column:1 / -1;border:0;margin:0;padding:0;min-width:0}
.fit-tent legend{font-weight:600;font-size:var(--t-sm);padding:0;margin-bottom:6px}
.tent-dims{display:flex;align-items:center;gap:8px;max-width:440px}
.tent-dims input{flex:1}
.tent-dims select{width:auto;flex:none}
.tent-dims span{color:var(--muted)}
.fit-results{display:flex;flex-direction:column;gap:8px}
.fit-summary{font-size:.95rem;color:var(--muted)}
.fit-summary strong{color:var(--ink)}
.fit-summary a{color:var(--ink);font-weight:600;text-decoration-color:var(--honey);text-underline-offset:3px}
.fit-note{display:flex;gap:12px;padding:12px 14px;border-radius:var(--r);background:var(--bg);font-size:.95rem}
.fit-dot{flex:none;width:10px;height:10px;border-radius:50%;margin-top:7px;background:var(--muted)}
.fit-note.ok .fit-dot{background:var(--good)}
.fit-note.warn .fit-dot{background:var(--warn)}
.fit-note.bad .fit-dot{background:var(--bad)}
.fit-note.info .fit-dot{background:var(--honey)}
.fit-title{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.fit-title span{font-size:var(--t-sm);color:var(--muted);font-variant-numeric:tabular-nums}
.fit-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
@media (max-width:600px){
  .size-tabs{gap:2px;padding:4px}
  .size-tab{padding:8px 2px;font-size:.7rem}
  .size-tab strong{font-size:1.05rem}
  .size-info h2{font-size:1.9rem}
  .gear-head h2{font-size:1.8rem}
  .tent-dims{gap:5px}
  .tent-dims input{padding:10px 8px}
}

.tools-cta{margin-top:clamp(40px,6vw,72px);background:var(--primary);color:var(--on-primary);border-radius:var(--r-lg);padding:clamp(28px,5vw,52px);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px}
.tools-cta h2{font-size:var(--t-2xl);max-width:16em}
.tools-cta p{opacity:.85;margin-top:8px;max-width:40em}
.tools-cta .btn{background:var(--on-primary);color:var(--primary)}
@media (max-width:600px){
  .tools-head h1{font-size:2.4rem}
  .tools-cta h2{font-size:1.8rem}
  .tools-cta .btn{width:100%}
}

/* Grow-light glow (same feel as the journal): a soft wash behind the page heading and a
   halo around each card. Gold in light mode, purple-pink LED in dark mode. */
html,body{overflow-x:clip}
.wrap{--jg-a:color-mix(in srgb,var(--honey) 32%,transparent);--jg-b:color-mix(in srgb,#e8a0c8 18%,transparent);--jb:color-mix(in srgb,var(--honey) 55%,transparent);--jb-ring:70%}
:root[data-theme="dark"] .wrap{--jg-a:rgb(186 92 255 / .2);--jg-b:rgb(255 80 160 / .12);--jb:rgb(186 92 255 / .3);--jb-ring:45%}
.tools-head{position:relative;isolation:isolate}
.tools-head::before{content:"";position:absolute;z-index:-1;left:-15%;right:-15%;top:-90px;height:520px;pointer-events:none;
  background:radial-gradient(closest-side at 30% 45%,var(--jg-a),transparent 72%),radial-gradient(closest-side at 75% 35%,var(--jg-b),transparent 70%);
  filter:blur(26px);animation:tglow 10s ease-in-out infinite}
@keyframes tglow{50%{opacity:.8;transform:scale(1.03)}}
:is(.tool,.gear-item:not(.optional),.cause,.helper-context,.helper-results .empty,.grow-pick){
  box-shadow:0 0 0 1px color-mix(in srgb,var(--jb) var(--jb-ring),transparent),0 14px 40px -16px var(--jb)}
.cause.first{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--honey) 55%,transparent),0 14px 40px -14px var(--jb)}
.gear-item.optional{box-shadow:inset 0 0 0 1px var(--line),0 14px 40px -22px var(--jb)}
@media print{.tools-head::before{display:none}}

/* Problem helper: "Which grow is it?" */
.grow-pick{max-width:60em;padding:14px 18px;border-radius:var(--r);background:var(--surface);margin-bottom:16px;display:flex;flex-direction:column;gap:6px}
.grow-pick-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.grow-pick select{width:auto;min-width:min(100%,280px);max-width:100%;padding:10px 14px}
.grow-login{max-width:60em;margin-bottom:16px;font-size:var(--t-sm);color:var(--muted)}
.grow-login a{color:var(--ink);font-weight:600;text-decoration-color:var(--honey);text-underline-offset:3px}