/* ==========================================================================
   Be Solar Wise guides, layered format (October 2026)
   Each guide has three layers: "The short version" (simple, with a diagram),
   "In more detail" and "For the technically minded" (fold-out).
   Loaded after solar-wise-pages.css and bw-family-guides-solar-pet.css.
   Colours: family navy and coral, solar amber. Never green.
   ========================================================================== */
:root{
  --sg-amber:#E0A21B; --sg-amber-text:#8F6200; --sg-amber-wash:#FDF6E4; --sg-amber-line:#EED9A4;
  --sg-coral:#E4572E; --sg-coral-text:#B83E1A;
}

/* Header: guide pages get the 3-bar menu; the short link row is hidden on phones */
header.site .wrap{ align-items:center; }
@media (max-width:640px){ header.site .snav{ display:none; } }
header.site .bw-burger{ margin-left:auto; }

/* Kicker above the title */
.kicker{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px;
  font-size:0.86rem; font-weight:600; color:var(--bw-steel); margin:0 0 8px; max-width:none;
}
.kicker .step{
  display:inline-flex; align-items:center; gap:8px; color:var(--bw-ink);
}
.kicker .step::before{
  content:""; width:18px; height:3px; border-radius:2px; background:var(--sg-amber);
}
.kicker .read{ font-weight:500; }

/* "Jump to" row for the three layers */
.layer-nav{
  display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 26px; padding:0; list-style:none; max-width:none;
}
.layer-nav li{ margin:0; }
.layer-nav a{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  border:1px solid var(--bw-rule-strong); border-radius:999px; padding:7px 14px;
  font-size:0.9rem; font-weight:600; color:var(--bw-ink); background:#FFFFFF;
}
.layer-nav a:hover{ border-color:var(--bw-harbour); background:var(--bw-mist); }
.layer-nav .dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.dot-short{ background:var(--sg-amber); } .dot-detail{ background:var(--bw-ink); } .dot-tech{ background:var(--sg-coral); }

/* Layer headings */
.layer-label{
  display:inline-flex; align-items:center; gap:8px; margin:0 0 6px;
  font-size:0.8rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--bw-steel);
}
.layer-label .dot{ width:9px; height:9px; border-radius:50%; }

/* Layer 1: the short version */
section.short{
  background:var(--sg-amber-wash); border:1px solid var(--sg-amber-line); border-left:4px solid var(--sg-amber);
  border-radius:0 10px 10px 0; padding:22px 24px 10px; margin:0 0 34px; scroll-margin-top:16px;
}
section.short h2{ margin:0 0 0.6em; font-size:1.45rem; }
section.short h2::before{ display:none !important; }
ol.steps{ list-style:none; padding:0; margin:0 0 18px; counter-reset:st; max-width:none; }
ol.steps li{
  counter-increment:st; position:relative; padding:0 0 0 44px; margin:0 0 14px;
  font-size:1.08rem; line-height:1.55; color:var(--bw-text); min-height:30px;
}
ol.steps li::before{
  content:counter(st); position:absolute; left:0; top:-1px;
  width:30px; height:30px; border-radius:50%; background:var(--sg-coral); color:#FFFFFF;
  font-weight:700; font-size:0.95rem; display:flex; align-items:center; justify-content:center;
}
ol.steps li strong{ color:var(--bw-ink); }

/* Layer 2 and 3 wrappers */
section.detail, section.tech-wrap{ scroll-margin-top:16px; }
.layer-head{
  border-top:2px solid var(--bw-ink); padding-top:16px; margin:40px 0 4px;
}
.layer-head h2{ margin:0 0 0.2em !important; font-size:1.7rem; }
.layer-head h2::before{ display:none !important; }
.layer-head p{ color:var(--bw-steel); margin:0; font-size:1rem; }
section.detail h3, section.tech-wrap h3{
  font-family:var(--bw-display); font-weight:600; font-size:1.35rem; color:var(--bw-ink);
  margin:1.8em 0 0.5em; line-height:1.2;
}

