/* ==================================================================
   ilekostki.pl - arkusz glowny

   Skala typograficzna i skala odstepow sa tokenami. Zadnych wartosci
   dobieranych na oko (14,5 px, -4 px) w regulach - jesli czegos brakuje
   w skali, dokladasz stopien tutaj, a nie wyjatek na dole pliku.
================================================================== */

:root{
  /* --- powierzchnie --- */
  --stone:#E7E9EC;
  --paper:#FFFFFF;
  --edge:#C9CDD3;
  --edge-soft:#DDE0E4;

  /* --- tekst: trzy tony na jasnym, dwa na ciemnym --- */
  --ink:#131A21;          /* naglowki, liczby, UI */
  --ink-body:#2C3640;     /* akapity - o wlos lzejszy, dla dlugich tekstow */
  --ink-soft:#5A6470;     /* podpisy, hinty, etykiety */
  --on-dark:#D6DCE3;
  --on-dark-dim:#9AA4AE;

  /* --- akcenty --- */
  --line:#2E4FE8;
  --line-hover:#1E3BC4;
  --line-soft:#E4E9FD;
  --line-light:#7C93F4;   /* akcent na ciemnym tle */

  /* --- materialy: przekroj i diagramy --- */
  --sand:#D9A441;
  --gravel:#6F757C;   /* przyciemnione, zeby bialy tekst na warstwie kruszywa mial 4,5:1 */
  --kostka:#B9BEC6;
  --grunt:#6B5B49;

  /* --- typografia --- */
  --font-display:"Bricolage Grotesque",Georgia,serif;
  --font-body:"Instrument Sans",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;

  --fs-3xs:10px;   /* mikroetykiety w przekroju i diagramach */
  --fs-2xs:11px;   /* wersaliki mono, etykiety */
  --fs-xs:13px;    /* hint, drobny druk */
  --fs-sm:14px;    /* UI drugorzedne */
  --fs-md:16px;    /* tekst podstawowy */
  --fs-lg:18px;    /* lead, h3, liczby w wynikach */
  --fs-xl:22px;    /* sumy */
  --fs-2xl:26px;   /* glowna liczba wyniku */

  /* --- odstepy --- */
  --s-1:4px;
  --s-2:8px;
  --s-3:12px;
  --s-4:16px;
  --s-5:24px;
  --s-6:32px;
  --s-7:48px;

  --radius:4px;
  --gap:clamp(16px, 3vw, 28px);
  --tap:44px;      /* minimalny cel dotykowy */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

/* Atrybut hidden musi wygrac z regulami typu label.field{display:block},
   ktore inaczej nadpisuja regule [hidden] z arkusza przegladarki. */
[hidden]{display:none!important}

body{
  background:var(--stone);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-md);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  display:flex;flex-direction:column;min-height:100vh;
}
main{flex:1}

.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(16px,4vw,32px)}
.wrap-narrow{max-width:780px;margin:0 auto;padding:0 clamp(16px,4vw,32px)}

a{color:var(--line)}

.skip{
  position:absolute;left:-9999px;top:0;background:var(--line);color:#fff;
  padding:var(--s-3) var(--s-4);z-index:99;text-decoration:none;
}
.skip:focus{left:0}

/* ---------- naglowek ---------- */
.masthead{border-bottom:1px solid var(--edge);background:var(--paper);position:relative;z-index:20}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;min-height:56px;gap:var(--s-4)}
.brand{
  font-family:var(--font-display);
  font-weight:800;font-size:var(--fs-lg);letter-spacing:-.02em;text-decoration:none;color:var(--ink);
  white-space:nowrap;display:flex;align-items:center;min-height:var(--tap);
}
.brand span{color:var(--line)}
.masthead nav{display:flex;gap:var(--s-5);justify-content:flex-end}
.masthead nav a{
  font-size:var(--fs-sm);color:var(--ink-soft);text-decoration:none;
  display:flex;align-items:center;min-height:var(--tap);
}
.masthead nav a:hover,.masthead nav a[aria-current]{color:var(--line)}

/* ---------- okruszki ---------- */
.crumbs{padding:var(--s-3) 0 0;font-size:var(--fs-xs);color:var(--ink-soft)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s-1) 6px;align-items:center}
.crumbs a{color:var(--ink-soft);text-decoration:none;padding:var(--s-1) 0}
.crumbs a:hover{color:var(--line);text-decoration:underline}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--edge)}

