/*
Equiptova Content UI Build Wave 2 — Technical Calm / Mineral Tech
22 live Calculator / Topic Hub / Guide / Reference pages.
Presentation only. No alternate brand palette and no content rewrite.
*/

/* ---------------------------------------------------------------
   Shared content-page rhythm
---------------------------------------------------------------- */
body.eq-px-v2:is(.eq-template-calculator,.eq-template-topic-hub,.eq-template-guide,.eq-template-reference) main{
  padding-bottom:clamp(56px,8vw,96px)
}
body.eq-px-v2:is(.eq-template-calculator,.eq-template-topic-hub,.eq-template-guide,.eq-template-reference) .eq-page-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  margin-bottom:clamp(28px,4vw,44px);
  padding:clamp(28px,4.5vw,52px);
  border:1px solid var(--eq-border);
  border-radius:var(--eq-radius-lg);
  background:linear-gradient(135deg,var(--eq-surface) 0%,var(--eq-surface) 62%,var(--eq-surface-alt) 100%);
  box-shadow:none
}
body.eq-px-v2:is(.eq-template-calculator,.eq-template-topic-hub,.eq-template-guide,.eq-template-reference) .eq-page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:linear-gradient(rgba(47,102,112,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(47,102,112,.05) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(90deg,transparent 30%,black 100%)
}
body.eq-px-v2:is(.eq-template-calculator,.eq-template-topic-hub,.eq-template-guide,.eq-template-reference) .eq-page-hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:180px;height:180px;
  inset-inline-end:-64px;
  bottom:-82px;
  border:34px solid rgba(18,52,59,.055);
  border-radius:50%
}
body.eq-px-v2:is(.eq-template-calculator,.eq-template-topic-hub,.eq-template-guide,.eq-template-reference) .eq-page-title{
  max-width:18ch;
  margin:0;
  font-size:clamp(36px,5vw,54px);
  line-height:1.06;
  letter-spacing:-.04em
}
body.eq-px-v2:is(.eq-template-calculator,.eq-template-topic-hub,.eq-template-guide,.eq-template-reference) .eq-page-context{
  max-width:70ch;
  margin-top:18px
}
body.eq-px-v2:is(.eq-template-calculator,.eq-template-topic-hub,.eq-template-guide,.eq-template-reference) .eq-page-context__eyebrow{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  margin-bottom:8px;
  padding:4px 9px;
  border:1px solid var(--eq-border);
  border-radius:999px;
  background:rgba(237,242,241,.72);
  color:var(--eq-text-secondary);
  font-family:var(--eq-font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.04em;
  text-transform:uppercase
}
body.eq-px-v2:is(.eq-template-calculator,.eq-template-topic-hub,.eq-template-guide,.eq-template-reference) .eq-page-context__answer{
  max-width:64ch;
  margin:0;
  color:var(--eq-text-secondary);
  font-size:clamp(17px,2vw,20px);
  line-height:1.65
}
body.eq-px-v2:is(.eq-template-calculator,.eq-template-topic-hub,.eq-template-guide,.eq-template-reference) .eq-search-launch-content{
  display:grid;
  gap:clamp(24px,3.5vw,40px)
}
body.eq-px-v2:is(.eq-template-calculator,.eq-template-topic-hub,.eq-template-guide,.eq-template-reference) .eq-search-launch-content>section{
  margin:0
}
body.eq-px-v2:is(.eq-template-calculator,.eq-template-topic-hub,.eq-template-guide,.eq-template-reference) .eq-search-lede{
  max-width:760px;
  margin:0;
  padding:0 0 0 20px;
  border-inline-start:3px solid var(--eq-brand-secondary);
  color:var(--eq-text);
  font-size:clamp(18px,2.1vw,22px);
  line-height:1.65;
  letter-spacing:-.012em
}
body.eq-px-v2:is(.eq-template-calculator,.eq-template-topic-hub,.eq-template-guide,.eq-template-reference) .eq-search-launch-content h2{
  margin:0 0 18px;
  font-size:clamp(25px,3vw,31px);
  letter-spacing:-.025em
}
body.eq-px-v2:is(.eq-template-calculator,.eq-template-topic-hub,.eq-template-guide,.eq-template-reference) .eq-search-launch-content p{
  margin-top:0
}

/* ---------------------------------------------------------------
   Calculator workspace — visual hierarchy around the frozen runtime
---------------------------------------------------------------- */
body.eq-px-v2.eq-template-calculator .eq-search-launch-content{
  max-width:var(--eq-content-tool);
  margin-inline:auto
}
body.eq-px-v2.eq-template-calculator .eq-search-tool{
  position:relative;
  margin:0;
  padding:clamp(22px,3.8vw,36px);
  border:1px solid var(--eq-border);
  border-radius:var(--eq-radius-lg);
  background:var(--eq-surface);
  box-shadow:0 8px 28px rgba(23,35,38,.06)
}
body.eq-px-v2.eq-template-calculator .eq-search-tool::before{
  content:"Calculation workspace";
  display:block;
  width:max-content;
  max-width:100%;
  margin:-4px 0 18px;
  color:var(--eq-text-secondary);
  font-family:var(--eq-font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.05em;
  text-transform:uppercase
}
body.eq-px-v2.eq-template-calculator .eq-search-tool>h2{
  margin-bottom:24px
}
body.eq-px-v2.eq-template-calculator .eq-search-calc{
  display:grid;
  gap:24px;
  margin:0
}
body.eq-px-v2.eq-template-calculator .eq-search-field-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px 18px
}
body.eq-px-v2.eq-template-calculator .eq-search-field-grid>*,
body.eq-px-v2.eq-template-calculator .eq-search-calc>label{
  min-width:0
}
body.eq-px-v2.eq-template-calculator .eq-search-calc label{
  display:grid;
  gap:7px;
  color:var(--eq-text);
  font-size:13px;
  font-weight:600;
  line-height:1.35
}
body.eq-px-v2.eq-template-calculator .eq-search-calc :is(input,select,textarea){
  width:100%;
  min-height:48px;
  padding:10px 12px;
  border:1px solid var(--eq-border);
  border-radius:var(--eq-radius-sm);
  background:var(--eq-surface);
  color:var(--eq-text);
  font:inherit;
  font-size:16px;
  box-shadow:0 1px 0 rgba(23,35,38,.02);
  transition:border-color 150ms ease-out,box-shadow 150ms ease-out
}
body.eq-px-v2.eq-template-calculator .eq-search-calc :is(input,select,textarea):focus{
  border-color:var(--eq-brand-secondary);
  box-shadow:0 0 0 3px rgba(47,102,112,.13);
  outline:0
}
body.eq-px-v2.eq-template-calculator .eq-search-calc :is(button,input[type="submit"]){
  min-height:48px;
  width:max-content;
  max-width:100%;
  padding:11px 20px;
  border:1px solid var(--eq-brand-primary);
  border-radius:var(--eq-radius-sm);
  background:var(--eq-brand-primary);
  color:var(--eq-text-inverse);
  font:inherit;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:transform 140ms ease-out,background 140ms ease-out
}
body.eq-px-v2.eq-template-calculator .eq-search-calc :is(button,input[type="submit"]):hover{
  transform:translateY(-1px)
}
body.eq-px-v2.eq-template-calculator .eq-search-note{
  margin:0;
  padding:14px 16px;
  border:1px solid var(--eq-border);
  border-radius:var(--eq-radius-sm);
  background:var(--eq-canvas);
  color:var(--eq-text-secondary);
  font-size:13px;
  line-height:1.55
}
body.eq-px-v2.eq-template-calculator .eq-search-calc__result{
  position:relative;
  min-height:118px;
  margin:0;
  padding:22px 24px 22px 28px;
  border:1px solid rgba(47,102,112,.30);
  border-radius:var(--eq-radius-md);
  background:linear-gradient(135deg,var(--eq-surface-alt),var(--eq-surface));
  color:var(--eq-brand-primary);
  box-shadow:none
}
body.eq-px-v2.eq-template-calculator .eq-search-calc__result::before{
  content:"";
  position:absolute;
  inset-block:18px;
  inset-inline-start:0;
  width:4px;
  border-radius:0 4px 4px 0;
  background:var(--eq-accent)
}
body.eq-px-v2.eq-template-calculator .eq-search-calc__result:empty::after{
  content:"Your result will appear here.";
  color:var(--eq-text-secondary);
  font-size:14px
}

/* Supporting calculator evidence and navigation */
body.eq-px-v2.eq-template-calculator .eq-search-sources,
body.eq-px-v2.eq-template-guide .eq-search-sources,
body.eq-px-v2.eq-template-reference .eq-search-sources{
  padding:clamp(20px,3vw,28px);
  border:1px solid var(--eq-border);
  border-radius:var(--eq-radius-md);
  background:var(--eq-surface-alt)
}
body.eq-px-v2.eq-template-calculator .eq-search-sources ul,
body.eq-px-v2.eq-template-guide .eq-search-sources ul,
body.eq-px-v2.eq-template-reference .eq-search-sources ul{
  margin-bottom:0
}
body.eq-px-v2:is(.eq-template-calculator,.eq-template-guide,.eq-template-reference) .eq-search-reviewed{
  margin:0;
  padding:14px 0 0;
  border-top:1px solid var(--eq-border);
  color:var(--eq-text-secondary);
  font-family:var(--eq-font-mono);
  font-size:12px;
  line-height:1.5
}

/* ---------------------------------------------------------------
   Guide / Reference editorial system
---------------------------------------------------------------- */
body.eq-px-v2:is(.eq-template-guide,.eq-template-reference) .eq-search-launch-content{
  max-width:var(--eq-content-readable);
  margin-inline:auto
}
body.eq-px-v2:is(.eq-template-guide,.eq-template-reference) .eq-search-launch-content>section:not(.eq-search-sources):not(.eq-search-related){
  padding:clamp(22px,3vw,30px);
  border:1px solid var(--eq-border);
  border-radius:var(--eq-radius-md);
  background:var(--eq-surface)
}
body.eq-px-v2.eq-template-guide .eq-search-launch-content>section:first-of-type{
  border-inline-start:4px solid var(--eq-brand-secondary)
}
body.eq-px-v2.eq-template-reference .eq-search-launch-content>section:first-of-type{
  background:linear-gradient(180deg,var(--eq-surface),var(--eq-canvas))
}
body.eq-px-v2.eq-template-reference .eq-search-launch-content :is(code,.eq-formula,.eq-technical-value){
  border-radius:4px;
  background:var(--eq-surface-alt);
  color:var(--eq-brand-primary)
}
body.eq-px-v2.eq-template-reference .eq-search-launch-content table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border:1px solid var(--eq-border);
  border-radius:var(--eq-radius-md);
  background:var(--eq-surface)
}
body.eq-px-v2.eq-template-reference .eq-search-launch-content :is(th,td){
  padding:12px 14px;
  border-bottom:1px solid var(--eq-border);
  vertical-align:top;
  text-align:start
}
body.eq-px-v2.eq-template-reference .eq-search-launch-content th{
  background:var(--eq-surface-alt);
  color:var(--eq-brand-primary);
  font-size:13px;
  font-weight:600
}

