/* Shared look for the free tools pages (/tools/, /tools/*, /plan/).
   Loaded after each page's own <style> blocks, so these rules win at equal specificity. */

/* ─── Breadcrumb runs into the dark header band ─── */
.s-bread:has(+ .tools-head),.s-bread:has(+ .tool-head),.s-bread:has(+ .tool-wrap),.s-bread:has(+ .calc-wrap){background:#0D2B3E;border-bottom:1px solid rgba(255,255,255,.08);}
:is(.s-bread:has(+ .tools-head),.s-bread:has(+ .tool-head),.s-bread:has(+ .tool-wrap),.s-bread:has(+ .calc-wrap)) .s-bread-inner a{color:rgba(255,255,255,.7);}
:is(.s-bread:has(+ .tools-head),.s-bread:has(+ .tool-head),.s-bread:has(+ .tool-wrap),.s-bread:has(+ .calc-wrap)) .s-bread-inner a:hover{color:var(--teal);}
:is(.s-bread:has(+ .tools-head),.s-bread:has(+ .tool-head),.s-bread:has(+ .tool-wrap),.s-bread:has(+ .calc-wrap)) .s-bread-inner span{color:rgba(255,255,255,.45);}
:is(.s-bread:has(+ .tools-head),.s-bread:has(+ .tool-head),.s-bread:has(+ .tool-wrap),.s-bread:has(+ .calc-wrap)) .s-bread-inner span[style]{color:#fff!important;}

/* ─── Header band: full-bleed navy with a soft glow ─── */
.tool-wrap,.calc-wrap{padding-top:0;}
.tools-head,.tool-head,.calc-head{
  position:relative;isolation:isolate;max-width:none;
  margin:0 0 34px;padding:46px 20px 54px;text-align:center;
  background:#0D2B3E;box-shadow:0 0 0 100vmax #0D2B3E;clip-path:inset(0 -100vmax);
}
.tools-head::before,.tool-head::before,.calc-head::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(48% 95% at 50% 0%,rgba(0,229,255,.22),transparent),
    radial-gradient(22% 70% at 76% 100%,rgba(255,191,0,.12),transparent),
    radial-gradient(20% 70% at 22% 100%,rgba(0,184,204,.16),transparent);
}
.tools-head h1,.tool-head h1,.calc-head h1{
  color:#fff;font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.12;letter-spacing:-.01em;
  max-width:720px;margin:0 auto 12px;
}
.tools-head p,.tool-head p,.calc-head p{color:rgba(255,255,255,.72);font-size:1rem;line-height:1.6;max-width:600px;margin:0 auto;}
.tool-eyebrow,.calc-eyebrow{
  display:inline-block;margin-bottom:16px;padding:5px 14px;border-radius:9999px;
  background:rgba(0,229,255,.12);border:1px solid rgba(0,229,255,.4);color:var(--teal);
  font-size:.72rem;font-weight:800;letter-spacing:.08em;
}
@media(max-width:600px){
  .tools-head,.tool-head,.calc-head{padding:32px 18px 40px;margin-bottom:24px;}
}

/* ─── Tools index cards ─── */
.tool-card{color:inherit;text-decoration:none;}
.tool-card:hover{border-color:rgba(0,229,255,.45);}
.tool-card img{background:linear-gradient(135deg,#0D2B3E,#0D4F5C);transition:transform .5s ease;}
.tool-card:hover img{transform:scale(1.04);}
.tool-card{position:relative;}
.tool-card > img{display:block;}
.tool-body h2{color:var(--text);}
.tool-tag{color:var(--teal-dark);}
.tool-card:hover .tool-cta{background:var(--orange);color:#fff;}
.tool-cta{transition:.18s;}

/* ─── Range sliders ─── */
input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;--p:50%;}
input[type=range]:focus-visible{outline:2px solid var(--teal);outline-offset:4px;border-radius:9999px;}
input[type=range]::-webkit-slider-runnable-track{
  height:6px;border-radius:9999px;
  background:linear-gradient(to right,var(--teal-dark) 0 var(--p),#DCE8EC var(--p) 100%);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;
  background:#fff;border:3px solid var(--teal-dark);box-shadow:0 2px 8px rgba(13,43,62,.25);transition:transform .15s;
}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12);}
input[type=range]::-moz-range-track{height:6px;border-radius:9999px;background:#DCE8EC;}
input[type=range]::-moz-range-progress{height:6px;border-radius:9999px;background:var(--teal-dark);}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--teal-dark);box-shadow:0 2px 8px rgba(13,43,62,.25);}

/* ─── Where to Sail When: two-column season grid ─── */
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px;}
.dcard{transition:transform .18s ease,box-shadow .18s ease,border-color .18s;}
.dcard:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(13,43,62,.1);border-color:rgba(0,229,255,.35);}
@media(max-width:420px){.dgrid{grid-template-columns:1fr;}}

/* ─── Tools index: suggestion link ─── */
.tools-soon a{color:var(--teal-dark);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(0,184,204,.35);}
.tools-soon a:hover{color:var(--orange);border-color:currentColor;}