/* bezparagonu.pl — „drukarka, która nie drukuje”. Na górze granatowa lada z drukarką (CSS, bez obrazków),
   taśma z paragonem zwisa na jasną posadzkę. Czcionki systemowe — strona nie łączy się z innymi serwisami. */
:root{
  --lada:#172038; --lada-edge:#26314f; --graf:#2b3040; --graf2:#3b4256; --szczelina:#0c0f17;
  --papier:#fcfcf8; --tusz:#24262b; --pieczatka:#d4213d; --pieczatka-hover:#b81a33;
  --vfd:#5cf2d0; --vfd-bg:#08130f; --rolka:#f06292;
  --bg:#eef0f2; --fg:#24262b; --muted:#5b6271; --card:#ffffff; --line:#d6dae1;
  --ok:#1d7a4a; --bad:#b3192f; --bad-bg:#fbe6e9; --focus:#1f4fd6;
  --on-lada:#f4f5f8; --on-lada2:#c9cfdc;
  --f-head:Bahnschrift,"DIN Alternate","DIN Condensed","Roboto Condensed","Arial Narrow",sans-serif;
  --f-body:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --f-mono:"Cascadia Mono",Consolas,"Roboto Mono","DejaVu Sans Mono",ui-monospace,monospace;
  --col:min(500px,46%);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0f1420; --fg:#e6e9ef; --muted:#9aa3b5; --card:#182033; --line:#2a3550;
  --ok:#5fd39a; --bad:#ff8a9b; --bad-bg:#3a1a22; --focus:#8ab4ff; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f1420; --fg:#e6e9ef; --muted:#9aa3b5; --card:#182033; --line:#2a3550;
  --ok:#5fd39a; --bad:#ff8a9b; --bad-bg:#3a1a22; --focus:#8ab4ff; color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:17px;line-height:1.55;overflow-x:hidden}
.shell{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.grid{display:grid;--gap:48px;grid-template-columns:minmax(0,1fr) var(--col);column-gap:var(--gap)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a{color:inherit}
h1,h2,h3{font-family:var(--f-head);font-stretch:semi-condensed;line-height:1.08;text-wrap:balance}

/* ---------- przyciski i fokus ---------- */
.btn{font:inherit;font-weight:650;font-size:16px;border-radius:10px;padding:11px 20px;border:1px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer;text-decoration:none;display:inline-block;line-height:1.3}
.btn:hover{border-color:var(--muted)}
.btn-main{background:var(--pieczatka);border-color:var(--pieczatka);color:#fff}
.btn-main:hover{background:var(--pieczatka-hover);border-color:var(--pieczatka-hover)}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.hint{color:var(--muted);font-size:15px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* ---------- lada (góra strony, zawsze ciemna) ---------- */
/* Lada ma kształt litery L: za nagłówkiem sięga do końca przycisków, za drukarką kończy się tuż pod szczeliną,
   więc taśma zwisa na jasne tło. Tło rozlane na całą szerokość przez border-image z outsetem. */
.topbar{background:var(--lada);color:var(--on-lada);--focus:#5cf2d0;padding-top:env(safe-area-inset-top,0px)}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:18px;padding-bottom:8px}
.brand{font-family:var(--f-head);font-stretch:semi-condensed;font-weight:700;font-size:21px;letter-spacing:.01em}
.brand span{color:var(--vfd)}
.sound{font:inherit;font-size:14px;font-weight:600;color:var(--on-lada2);background:transparent;border:1px solid #4a5472;border-radius:999px;padding:6px 14px;cursor:pointer}
.sound:hover{color:var(--on-lada);border-color:#7d88a6}
.sound[aria-pressed="false"]{color:#97a0b6;border-style:dashed}
.scene{align-items:start;--under:20px;--h1:clamp(44px,7.4vw,92px)}
.leftcol,.rightcol{min-width:0}
.intro,.stage{color:var(--on-lada);--focus:#5cf2d0;
  border-image:linear-gradient(0deg,var(--lada-edge) 10px,var(--lada) 10px) fill 0/0/0 100vmax}
.intro{padding:34px 0 58px;min-width:0;border-image-outset:0 var(--gap) 0 100vmax;background-color:var(--lada)} /* tło pod border-image: wygląd bez zmian, a narzędzia (axe, Lighthouse) widzą ciemne tło przy liczeniu kontrastu */
h1{font-weight:700;font-size:var(--h1);line-height:.95;letter-spacing:-.01em;margin:0 0 22px}
h1 span{display:block}
.lead{color:var(--on-lada2);max-width:58ch;margin:0 0 26px}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px}
.btn-ghost{background:transparent;color:var(--on-lada);border-color:#7d88a6}
.btn-ghost:hover{border-color:var(--on-lada);background:rgba(255,255,255,.06)}
.linkish{font:inherit;font-size:15px;background:none;border:0;padding:4px 2px;color:var(--on-lada2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.linkish:hover{color:var(--on-lada)}
.intro .hint{color:#aeb6c8;margin:14px 0 0}
.safe{display:flex;gap:8px;align-items:flex-start;margin:8px 0 0;color:#aeb6c8;font-size:15px}
.safe .lock{flex:none;margin-top:3px;color:var(--vfd)}
.safe a{color:var(--on-lada);text-underline-offset:3px}
.msg{margin-top:18px;padding:12px 16px;border-radius:10px;background:#3a1a22;color:#ffc2cb;border-left:4px solid var(--pieczatka);max-width:62ch;font-size:16px}

/* ---------- e-paragon z linku: wizytówka sklepu i stan otwierania (na ladzie, nad nagłówkiem) ---------- */
/* --shop = kolor sklepu z wizytówki, ustawiany z JS przez CSSOM (CSP nie pozwala na atrybut style) */
.linkbox{display:grid;gap:12px;justify-items:start;margin:0 0 26px;max-width:62ch}
/* Logo sklepu duże, na górze wizytówki; nazwa pod nim jako podpis */
.shop{display:grid;gap:10px;justify-items:start;max-width:100%;min-width:0;padding:14px 18px;border-radius:12px;
  background:#fff;color:#24262b;border-left:6px solid var(--shop,var(--vfd));box-shadow:0 6px 18px rgba(0,0,0,.25)}
.shop-logo{display:block;max-width:100%;min-width:0}
.shop-logo img{display:block;max-width:min(320px,100%);max-height:110px;width:auto;height:auto;object-fit:contain}
.shop-txt{display:grid;min-width:0}
.shop-k{font-size:13px;color:#5b6271}
.shop-name{font-family:var(--f-head);font-stretch:semi-condensed;font-size:19px;line-height:1.15;overflow-wrap:anywhere}
.link-state{margin:0;color:var(--on-lada);font-size:17px}
.link-state.msg{margin:0;color:#ffc2cb}

/* ---------- drukarka (desktop ok. 490 px, telefon 320 px) ---------- */
.stage{display:flex;justify-content:center;min-width:0;border-image-outset:0 100vmax 0 0;
  /* środek drukarki na wysokości środka nagłówka (3 linijki H1) */
  padding-top:max(16px,calc(34px + 1.425 * var(--h1) - 112px));padding-bottom:calc(var(--under) - 6px)}
.printer{position:relative;width:min(490px,100%)}
.lid{height:60px;margin:0 26px;border-radius:36px 36px 0 0;background:linear-gradient(180deg,#4a5168,var(--graf2) 55%,var(--graf));
  box-shadow:inset 0 2px 0 rgba(255,255,255,.12)}
.face{position:relative;display:flex;gap:16px;align-items:center;justify-content:space-between;padding:26px 28px 36px;
  border-radius:18px 18px 8px 8px;background:linear-gradient(180deg,var(--graf2),var(--graf) 38%,#232836);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 22px 36px rgba(0,0,0,.4)}
.face::before{content:"";position:absolute;left:16px;right:16px;top:0;height:2px;background:#1c2030;border-radius:2px}
.vfd{position:relative;display:grid;gap:3px;padding:12px 16px;border-radius:8px;background:var(--vfd-bg);
  box-shadow:inset 0 0 0 2px #050807,inset 0 3px 8px rgba(0,0,0,.8);font-family:var(--f-mono);font-size:21px;line-height:1.25;
  color:var(--vfd);text-shadow:0 0 7px rgba(92,242,208,.75),0 0 1px var(--vfd);text-transform:uppercase;letter-spacing:.04em;overflow:hidden}
.vfd::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px),linear-gradient(160deg,rgba(255,255,255,.08),transparent 45%)}
.vfd-row{position:relative;display:block;width:16ch;height:1.25em;white-space:pre}
.vfd-row::before{content:"8888888888888888";position:absolute;inset:0;color:rgba(92,242,208,.07);text-shadow:none}
.side{display:grid;justify-items:end;gap:18px}
.led{width:13px;height:13px;border-radius:50%;background:#1d5b37;box-shadow:inset 0 1px 1px rgba(0,0,0,.5)}
.plate{font-family:var(--f-head);font-stretch:semi-condensed;font-weight:700;font-size:16px;letter-spacing:.14em;color:#7d86a0}
.slot{position:relative;z-index:3;height:12px;margin:-18px 40px 0;border-radius:4px;background:var(--szczelina);box-shadow:inset 0 2px 3px #000,0 1px 0 rgba(255,255,255,.08)}
/* taśma w spoczynku: ok. 38 px z różowym paskiem końca rolki */
.stub{position:absolute;left:50%;translate:-50% 0;width:min(390px,84%);top:8px;height:42px;
  background:linear-gradient(180deg,var(--papier) 0 26px,var(--rolka) 26px 31px,var(--papier) 31px);box-shadow:0 3px 5px rgba(0,0,0,.3)}
.is-printing .stub,.is-done .stub{display:none}
.is-printing .led{background:#3cff8a;box-shadow:0 0 8px #3cff8a;animation:led .32s steps(2) infinite}
.is-drag .led,.is-done .led{background:#3cff8a;box-shadow:0 0 8px #3cff8a}
.is-drag .slot{box-shadow:inset 0 2px 3px #000,0 0 0 2px var(--vfd),0 0 16px rgba(92,242,208,.6)}
.is-error .led{background:#ff4d66;box-shadow:0 0 8px #ff4d66}
@keyframes led{50%{background:#1d5b37;box-shadow:none}}

/* ---------- taśma (prawa kolumna, od szczeliny w dół) i wynik (lewa, pod nagłówkiem) ---------- */
.feed-col{display:flex;justify-content:center;margin-top:calc(-1 * var(--under));position:relative;z-index:2;min-width:0}
/* --tail: pusty kawałek taśmy po wydruku (podajnik przed cięciem) — tam ląduje pieczątka; nie wchodzi do licznika cm */
.tape{position:relative;width:min(390px,80%);container-type:inline-size;--tail:140px}
.feed{overflow:hidden;transform-origin:50% 0;filter:drop-shadow(0 8px 12px rgba(10,16,30,.22))}
.result{display:grid;gap:16px;align-content:start;padding-top:40px;min-width:0}
/* przed wydrukiem: zarys paragonu pod szczeliną, żeby miejsce na taśmę nie było pustą plamą */
.ghost{margin-top:46px;height:300px;border:2px dashed var(--line);border-top:0;border-radius:0 0 10px 10px;display:grid;place-items:center;
  color:var(--muted);font-size:15px;text-align:center;padding:0 24px;
  background:repeating-linear-gradient(180deg,transparent 0 26px,color-mix(in srgb,var(--muted) 9%,transparent) 26px 28px)}
.is-drag .ghost{border-color:var(--vfd);color:var(--fg)}
@media (max-width:899px){.ghost{height:120px;margin-top:42px}}
.is-reading .ghost,.is-printing .ghost,.is-done .ghost,.feed:not([hidden]) ~ .ghost{display:none}

/* papier termiczny — dół w ząbki jak oderwany paragon */
.paper{position:relative;background:var(--papier);color:var(--tusz);font-family:var(--f-mono);font-size:14px;line-height:20px;padding:24px 22px calc(32px + var(--tail));min-width:0;
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 10px) no-repeat,radial-gradient(circle 6px at 8px 0,transparent 98%,#000) bottom/16px 10px repeat-x;
          mask:linear-gradient(#000 0 0) top/100% calc(100% - 10px) no-repeat,radial-gradient(circle 6px at 8px 0,transparent 98%,#000) bottom/16px 10px repeat-x}
.paper .c{text-align:center}
.paper .b{font-weight:700}
.paper .big{font-size:16px;font-weight:700}
.paper .sm{font-size:12.5px}
.paper .it{font-style:italic}
.paper .ind{padding-left:2ch}
.paper hr{border:0;border-top:1px dashed #6b6b6b;margin:9px 0}
.paper .ln{display:flex;justify-content:space-between;gap:10px}
.paper .ln span:last-child{text-align:right;white-space:normal}
.paper .ln3{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px}
.paper .item{margin-top:6px}
.paper .anul{text-decoration:line-through;opacity:.6}
.paper .sig{word-break:break-all;margin-top:8px}
.paper .fiscal-id{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:4px}
.fiscal-id img{flex:none;object-fit:contain}
.fiscal-id span{overflow-wrap:anywhere;min-width:0}
.paper .ln>span{min-width:0;overflow-wrap:anywhere}

/* pieczątka „WYDRUKOWANO BEZ PAPIERU” — nad taśmą (poza maską), na dolnej części paragonu, wystaje w prawo */
.stamp{position:absolute;left:31%;top:var(--stamp-y,80%);z-index:3;pointer-events:none;
  translate:0 -50%;rotate:-11deg;mix-blend-mode:multiply;opacity:.9;
  display:grid;justify-items:center;padding:.18em .42em .14em;border:max(6px,.2em) double var(--pieczatka);border-radius:.22em;
  color:var(--pieczatka);font-family:var(--f-head);font-stretch:condensed;font-weight:700;font-size:9.8cqi;line-height:1.04;letter-spacing:.05em;white-space:nowrap;
  -webkit-mask:radial-gradient(circle at 22% 72%,rgba(0,0,0,.5) 0 5px,#000 9px),radial-gradient(circle at 74% 70%,rgba(0,0,0,.45) 0 10px,#000 15px),radial-gradient(circle at 88% 18%,rgba(0,0,0,.3) 0 4px,#000 7px),linear-gradient(100deg,#000 60%,rgba(0,0,0,.72) 76%,#000 90%);
  -webkit-mask-composite:source-in;
          mask:radial-gradient(circle at 22% 72%,rgba(0,0,0,.5) 0 5px,#000 9px),radial-gradient(circle at 74% 70%,rgba(0,0,0,.45) 0 10px,#000 15px),radial-gradient(circle at 88% 18%,rgba(0,0,0,.3) 0 4px,#000 7px),linear-gradient(100deg,#000 60%,rgba(0,0,0,.72) 76%,#000 90%);
          mask-composite:intersect}
.stamp span:last-child{font-size:.8em;letter-spacing:.13em}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .stamp{mix-blend-mode:normal}}
:root[data-theme="dark"] .stamp{mix-blend-mode:normal}

/* konfetti — pozycje przez zmienne CSS ustawiane z JS */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden}
.confetti i{position:absolute;left:var(--x);top:var(--y);width:7px;height:12px;background:var(--c);border-radius:1px;
  animation:conf 1.2s cubic-bezier(.2,.6,.4,1) forwards}
@keyframes conf{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}

/* ---------- blok oszczędności i karty ---------- */
/* liczba oszczędzonego papieru — bohater zrzutu ekranu */
.saved-title{margin:0 0 10px;font-weight:700}
.saved-num{display:block;font-size:clamp(64px,9vw,112px);line-height:.88;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.saved-lbl{display:block;font-size:clamp(24px,2.6vw,32px);line-height:1.1;margin-top:8px}
.saved-eco{font-size:17px;margin:0 0 6px;max-width:52ch}
.saved-cmp{font-size:19px;margin:0 0 10px;max-width:52ch;color:var(--muted)}
.saved-note{font-size:14px;line-height:1.5;margin:0 0 18px;max-width:62ch;color:var(--muted)}
.brag-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px;min-width:0}
.card h2{font-family:var(--f-body);font-stretch:normal;font-size:17px;font-weight:700;margin:0 0 10px}
.verdict{display:flex;gap:12px;align-items:flex-start}
.verdict p{margin:0}
.verdict .t{font-weight:700}
.verdict .cert{color:var(--muted);font-size:14px;margin-top:6px}
.mark{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:var(--card)}
.ok .mark{background:var(--ok)}
.fail .mark{background:var(--bad)}
.unk .mark{background:var(--muted)}
dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 16px;margin:0;font-size:15px}
dt{color:var(--muted)}
dd{margin:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.file-desc{margin:0 0 10px;overflow-wrap:anywhere}
.print-hint{margin:10px 0 0}
details{margin-top:12px}
summary{cursor:pointer;font-weight:650}
pre{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px;font-family:var(--f-mono);font-size:12px;overflow:auto;max-height:340px;white-space:pre-wrap;word-break:break-all;margin:10px 0 0}

/* ---------- treść pod drukarką (spokojnie) ---------- */
.content{display:grid;gap:56px;padding-top:72px}
.content h2{font-weight:700;font-size:clamp(28px,3.6vw,40px);margin:0 0 16px}
.content p{margin:0 0 12px;max-width:70ch}
.content a{text-underline-offset:3px}
.legal .two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0 16px}
.way{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.way h3{font-size:22px;font-weight:700;margin:0 0 6px}
.way p{margin:0}
.note{color:var(--muted);font-size:14px}
.privacy ul{margin:0;padding-left:20px;display:grid;gap:8px}
.privacy li{max-width:70ch}
.stat{border-top:2px solid var(--fg);padding-top:22px}
.content .stat-num{font-size:clamp(40px,6vw,72px);line-height:1;margin-bottom:14px}

.cta{background:var(--lada);color:var(--on-lada);margin-top:72px;border-top:10px solid var(--lada-edge);--focus:#5cf2d0}
.cta-in{padding-top:40px;padding-bottom:44px;display:grid;gap:12px;justify-items:start}
.cta h2{font-family:var(--f-head);font-weight:700;font-size:clamp(26px,3.4vw,36px);margin:0}
.cta p{margin:0;max-width:64ch;color:var(--on-lada2)}
.btn-cta{background:var(--vfd);border-color:var(--vfd);color:#08130f;margin-top:6px}
.btn-cta:hover{background:#86f6dc}
.foot{color:var(--muted);font-size:14px;padding-top:28px;padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}
.foot p{margin:0 0 8px;max-width:72ch}

/* błąd: krótkie potrząśnięcie drukarki */
.shake{animation:shake .38s linear}
@keyframes shake{20%{translate:-6px 0}40%{translate:5px 0}60%{translate:-3px 0}80%{translate:2px 0}}

/* ---------- telefon: jedna kolumna ---------- */
@media (max-width:899px){
  .grid{grid-template-columns:minmax(0,1fr);--gap:0px}
  .leftcol,.rightcol{display:contents}
  .intro{order:1;padding:22px 0 30px;border-image-source:linear-gradient(var(--lada),var(--lada));border-image-outset:0 100vmax}
  .stage{order:2;padding-top:6px;padding-bottom:calc(var(--under) - 4px);border-image-outset:0 100vmax}
  .feed-col{order:3;overflow-x:clip}
  .result{order:4;padding-top:32px}
  .printer{width:min(320px,100%)}
  .lid{height:44px;margin:0 18px;border-radius:26px 26px 0 0}
  .face{padding:14px 14px 22px;gap:12px}
  .vfd{font-size:13.5px;padding:8px 10px}
  .led{width:10px;height:10px}
  .plate{font-size:13px}
  .side{gap:14px}
  .slot{height:10px;margin:-14px 30px 0}
  .stub{width:min(300px,100% - 20px);height:40px;top:6px}
  .tape{width:min(300px,100% - 20px)}
  .stamp{left:13%}
  .tape{--tail:110px}
  .paper{font-size:13px;line-height:19px;padding:22px 20px calc(30px + var(--tail))}
  .paper .big{font-size:15px}
  .paper .sm{font-size:11.5px}
  .legal .two{grid-template-columns:1fr}
  .content{gap:44px;padding-top:56px}
}
@media (prefers-reduced-motion:reduce){
  .is-printing .led{animation:none}
  .shake{animation:none}
  .confetti{display:none}
}
@media (max-width:480px){
  #facts{grid-template-columns:minmax(0,1fr);gap:3px}
  #facts dd{margin-bottom:8px}
}
@media print{
  @page{margin:12mm}
  html,body{background:white;color:black}
  body>*:not(main),main>.leftcol,main>.sr-only,.stage,.ghost{display:none!important}
  main.shell.grid,.rightcol,.feed-col,.tape,#feed{display:block!important;width:100%;margin:0;padding:0;overflow:visible;transform:none;clip-path:none;filter:none;height:auto!important;max-height:none;animation:none!important}
  #paper{width:80mm;max-width:100%;margin:0 auto;padding:0;background:white;color:black;box-shadow:none;border:0;font-size:10pt;line-height:1.4;transform:none;-webkit-mask:none;mask:none}
  #paper::before,#paper::after,.stamp{display:none!important}
  #paper>div{break-inside:avoid}
  .fiscal-id{break-before:avoid}
}