/*
 * NeuroResin calculator — unified lower-area system
 * Scope: calculator pages only, below the charts.
 * Logic and component markup stay unchanged; this file is the visual source of truth.
 */

body.nr-calculator-page{
  --nr-lower-page:#303438;
  --nr-lower-bg:#222528;
  --nr-lower-bg-soft:#26292c;
  --nr-lower-bg-control:#1b1e20;
  --nr-lower-line:rgba(244,246,247,.085);
  --nr-lower-line-strong:rgba(244,246,247,.14);
  --nr-lower-text:#f0f1ef;
  --nr-lower-muted:rgba(240,241,239,.58);
  --nr-lower-subtle:rgba(240,241,239,.38);
  --nr-lower-accent:#c26a61;
  --nr-lower-radius:18px;
  --nr-lower-card-radius:12px;
  --nr-lower-pad:clamp(18px,2.2vw,28px);
  --nr-lower-gap:14px;

  /* Three neutral levels used across the calculator. */
  --nr-bg:#1a1c1e;
  --nr-bg-2:#1d2022;
  --nr-bg-3:#222528;
  --nr-bg-deep:#151719;
  --nr-surface:#222528;
  --nr-surface-2:#26292c;
  --nr-surface-3:#292c2f;
  --nr-surface-alt:#1f2224;
  --nr-surface-elevated:#292c2f;
  --nr-surface-card:rgba(255,255,255,.035);
  --nr-surface-card-strong:#191b1d;
  --nr-surface-soft:rgba(255,255,255,.028);
  --nr-surface-strong:rgba(255,255,255,.055);
  --nr-surface-control-idle:#1b1e20;
  --nr-control-bg-dark:#1b1e20;
  --nr-gradient-panel:linear-gradient(180deg,#24272a,#222528);
  --nr-border:rgba(244,246,247,.085);
  --nr-border-soft:rgba(244,246,247,.055);
  --nr-border-strong:rgba(244,246,247,.14);
  --nr-line:#34373a;
  --nr-radius-xl:18px;
  --nr-radius-lg:12px;
  --nr-radius-md:12px;
  --nr-radius-sm:10px;
  --nr-shadow:0 18px 42px rgba(0,0,0,.18);
  --nr-shadow-soft:0 10px 24px rgba(0,0,0,.12);
  --nr-shadow-panel:0 12px 30px rgba(0,0,0,.12);

  background-color:var(--nr-lower-page);
  background-image:
    radial-gradient(1100px 520px at 50% -140px,rgba(255,255,255,.08),transparent 70%);
}

body.nr-calculator-page::before{
  opacity:.06;
}

body.nr-calculator-page #root .nr-page-shell{
  gap:var(--nr-lower-gap);
}

body.nr-calculator-page #root .nr-pb-20{
  padding-bottom:14px;
}

/* ── Global calculator surface system ─────────────────────────── */
body.nr-calculator-page #root .nr-page-shell > :is(.nr-card,.nr-glass-card,.nr-layout-mass),
body.nr-calculator-page #root :is(.nr-rec-section.nr-ui-rec,.nr-pigments-guide,.nr-advisor-section,.nr-export-v2,section:has(> .nr-fab)){
  border:1px solid var(--nr-lower-line-strong);
  border-radius:var(--nr-lower-radius);
  background-color:var(--nr-lower-bg);
  background-image:none;
  box-shadow:var(--nr-shadow-soft);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

body.nr-calculator-page #root .nr-page-shell :is(.nr-bg-subtle,.nr-bg-scrim-sm,.nr-bg-scrim-md),
body.nr-calculator-page #root :is(.nr-fab-card,.nr-fab-choice,.nr-fab-metric,.nr-fab-resin-chip){
  border-color:var(--nr-lower-line);
  border-radius:var(--nr-lower-card-radius);
  background-color:var(--nr-lower-bg-control);
  background-image:none;
  box-shadow:none;
}

/* Bilans masy jest płaski: metryki nie mogą tworzyć ciemnego „cienia” pod wynikiem. */
body.nr-calculator-page #root .nr-ui-mass :is(.nr-mass-metric,.nr-mass-pair__col){
  background:transparent;
  background-image:none;
  box-shadow:none;
}

body.nr-calculator-page #root .nr-page-shell :is(input,select,textarea,.nr-fancy-select-trigger,.nr-wood-edge-input){
  border-color:var(--nr-lower-line-strong);
  border-radius:10px;
  background-color:var(--nr-lower-bg-control);
  background-image:none;
  color:var(--nr-lower-text);
  box-shadow:none;
}