/* ---------------------------------------------------------------
   Topic hubs — task-first navigation
---------------------------------------------------------------- */
body.eq-px-v2.eq-template-topic-hub .eq-search-launch-content{
  max-width:var(--eq-content-wide);
  margin-inline:auto
}
body.eq-px-v2.eq-template-topic-hub .eq-search-launch-content>section:first-of-type{
  padding:clamp(22px,3vw,34px);
  border:1px solid var(--eq-border);
  border-radius:var(--eq-radius-lg);
  background:var(--eq-surface)
}
body.eq-px-v2.eq-template-topic-hub .eq-search-launch-content>section:first-of-type ul{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:0;
  padding:0;
  list-style:none
}
body.eq-px-v2.eq-template-topic-hub .eq-search-launch-content>section:first-of-type li{
  position:relative;
  max-width:none;
  min-height:94px;
  margin:0;
  padding:18px 18px 18px 50px;
  border:1px solid var(--eq-border);
  border-radius:var(--eq-radius-md);
  background:linear-gradient(180deg,var(--eq-surface),var(--eq-canvas));
  color:var(--eq-text);
  font-size:15px;
  line-height:1.5
}
body.eq-px-v2.eq-template-topic-hub .eq-search-launch-content>section:first-of-type li::before{
  content:"";
  position:absolute;
  inset-inline-start:18px;
  top:21px;
  width:13px;height:13px;
  border:2px solid var(--eq-brand-secondary);
  border-radius:50%;
  box-shadow:5px 5px 0 -3px var(--eq-accent)
}
body.eq-px-v2.eq-template-topic-hub .eq-search-launch-content>section:nth-of-type(2){
  display:grid;
  grid-template-columns:minmax(180px,.42fr) minmax(0,1fr);
  gap:clamp(20px,4vw,48px);
  padding:clamp(22px,3vw,32px);
  border-radius:var(--eq-radius-lg);
  background:var(--eq-surface-alt)
}
body.eq-px-v2.eq-template-topic-hub .eq-search-launch-content>section:nth-of-type(2) h2,
body.eq-px-v2.eq-template-topic-hub .eq-search-launch-content>section:nth-of-type(2) p{
  margin:0
}

