/* Bank-bonus calculators (mu-plugins/md-premie.php). Uses theme tokens only, so light/dark come for free.
   Loaded only on pages that use [md_premia_netto] / [md_premia_firmowa]. */

/* same look as .calc-live, own class so assets/calc.js never binds to them */
.pr-calc{border:2px solid var(--ink);background:var(--surface);margin:1.8em 0}
.pr-calc .calc-h{background:var(--ink);color:var(--paper);padding:10px 16px;font:700 .95rem var(--f-display)}
.pr-calc .calc-in{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.pr-calc .calc-in small{font-size:.74rem;color:var(--muted);line-height:1.3}
.pr-calc .calc-in label[hidden]{display:none}
.pr-calc .calc-in label span{display:flex;gap:8px;align-items:flex-start;color:var(--ink);font-size:.86rem;line-height:1.35}
.pr-calc .calc-in input[type=checkbox]{accent-color:var(--green);width:18px;height:18px;flex:0 0 auto;margin:0}
.pr-calc select{font:600 1rem var(--f-body);padding:8px 10px;border:2px solid var(--line);background:var(--paper);color:var(--ink);border-radius:3px;width:100%}
.pr-calc select:focus{border-color:var(--green);outline:none}
.pr-calc .calc-out dd.pr-red,.pr-red{color:var(--red)}
.pr-green{color:var(--green-ink)}

/* firm calculator: profile buttons and the result table */
.pr-prof{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px 0}
.pr-prof button{font:600 .86rem var(--f-body);padding:7px 12px;border:2px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:3px;cursor:pointer}
.pr-prof button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.pr-calc details.pr-more{margin:4px 16px 0}
.pr-calc details.pr-more summary{cursor:pointer;font:600 .9rem var(--f-body);padding:6px 0;color:var(--green-ink)}
.pr-calc details.pr-more .calc-in{padding:6px 0 4px}
.pr-calc .table-wrap{margin:10px 16px 12px}
.pr-calc table{font-size:.88rem}
.pr-calc td small{display:block;color:var(--muted);font-size:.74rem;line-height:1.35;white-space:normal}
.pr-calc tr.pr-zero td{color:var(--muted)}
.pr-calc tr.pr-zero td.num b{color:var(--muted)}
.pr-sum{margin:0 16px 12px;padding:10px 14px;background:var(--green-soft);border-left:5px solid var(--green);font-size:.92rem;line-height:1.5}
.pr-sum b{font-family:var(--f-mono);white-space:nowrap}

/* narrow screens: each promotion as a small card, numbers labelled (the table would need sideways scrolling) */
@media (max-width:620px){
  .pr-calc .table-wrap{overflow:visible}
  .pr-calc .table-wrap table{min-width:0;width:100%}
  .pr-calc .table-wrap thead{display:none}
  .pr-calc .table-wrap tbody,.pr-calc .table-wrap tr,.pr-calc .table-wrap td{display:block;width:auto}
  .pr-calc .table-wrap tr{padding:10px 0;border-bottom:1px solid var(--line)}
  .pr-calc .table-wrap td{border:0;padding:2px 0;text-align:left}
  .pr-calc .table-wrap td.num{display:flex;justify-content:space-between;gap:12px}
  .pr-calc .table-wrap td.num::before{content:attr(data-l);font:400 .8rem var(--f-body);color:var(--muted)}
}

/* savings ranking ([md_ranking_oszczednosci], mu-plugins/md-oszczednosci.php): amount buttons + own amount */
.md-osz .pr-prof{align-items:center}
.md-osz-own{display:flex;align-items:center;gap:6px;font-size:.86rem;color:var(--ink)}
.md-osz-own input{width:8.5em;font:600 .95rem var(--f-mono);padding:6px 8px;border:2px solid var(--line);background:var(--paper);color:var(--ink);border-radius:3px}
.md-osz-own input:focus{border-color:var(--green);outline:none}
.md-osz td.num small{text-align:right;white-space:normal}
.prose .md-osz .table-wrap th,.prose .md-osz .table-wrap th.num{white-space:normal;vertical-align:bottom}
.md-osz .pr-sum b{white-space:normal}
.md-osz .pr-sum b:first-child,.md-osz .pr-sum b:last-child{white-space:nowrap}
@media (max-width:620px){
  .md-osz .table-wrap td.num{flex-wrap:wrap;align-items:baseline}
  .md-osz .table-wrap td.num small{flex-basis:100%}
  .md-osz .table-wrap td:first-child::before{content:'Miejsce '}
  .md-osz .table-wrap td:first-child{display:block;font:700 .8rem var(--f-mono);color:var(--muted)}
}