/* ---------- hero ---------- */
.hero{padding:clamp(24px,5vw,48px) 0 clamp(16px,3vw,24px)}
.eyebrow{
  font-family:var(--font-mono);
  font-size:var(--fs-2xs);letter-spacing:.16em;text-transform:uppercase;color:var(--line);
  display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-3);
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--edge);max-width:180px}
h1{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(31px,5.4vw,56px);
  line-height:.99;
  letter-spacing:-.035em;
  max-width:18ch;
}
h1 em{font-style:normal;color:var(--line)}
.lede{margin-top:var(--s-4);max-width:56ch;color:var(--ink-soft);font-size:clamp(16px,1.6vw,18px)}

/* ---------- siatka narzedzia ---------- */
.tool{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:var(--gap);
  align-items:start;
}
.out > .panel + .panel{margin-top:var(--gap)}
.tool-wrap{padding-bottom:clamp(32px,5vw,48px)}

/* Bez tego element siatki nie zejdzie ponizej min-content swojej zawartosci
   i szeroka tabela rozpycha strone zamiast przewijac sie w swoim kontenerze. */
.tool > *,.tool-extras > *,.out > *{min-width:0}

/* Panele pomocnicze ida pod narzedzie na pelna szerokosc.
   Wczesniej wisialy w prawej kolumnie i zostawialy 900 px pustki po lewej. */
.tool-extras{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.extras-head{
  margin:clamp(24px,4vw,32px) 0 var(--s-3);
  font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);
}

.panel{
  background:var(--paper);
  border:1px solid var(--edge);
  border-radius:var(--radius);
  padding:clamp(16px,2.6vw,24px);
}

/* Panel z odpowiedzia - to po nia ktos przyszedl. */
.panel-result{border-left:3px solid var(--line)}
.panel-result > .panel-title{color:var(--line)}

/* Panele pomocnicze - bez bieli, cofaja sie na tlo strony. */
.panel-sub{background:transparent;border-color:var(--edge-soft)}
.panel-sub .btn{background:var(--paper)}

.panel-title{
  font-family:var(--font-mono);
  font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  padding-bottom:var(--s-3);margin-bottom:var(--s-4);border-bottom:1px solid var(--edge);
}

fieldset{border:0;margin:0 0 var(--s-5);min-width:0}
fieldset:last-of-type{margin-bottom:0}
legend{font-weight:600;font-size:var(--fs-sm);margin-bottom:var(--s-2)}

.row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s-3)}
@media (max-width:379px){ .row,.row-3{grid-template-columns:1fr} }

label.field{display:block;margin-bottom:var(--s-3)}
label.field > span{display:block;font-size:var(--fs-xs);color:var(--ink-soft);margin-bottom:var(--s-1)}
input[type=number],input[type=text],select,textarea{
  width:100%;
  font-family:var(--font-mono);
  font-size:var(--fs-md);   /* 16 px to minimum, ponizej iOS zoomuje pole przy focusie */
  color:var(--ink);
  background:var(--stone);
  border:1px solid var(--edge);
  border-radius:var(--radius);
  padding:var(--s-2) var(--s-3);
  min-height:var(--tap);
  appearance:none;
}
select{font-family:var(--font-body)}
textarea{min-height:0;line-height:1.5}
input:focus-visible,select:focus-visible,button:focus-visible,summary:focus-visible,
a:focus-visible,textarea:focus-visible{
  outline:2px solid var(--line);outline-offset:2px;
}
input:hover,select:hover{border-color:var(--gravel)}
input[readonly]{color:var(--ink-soft);background:#F1F3F5}

.check{
  display:flex;align-items:center;gap:var(--s-2);font-size:var(--fs-sm);
  margin:0 0 var(--s-2);cursor:pointer;min-height:var(--tap);
}
.check input{
  accent-color:var(--line);width:18px;height:18px;flex:none;
  min-height:0;font:inherit;
}

.hint{font-size:var(--fs-xs);color:var(--ink-soft);margin-bottom:var(--s-3)}
.hint-block{font-size:var(--fs-xs);color:var(--ink-soft);margin:var(--s-3) 0}

/* ---------- przekroj warstw ---------- */
.stack{
  display:flex;flex-direction:column;
  border:1px solid var(--edge);border-radius:var(--radius);overflow:hidden;
  background:var(--stone);
}
.layer{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);
  padding:0 var(--s-3);
  transition:height .35s cubic-bezier(.2,.7,.3,1);
  overflow:hidden;
  font-size:var(--fs-xs);
  min-height:26px;
}
.layer b{font-weight:600}
.layer .mm{font-family:var(--font-mono);font-size:var(--fs-xs);white-space:nowrap}
.layer-kostka{background:var(--kostka);color:var(--ink);
  background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.16) 0 1px,transparent 1px 26px),
                   repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 26px);}