/* ---------------------------------------------------------------
   Related next steps — consistent card grid across content types
---------------------------------------------------------------- */
body.eq-px-v2:is(.eq-template-calculator,.eq-template-topic-hub,.eq-template-guide,.eq-template-reference) .eq-search-related{
  padding:0;
  border:0;
  background:transparent
}
body.eq-px-v2:is(.eq-template-calculator,.eq-template-topic-hub,.eq-template-guide,.eq-template-reference) .eq-search-related ul{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:0;
  padding:0;
  list-style:none
}
body.eq-px-v2:is(.eq-template-calculator,.eq-template-topic-hub,.eq-template-guide,.eq-template-reference) .eq-search-related li{
  max-width:none;
  margin:0;
  padding:0
}
body.eq-px-v2:is(.eq-template-calculator,.eq-template-topic-hub,.eq-template-guide,.eq-template-reference) .eq-search-related a{
  position:relative;
  display:flex;
  min-height:82px;
  align-items:flex-start;
  padding:17px 44px 17px 17px;
  border:1px solid var(--eq-border);
  border-radius:var(--eq-radius-md);
  background:var(--eq-surface);
  color:var(--eq-brand-primary);
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  text-decoration:none;
  box-shadow:0 1px 2px rgba(23,35,38,.04);
  transition:transform 150ms ease-out,border-color 150ms ease-out,box-shadow 150ms ease-out
}
body.eq-px-v2:is(.eq-template-calculator,.eq-template-topic-hub,.eq-template-guide,.eq-template-reference) .eq-search-related a::after{
  content:"→";
  position:absolute;
  inset-inline-end:17px;
  top:16px;
  color:var(--eq-accent-strong);
  font-size:17px
}
body.eq-px-v2:is(.eq-template-calculator,.eq-template-topic-hub,.eq-template-guide,.eq-template-reference) .eq-search-related a:hover{
  transform:translateY(-2px);
  border-color:var(--eq-brand-secondary);
  box-shadow:var(--eq-shadow-sm)
}