body.nr-calculator-page #root .nr-page-shell :is(input,select,textarea,.nr-fancy-select-trigger,.nr-wood-edge-input):focus-visible{
  outline:2px solid rgba(194,106,97,.34);
  outline-offset:1px;
  border-color:rgba(194,106,97,.68);
}

body.nr-calculator-page .nr-site-cookie__box{
  border-color:var(--nr-lower-line-strong);
  border-radius:var(--nr-lower-radius);
  background:var(--nr-lower-bg);
  box-shadow:0 16px 44px rgba(0,0,0,.28);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

body.nr-calculator-page .nr-site-cookie__btn{
  border-radius:10px;
}

body.nr-calculator-page .nr-site-cookie__btn--ghost{
  border-color:var(--nr-lower-line-strong);
  background:var(--nr-lower-bg-control);
}

/* Footer sits directly on the calculator background — no dark separator band. */
body.nr-calculator-page #nr-footer-v4{
  border-top:0;
  background:transparent;
}

/* Decorative separators multiplied visual styles without carrying information. */
body.nr-calculator-page #root .nr-deco-wave-1,
body.nr-calculator-page #root .nr-deco-wave-2{
  display:none!important;
}

/* Shared outer surface: one radius, border, background and spacing language. */
body.nr-calculator-page #root .nr-layout-wood,
body.nr-calculator-page #root section:has(> .nr-fab),
body.nr-calculator-page #root .nr-advisor-section,
body.nr-calculator-page #root .nr-export-v2{
  margin:0;
  border:1px solid var(--nr-lower-line);
  border-radius:var(--nr-lower-radius);
  background:var(--nr-lower-bg);
  background-image:none;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

body.nr-calculator-page #root .nr-layout-wood,
body.nr-calculator-page #root .nr-advisor-section{
  padding:var(--nr-lower-pad);
}

/* ── Wood ─────────────────────────────────────────────────────── */
body.nr-calculator-page #root .nr-layout-wood{
  overflow:visible;
  isolation:auto;
}

body.nr-calculator-page #root .nr-layout-wood .nr-wood-grain-layer{
  display:none;
}

body.nr-calculator-page #root .nr-layout-wood > h3{
  margin:0 0 18px;
  color:var(--nr-lower-text);
  font-size:15px;
  line-height:1.25;
  letter-spacing:-.01em;
  text-transform:none;
}

body.nr-calculator-page #root .nr-layout-wood > h3 svg{
  color:var(--nr-lower-accent);
}

body.nr-calculator-page #root .nr-wood-row{
  display:grid;
  grid-template-columns:minmax(160px,1.15fr) minmax(180px,1fr) minmax(150px,.8fr) minmax(150px,.8fr) minmax(180px,1fr);
  gap:10px;
  align-items:end;
}

body.nr-calculator-page #root .nr-wood-row > *{
  width:auto;
  min-width:0;
}

body.nr-calculator-page #root .nr-layout-wood label{
  margin-bottom:8px;
  color:var(--nr-lower-subtle);
  font-size:9px;
  line-height:1.2;
  letter-spacing:.1em;
}

body.nr-calculator-page #root .nr-layout-wood :is(select,.nr-wood-edge-input,.nr-bg-subtle,.nr-btn-idle,.nr-bg-white){
  min-height:42px;
  border:1px solid var(--nr-lower-line)!important;
  border-radius:10px!important;
  background:var(--nr-lower-bg-control)!important;
  background-image:none!important;
  color:var(--nr-lower-text)!important;
  box-shadow:none!important;
}

body.nr-calculator-page #root .nr-layout-wood button.nr-bg-white{
  background:#e5e1da!important;
  color:#18191a!important;
  border-color:#e5e1da!important;
}

/* ── Resin system intro: compact editorial statement ──────────── */
body.nr-calculator-page #root .nr-layout-resin .nr-resin-motto{
  position:relative;
  display:grid;
  grid-template-columns:minmax(320px,1.08fr) minmax(300px,.92fr);
  align-items:end;
  gap:clamp(42px,7vw,120px);
  margin:2px 0 10px;
  padding:clamp(48px,5vw,72px) 8px clamp(36px,4vw,58px);
  border-top:1px solid var(--nr-lower-line);
  border-bottom:1px solid var(--nr-lower-line);
  color:var(--nr-lower-text);
}

body.nr-calculator-page #root .nr-layout-resin .nr-resin-motto::before{
  content:"01 / SYSTEM";
  position:absolute;
  top:18px;
  left:8px;
  color:var(--nr-lower-accent);
  font-size:9px;
  font-weight:900;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
}