.layer-podsypka{background:var(--sand);color:#3A2A08}
.layer-kruszywo{background:var(--gravel);color:#fff;
  background-image:radial-gradient(circle at 20% 30%,rgba(255,255,255,.22) 1.5px,transparent 2px),
                   radial-gradient(circle at 70% 65%,rgba(0,0,0,.18) 2px,transparent 2.5px);
  background-size:22px 22px,30px 30px;}
.layer-geo{background:var(--line);color:#fff;height:12px!important;min-height:12px;font-size:var(--fs-3xs);
  letter-spacing:.1em;text-transform:uppercase;font-family:var(--font-mono)}
.layer-grunt{background:var(--grunt);color:#fff;height:34px;min-height:34px}
.depth{
  display:flex;justify-content:space-between;
  font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--ink-soft);
  margin-top:var(--s-2);
}

@media (prefers-reduced-motion:reduce){
  .layer{transition:none}
  html{scroll-behavior:auto}
}

/* ---------- diagramy ---------- */
.figure{margin:var(--s-5) 0}
.figure svg{
  display:block;width:100%;height:auto;
  border:1px solid var(--edge);border-radius:var(--radius);background:var(--paper);
}
.figure figcaption{
  margin-top:var(--s-2);font-size:var(--fs-xs);color:var(--ink-soft);
  padding-left:var(--s-3);border-left:2px solid var(--edge);
}
.panel .figure{margin:0 0 var(--s-4)}
.panel .figure svg{border:0}

/* ---------- wyniki ---------- */
.result-list{list-style:none}
.result-list li{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);
  padding:var(--s-3) 0;border-bottom:1px solid var(--edge-soft);
}
.result-list li:last-child{border-bottom:0}
.result-list .k{font-size:var(--fs-sm)}
.result-list .k small{display:block;color:var(--ink-soft);font-size:var(--fs-xs)}
.result-list .v{
  font-family:var(--font-mono);font-weight:700;font-size:var(--fs-lg);white-space:nowrap;
}
.result-list .v u{text-decoration:none;font-weight:400;font-size:var(--fs-xs);color:var(--ink-soft);margin-left:3px}
.headline-row{
  background:var(--line-soft);margin:0 0 var(--s-1);padding:var(--s-3)!important;
  border-radius:var(--radius);border-bottom:0!important;
}
.headline-row .v{font-size:var(--fs-2xl);color:var(--line)}

details.cost{margin-top:var(--s-4);border-top:1px solid var(--edge);padding-top:var(--s-2)}
details.cost summary{
  cursor:pointer;font-weight:600;font-size:var(--fs-sm);list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);
  min-height:var(--tap);
}
details.cost summary::-webkit-details-marker{display:none}
details.cost summary::after{content:"+";font-family:var(--font-mono);color:var(--line);font-size:var(--fs-lg)}
details.cost[open] summary::after{content:"\2013"}
.cost-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);margin-top:var(--s-2)}
@media (max-width:379px){ .cost-grid{grid-template-columns:1fr} }
.total{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);
  margin-top:var(--s-4);padding-top:var(--s-3);border-top:2px solid var(--ink);
}
.total .v{font-family:var(--font-mono);font-weight:700;font-size:var(--fs-xl)}

/* ---------- pasek narzedzi ---------- */
.toolbar{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-4)}
.btn{
  font-family:var(--font-body);font-size:var(--fs-sm);font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  background:var(--stone);color:var(--ink);
  border:1px solid var(--edge);border-radius:var(--radius);
  padding:var(--s-2) var(--s-4);min-height:var(--tap);cursor:pointer;text-decoration:none;
}
.btn:hover{border-color:var(--gravel);background:var(--edge-soft)}
.btn-primary{background:var(--line);color:#fff;border-color:var(--line)}
.btn-primary:hover{background:var(--line-hover);border-color:var(--line-hover)}
.btn[data-done]{border-color:var(--line);color:var(--line)}

/* ---------- slot afiliacyjny ---------- */
.aff{
  background:var(--paper);border:1px solid var(--edge);border-left:3px solid var(--line);
  border-radius:var(--radius);padding:var(--s-4) var(--s-5);margin-bottom:var(--gap);
}
.aff .tag{
  font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);
}
.aff p{margin:var(--s-1) 0 var(--s-3);font-size:var(--fs-sm);color:var(--ink-soft);max-width:64ch}
.aff a{
  display:inline-flex;align-items:center;background:var(--line);color:#fff;text-decoration:none;
  font-weight:600;font-size:var(--fs-sm);padding:var(--s-2) var(--s-4);
  min-height:var(--tap);border-radius:var(--radius);
}
.aff a:hover{background:var(--line-hover)}

