/* kalkulator-narzedzi.pl — globalny arkusz stylów (mobile-first) */
:root{
  --paper:#FAF6EE; --card:#FFFFFF; --ink:#26211B; --muted:#75695A;
  --brand:#C8501A; --brand-deep:#9C3B0F; --brand-soft:#F8E3D6;
  --ok:#1F6E54; --ok-soft:#E2F0E9; --warn:#8A6D1C; --warn-soft:#F7EFD8;
  --line:#E7DCCB; --grid:rgba(200,80,26,.07);
  --r:14px; --shadow:0 10px 26px rgba(38,33,27,.09);
  --max:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 1rem/1.62 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-text-size-adjust:100%}
img,svg{max-width:100%}
a{color:var(--brand-deep);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--brand)}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.5rem 1rem;z-index:99}
.skip:focus{left:8px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:clamp(14px,3.5vw,28px)}
h1,h2,h3,h4,h5,h6{line-height:1.22;letter-spacing:-.01em;margin:1.5em 0 .55em;text-wrap:balance}
h1{font-size:clamp(1.65rem,5.4vw,2.45rem);font-weight:800;margin-top:.4em}
h2{font-size:clamp(1.3rem,3.6vw,1.7rem);font-weight:750;position:relative;padding-left:.85rem}
h2::before{content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:5px;border-radius:4px;background:var(--brand)}
h3{font-size:clamp(1.08rem,2.8vw,1.25rem);font-weight:700}
h4{font-size:1.05rem}h5{font-size:1rem}h6{font-size:.95rem;color:var(--muted)}
p,li{max-width:74ch}
.lead{font-size:clamp(1.02rem,2.6vw,1.16rem);color:#3d362d;margin-top:0}
.muted{color:var(--muted)}
.small{font-size:.88rem}
hr{border:0;border-top:1px solid var(--line);margin:2rem 0}
code{background:#f1ebdf;padding:.1em .35em;border-radius:6px;font-size:.92em}

/* Header */
.site-header{background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:40}
.nav{display:flex;align-items:center;gap:1rem;min-height:60px}
.logo{display:flex;align-items:center;gap:.55rem;font-weight:800;font-size:1.06rem;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.logo .dot{width:30px;height:30px;border-radius:9px;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:1rem;box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}
.nav-toggle{display:none}
.burger{margin-left:auto;width:42px;height:42px;border:1px solid var(--line);border-radius:10px;display:grid;place-items:center;cursor:pointer;background:#fff}
.burger span,.burger span::before,.burger span::after{content:"";display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;position:relative;transition:.2s}
.burger span::before{position:absolute;top:-6px}.burger span::after{position:absolute;top:6px}
.menu{display:none;list-style:none;margin:0;padding:.4rem 0 1rem;width:100%}
.menu li a{display:block;padding:.6rem .4rem;text-decoration:none;color:var(--ink);font-weight:600;border-radius:8px}
.menu li a:hover{background:var(--brand-soft)}
.menu li a.cta{background:var(--brand);color:#fff;text-align:center;margin-top:.3rem}
.nav-toggle:checked ~ .menu{display:block}
.nav-toggle:checked ~ .burger span{background:transparent}
.nav-toggle:checked ~ .burger span::before{top:0;transform:rotate(45deg)}
.nav-toggle:checked ~ .burger span::after{top:0;transform:rotate(-45deg)}
@media(min-width:880px){
  .burger{display:none}
  .menu{display:flex;width:auto;margin-left:auto;padding:0;gap:.2rem;align-items:center}
  .menu li a{padding:.5rem .7rem;font-weight:600;font-size:.95rem}
  .menu li a.cta{margin:0 0 0 .4rem;padding:.5rem .9rem;border-radius:10px}
  .nav{flex-wrap:nowrap}
}
@media(max-width:879px){.nav{flex-wrap:wrap}}

/* Breadcrumb */
.crumbs{font-size:.85rem;color:var(--muted);padding:.7rem 0 0}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.crumbs li+li::before{content:"›";margin-right:.35rem;color:#b9ad9b}
.crumbs a{color:var(--muted)}

/* Layout */
.layout{display:grid;gap:clamp(1.4rem,3vw,2.2rem);padding-block:.4rem 3rem}
@media(min-width:1080px){.layout{grid-template-columns:minmax(0,1fr) 300px}}
.side{display:grid;gap:1.2rem;align-content:start}
@media(min-width:1080px){.side{position:sticky;top:16px}}
.side-box{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.1rem}
.side-box h2{font-size:1rem;margin:.1rem 0 .6rem;padding-left:.7rem}
.side-box ul{list-style:none;margin:0;padding:0}
.side-box li{border-top:1px dashed var(--line)}
.side-box li:first-child{border-top:0}
.side-box li a{display:block;padding:.5rem 0;text-decoration:none;font-weight:600;font-size:.93rem}

/* Hero / notebook grid signature */
.hero{background:
  linear-gradient(180deg,rgba(250,246,238,0) 0,var(--paper) 92%),
  repeating-linear-gradient(0deg,var(--grid) 0 1px,transparent 1px 24px),
  repeating-linear-gradient(90deg,var(--grid) 0 1px,transparent 1px 24px),
  #FDF9F2}
.badges{display:flex;flex-wrap:wrap;gap:.45rem;margin:.6rem 0 1rem;padding:0;list-style:none}
.badges li{font-size:.78rem;font-weight:700;color:var(--brand-deep);background:var(--brand-soft);border:1px solid #efcdb8;border-radius:999px;padding:.22rem .65rem}

/* Tool card */
.tool-card{background:
  repeating-linear-gradient(0deg,rgba(200,80,26,.045) 0 1px,transparent 1px 24px),
  repeating-linear-gradient(90deg,rgba(200,80,26,.045) 0 1px,transparent 1px 24px),
  var(--card);
  border:1px solid var(--line);border-top:5px solid var(--brand);
  border-radius:var(--r);box-shadow:var(--shadow);padding:clamp(1rem,3vw,1.6rem);margin:1.1rem 0 1.4rem}
.tool-card h2:first-child{margin-top:0}
.fields{display:grid;gap:.85rem;grid-template-columns:1fr}
@media(min-width:620px){.fields{grid-template-columns:1fr 1fr}.fields .full{grid-column:1/-1}}
.fld label{display:block;font-weight:700;font-size:.88rem;margin-bottom:.28rem}
.fld .hint{font-weight:400;color:var(--muted);font-size:.8rem}
input[type=text],input[type=number],input[type=date],input[type=time],select,textarea{
  width:100%;font:inherit;font-size:1.02rem;padding:.66rem .75rem;border:1.5px solid #d9cdb9;border-radius:10px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.btn{display:inline-block;font:inherit;font-weight:750;border:0;border-radius:11px;cursor:pointer;
  background:var(--brand);color:#fff;padding:.78rem 1.35rem;box-shadow:inset 0 -2px 0 rgba(0,0,0,.16);text-decoration:none}
.btn:hover{background:var(--brand-deep)}
.btn.ghost{background:#fff;color:var(--brand-deep);border:1.5px solid var(--brand);box-shadow:none}
.btn.ghost:hover{background:var(--brand-soft)}
.btn.sm{padding:.45rem .85rem;font-size:.88rem;border-radius:9px}
.btn:focus-visible{outline:3px solid #f2b48f;outline-offset:2px}
.actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}

/* Segmented control (tryby) */
.seg{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1rem}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;inset:0}
.seg span{display:inline-block;padding:.42rem .8rem;border:1.5px solid #d9cdb9;border-radius:999px;font-size:.88rem;font-weight:700;background:#fff;color:#5d5345}
.seg input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.seg input:focus-visible+span{outline:3px solid #f2b48f}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0}
.chips button{font:inherit;font-size:.82rem;font-weight:700;padding:.28rem .65rem;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--brand-deep);cursor:pointer}
.chips button:hover{background:var(--brand-soft)}

/* Results */
.result{display:none;margin-top:1.2rem;background:var(--ok-soft);border:1px solid #c3ddd0;border-radius:12px;padding:1rem 1.1rem}
.result.on{display:block}
.result .big{font-size:clamp(1.35rem,5vw,1.9rem);font-weight:800;color:var(--ok);font-variant-numeric:tabular-nums;margin:.1rem 0 .5rem;line-height:1.25}
.result h3{margin:1.1rem 0 .4rem;font-size:1.02rem}
.result h3:first-of-type{margin-top:.8rem}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:.3rem .9rem;margin:.4rem 0;font-variant-numeric:tabular-nums}
.kv b{font-weight:750}
@media(max-width:480px){.kv{grid-template-columns:1fr};.kv span{color:var(--muted);font-size:.85rem}}
.err{display:none;margin-top:.9rem;background:#FBE9E4;border:1px solid #ecc2b4;color:#8c2f10;border-radius:10px;padding:.7rem .9rem;font-weight:600}
.err.on{display:block}
.note{background:var(--warn-soft);border:1px solid #e5d6a8;border-radius:10px;padding:.7rem .9rem;font-size:.92rem;margin:1rem 0}
.tip{border-left:4px solid var(--ok);background:#fff;border-radius:0 10px 10px 0;padding:.6rem .9rem;margin:.9rem 0;font-size:.95rem}

/* Tables */
.tblwrap{overflow-x:auto;margin:1rem 0}
table.tbl{border-collapse:collapse;width:100%;font-size:.94rem;background:#fff;border-radius:10px;overflow:hidden}
.tbl th,.tbl td{border:1px solid var(--line);padding:.5rem .65rem;text-align:left;vertical-align:top}
.tbl th{background:#F4EBDC;font-weight:750}
.tbl tr:nth-child(even) td{background:#FCF9F3}
.tbl td{font-variant-numeric:tabular-nums}

/* FAQ */
details.faq{background:#fff;border:1px solid var(--line);border-radius:11px;margin:.55rem 0;padding:.2rem .95rem}
details.faq summary{cursor:pointer;font-weight:700;padding:.6rem 0;list-style:none;position:relative;padding-right:1.6rem}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";position:absolute;right:.1rem;top:.45rem;font-size:1.25rem;color:var(--brand)}
details.faq[open] summary::after{content:"–"}
details.faq div{padding:.1rem 0 .85rem;color:#433b30}

/* Tool grid (lista narzędzi) */
.tools{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));margin:1rem 0;padding:0;list-style:none}
.tcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.85rem .95rem;display:block;text-decoration:none;color:var(--ink);transition:transform .12s,box-shadow .12s}
.tcard:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#e0bfa6}
.tcard .ico{font-size:1.35rem}
.tcard b{display:block;margin:.25rem 0 .15rem;color:var(--brand-deep)}
.tcard small{color:var(--muted);line-height:1.45;display:block}
#filtr{margin:.4rem 0 .2rem}

/* Related */
.rel{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));padding:0;list-style:none}
.rel a{display:block;background:#fff;border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:10px;padding:.7rem .9rem;text-decoration:none;color:var(--ink)}
.rel a b{color:var(--brand-deep)}
.rel a small{color:var(--muted);display:block;margin-top:.15rem}
.rel a:hover{background:var(--brand-soft)}

/* History */
.hist{list-style:none;margin:.4rem 0 .8rem;padding:0}
.hist li{background:#fff;border:1px dashed var(--line);border-radius:9px;padding:.5rem .75rem;margin:.4rem 0;font-size:.92rem}
.hist time{display:block;font-size:.74rem;color:var(--muted)}

/* Ads */
.ad-slot{margin:1.6rem 0;min-height:110px;border:1.5px dashed #d9c8ae;border-radius:11px;display:grid;place-items:center;color:#a3927a;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;background:repeating-linear-gradient(45deg,#fdfaf4 0 12px,#faf5ea 12px 24px)}
.ad-slot.tall{min-height:280px}

/* Steps */
ol.steps{counter-reset:s;list-style:none;padding:0;margin:1rem 0}
ol.steps li{counter-increment:s;position:relative;padding:.15rem 0 .9rem 2.4rem}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:.1rem;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;display:grid;place-items:center;font-size:.9rem}

/* Footer */
.site-footer{background:#221C15;color:#E8DFD2;margin-top:2rem}
.site-footer .cols{display:grid;gap:1.6rem;grid-template-columns:1fr;padding:2.2rem 0 1.2rem}
@media(min-width:720px){.site-footer .cols{grid-template-columns:repeat(4,1fr)}}
.site-footer h2{font-size:.95rem;color:#fff;margin:.2rem 0 .7rem;padding-left:.7rem}
.site-footer h2::before{background:var(--brand)}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer a{color:#E8DFD2;text-decoration:none;font-size:.92rem;display:inline-block;padding:.18rem 0}
.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer .legal{border-top:1px solid #3a3327;padding:1rem 0 1.4rem;font-size:.82rem;color:#b4a994}

/* Cookie bar / toast */
#ckbar{position:fixed;left:12px;right:12px;bottom:12px;z-index:90;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:.85rem 1rem;display:flex;gap:.9rem;align-items:center;flex-wrap:wrap}
#ckbar p{margin:0;font-size:.85rem;flex:1 1 260px}
#toast{position:fixed;left:50%;bottom:18px;transform:translate(-50%,140%);background:var(--ink);color:#fff;padding:.6rem 1.1rem;border-radius:999px;font-size:.9rem;transition:transform .25s;z-index:99;max-width:92vw}
#toast.on{transform:translate(-50%,0)}

/* 404 */
.err404{text-align:center;padding:3rem 0 1rem}
.err404 .code{font-size:clamp(4rem,18vw,7rem);font-weight:800;color:var(--brand);line-height:1;font-variant-numeric:tabular-nums}

/* Calculator keypad (Casio) */
.pad{display:grid;grid-template-columns:repeat(5,1fr);gap:.45rem;margin-top:.8rem}
.pad button{font:inherit;font-weight:700;font-size:1.02rem;padding:.7rem 0;border-radius:10px;border:1px solid #d9cdb9;background:#fff;cursor:pointer}
.pad button:active{transform:translateY(1px)}
.pad .op{background:var(--brand-soft);color:var(--brand-deep)}
.pad .eq{background:var(--brand);color:#fff;border-color:var(--brand)}
.pad .fn{font-size:.86rem;background:#F4EBDC}
#disp{width:100%;font-size:1.5rem;text-align:right;padding:.7rem .8rem;border:1.5px solid #d9cdb9;border-radius:10px;background:#FCF9F3;font-variant-numeric:tabular-nums;min-height:3.2rem;overflow-x:auto;white-space:nowrap}

/* Matrix grids */
.mgrid{display:inline-grid;gap:.35rem;margin:.4rem 0}
.mgrid input{width:64px;text-align:center;padding:.45rem .3rem}
.mwrap{display:flex;gap:1.4rem;flex-wrap:wrap;align-items:flex-start}
table.mat{border-collapse:collapse;margin:.4rem 0}
table.mat td{border:0;padding:.25rem .6rem;text-align:right;font-variant-numeric:tabular-nums;background:#fff}
table.mat{border-left:2px solid var(--ink);border-right:2px solid var(--ink);border-radius:4px}

@media print{.site-header,.site-footer,.ad-slot,.side,#ckbar,#toast,.crumbs,.actions{display:none!important}.layout{display:block}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* wyświetlacz kalkulatora naukowego */
.disp{width:100%;font:700 1.25rem/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
 background:#1d2a23;color:#d9f4e6;border:2px solid #16201b;border-radius:12px 12px 4px 4px;
 padding:.8rem .9rem;margin:.4rem 0 .6rem;text-align:right;letter-spacing:.02em}
.disp:focus{outline:3px solid #f2b48f;outline-offset:2px}