body.nr-calculator-page #root .nr-layout-resin .nr-resin-motto::after{
  content:"";
  position:absolute;
  top:-1px;
  left:8px;
  width:84px;
  height:2px;
  background:var(--nr-lower-accent);
}

body.nr-calculator-page #root .nr-layout-resin .nr-resin-motto__hl{
  max-width:13ch;
  color:var(--nr-lower-text);
  font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  font-size:clamp(48px,5.35vw,82px);
  font-weight:900;
  line-height:.88;
  letter-spacing:-.05em;
  text-transform:uppercase;
  text-wrap:balance;
}

body.nr-calculator-page #root .nr-layout-resin .nr-resin-motto__copy{
  position:relative;
  max-width:46ch;
  padding:32px 0 2px;
  border-top:1px solid rgba(194,106,97,.5);
  color:rgba(239,237,232,.68);
  font-size:clamp(14px,1.2vw,17px);
  font-weight:580;
  line-height:1.55;
  letter-spacing:-.01em;
}

body.nr-calculator-page #root .nr-layout-resin .nr-resin-motto__copy::before{
  position:absolute;
  top:12px;
  left:0;
  color:var(--nr-lower-accent);
  font-size:9px;
  font-weight:900;
  line-height:1;
  letter-spacing:.14em;
  text-transform:uppercase;
}

html[lang="pl"] body.nr-calculator-page #root .nr-layout-resin .nr-resin-motto__copy::before{
  content:"Grubość / typ projektu / warunki";
}

html[lang="en"] body.nr-calculator-page #root .nr-layout-resin .nr-resin-motto__copy::before{
  content:"Pour depth / project type / conditions";
}

@media(max-width:940px){
  body.nr-calculator-page #root .nr-layout-resin .nr-resin-motto{
    grid-template-columns:1fr;
    gap:30px;
  }
  body.nr-calculator-page #root .nr-layout-resin .nr-resin-motto__copy{
    max-width:58ch;
  }
}

@media(max-width:620px){
  body.nr-calculator-page #root .nr-layout-resin .nr-resin-motto{
    gap:20px;
    padding:46px 0 28px;
  }
  body.nr-calculator-page #root .nr-layout-resin .nr-resin-motto__copy{
    padding:26px 0 0;
  }
}

/* The recommendation section intentionally inherits its complete appearance
   from assets/site.css, matching the version tracked in origin/main. */
body.nr-calculator-page #root .nr-finish-sheen-row{
  margin:0;
  gap:6px;
}

body.nr-calculator-page #root .nr-finish-sheen-label{
  color:var(--nr-lower-subtle);
  font-size:9px;
}

body.nr-calculator-page #root .nr-finish-sheen-btn{
  height:28px;
  min-height:28px;
  padding:0 10px;
  border:1px solid var(--nr-lower-line);
  border-radius:999px;
  background:transparent;
  color:var(--nr-lower-muted);
  font-size:9px;
}

body.nr-calculator-page #root .nr-finish-sheen-btn.is-active{
  border-color:#e5e1da;
  background:#e5e1da;
  color:#18191a;
}

body.nr-calculator-page #root .nr-finish-natural-kicker--top{
  position:static;
  margin:0 0 7px;
  color:var(--nr-lower-accent);
  font-size:8px;
}

/* Mobile: „Dobierz żywicę” i „Dobierz wykończenie” przewijają karty tak samo
   jak Barwniki — 78% szerokości, widoczny początek następnej i twardy snap. */