/* ---------- sloty reklamowe ----------
   Wysokosc rezerwowana z gory. Bez tego AdSense rozwala CLS. */
.ad{margin:var(--gap) 0;text-align:center;overflow:hidden}
.ad-label{
  font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:var(--s-1);
}
.ad-inline{min-height:280px}
.ad-sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  background:var(--paper);border-top:1px solid var(--edge);
  min-height:60px;margin:0;padding:var(--s-1) 0;
}
@media (min-width:860px){ .ad-sticky{display:none} }
body.has-sticky-ad{padding-bottom:70px}

/* ---------- tresc ---------- */
.content{background:var(--paper);border-top:1px solid var(--edge);padding:clamp(32px,5vw,64px) 0}
h2{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(23px,3.2vw,32px);letter-spacing:-.025em;line-height:1.12;
  margin-bottom:var(--s-4);
}
h3{font-size:var(--fs-lg);font-weight:600;margin:var(--s-5) 0 var(--s-1)}
h4{font-size:var(--fs-md);font-weight:600;margin:var(--s-4) 0 var(--s-1)}
.content p,.prose p{max-width:68ch;margin-bottom:var(--s-3);color:var(--ink-body)}
.content ul,.content ol,.prose ul,.prose ol{max-width:68ch;margin:0 0 var(--s-3) var(--s-5);color:var(--ink-body)}
.content li,.prose li{margin-bottom:var(--s-1)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,56px);align-items:start}
@media (max-width:760px){ .split{grid-template-columns:1fr} }

.prose{padding:clamp(24px,4vw,44px) 0}
.prose h2{margin-top:var(--s-7)}
.prose h2:first-child{margin-top:0}
.prose > *{max-width:68ch}
.prose table,.prose .callout,.prose .faq,.prose .figure,.prose .table-scroll{max-width:none}

.lead-para{font-size:var(--fs-lg);line-height:1.55;color:var(--ink);max-width:64ch;margin-bottom:var(--s-5)}

.callout{
  background:var(--line-soft);border-left:3px solid var(--line);
  border-radius:var(--radius);padding:var(--s-4) var(--s-5);margin:var(--s-5) 0;
}
.callout p{margin-bottom:0;max-width:64ch}
.callout p+p{margin-top:var(--s-2)}
.callout strong{color:var(--ink)}
.callout-warn{background:#FCF3E2;border-left-color:var(--sand)}

/* ---------- faq ---------- */
.faq details{border-bottom:1px solid var(--edge);padding:var(--s-1) 0}
.faq summary{
  cursor:pointer;font-weight:600;font-size:var(--fs-md);list-style:none;
  display:flex;justify-content:space-between;gap:var(--s-4);
  align-items:center;min-height:var(--tap);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"\2193";color:var(--line);font-family:var(--font-mono)}
.faq details[open] summary::after{content:"\2191"}
.faq details p{margin-top:var(--s-2);padding-bottom:var(--s-3)}

/* ---------- tabele ---------- */
.table-scroll{overflow-x:auto;margin-bottom:var(--s-3)}
table{border-collapse:collapse;width:100%;font-size:var(--fs-sm);margin-bottom:var(--s-3)}
.table-scroll table{margin-bottom:0;min-width:460px}
th,td{text-align:left;padding:var(--s-2) var(--s-3);border-bottom:1px solid var(--edge-soft);vertical-align:top}
th{
  font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;
  border-bottom-color:var(--edge);
}
td.num,th.num{text-align:right;font-family:var(--font-mono)}
tbody tr:hover{background:#F6F7F9}

/* ---------- karty ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:var(--s-3);margin-bottom:var(--gap)}
.card{
  background:var(--paper);border:1px solid var(--edge);border-radius:var(--radius);
  padding:var(--s-4) var(--s-5);text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:var(--s-1);
}
.card:hover{border-color:var(--line);box-shadow:0 2px 0 var(--line-soft)}
.card .card-kicker{
  font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--line);
}
.card h3{font-size:var(--fs-lg);margin:0;font-family:var(--font-display);font-weight:600;letter-spacing:-.015em}
.card p{font-size:var(--fs-xs);color:var(--ink-soft);margin:0}

.section-head{margin:clamp(32px,5vw,48px) 0 var(--s-4)}
.section-head h2{margin-bottom:var(--s-1)}
.section-head p{color:var(--ink-soft);max-width:64ch}

/* ---------- linkowanie wewnetrzne ---------- */
.related{border-top:1px solid var(--edge);margin-top:clamp(32px,5vw,48px);padding-top:var(--s-5)}
.related h2{font-size:var(--fs-lg);margin-bottom:var(--s-3)}
.related-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--s-2);margin:0}
.related-list a{
  display:flex;align-items:center;padding:var(--s-2) var(--s-3);background:var(--paper);
  border:1px solid var(--edge);border-radius:var(--radius);text-decoration:none;
  color:var(--ink);font-size:var(--fs-sm);font-weight:500;min-height:var(--tap);
}
.content .related-list a{background:var(--stone)}
.related-list a:hover{border-color:var(--line);color:var(--line)}
.related-list li{margin:0}

