/* mz-web-style.css — styl materiałów dla zespołu MZ
   Inspirowany ministerstwozieleni.pl: biel + jasna limonkowa zieleń + display sans
   Używany dla dokumentów wewnętrznych (CRM, onboarding, procesy) */

@page { size: A4; margin: 0; }

:root {
  /* Brand MZ — z palety strony WWW */
  --mz-lime: #B5DD3D;          /* główny akcent (przyciski, podkreślenia) */
  --mz-lime-soft: #C8E665;     /* hover / wariant lżejszy */
  --mz-lime-dark: #8BB024;     /* aktywny / akcent ciemniejszy */
  --mz-leaf: #6B8E2A;          /* tekst akcentowy ciemny */
  --mz-deep: #2D3D1A;          /* bardzo ciemna zieleń (tekst nagłówków na jasnym) */
  --mz-mist: #F2F7E1;          /* bardzo jasne zielone tło */
  --mz-sand: #FAFAF7;          /* off-white tło sekcji */

  /* Tekst i linie */
  --ink: #1A1A1A;
  --ink-soft: #3D3D3D;
  --ink-muted: #757575;
  --line: #E8E8E3;
  --line-soft: #F0F0EC;

  /* Fonty */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Manrope', 'Inter', system-ui, sans-serif;
  --font-script: 'Caveat', 'Brush Script MT', cursive;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #E8EAE2;
  font-family: var(--font-sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern" 1, "liga" 1;
  line-height: 1.6;
}

/* ------- STRONA A4 ------- */

.page {
  width: 210mm;
  height: 297mm;
  margin: 16px auto;
  padding: 14mm 20mm 12mm;
  background: #fff;
  position: relative;
  page-break-after: always;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.page:last-child { page-break-after: auto; }

.page.tinted { background: var(--mz-sand); }
.page.dark   { background: var(--mz-deep); color: #fff; }
.page.lime   { background: var(--mz-mist); }

/* ------- HEADER (logo + meta) ------- */

.mz-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 5mm;
  border-bottom: 1px solid var(--line);
  margin-bottom: 7mm;
  flex-shrink: 0;
}

.mz-logo {
  display: block;
  text-decoration: none;
  line-height: 0;
}

.mz-logo-img {
  height: 32px;
  width: auto;
  display: block;
}

/* invert logo on dark background pages — czarna część logo robi się biała */
.dark .mz-logo-img,
.cover .mz-logo-img {
  filter: brightness(0) invert(1);
}

/* legacy klasy (zostawione dla kompatybilności z innymi materiałami) */
.mz-logo-mark { width: 38px; height: 38px; display: block; }
.mz-logo-text {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--mz-deep);
}

.mz-header-meta {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
  text-align: right;
}

.dark .mz-logo-text  { color: #fff; }
.dark .mz-header     { border-bottom-color: rgba(255,255,255,0.18); }
.dark .mz-header-meta{ color: rgba(255,255,255,0.6); }

/* ------- COVER (jak hero strony) ------- */

.cover-block {
  padding: 14mm 0 10mm;
}

.cover-eyebrow {
  display: inline-block;
  padding: 2mm 4mm;
  background: var(--mz-lime);
  color: var(--mz-deep);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
  margin-bottom: 6mm;
}

.cover-title {
  font-family: var(--font-display);
  font-size: 42px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--mz-deep);
  margin: 0 0 6mm;
  max-width: 165mm;
}

.cover-title em {
  font-style: normal;
  color: var(--mz-lime-dark);
}

.cover-lead {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 150mm;
  margin: 0 0 10mm;
}

.cover-script {
  font-family: var(--font-script);
  font-size: 32px;
  color: var(--mz-leaf);
  line-height: 1;
  margin: 4mm 0 6mm;
}

.cover-meta-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6mm;
  padding-top: 6mm;
  border-top: 1px solid var(--line);
}
.cover-meta-row .k {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 1.5mm;
  font-weight: 600;
}
.cover-meta-row .v {
  font-size: 12px;
  color: var(--mz-deep);
  font-weight: 600;
}