/* Diagrams */
figure.dg-fig{
  margin:22px 0 26px; padding:16px 16px 12px; background:#FFFFFF;
  border:1px solid var(--bw-rule); border-radius:10px; position:relative;
}
section.short figure.dg-fig{ margin-top:6px; }
figure.dg-fig svg.dg{ display:block; width:100%; height:auto; max-width:520px; margin:0 auto; }
figure.dg-fig figcaption{
  font-size:0.9rem; line-height:1.5; color:var(--bw-steel); margin:12px auto 0; max-width:60ch; text-align:center;
}
figure.dg-fig .zoom{
  position:absolute; top:8px; right:8px; border:1px solid var(--bw-rule-strong); background:#FFFFFF;
  border-radius:4px; font:600 0.78rem/1 var(--bw-sans); color:var(--bw-ink); padding:6px 8px; cursor:pointer;
}
figure.dg-fig .zoom:hover{ border-color:var(--bw-harbour); }
@media (min-width:761px){ figure.dg-fig .zoom{ display:none; } }
@media (max-width:760px){
  /* Phones: diagrams run edge to edge so their labels stay as large as possible */
  figure.dg-fig{ margin-left:-16px; margin-right:-16px; border-radius:0; border-left:0; border-right:0; padding:44px 4px 10px; }
  section.short{ margin-left:-16px; margin-right:-16px; border-radius:0; padding:20px 16px 8px 14px; border-right:0; }
  section.short figure.dg-fig{ margin-left:-14px; margin-right:-16px; }
  figure.dg-fig figcaption{ padding:0 12px; }
}
.dg-overlay{
  position:fixed; inset:0; z-index:2147483100; background:rgba(13,22,41,0.97);
  display:flex; flex-direction:column;
}
.dg-overlay[hidden]{ display:none; }
.dg-overlay .bar{ display:flex; justify-content:flex-end; padding:10px 12px; }
.dg-overlay .bar button{
  background:#FFFFFF; color:var(--bw-ink); border:0; border-radius:4px; font:600 0.95rem/1 var(--bw-sans); padding:10px 14px; cursor:pointer;
}
.dg-overlay .scroller{ flex:1; overflow:auto; -webkit-overflow-scrolling:touch; padding:0 12px 24px; }
.dg-overlay .sheet{ background:#FFFFFF; border-radius:8px; padding:14px; width:640px; max-width:none; margin:0 auto; }
.dg-overlay .sheet svg{ width:100%; height:auto; display:block; }

/* Key words box */
.keywords{
  background:var(--bw-panel); border:1px solid var(--bw-rule); border-radius:8px; padding:16px 20px; margin:22px 0;
}
.keywords h3{ margin:0 0 10px !important; font-size:1.15rem !important; }
.keywords dl{ margin:0; display:grid; grid-template-columns:minmax(110px,max-content) 1fr; gap:8px 18px; }
.keywords dt{ font-weight:700; color:var(--bw-ink); }
.keywords dd{ margin:0; color:var(--bw-text); }
@media (max-width:520px){ .keywords dl{ grid-template-columns:1fr; gap:2px; } .keywords dd{ margin-bottom:8px; } }

/* Worked examples */
.worked{
  border:1px solid var(--bw-rule-strong); border-radius:8px; margin:20px 0 24px; overflow:hidden; background:#FFFFFF;
}
.worked .wh{ background:var(--bw-ink); color:#FFFFFF; font-weight:600; font-size:0.95rem; padding:10px 16px; }
.worked .wb{ padding:14px 16px 6px; }
.worked .wb p, .worked .wb li{ font-size:1rem; }
.worked table{ width:100%; border-collapse:collapse; font-size:0.98rem; margin:0 0 12px; }
.worked td{ padding:8px 0; border-bottom:1px solid var(--bw-rule); vertical-align:top; }
.worked td:last-child{ text-align:right; font-weight:600; color:var(--bw-ink); white-space:nowrap; padding-left:12px; }
.worked tr.total td{ border-bottom:0; border-top:2px solid var(--bw-ink); font-weight:700; color:var(--bw-ink); }

/* Plain callouts */
.tip{
  background:var(--bw-blue-bg); border:1px solid #C9D9EC; border-left:4px solid var(--bw-blue);
  border-radius:0 8px 8px 0; padding:12px 16px; margin:18px 0;
}
.tip p{ margin:0; font-size:0.98rem; max-width:none; }
.warn{
  background:#FCF1EC; border:1px solid #F0C7B6; border-left:4px solid var(--sg-coral);
  border-radius:0 8px 8px 0; padding:12px 16px; margin:18px 0;
}
.warn p{ margin:0; font-size:0.98rem; max-width:none; color:#5E2410; }

/* Layer 3: technically minded (fold-out) */
details.tech{
  border:1px solid var(--bw-rule-strong); border-left:4px solid var(--sg-coral); border-radius:0 10px 10px 0;
  background:#FFFFFF; margin:40px 0 10px; scroll-margin-top:16px;
}
details.tech > summary{
  list-style:none; cursor:pointer; padding:18px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px;
}
details.tech > summary::-webkit-details-marker{ display:none; }
details.tech > summary .st{ display:block; }
details.tech > summary .t1{
  display:block; font-family:var(--bw-display); font-weight:600; font-size:1.45rem; color:var(--bw-ink); line-height:1.2;
}
details.tech > summary .t2{ display:block; font-size:0.95rem; color:var(--bw-steel); margin-top:3px; }
details.tech > summary .tog{
  flex-shrink:0; border:1px solid var(--bw-rule-strong); border-radius:4px; padding:7px 12px;
  font-size:0.86rem; font-weight:600; color:var(--bw-ink); background:var(--bw-panel); white-space:nowrap;
}
details.tech > summary .tog::after{ content:"Show"; }
details.tech[open] > summary .tog::after{ content:"Hide"; }
details.tech[open] > summary{ border-bottom:1px solid var(--bw-rule); }
details.tech .tb{ padding:4px 20px 18px; }
details.tech .tb h3{ font-size:1.2rem !important; margin-top:1.4em !important; }
@media (max-width:760px){ details.tech .tb{ padding:4px 14px 16px; } details.tech > summary{ padding:16px 14px; } }

/* Next guide + Ask SolarBot */
.guide-nav{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:38px 0 8px; }
.guide-nav a, .guide-nav span{
  display:block; border:1px solid var(--bw-rule); border-radius:8px; padding:14px 16px; text-decoration:none; background:#FFFFFF;
}
.guide-nav a:hover{ border-color:var(--bw-harbour); }
.guide-nav small{ display:block; font-size:0.8rem; font-weight:600; color:var(--bw-steel); text-transform:uppercase; letter-spacing:0.05em; }
.guide-nav b{ display:block; font-family:var(--bw-display); font-size:1.15rem; font-weight:600; color:var(--bw-ink); margin-top:2px; }
.guide-nav .next{ text-align:right; }
.guide-nav span{ opacity:0.7; }
@media (max-width:560px){ .guide-nav{ grid-template-columns:1fr; } .guide-nav .next{ text-align:left; } }
.askbot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px;
  background:var(--bw-ink); color:#FFFFFF; border-radius:8px; padding:18px 22px; margin:18px 0 10px;
}
.askbot p{ color:rgba(255,255,255,0.86); margin:0; max-width:52ch; font-size:1rem; }
.askbot strong{ color:#FFFFFF; }
.askbot a{
  background:var(--sg-coral); color:var(--bw-ink); text-decoration:none; font-weight:700; border-radius:4px; padding:11px 18px; white-space:nowrap;
}
.askbot a:hover{ background:#EF6B44; color:var(--bw-ink); }
.coming{ font-size:0.78rem; font-weight:600; color:var(--bw-steel); border:1px solid var(--bw-rule-strong); border-radius:4px; padding:1px 6px; margin-left:6px; white-space:nowrap; }

/* Guides hub: the ten-step learning path */
ol.hub-path{ list-style:none; padding:0; margin:14px 0 8px; display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:none; }
@media (max-width:640px){ ol.hub-path{ grid-template-columns:1fr; } }
ol.hub-path li{ margin:0; }
ol.hub-path a{ display:grid; grid-template-columns:40px 1fr; gap:12px; align-items:start; height:100%; text-decoration:none;
  background:#FFFFFF; border:1px solid var(--bw-rule); border-radius:8px; padding:14px 16px; color:var(--bw-text); }
ol.hub-path a:hover{ border-color:var(--bw-harbour); box-shadow:0 2px 8px rgba(20,33,61,0.08); }
ol.hub-path .n{ width:36px; height:36px; border-radius:50%; background:var(--bw-ink); color:#FFFFFF; display:flex; align-items:center; justify-content:center;
  font-family:var(--bw-display); font-weight:600; font-size:1.1rem; }
ol.hub-path li:first-child .n{ background:var(--sg-amber); color:var(--bw-ink); }
ol.hub-path b{ display:block; font-family:var(--bw-display); font-weight:600; font-size:1.12rem; color:var(--bw-ink); line-height:1.25; margin-bottom:3px; }
ol.hub-path .b span{ display:block; font-size:0.92rem; color:var(--bw-steel); line-height:1.45; }
ul.srcs li{ font-size:0.97rem; }
.glossary dt{ scroll-margin-top:16px; }
.small{ font-size:0.92rem; color:var(--bw-steel); }
.tbl td{ font-size:0.93rem; }