/* ---------- stopka ---------- */
footer{
  background:var(--ink);color:var(--on-dark-dim);
  padding:var(--s-6) 0 var(--s-5);font-size:var(--fs-sm);margin-top:auto;
}
footer a{color:var(--on-dark);text-decoration:none;display:inline-block;padding:3px 0}
footer a:hover{color:#fff;text-decoration:underline}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--s-5)}
@media (max-width:760px){ .foot-grid{grid-template-columns:1fr 1fr} }
@media (max-width:460px){ .foot-grid{grid-template-columns:1fr} }
.foot-head{
  font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-dark-dim);margin-bottom:var(--s-2);font-weight:400;
}
.foot-grid ul{list-style:none;margin:0}
.foot-grid li{margin-bottom:var(--s-1)}
.foot-brand .brand{color:#fff;font-size:var(--fs-lg);min-height:0}
.foot-brand .brand span{color:var(--line-light)}
.foot-brand p{margin-top:var(--s-2);max-width:34ch;color:var(--on-dark-dim);font-size:var(--fs-xs)}
.foot-bottom{
  border-top:1px solid #2A343E;margin-top:var(--s-5);padding-top:var(--s-4);
  display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:space-between;
  color:var(--on-dark-dim);font-size:var(--fs-xs);
}

/* ---------- 404 ---------- */
.err{padding:clamp(48px,9vw,110px) 0;text-align:center}
.err .code{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.2em;color:var(--line)}
.err h1{margin:var(--s-3) auto;max-width:20ch}
.err p{color:var(--ink-soft);max-width:52ch;margin:0 auto var(--s-5)}

/* ==================================================================
   Mobile - kolejnosc
   Na waskim ekranie formularz ma ponad 1300 px i pierwsza liczba ladowala
   dopiero na 2000 px. Wynik idzie na gore, przekroj pod formularz.
================================================================== */
@media (max-width:859px){
  .tool{grid-template-columns:1fr}
  .out{display:contents}
  .out > .panel + .panel{margin-top:0}
  .panel-result{order:1}
  .tool > form{order:2}
  .panel-view{order:3}
  .tool-extras{grid-template-columns:1fr}
}

/* ==================================================================
   Wydruk - kartka do skladu budowlanego
================================================================== */
@media print{
  @page{margin:14mm}
  body{background:#fff;font-size:11pt;color:#000;display:block}
  .masthead nav,.crumbs,.aff,.ad,.toolbar,footer .foot-grid,.related,
  .tool-extras,.extras-head,.content-hide-print,.hero .eyebrow,
  form .hint,details.cost summary::after{display:none!important}
  .tool{grid-template-columns:1fr;gap:10mm}
  .out{display:block}
  .panel{border:1px solid #999;break-inside:avoid;padding:6mm}
  .panel-result{border-left:3px solid #000}
  .out > .panel + .panel{margin-top:6mm}
  h1{font-size:20pt;max-width:none}
  .lede{font-size:11pt;color:#333}
  .hero{padding:0 0 6mm}
  details.cost{display:block}
  details.cost > *{display:block}
  .content{padding:6mm 0 0;border:0}
  .print-only{display:block!important}
  .stack,.figure{break-inside:avoid}
  a[href]::after{content:""}
  .masthead{border-bottom:2px solid #000}
  footer{background:#fff;color:#000;padding:4mm 0 0;border-top:1px solid #999}
  .foot-bottom{border:0;margin:0;padding:0;color:#555}
}
.print-only{display:none}