/* ------- TYPOGRAFIA ------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 4mm;
  color: var(--mz-deep);
}

.dark h1, .dark h2, .dark h3 { color: #fff; }

h1.section {
  font-size: 24px;
  line-height: 1.1;
  margin-top: 0;
  margin-bottom: 3mm;
}
h2.section {
  font-size: 17px;
  line-height: 1.2;
  margin-top: 5mm;
  margin-bottom: 3mm;
  position: relative;
  padding-left: 6mm;
}
h2.section::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4mm;
  width: 4mm;
  height: 4mm;
  border-radius: 50%;
  background: var(--mz-lime);
}
h3.section {
  font-size: 13px;
  line-height: 1.3;
  margin-top: 5mm;
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--mz-deep);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.eyebrow {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mz-lime-dark);
  background: var(--mz-mist);
  padding: 1.5mm 3mm;
  border-radius: 999px;
  margin-bottom: 4mm;
}

p {
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 3mm;
}

.lead {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 160mm;
  font-weight: 400;
}

strong { color: var(--mz-deep); font-weight: 700; }

/* ------- BLOCKQUOTE ------- */

blockquote {
  margin: 5mm 0;
  padding: 5mm 6mm;
  background: var(--mz-mist);
  border-left: 4px solid var(--mz-lime);
  border-radius: 0 8px 8px 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--mz-deep);
  font-weight: 500;
}
blockquote p { margin: 0; color: inherit; font-size: inherit; }

/* ------- TABELE ------- */

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 10.5px;
  margin: 4mm 0;
  background: #fff;
}
table.data th {
  background: var(--mz-deep);
  color: #fff;
  text-align: left;
  padding: 2mm 3mm;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
table.data td {
  padding: 2mm 3mm;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--ink-soft);
  font-size: 10.5px;
}
table.data tr:nth-child(even) td { background: var(--mz-sand); }
table.data .center { text-align: center; }
table.data .num    { text-align: center; font-weight: 700; color: var(--mz-deep); }

/* ------- LISTY ------- */

ul.bullets, ol.bullets {
  list-style: none;
  padding: 0;
  margin: 4mm 0;
}
ul.bullets li, ol.bullets li {
  position: relative;
  padding: 1mm 0 1mm 7mm;
  font-size: 11px;
  line-height: 1.55;
}
ul.bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4mm;
  width: 4mm;
  height: 4mm;
  border-radius: 50%;
  background: var(--mz-lime);
}
ol.bullets {
  counter-reset: cl;
}
ol.bullets li {
  counter-increment: cl;
}
ol.bullets li::before {
  content: counter(cl);
  position: absolute;
  left: 0;
  top: 1.5mm;
  width: 5mm;
  height: 5mm;
  border-radius: 50%;
  background: var(--mz-lime);
  color: var(--mz-deep);
  font-size: 9.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
  background-image: none;
}

ul.checks {
  list-style: none;
  padding: 0;
  margin: 4mm 0;
}
ul.checks li {
  position: relative;
  padding: 1.5mm 0 1.5mm 8mm;
  font-size: 11px;
  line-height: 1.5;
}
ul.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3mm;
  width: 5mm;
  height: 5mm;
  background: var(--mz-lime);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2l-3.5-3.6L4 14.1 9 19l11-11.1-1.4-1.4z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2l-3.5-3.6L4 14.1 9 19l11-11.1-1.4-1.4z'/></svg>") center/contain no-repeat;
}

/* ------- KARTY (jak na stronie WWW) ------- */