/* ---------------------------------------------------------------
   Responsive / print / reduced-motion
---------------------------------------------------------------- */
@media(min-width:900px){
  body.eq-px-v2.eq-template-calculator .eq-search-tool{
    display:grid;
    grid-template-columns:minmax(0,1fr);
  }
}
@media(max-width:760px){
  body.eq-px-v2:is(.eq-template-calculator,.eq-template-topic-hub,.eq-template-guide,.eq-template-reference) .eq-page-hero{
    padding:26px 22px;
    border-radius:var(--eq-radius-md)
  }
  body.eq-px-v2:is(.eq-template-calculator,.eq-template-topic-hub,.eq-template-guide,.eq-template-reference) .eq-page-title{
    font-size:clamp(33px,10vw,43px)
  }
  body.eq-px-v2.eq-template-calculator .eq-search-field-grid,
  body.eq-px-v2.eq-template-topic-hub .eq-search-launch-content>section:first-of-type ul,
  body.eq-px-v2:is(.eq-template-calculator,.eq-template-topic-hub,.eq-template-guide,.eq-template-reference) .eq-search-related ul{
    grid-template-columns:1fr
  }
  body.eq-px-v2.eq-template-topic-hub .eq-search-launch-content>section:nth-of-type(2){
    grid-template-columns:1fr;
    gap:8px
  }
}
@media(max-width:480px){
  body.eq-px-v2.eq-template-calculator .eq-search-tool{padding:20px 16px}
  body.eq-px-v2.eq-template-calculator .eq-search-calc__result{padding:20px 18px 20px 22px}
  body.eq-px-v2:is(.eq-template-guide,.eq-template-reference) .eq-search-launch-content>section:not(.eq-search-sources):not(.eq-search-related){padding:20px 17px}
}
@media(prefers-reduced-motion:reduce){
  body.eq-px-v2.eq-template-calculator .eq-search-calc :is(input,select,textarea,button),
  body.eq-px-v2:is(.eq-template-calculator,.eq-template-topic-hub,.eq-template-guide,.eq-template-reference) .eq-search-related a{transition:none}
}
@media print{
  body.eq-px-v2:is(.eq-template-calculator,.eq-template-topic-hub,.eq-template-guide,.eq-template-reference) .eq-page-hero,
  body.eq-px-v2.eq-template-calculator .eq-search-tool,
  body.eq-px-v2:is(.eq-template-guide,.eq-template-reference) .eq-search-launch-content>section:not(.eq-search-related),
  body.eq-px-v2.eq-template-topic-hub .eq-search-launch-content>section:first-of-type{
    background:var(--eq-surface)!important;
    box-shadow:none!important
  }
  body.eq-px-v2:is(.eq-template-calculator,.eq-template-topic-hub,.eq-template-guide,.eq-template-reference) .eq-search-related a{box-shadow:none!important}
}