@media(max-width:820px){
  body.nr-calculator-page #root .nr-rec-section.nr-ui-rec{
    padding:14px;
    border:1px solid var(--nr-lower-line-strong);
    border-radius:var(--nr-lower-radius);
    background-color:var(--nr-lower-bg);
    background-image:none;
    box-shadow:var(--nr-shadow-soft);
    overflow:hidden;
  }

  body.nr-calculator-page #root .nr-rec-section.nr-ui-rec .nr-rec-top{
    padding-inline:2px;
  }

  body.nr-calculator-page #root .nr-rec-section.nr-ui-rec .nr-rec-results{
    min-width:0;
    margin-top:14px;
    overflow:hidden;
  }

  body.nr-calculator-page #root .nr-rec-section.nr-ui-rec .nr-rec-results::after{
    display:block;
  }

  body.nr-calculator-page #root .nr-rec-section.nr-ui-rec .nr-rec-podium{
    display:flex;
    grid-template-columns:none;
    width:100%;
    gap:10px;
    margin:0;
    padding:2px 54px 10px 2px;
    overflow-x:auto;
    overflow-y:visible;
    scroll-padding-inline:2px;
    scroll-snap-type:x mandatory;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  body.nr-calculator-page #root .nr-rec-section.nr-ui-rec .nr-rec-podium .nr-finish-col,
  body.nr-calculator-page #root .nr-rec-section.nr-ui-rec .nr-rec-podium > .nr-rec-card{
    flex:0 0 78%;
    width:78%;
    min-width:78%;
    max-width:78%;
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }

  body.nr-calculator-page #root .nr-rec-section.nr-ui-rec .nr-rec-podium .nr-finish-col + .nr-finish-col{
    margin-top:0;
    padding-top:0;
    border-top:0;
  }

  body.nr-calculator-page #root .nr-rec-section.nr-ui-rec .nr-rec-podium .nr-rec-card{
    width:100%;
    height:100%;
    padding:12px;
    border:1px solid var(--nr-lower-line);
    border-radius:var(--nr-lower-card-radius);
    background:var(--nr-lower-bg-control);
    box-shadow:none;
    transform:none;
  }

  body.nr-calculator-page #root .nr-rec-section.nr-ui-rec .nr-rec-podium .nr-rec-card:hover{
    border-color:var(--nr-lower-line);
    background:var(--nr-lower-bg-control);
    box-shadow:none;
    transform:none;
  }

  body.nr-calculator-page #root .nr-rec-section.nr-ui-rec .nr-finish-tips{
    margin-top:2px;
    padding:16px 2px 0;
    border-top:1px solid var(--nr-lower-line);
  }
}

/* ── Flower assistant ──────────────────────────────────────────── */
body.nr-calculator-page #root section:has(> .nr-fab){
  padding:0;
  overflow:hidden;
}

body.nr-calculator-page #root .nr-fab{
  gap:10px;
  padding:10px;
}

body.nr-calculator-page #root .nr-fab-card{
  gap:12px;
  padding:18px;
  border:1px solid var(--nr-lower-line);
  border-radius:var(--nr-lower-card-radius);
  background:var(--nr-lower-bg-soft);
  color:var(--nr-lower-text);
  box-shadow:none;
}

body.nr-calculator-page #root .nr-fab-hero{
  padding:20px;
  border:0;
  background:transparent;
}

body.nr-calculator-page #root .nr-fab-hero-lede{
  gap:9px;
}

body.nr-calculator-page #root .nr-fab-kicker{
  color:var(--nr-lower-accent);
  font-size:9px;
}

body.nr-calculator-page #root .nr-fab-brand{
  color:var(--nr-lower-text);
  font-size:13px;
}

body.nr-calculator-page #root .nr-fab-choice{
  max-width:none;
  grid-template-columns:22px minmax(0,1fr);
  padding:15px;
  border:1px solid var(--nr-lower-line);
  border-radius:11px;
  background:var(--nr-lower-bg-control);
}

body.nr-calculator-page #root .nr-fab-choice:hover,
body.nr-calculator-page #root .nr-fab-choice.is-active{
  border-color:rgba(194,106,97,.42);
  background:rgba(194,106,97,.06);
}

body.nr-calculator-page #root .nr-fab-choice-text strong{
  font-size:16px;
}

body.nr-calculator-page #root .nr-fab-choice-text span,
body.nr-calculator-page #root .nr-fab-copy{
  color:var(--nr-lower-muted);
  font-size:11px;
}

body.nr-calculator-page #root .nr-fab-title,
body.nr-calculator-page #root .nr-fab-step-title,
body.nr-calculator-page #root .nr-fab-resin-chip-name{
  color:var(--nr-lower-text);
}

body.nr-calculator-page #root .nr-fab-tag,
body.nr-calculator-page #root .nr-fab-label,
body.nr-calculator-page #root .nr-fab-metric-k,
body.nr-calculator-page #root .nr-fab-step-k{
  color:var(--nr-lower-subtle);
}

body.nr-calculator-page #root .nr-fab-metric,
body.nr-calculator-page #root .nr-fab-resin-chip{
  border-color:var(--nr-lower-line);
  border-radius:10px;
  background:var(--nr-lower-bg-control);
}

body.nr-calculator-page #root .nr-fab-more{
  border:1px solid var(--nr-lower-line);
  background:transparent;
  color:var(--nr-lower-muted);
}

/* The pigment guide also inherits its complete typography and component
   styling from assets/site.css, matching origin/main. */
/* ── Project advisor ───────────────────────────────────────────── */
body.nr-calculator-page #root .nr-advisor-header{
  max-width:680px;
  margin:0;
  padding:0 0 18px;
}