.cards-grid {
  display: grid;
  gap: 4mm;
  margin: 5mm 0;
}
.cards-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.cards-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.cards-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  padding: 4mm 5mm;
  background: var(--mz-sand);
  border-radius: 8px;
  border: 1px solid var(--line);
  margin-bottom: 3mm;
}
.card.lime {
  background: var(--mz-mist);
  border-color: transparent;
}
.card.dark {
  background: var(--mz-deep);
  color: #fff;
  border-color: transparent;
}
.card.dark h3, .card.dark h4 { color: #fff; }
.card.dark p { color: rgba(255,255,255,0.85); }

.card h3 {
  margin: 0 0 1.5mm;
  font-size: 12.5px;
  font-family: var(--font-display);
  color: var(--mz-deep);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.card .card-eyebrow {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mz-lime-dark);
  font-weight: 700;
  margin-bottom: 1.5mm;
}
.card p { margin: 0 0 1.5mm; font-size: 10.5px; line-height: 1.5; }
.card p:last-child { margin-bottom: 0; }

/* ------- KPI / LICZBY ------- */

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4mm;
  margin: 6mm 0;
  padding: 6mm 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat {
  text-align: center;
}
.stat .v {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
  color: var(--mz-deep);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 2mm;
}
.stat .v .lime { color: var(--mz-lime-dark); }
.stat .l {
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
}

/* ------- CTA / KONTAKT ------- */

.cta-box {
  margin: 6mm 0;
  padding: 7mm 8mm;
  background: var(--mz-deep);
  color: #fff;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}
.cta-box::after {
  content: "";
  position: absolute;
  right: -30mm;
  bottom: -30mm;
  width: 80mm;
  height: 80mm;
  background: var(--mz-lime);
  border-radius: 50%;
  opacity: 0.12;
}
.cta-box h3 {
  color: #fff;
  margin: 0 0 2mm;
  font-size: 16px;
  position: relative;
}
.cta-box p {
  color: rgba(255,255,255,0.88);
  margin: 0 0 4mm;
  font-size: 11.5px;
  position: relative;
}
.cta-btn {
  display: inline-block;
  padding: 3mm 6mm;
  background: var(--mz-lime);
  color: var(--mz-deep);
  font-weight: 700;
  font-size: 11px;
  text-decoration: none;
  border-radius: 999px;
  letter-spacing: 0.04em;
  position: relative;
}
.cta-btn:hover { background: var(--mz-lime-soft); }

/* ------- POLAROIDOWA RAMKA NA OBRAZ / CYTAT ------- */

.polaroid {
  background: #fff;
  padding: 4mm 4mm 8mm;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
  display: inline-block;
  margin: 4mm 0;
}
.polaroid .polaroid-img {
  width: 100%;
  background: var(--mz-mist);
  display: grid;
  place-items: center;
  border-radius: 2px;
  padding: 14mm 4mm;
  color: var(--mz-leaf);
  font-family: var(--font-script);
  font-size: 18px;
}
.polaroid .polaroid-cap {
  margin-top: 4mm;
  font-family: var(--font-script);
  font-size: 16px;
  color: var(--mz-leaf);
  text-align: center;
}

/* ------- TIMELINE / KROKI ------- */

.timeline-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 6mm 0;
  position: relative;
}
.timeline-row::before {
  content: "";
  position: absolute;
  top: 4mm;
  left: 8mm;
  right: 8mm;
  height: 2px;
  background: var(--mz-lime);
  z-index: 0;
}
.timeline-step {
  position: relative;
  text-align: center;
  padding: 0 2mm;
}
.timeline-step .ts-dot {
  width: 8mm;
  height: 8mm;
  margin: 0 auto 3mm;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--mz-lime);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 11px;
  color: var(--mz-deep);
  position: relative;
  z-index: 1;
}
.timeline-step .ts-when {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mz-lime-dark);
  font-weight: 700;
  margin-bottom: 1mm;
}
.timeline-step .ts-what {
  font-size: 11px;
  font-weight: 600;
  color: var(--mz-deep);
  line-height: 1.35;
}

/* ------- BADGE ------- */

.badge {
  display: inline-block;
  padding: 1.5mm 3mm;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
  margin-right: 2mm;
}
.badge.lime    { background: var(--mz-lime); color: var(--mz-deep); }
.badge.outline { background: transparent; color: var(--mz-leaf); border: 1.5px solid var(--mz-lime); }
.badge.deep    { background: var(--mz-deep); color: #fff; }

/* ------- DIVIDER ------- */

.divider {
  border: none;
  height: 2px;
  background: linear-gradient(to right, var(--mz-lime) 0, var(--mz-lime) 30mm, var(--line) 30mm, var(--line) 100%);
  margin: 5mm 0;
  flex-shrink: 0;
}

/* ------- FAQ ITEM ------- */

.faq-item {
  margin: 2.5mm 0;
  padding: 2.5mm 5mm;
  background: var(--mz-sand);
  border-radius: 6px;
  border-left: 3px solid var(--mz-lime);
}
.faq-q {
  font-weight: 700;
  font-size: 11px;
  color: var(--mz-deep);
  margin: 0 0 1mm;
  font-family: var(--font-display);
  line-height: 1.3;
}
.faq-a {
  font-size: 10px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}

/* ------- FOOTER ------- */

.mz-footer {
  margin-top: auto;
  padding-top: 4mm;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9.5px;
  color: var(--ink-muted);
  flex-shrink: 0;
}
.mz-footer .nc-mark {
  color: var(--mz-lime-dark);
  font-weight: 700;
}

/* ------- NAV (preview only) ------- */

.html-nav {
  position: fixed;
  top: 16px;
  left: 16px;
  background: var(--mz-deep);
  color: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  z-index: 1000;
  box-shadow: 0 6px 20px rgba(0,0,0,0.20);
  font-family: var(--font-sans);
}
.html-nav a {
  color: var(--mz-lime);
  margin: 0 4px;
  text-decoration: none;
  font-weight: 600;
}
.html-nav a:hover { color: #fff; }
@media print {
  .html-nav { display: none; }
  body { background: #fff; }
  .page { box-shadow: none; margin: 0; }
}

/* ------- LINK INLINE ------- */

a.inline {
  color: var(--mz-lime-dark);
  text-decoration: none;
  border-bottom: 1.5px solid var(--mz-lime);
  font-weight: 600;
}
a.inline:hover { color: var(--mz-deep); }

/* ============== FORMULARZ (06 — kwestionariusz) ============== */

.section-marker {
  display: flex;
  align-items: center;
  gap: 4mm;
  margin: 0 0 5mm;
  padding-bottom: 3mm;
  border-bottom: 2px solid var(--mz-lime);
}
.section-marker .sm-letter {
  width: 14mm;
  height: 14mm;
  border-radius: 50%;
  background: var(--mz-lime);
  color: var(--mz-deep);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  flex-shrink: 0;
}
.section-marker .sm-titles { line-height: 1.2; }
.section-marker .sm-eyebrow {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mz-lime-dark);
  margin-bottom: 1mm;
}
.section-marker .sm-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--mz-deep);
  letter-spacing: -0.015em;
}

.q-instruction {
  background: var(--mz-mist);
  padding: 3mm 5mm;
  border-radius: 6px;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--mz-deep);
  margin: 0 0 4mm;
}

.question {
  margin: 0 0 2.5mm;
  page-break-inside: avoid;
}
.q-head {
  display: flex;
  align-items: baseline;
  gap: 2.5mm;
  margin-bottom: 1.5mm;
}
.q-num {
  display: inline-grid;
  place-items: center;
  min-width: 7mm;
  height: 5mm;
  padding: 0 1.5mm;
  border-radius: 999px;
  background: var(--mz-lime);
  color: var(--mz-deep);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.q-text {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--mz-deep);
  font-family: var(--font-display);
  line-height: 1.35;
}
.q-hint {
  display: block;
  font-size: 9.5px;
  font-weight: 400;
  color: var(--ink-muted);
  margin-top: 1mm;
  font-family: var(--font-sans);
  font-style: italic;
}