body.nr-calculator-page #root .nr-advisor-eyebrow{
  margin-bottom:10px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--nr-lower-accent);
  font-size:9px;
}

body.nr-calculator-page #root .nr-advisor-title{
  color:var(--nr-lower-text);
  font-size:22px;
}

body.nr-calculator-page #root .nr-advisor-lead{
  color:var(--nr-lower-muted);
  font-size:12px;
}

body.nr-calculator-page #root .nr-advisor-block,
body.nr-calculator-page #root .nr-advisor-section > .nr-advisor-block:first-of-type{
  padding:18px 0;
  border-top:1px solid var(--nr-lower-line);
  border-bottom:0;
}

body.nr-calculator-page #root .nr-advisor-block:last-of-type{
  padding-bottom:0;
}

body.nr-calculator-page #root .nr-advisor-block__head{
  margin-bottom:8px;
  gap:10px;
}

body.nr-calculator-page #root .nr-advisor-block__index{
  color:var(--nr-lower-accent);
  font-size:10px;
}

body.nr-calculator-page #root .nr-advisor-block__title{
  color:var(--nr-lower-text);
  font-size:16px;
}

body.nr-calculator-page #root .nr-advisor-paragraph{
  color:var(--nr-lower-muted);
  font-size:13px;
  line-height:1.55;
}

body.nr-calculator-page #root .nr-advisor-details__summary{
  border-color:var(--nr-lower-line);
  background:transparent;
  color:var(--nr-lower-muted);
}

/* ── Export: same card language, restrained editorial text ────── */
body.nr-calculator-page #root .nr-export-v2{
  min-height:0;
  padding:var(--nr-lower-pad);
  gap:24px;
}

body.nr-calculator-page #root .nr-export-v2__label{
  color:var(--nr-lower-subtle);
  font-size:9px;
}

body.nr-calculator-page #root .nr-export-v2__label--top{
  margin-bottom:-10px;
  color:var(--nr-lower-accent);
}

body.nr-calculator-page #root .nr-export-v2__statement{
  max-width:30ch;
  color:var(--nr-lower-muted);
  font-size:clamp(23px,2.5vw,36px);
  line-height:1.2;
}

body.nr-calculator-page #root .nr-export-v2__action{
  gap:7px;
  color:var(--nr-lower-text);
}

body.nr-calculator-page #root .nr-export-v2__arrow{
  width:30px;
  height:30px;
  border-width:1px;
}

body.nr-calculator-page #root .nr-export-v2__bottom{
  grid-template-columns:120px minmax(0,1fr);
  max-width:760px;
  gap:20px;
  padding-top:18px;
  border-top:1px solid var(--nr-lower-line);
}

body.nr-calculator-page #root .nr-export-v2__copy{
  color:var(--nr-lower-muted);
  font-size:12px;
}

/* ── SEO links use the same width/radius as calculator bento ──── */
body.nr-calculator-page .nr-home-seo-links{
  margin-top:14px;
  padding:var(--nr-lower-pad);
  border:1px solid var(--nr-lower-line);
  border-radius:var(--nr-lower-radius);
  background:var(--nr-lower-bg);
  box-shadow:none;
}

body.nr-calculator-page .nr-home-seo-links > div{
  margin-bottom:18px;
}

body.nr-calculator-page .nr-home-seo-links h2{
  margin-bottom:7px;
  font-size:22px;
}

body.nr-calculator-page .nr-home-seo-links p:not(.nr-home-seo-kicker){
  max-width:650px;
  font-size:12px;
  line-height:1.5;
}

body.nr-calculator-page .nr-home-seo-links nav{
  gap:8px;
}

body.nr-calculator-page .nr-home-seo-links a{
  min-height:58px;
  border:1px solid var(--nr-lower-line);
  border-radius:11px;
  background:var(--nr-lower-bg-soft);
}

@media(max-width:1100px){
  body.nr-calculator-page #root .nr-wood-row{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:760px){
  body.nr-calculator-page{
    --nr-lower-radius:16px;
    --nr-lower-card-radius:12px;
    --nr-lower-pad:14px;
    --nr-lower-gap:10px;
  }
  body.nr-calculator-page #root .nr-wood-row{
    grid-template-columns:1fr;
  }
  body.nr-calculator-page #root .nr-fab{
    padding:6px;
  }
  body.nr-calculator-page #root .nr-fab-card,
  body.nr-calculator-page #root .nr-fab-hero{
    padding:14px;
  }
  body.nr-calculator-page #root .nr-export-v2__bottom{
    grid-template-columns:1fr;
    gap:8px;
  }
}