/* pole odpowiedzi otwarte (textarea) */
.q-field {
  display: block;
  width: 100%;
  background: #fff;
  border: 1.2px dashed var(--mz-lime-dark);
  border-radius: 4px;
  padding: 2.5mm 3.5mm;
  font-family: var(--font-sans);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--ink);
  resize: none;
  outline: none;
  min-height: 14mm;
}
.q-field:focus { border-color: var(--mz-deep); border-style: solid; background: var(--mz-mist); }
.q-field.short  { min-height: 9mm; }
.q-field.tall   { min-height: 22mm; }

/* pole jednoliniowe (input text) */
.q-line {
  display: inline-block;
  width: 100%;
  border: 0;
  border-bottom: 1.2px dashed var(--mz-lime-dark);
  background: transparent;
  padding: 1mm 0;
  font-family: var(--font-sans);
  font-size: 10.5px;
  color: var(--ink);
  outline: none;
}
.q-line:focus { border-bottom-color: var(--mz-deep); border-bottom-style: solid; }

/* row pól (np. „imię", „stanowisko" w jednej linii) */
.q-grid {
  display: grid;
  gap: 3mm 4mm;
  margin-top: 2mm;
}
.q-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.q-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.q-grid .q-label {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-muted);
  margin-bottom: 1mm;
  display: block;
}

/* checkboxy w stylu MZ */
.q-checks {
  list-style: none;
  padding: 0;
  margin: 2mm 0 0;
  display: grid;
  gap: 1.5mm 4mm;
}
.q-checks.cols-2 { grid-template-columns: 1fr 1fr; }
.q-checks.cols-3 { grid-template-columns: 1fr 1fr 1fr; }

.q-checks label {
  display: flex;
  align-items: center;
  gap: 2mm;
  font-size: 10px;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0.5mm 0;
}
.q-checks input[type="checkbox"],
.q-checks input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 4mm;
  height: 4mm;
  border: 1.5px solid var(--mz-lime-dark);
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  display: inline-block;
  flex-shrink: 0;
  position: relative;
}
.q-checks input[type="radio"] { border-radius: 50%; }
.q-checks input[type="checkbox"]:checked,
.q-checks input[type="radio"]:checked {
  background: var(--mz-lime);
  border-color: var(--mz-lime-dark);
}
.q-checks input[type="checkbox"]:checked::after {
  content: "✓";
  position: absolute;
  top: -1px;
  left: 0.5mm;
  color: var(--mz-deep);
  font-weight: 700;
  font-size: 9px;
}
.q-checks input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 1mm;
  left: 1mm;
  width: 1.5mm;
  height: 1.5mm;
  border-radius: 50%;
  background: var(--mz-deep);
}

/* tabela do wypełnienia */
table.q-table {
  width: 100%;
  border-collapse: collapse;
  margin: 2mm 0;
  font-size: 10.5px;
}
table.q-table th {
  background: var(--mz-mist);
  color: var(--mz-deep);
  text-align: left;
  padding: 2mm 3mm;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--mz-lime);
}
table.q-table td {
  padding: 1.5mm 3mm;
  border-bottom: 1px dashed var(--line);
  vertical-align: middle;
}
table.q-table td.label { font-weight: 600; color: var(--mz-deep); width: 50%; }
table.q-table .q-line { padding: 0.5mm 0; font-size: 10px; }

/* sekcja „badge per rola" w nagłówku */
.role-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 2mm;
  margin: 4mm 0 2mm;
}
.role-badges .rb {
  padding: 1.5mm 3mm;
  background: var(--mz-sand);
  border: 1.5px solid var(--mz-lime);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  color: var(--mz-deep);
}
.role-badges .rb.active {
  background: var(--mz-lime);
}

/* print: zachowaj formatowanie pól */
@media print {
  .q-field, .q-line {
    border-style: solid !important;
    border-color: var(--ink-muted) !important;
  }
  .q-checks input { border-color: var(--ink-muted) !important; }
}