/* Mobile first: base styles are for a phone held in one hand; wider screens only add layout.
   Design tokens: colours (light, dark), radii, a type and a spacing scale, shadows - new and reworked rules use them. */
:root {
  --bg: #f2f5f6;
  --card: #ffffff;
  --ink: #0f1b24;
  --ink-2: #2f3d49;
  --muted: #5b6977;
  --line: #e0e6eb;
  --line-strong: #c9d3da;
  /* the edge of a field the vet types into: 3:1 against --card and --soft (WCAG 1.4.11); card dividers keep --line */
  --field-line: #7f8d99;
  --soft: #f5f7f8;
  --accent: #0d7a6f;
  --accent-ink: #ffffff;
  --accent-soft: #e2f3ef;
  /* 5.5:1 on --ok-soft, 5.2:1 on --ins (.alert.ok, "jest" in the changes) */
  --ok: #127036;
  --ok-soft: #e6f6eb;
  --warn: #b45309;
  --warn-soft: #fdf2df;
  --bad: #c02626;
  --bad-soft: #fdebeb;
  --mark: #fff0a3;
  --ins: #d5f4dc;
  --del: #fbd9d9;
  --star: #b47b00;
  --on-bad: #ffffff;
  /* radii */
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --radius: var(--r-lg);
  /* type scale */
  --fs-2xs: .7rem;
  --fs-xs: .78rem;
  --fs-sm: .875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.35rem;
  /* spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --tap: 44px; /* the smallest a finger target gets (WCAG 2.2: 24, the app: 44) - compact, never below */
  --top: calc(60px + env(safe-area-inset-top)); /* the top bar's height (.topbar: 6 + 44 + 6 px) and a few px of air */
  --shadow-sm: 0 1px 2px rgba(15, 27, 36, .06);
  --shadow: 0 1px 2px rgba(15, 27, 36, .04), 0 6px 20px rgba(15, 27, 36, .06);
  --shadow-lg: 0 12px 32px rgba(15, 27, 36, .22);
  --ease: cubic-bezier(.2, .8, .2, 1);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

/* dark: follows the phone (Ustawienia → Wygląd → Automatycznie) or is picked by hand (perf.js applyTheme: data-theme) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c1216;
    --card: #151d23;
    --ink: #e8eef2;
    --ink-2: #c9d4dc;
    --muted: #97a5b2;
    --line: #25313b;
    --line-strong: #34434f;
    --field-line: #627382;
    --soft: #1b252c;
    --accent: #2cc5b1;
    --accent-ink: #04201c;
    --accent-soft: #11312d;
    --ok: #4ade80;
    --ok-soft: #0f2a19;
    --warn: #fbbf24;
    --warn-soft: #2d2410;
    --bad: #f87171;
    --bad-soft: #331717;
    --mark: #5c4d00;
    --ins: #173d22;
    --del: #4a1b1b;
    --star: #fbbf24;
    --on-bad: #1c0808;
    --shadow-sm: none;
    --shadow: none;
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0c1216;
  --card: #151d23;
  --ink: #e8eef2;
  --ink-2: #c9d4dc;
  --muted: #97a5b2;
  --line: #25313b;
  --line-strong: #34434f;
  --field-line: #627382;
  --soft: #1b252c;
  --accent: #2cc5b1;
  --accent-ink: #04201c;
  --accent-soft: #11312d;
  --ok: #4ade80;
  --ok-soft: #0f2a19;
  --warn: #fbbf24;
  --warn-soft: #2d2410;
  --bad: #f87171;
  --bad-soft: #331717;
  --mark: #5c4d00;
  --ins: #173d22;
  --del: #4a1b1b;
  --star: #fbbf24;
  --on-bad: #1c0808;
  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top) + 8px); }
body { margin: 0; background: var(--bg); color: var(--ink); font-size: 16px; line-height: 1.5; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
a { color: var(--accent); text-decoration: none; }
h1, h2, h3 { margin: 0; line-height: 1.25; }
h1 { font-size: 1.3rem; letter-spacing: -.01em; }
h2 { font-size: 1.02rem; }
button { font: inherit; color: inherit; touch-action: manipulation; }
mark { background: var(--mark); color: inherit; border-radius: 3px; padding: 0 2px; }
svg { flex: none; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* a hint in an empty field never looks like a typed value (grey, never bold) - and is still readable, 4.5:1 */
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; font-weight: 400; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; display: none; }

/* line icons (js/icons.js): the text colour, sized by the text around them; .f parts are filled dots */
svg.ico.ico { display: inline-block; flex: none; width: 1.2em; height: 1.2em; vertical-align: -.22em; padding: 0; background: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
svg.ico .f { fill: currentColor; stroke: none; }
/* a tool's icon in a tinted square - the same on the start screen, the list of tools, the drug card and the tool page */
.t-ico { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--r-md);
  background: var(--accent-soft); color: var(--accent); }
.t-ico svg.ico.ico { width: 22px; height: 22px; }
.t-ico.warn { background: var(--warn-soft); color: var(--warn); }
.t-ico.bad { background: var(--bad-soft); color: var(--bad); }
.t-ico.sm { width: 32px; height: 32px; border-radius: var(--r-sm); }
.t-ico.sm svg.ico.ico { width: 19px; height: 19px; }

/* ---------- top bar (one row on phones) ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 8px;
  padding: calc(6px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left));
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 800; font-size: 1.15rem; }
.brand svg { width: 30px; height: 30px; fill: var(--accent); }
.brand span { display: none; }
@media (min-width: 360px) { .brand span { display: inline; } }
.patient-pill {
  display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px 0 12px; border-radius: 999px; cursor: pointer;
  white-space: nowrap; border: 1.5px solid var(--line); background: var(--card); color: var(--accent); font-size: .9rem; font-weight: 750;
  box-shadow: var(--shadow-sm); transition: border-color .15s, background .15s;
}
.patient-pill.set { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: var(--accent-soft); color: var(--accent); box-shadow: none; }
@media (hover: hover) { .patient-pill:hover { border-color: var(--accent); } }
.pp-emoji { font-size: 1.15rem; line-height: 1; display: inline-flex; }
/* species icons (ui.js speciesIcon): line drawings that take the text colour and size of where they sit */
.sp-ico {
  display: inline-block; flex: none; width: 1.2em; height: 1.2em; vertical-align: -.25em; margin-inline-end: .3em;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.sp-ico .dot { fill: currentColor; stroke: none; }
.pp-emoji .sp-ico, .seg-e .sp-ico, .pick-e .sp-ico { margin-inline-end: 0; }
.icon-btn { position: relative; width: 44px; height: 44px; flex: none; border-radius: var(--r-md); border: 1.5px solid var(--line); background: var(--card); cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow-sm); }
@media (hover: hover) { .icon-btn:hover { border-color: var(--line-strong); } }
.icon-btn svg { width: 20px; height: 20px; fill: var(--muted); }
.icon-btn .dot { position: absolute; right: 8px; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--line); border: 2px solid var(--card); }
.dot.ok { background: var(--ok); } .dot.stale { background: var(--warn); } .dot.online { background: var(--accent); }

/* section tabs in the top bar: Kalkulator / Katalog / Ustawienia - the current one is highlighted */
.tabs { display: flex; flex: none; gap: 3px; padding: 3px; border-radius: 16px; background: var(--soft); border: 1.5px solid var(--line); }
.tab {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 42px; height: 36px; padding: 0 8px; border-radius: 12px; color: var(--muted); font-weight: 700; font-size: .88rem;
}
.tab svg { width: 20px; height: 20px; fill: currentColor; }
.tab.on { background: var(--card); color: var(--accent); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
/* labels are for screen readers on phones and shown next to the icons on wide screens */
.tab span:not(.dot) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tab .dot { position: absolute; right: 3px; top: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--line); border: 2px solid var(--soft); }
/* "Zmiany": how many new SPC versions and medicines came since the screen was last opened (changes.js changesBadge) */
.tab .count, .nav-item .count { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); border: 2px solid var(--card); font-size: .66rem; font-weight: 800; line-height: 18px; text-align: center; }
@media (min-width: 1000px) {
  .tab { padding: 0 12px; }
  .tab span:not(.dot) { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}

.view { max-width: 1180px; margin: 0 auto; padding: 10px max(12px, env(safe-area-inset-left)) calc(32px + env(safe-area-inset-bottom)); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); margin-bottom: 10px; }
.card h2 { margin-bottom: 8px; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.card-head h2 { margin: 0; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap);
  border: 0; border-radius: 14px; padding: 0 18px; cursor: pointer; font-weight: 700; text-align: center;
  background: var(--accent); color: var(--accent-ink); transition: transform .12s var(--ease), opacity .15s;
}
.btn svg { width: 18px; height: 18px; fill: currentColor; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.block { display: flex; width: 100%; min-height: 48px; font-size: 1.02rem; margin-top: 10px; }
.btn.ghost { background: var(--soft); color: var(--ink); border: 1px solid var(--line); }
.btn.small { min-height: 44px; padding: 0 14px; font-size: .9rem; border-radius: 12px; }
@media (hover: hover) {
  .btn:not(:disabled):hover { background: color-mix(in srgb, var(--accent) 88%, var(--ink)); }
  .btn.ghost:not(:disabled):hover { background: var(--soft); border-color: var(--line-strong); }
  .link:hover { text-decoration: underline; text-underline-offset: 3px; }
}
/* a text button or link on its own: a finger-sized target (44 px) that still looks like words */
.link { display: inline-flex; align-items: center; min-height: 44px; border: 0; background: none; color: var(--accent); cursor: pointer; padding: 0; font-weight: 650; }
/* inside a sentence it stays a word of it: the line keeps its height, the padding (given back by the margin) makes the
   tap area about 44 px tall */
p:not(.auth-links):not(.acct-more) .link, .switch .link { display: inline; min-height: 0; padding-block: 12px; margin-block: -12px; }
.loading, .empty { padding: 40px 16px; text-align: center; color: var(--muted); }
.empty .btn { margin-top: 16px; }
.spinner { display: inline-block; width: 18px; height: 18px; border: 2.5px solid var(--line); border-top-color: var(--accent); border-radius: 50%; margin-right: 10px; vertical-align: -3px; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes slide-up { from { transform: translateY(100%); } to { transform: none; } }
.view > * { animation: rise .2s var(--ease); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ---------- patient editor ---------- */
.species { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 14px; }
.sp-btn {
  display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 56px; padding: 4px 2px; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); transition: border-color .15s, background .15s, transform .12s var(--ease);
}
.sp-l { font-size: .74rem; font-weight: 700; color: var(--muted); }
.sp-btn:active { transform: scale(.95); }
.sp-btn.on { border-color: var(--accent); background: var(--accent-soft); }
.sp-btn.on .sp-l { color: var(--accent); }
.pe.compact .species { display: flex; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; margin: 0 -16px 14px; padding: 0 16px; }
.pe.compact .species::-webkit-scrollbar { display: none; }
.pe.compact .sp-btn { flex: none; display: flex; gap: 6px; min-height: 42px; padding: 0 14px; border-radius: 999px; scroll-snap-align: start; }
.pe.compact .sp-l { font-size: .88rem; }
.pe-row { display: grid; gap: 12px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field-label, .ctl-label { font-size: .76rem; font-weight: 750; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.field-label .opt { text-transform: none; letter-spacing: 0; font-weight: 500; }
/* text-like controls only (:where keeps the specificity of a bare element): a radio or a checkbox keeps its native look, or its dot / tick vanish */
input:where(:not([type="checkbox"]):not([type="radio"])), select {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--card); min-width: 0;
  border: 1.5px solid var(--field-line); border-radius: 14px; padding: 0 12px; height: var(--tap); -webkit-appearance: none; appearance: none;
}
select { padding-right: 28px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
input:where([type="checkbox"], [type="radio"]) { -webkit-appearance: auto; appearance: auto; accent-color: var(--accent); width: 22px; height: 22px; padding: 0; margin: 0; flex: none; }
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.stepper { display: grid; grid-template-columns: 52px 1fr 52px; gap: 6px; }
.step { height: 48px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--soft); font-size: 1.5rem; font-weight: 600; cursor: pointer; }
.step:active { transform: scale(.94); background: var(--accent-soft); }
.weight { position: relative; display: block; }
.weight input { width: 100%; height: 48px; text-align: center; font-size: 1.35rem; font-weight: 800; padding: 0 34px; }
.weight span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--muted); pointer-events: none; }
.age { display: grid; grid-template-columns: 76px 1fr; gap: 6px; }
.age input { text-align: center; font-weight: 700; font-size: 1.1rem; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; padding: 3px; border-radius: 14px; background: var(--soft); border: 1.5px solid var(--line); }
.seg button { border: 0; background: transparent; border-radius: 11px; cursor: pointer; font-weight: 700; font-size: .92rem; color: var(--muted); min-height: 44px; padding: 0 8px; transition: background .15s, color .15s; }
.seg button.on { background: var(--card); color: var(--accent); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.hint { color: var(--muted); font-size: .88rem; margin: 10px 0 0; }

/* ---------- lists & results ---------- */
.mini-list { display: grid; }
.mini { display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 48px; padding: 6px 0; border-top: 1px solid var(--line); color: var(--ink); }
.mini:first-child { border-top: 0; }
.mini-name { min-width: 0; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv { display: grid; justify-items: end; text-align: right; flex: none; max-width: 48%; font-size: .95rem; }
.pv b { font-size: 1.05rem; color: var(--accent); white-space: nowrap; }
.pv small { color: var(--muted); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.pv.warn, .pv.warn b { color: var(--warn); }
.pv.muted { color: var(--muted); font-size: .8rem; }

.results-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--muted); font-size: .88rem; margin: 0 2px 10px; min-height: 40px; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; padding: 0 14px; cursor: pointer; font-size: .88rem; font-weight: 650; white-space: nowrap; }
.chip svg.ico.ico { width: 18px; height: 18px; color: var(--muted); }
.chip.on svg.ico.ico { color: inherit; }
.chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.results { display: grid; gap: 8px; }
.result {
  display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 60px;
  padding: 10px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; color: var(--ink);
  transition: border-color .12s, box-shadow .12s, transform .12s var(--ease);
}
.result:active { transform: scale(.99); }
.result.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.r-main { min-width: 0; flex: 1; }
.r-name { font-weight: 750; font-size: 1.02rem; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.r-sub { color: var(--muted); font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-variants { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
.vtag { font-size: .72rem; background: var(--soft); border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-snip { font-size: .84rem; color: var(--muted); margin-top: 6px; }
.fulltext-cta { display: flex; justify-content: center; margin: 16px 0 4px; }
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 700; border-radius: 8px; padding: 3px 8px; background: var(--soft); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.badge.amr { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.badge.amr.B { background: var(--bad-soft); color: var(--bad); }
.badge.chg { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
/* a medicine authorised only in another EU country (eu.js): its register and countries */
.badge.upd { background: var(--warn-soft); color: var(--warn); border-color: transparent; letter-spacing: .02em; }
.badge.src { letter-spacing: .04em; }

/* ---------- product ---------- */
.p-head, .page-head { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; margin: 0 0 10px; }
.page-head { grid-template-columns: auto 1fr; }
.back { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.back svg { width: 22px; height: 22px; fill: var(--ink); }
.p-title { min-width: 0; padding-top: 2px; }
.p-sub { color: var(--muted); font-size: .88rem; overflow-wrap: anywhere; }
.fav, .p-more-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--card); cursor: pointer; color: var(--muted); }
.fav svg.ico.ico, .p-more-btn svg.ico.ico { width: 22px; height: 22px; }
.fav.on { color: var(--star); border-color: color-mix(in srgb, var(--star) 45%, var(--line)); background: color-mix(in srgb, var(--star) 10%, var(--card)); }
.fav.on svg.ico.ico, .fav-ico svg.ico.ico { fill: currentColor; }
.fav-ico { color: var(--star); margin-right: 6px; }
@media (hover: hover) { .fav:hover, .p-more-btn:hover { border-color: var(--line-strong); } }
.p-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
/* the drug card's head: the name over one line of substance · strength · form · holder; the star and ⋯ side by side */
.product > .p-head { gap: 8px; margin-bottom: 8px; }
.product > .p-head .p-sub { -webkit-line-clamp: 1; font-size: .86rem; }
.p-acts { display: flex; gap: 6px; }
/* its badges: one line - "+N" shows the rest in place; the button is badge-sized, its target a finger's (44 px) */
.product > .p-badges { gap: 4px; margin-bottom: 10px; }
.pb-rest { display: contents; }
.pb-more { position: relative; cursor: pointer; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.pb-more::after { content: ""; position: absolute; inset: -10px -6px; }
.p-info { display: grid; gap: 10px; align-content: start; min-width: 0; margin-bottom: 10px; }
.p-info > .card, .p-info > .alert { margin: 0; }
.product { padding-bottom: 72px; }
.answer { border-top: 4px solid var(--accent); }

/* karta leku: wszystkie dawkowania z ChPL, jedno pod drugim - lekarz wybiera, aplikacja tylko liczy */
.dosing .card-head { margin-bottom: 10px; }
.dose-list { display: grid; gap: 8px; }
.dose-row { border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); }
.dose-pick {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 60px;
  padding: 10px 14px; border: 0; border-radius: 14px; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit;
}
.dose-main { display: grid; gap: 2px; min-width: 0; }
.dose-main b { font-size: 1.02rem; }
.dose-main small { color: var(--muted); font-size: .82rem; overflow-wrap: anywhere; }
.dose-main .badge { justify-self: start; margin-top: 2px; }
.dose-pick .pv { flex: none; }
/* what the amount is (na dobę, na podanie, a weight it is not for) wraps - it is part of the answer, not decoration */
.dose-pick .pv small { white-space: normal; overflow: visible; line-height: 1.3; max-width: 150px; }
.pv.warn small { color: var(--warn); font-weight: 650; }
.pv b .per { font-size: .85em; }
.dose-row > .why { margin: 0; padding: 0 14px 10px; }
.dose-pick:active { transform: scale(.995); }
/* the dose that is in the calculator's fields right now, and doses for another species or group */
.dose-row.on { border-color: var(--accent); background: var(--accent-soft); }
/* another species or group: set apart by its frame and background - the text keeps its full contrast */
.dose-row.other { background: var(--soft); border-style: dashed; }
@media (hover: hover) { .dose-pick:hover { background: var(--soft); } }
/* whom the amounts are counted for, in the dosing card's head - the weight in view, with "zmień" */
.dose-for { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; margin: 0 0 10px;
  padding: 6px 12px; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--soft); color: var(--ink);
  font: inherit; font-size: .92rem; text-align: left; cursor: pointer; }
.dose-for .since { color: var(--warn); font-weight: 650; }
/* a dosing no calculator takes: the SPC's words and its amount, not drawn as a button (a tap opens its details) */
.dose-pick.static:active { transform: none; }
@media (hover: hover) { .dose-pick.static:hover { background: none; } }
/* wide screens: two columns of dosings - a dose and its amount not a whole screen apart */
@media (min-width: 960px) { .dosing .dose-list { grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); } }

.ctl { margin-top: 16px; }
.ctl-label { margin-bottom: 8px; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.ctl-label .muted, .ctl-label .link { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: .82rem; }
.ctl-label .link { padding: 0; }
.variants, .days { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 4px; scroll-snap-type: x proximity; }
.variants::-webkit-scrollbar, .days::-webkit-scrollbar, .quick::-webkit-scrollbar { display: none; }
.variant {
  flex: none; display: grid; align-content: start; gap: 1px; text-align: left; width: 136px; min-height: 84px; padding: 10px 12px; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 16px; background: var(--card); scroll-snap-align: start; transition: border-color .15s, background .15s;
}
.variant b { font-size: .98rem; }
.variant span { font-size: .74rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.variant em { font-style: normal; font-weight: 800; color: var(--accent); font-size: .95rem; margin-top: 2px; }
.variant i { font-style: normal; font-size: .66rem; font-weight: 800; color: var(--ok); text-transform: uppercase; letter-spacing: .04em; }
.variant.on { border-color: var(--accent); background: var(--accent-soft); }
.custom { display: grid; grid-template-columns: 1fr 96px; gap: 8px; margin-top: 10px; }
.custom input { font-size: 1.15rem; font-weight: 700; }
.custom .seg { grid-column: 1 / -1; }
.range { display: grid; gap: 6px; margin-top: 12px; font-size: .92rem; font-weight: 650; }
.range input { height: 32px; border: 0; box-shadow: none; padding: 0; accent-color: var(--accent); -webkit-appearance: auto; appearance: auto; }
.maxnote { color: var(--warn); font-size: .85rem; margin-top: 10px; font-weight: 600; }
.days button { flex: none; min-height: 44px; min-width: 64px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); font-weight: 700; cursor: pointer; }
.days button.on, .days input.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.days input { flex: none; width: 84px; height: 44px; border-radius: 999px; text-align: center; font-weight: 700; }

#ans-result { margin-top: 16px; scroll-margin: calc(var(--top) + 20px); }
.result-box { background: var(--soft); border-radius: 16px; padding: 12px 14px; }
.big { font-size: 2.35rem; font-weight: 850; letter-spacing: -.03em; line-height: 1.05; }
.freq { font-size: 1.12rem; font-weight: 700; margin-top: 4px; }
.calcline { color: var(--muted); font-size: .88rem; margin-top: 8px; }
.calcline b { color: var(--ink); }
.band { margin-top: 10px; font-size: .88rem; font-weight: 600; padding: 8px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.band.ok { color: var(--ok); } .band.warn { color: var(--warn); }
.band small { color: var(--muted); font-weight: 400; }
.split { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.split span { display: grid; justify-items: center; padding: 6px 4px; border-radius: 12px; background: var(--card); border: 1.5px solid var(--line); font-size: .78rem; text-align: center; }
.split span b { font-size: 1.05rem; }
.split small { color: var(--muted); }
.split .ok { border-color: color-mix(in srgb, var(--ok) 55%, transparent); }
.split .bad { opacity: .45; }
/* the amount in the big number: drawn as the answer */
.split .best { border-color: var(--accent); background: var(--accent-soft); opacity: 1; }
.split small.dev { font-weight: 700; }
.split small.dev.ok { color: var(--ok); } .split small.dev.warn { color: var(--warn); } .split small.dev.bad { color: var(--bad); }
.check-btn { display: inline-block; margin-top: 10px; }
.calc-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.dev-line { margin-top: 4px; font-size: .95rem; font-weight: 700; color: var(--muted); }
.dev-line.warn { color: var(--warn); } .dev-line.bad { color: var(--bad); }
.calc-mode { margin-bottom: 12px; }
.adm { margin-top: 6px; font-size: .95rem; font-weight: 700; color: var(--warn); }
.why { margin-top: 4px; font-size: .85rem; font-weight: 400; color: var(--muted); }
.prop-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 8px; align-items: stretch; }
.prop-row input { font-size: 1.15rem; font-weight: 700; min-width: 0; }
#prop-result { margin-top: 12px; }
.prompt { padding: 14px 12px; border-radius: 16px; background: var(--soft); color: var(--muted); text-align: center; font-weight: 650; }
.nodose { padding: 14px 16px; border-radius: 16px; background: var(--soft); }
.nodose p { margin: 4px 0 0; color: var(--muted); font-size: .9rem; }
.alert { display: grid; grid-template-columns: auto 1fr; gap: 8px; border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; font-size: .92rem; font-weight: 650; }
.alert.bad { background: var(--bad-soft); color: var(--bad); }
.alert.warn { background: var(--warn-soft); color: var(--warn); }
.alert details { grid-column: 2; font-weight: 400; font-size: .85rem; color: var(--ink); }
/* the strengths of the medicine for the patient's species, under the warning about the strength opened (product.js) */
.dose-alt { display: block; margin-top: 8px; }
.dose-alt-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dose-alt-list .chip { min-height: 40px; text-decoration: none; }
.alert > svg.ico.ico { width: 18px; height: 18px; margin-top: 1px; }
/* "Szczegóły i cytat z ChPL" and the like: a finger-sized row (44 px), the text in its middle */
.alert summary, .why summary { cursor: pointer; color: var(--muted); min-height: 44px; padding: 12px 0; }
.fineprint { color: var(--muted); font-size: .8rem; margin: 12px 0 0; }
.why p { margin: 6px 0; border-left: 3px solid var(--line); padding-left: 10px; color: var(--ink); }

.sticky-dose {
  position: fixed; z-index: 25; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 18px;
  background: var(--ink); color: var(--bg); box-shadow: 0 12px 32px rgba(0, 0, 0, .25); animation: slide-up .22s var(--ease);
}
.sd-main { flex: 1; min-width: 0; display: grid; text-align: left; border: 0; background: none; color: inherit; cursor: pointer; padding: 0; }
.sd-main b { font-size: 1.15rem; }
.sd-main small { opacity: .75; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sticky-dose .btn { background: var(--accent); color: var(--accent-ink); }

.tile { border-top: 1px solid var(--line); }
.tile:first-of-type { border-top: 0; }
.tile summary { list-style: none; cursor: pointer; padding: 8px 0; display: grid; gap: 0; min-height: var(--tap); }
.tile summary::-webkit-details-marker { display: none; }
.tile-t { font-weight: 750; display: flex; justify-content: space-between; gap: 8px; }
.tile-t::after { content: ""; width: 9px; height: 9px; margin: 6px 4px 0 0; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .2s var(--ease); }
.tile[open] .tile-t::after { transform: rotate(45deg); }
.tile-peek { color: var(--muted); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile[open] .tile-peek { display: none; }
.tile-body { font-size: .95rem; padding-bottom: 8px; }
.tile-body p { margin: 0 0 6px; }
.tile-more { display: inline-flex; min-height: var(--tap); align-items: center; font-weight: 650; }
.tile.hot .tile-t { color: var(--warn); }
.doc-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.card h2 + .doc-row { border-top: 0; }
.doc-name { min-width: 0; }
.doc-row small { display: block; color: var(--muted); }
.doc-actions { display: flex; gap: 6px; }
.row-link { display: flex; justify-content: space-between; align-items: center; min-height: var(--tap); border-top: 1px solid var(--line); font-weight: 650; }
.row-link span { color: var(--muted); }
dl.kv { display: grid; grid-template-columns: 1fr; gap: 2px 14px; margin: 12px 0 4px; font-size: .92rem; }
dl.kv dt { color: var(--muted); font-size: .8rem; margin-top: 8px; }
dl.kv dd { margin: 0; overflow-wrap: anywhere; }
/* "⋯" of the drug card (product.js openMore): the documents, "Coś się nie zgadza z ChPL?", the product's data -
   small section heads, the register data as two columns even on a phone */
.pm-h { margin: 16px 0 2px; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.p-more > .pm-h:first-child { margin-top: 0; }
.pm-h + .doc-row, .pm-h + .report-link { border-top: 0; }
.p-more .doc-row { padding: 6px 0; }
.p-more dl.kv { grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr); align-items: baseline; gap: 4px 12px; margin: 6px 0 4px; font-size: .9rem; }
.p-more dl.kv dt { margin-top: 0; }
.p-more .fix-links { margin: 6px 0 4px; }

/* ---------- reader ---------- */
.quick { position: sticky; top: var(--top); z-index: 10; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  margin: 0 -12px 10px; padding: 8px 12px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); }
.reader .toc { display: none; }
.doc-html { font-size: 1.02rem; line-height: 1.65; overflow-wrap: anywhere; }
/* --doc-top is measured in product.js fitReader(): the text takes the rest of the screen and scrolls inside */
.reader { --doc-h: calc(100dvh - var(--doc-top, var(--top)) - 16px); }
.reader .doc-html { height: max(320px, var(--doc-h)); margin-bottom: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.doc-html .sec { scroll-margin-top: 8px; padding: 2px 0; }
.doc-html .sec.hl { background: var(--accent-soft); border-radius: 14px; padding: 8px 12px; margin: 6px -12px; }
.doc-html h3 { font-size: 1.04rem; margin: 20px 0 8px; display: flex; gap: 8px; }
.doc-html .lvl1 h3 { text-transform: uppercase; letter-spacing: .02em; font-size: .98rem; }
.doc-html h3 .num { color: var(--accent); min-width: 2.2em; }
.doc-html p { margin: 0 0 10px; }
.tbl { overflow-x: auto; margin: 8px -4px 12px; -webkit-overflow-scrolling: touch; }
.tbl table { border-collapse: collapse; font-size: .88rem; width: 100%; }
.tbl th, .tbl td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
.tbl th { background: var(--soft); }
.fab {
  position: fixed; z-index: 25; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--ink); color: var(--bg); font-weight: 700; box-shadow: 0 10px 28px rgba(0, 0, 0, .25);
}
.fab svg { width: 20px; height: 20px; fill: currentColor; }
.toc-list a, .toc a { display: flex; gap: 8px; color: var(--ink); padding: 11px 8px; border-radius: 10px; border-bottom: 1px solid var(--line); font-size: .95rem; }
.toc-list .num, .toc .num { color: var(--muted); min-width: 2.4em; font-variant-numeric: tabular-nums; }

/* ---------- history ---------- */
.ver-h { font-size: .95rem; margin: 12px 0 4px; display: flex; gap: 8px; align-items: center; }
.hist > .ver-h:first-child { margin-top: 0; }
.ver { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); }
.picks { display: flex; gap: 6px; }
.pick { position: relative; }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid var(--line); font-weight: 800; color: var(--muted); cursor: pointer; }
.pick input:checked + span { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.pick input:disabled + span { opacity: .35; cursor: default; }
.pick input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.ver-links { display: flex; gap: 6px; }
.other-langs { margin-top: 8px; }
.other-langs summary { cursor: pointer; color: var(--accent); font-weight: 650; min-height: var(--tap); padding: 10px 0; }
.diff-h { margin: 12px 2px 8px; }
/* a wide screen: the versions and the comparison at a line length that reads (like "Zmiany w ChPL") */
@media (min-width: 960px) { .hist-page { max-width: 820px; margin-inline: auto; } }
.diff-sec h3 { font-size: .98rem; margin-bottom: 8px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.diff-body { font-size: .95rem; white-space: pre-wrap; overflow-wrap: anywhere; }
ins { background: var(--ins); text-decoration: none; border-radius: 3px; }
del { background: var(--del); border-radius: 3px; }

/* ---------- sheets (bottom on phones), toast ---------- */
dialog.sheet {
  border: 0; margin: auto 0 0; width: 100%; max-width: 100%; max-height: 88vh; overflow: auto;
  border-radius: 24px 24px 0 0; background: var(--card); color: var(--ink);
  padding: 10px 16px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 40px rgba(0, 0, 0, .25);
}
dialog.sheet[open] { animation: slide-up .25s var(--ease); }
dialog.sheet::backdrop { background: rgba(8, 14, 18, .45); }
dialog.sheet h2 { font-size: 1.1rem; margin: 4px 0 10px; }
.sheet-grip { width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 6px; }
.dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.switch { display: flex; gap: 12px; align-items: center; padding: 14px; border: 1.5px solid var(--line); border-radius: 14px; margin-top: 14px; cursor: pointer; font-weight: 650; font-size: .92rem; }
.switch input { flex: none; width: 24px; height: 24px; padding: 0; accent-color: var(--accent); -webkit-appearance: auto; appearance: auto; }
.toast {
  position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 50;
  max-width: calc(100vw - 32px); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 14px;
  font-weight: 650; font-size: .92rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); animation: rise .2s var(--ease);
}
/* empty between messages: nothing to see, but still in the page - a screen reader hears the next text (ui.js toast) */
.toast:empty { padding: 0; box-shadow: none; animation: none; pointer-events: none; }

/* ---------- no horizontal overflow: grid tracks may shrink below the inputs' intrinsic width ---------- */
.p-layout, .pe-row { grid-template-columns: minmax(0, 1fr); }
.p-layout > *, .answer, .result-box, .field { min-width: 0; }
.stepper { grid-template-columns: 52px minmax(0, 1fr) 52px; }
.age { grid-template-columns: 76px minmax(0, 1fr); }
.split { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.custom { grid-template-columns: minmax(0, 1fr) 96px; }
.weight input, .age input, .custom input { width: 100%; min-width: 0; }
.mini-list, .results { grid-template-columns: minmax(0, 1fr); }
.p-badges .badge { white-space: normal; }
.view { overflow-x: clip; }

/* ---------- phones: nothing scrolls sideways, nothing bleeds out of a card - everything wraps ---------- */
.card, .result, .mini, .doc-row, .alert, .band, .prompt { overflow-wrap: anywhere; }
.p-head { grid-template-columns: auto minmax(0, 1fr) auto; }
.page-head { grid-template-columns: auto minmax(0, 1fr); }
.alert { grid-template-columns: auto minmax(0, 1fr); }
.ver { grid-template-columns: auto minmax(0, 1fr) auto; }
.r-name, .p-title h1 { overflow-wrap: anywhere; }

.pe.compact .species { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; overflow: visible; margin: 0 0 14px; padding: 0; }
.pe.compact .sp-btn { display: grid; justify-items: center; gap: 0; min-height: 52px; padding: 4px 2px; border-radius: 12px; }
.pe.compact .sp-l { font-size: .7rem; }

.days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; overflow: visible; margin: 0; padding: 0; }
.days button, .days input { width: 100%; min-width: 0; }

.variants { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; overflow: visible; margin: 0; padding: 0; }
.variant {
  width: auto; min-height: 56px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center;
  grid-template-areas: "tag amount" "strength amount" "form amount";
}
.variant i { grid-area: tag; }
.variant b { grid-area: strength; }
.variant span { grid-area: form; -webkit-line-clamp: 1; }
.variant em { grid-area: amount; font-size: 1.05rem; text-align: right; margin: 0; }

.seg button { white-space: nowrap; padding: 0 4px; }
/* ---------- patient editor v2: Pies | Kot | Inne, steppers everywhere ---------- */
.pe { display: grid; gap: 14px; }
.pe .field { gap: 8px; }
.seg-lg button { min-height: 50px; font-size: .98rem; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 6px; }
.seg-lg .seg-e { font-size: 1.25rem; line-height: 1; }
.seg-lg .caret { font-size: .7rem; opacity: .6; }
.jumps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.jumps button { min-height: 44px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); font-weight: 750; font-size: .92rem; cursor: pointer; white-space: nowrap; }
.jumps button:active, .step:active { transform: scale(.94); background: var(--accent-soft); }
.age { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.stepper.small { grid-template-columns: 48px minmax(0, 1fr) 48px; }
.stepper.small .step { height: 48px; font-size: 1.3rem; }
.stepper.small input { height: 48px; text-align: center; font-weight: 800; font-size: 1.15rem; width: 100%; min-width: 0; }
.pe-row { gap: 14px; }

.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.sheet-head h2 { margin: 0 !important; }
.sheet-close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--soft); color: var(--ink); font-size: 1.1rem; cursor: pointer; }
.sheet-close svg.ico.ico { width: 20px; height: 20px; }
.pick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pick-tile {
  aspect-ratio: 1; display: grid; place-content: center; justify-items: center; gap: 6px; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 18px; background: var(--card); font-weight: 750; font-size: .95rem;
}
.pick-tile .pick-e { font-size: 2.3rem; line-height: 1; }
.pick-tile.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.pick-tile:active { transform: scale(.96); }
/* the patient's species, second step: back to every group over the species of one */
.species-back { gap: 4px; margin: -8px 0 0 -4px; padding-inline: 4px; }
.species-back svg.ico.ico { width: 18px; height: 18px; }
/* "Typ leku": group and form tiles are text, not icons - lower tiles with the count under the name */
.type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .type-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pick-tile.type-tile { aspect-ratio: auto; min-height: 64px; padding: 10px 8px; gap: 2px; font-size: .88rem; text-align: center; line-height: 1.2; }
.pick-tile.type-tile small { color: var(--muted); font-weight: 600; }
.pick-tile.type-tile:disabled { opacity: .4; cursor: default; }
.type-subs { display: flex; flex-wrap: wrap; gap: 8px; }
.type-subs .chip small { color: var(--muted); font-weight: 600; }
.type-subs .chip:disabled { opacity: .4; }
.badge.kind { background: var(--accent-soft); color: var(--accent); }
.pick-list { display: grid; gap: 8px; }
.pick-row {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; text-align: left; cursor: pointer;
  padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--card);
}
.pick-row b { font-size: 1rem; }
.pick-row .muted { font-size: .8rem; }
.pick-row em { font-style: normal; font-weight: 800; color: var(--accent); grid-row: span 2; }
.pick-row .badges { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
.variant.more { display: flex; justify-content: space-between; align-items: center; min-height: 48px; color: var(--accent); font-weight: 700; border-style: dashed; }

@media (min-width: 720px) {
  .pe-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pick-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ---------- calculator bar: patient + weight on top, result right below ---------- */
/* one line: who (a tap edits the patient) and the weight with its steppers - the ±0,1 ones step aside on narrow phones */
/* the weight keeps its width, a long name ("Łosoś atlantycki") gives way with an ellipsis */
.pbar { display: grid; grid-template-columns: minmax(0, auto) minmax(min-content, 1fr); align-items: center; gap: 8px; }
.pbar-who {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px;
  border: 1.5px solid var(--line); border-radius: 14px; background: var(--soft); cursor: pointer; font-weight: 750; text-align: left;
}
.pbar-who.empty { border-style: dashed; color: var(--accent); }
.pbar-edit { font-size: .82rem; font-weight: 700; color: var(--accent); flex: none; }
/* sized so a horse's "450,5 kg" still fits on a 320 px phone */
.pbar-w { display: grid; grid-template-columns: 46px 44px minmax(72px, 1fr) 44px 46px; gap: 4px; }
.pbar-w .step { height: 44px; font-size: 1.2rem; font-weight: 750; padding: 0; }
.pbar-w .step.fine { font-size: .85rem; }
.pbar-w .weight input { height: 44px; font-size: 1.2rem; padding: 0 26px 0 4px; }
.pbar-who { padding: 0 12px; min-width: 0; }
.pbar-who > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 459.98px) {
  .pbar-w { grid-template-columns: 44px minmax(64px, 1fr) 44px; }
  .pbar-w .step.fine, .pbar .pbar-edit { display: none; }
}
.pbar-w .weight span { right: 8px; font-size: .85rem; }
.pbar-card { padding: 12px; position: sticky; top: calc(var(--top) + 6px); z-index: 15; }
.answer #ans-result { margin-top: 12px; }
.answer .big { font-size: 2.6rem; }

/* ---------- patient dialog: full screen on phones and tablets, the actions always at the bottom ---------- */
/* used many times a day: compact around the big targets - the species (56 px) and the weight (62 px) keep them, the
   head, the gaps and the optional age get smaller, so the whole form and "Gotowe" fit one phone screen */
#patient-dialog {
  inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; border-radius: 0;
  padding: calc(8px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    calc(12px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
#patient-dialog[open] { display: flex; flex-direction: column; }
#patient-dialog .pd { display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; max-width: 560px; margin: 0 auto; }
#patient-dialog .pd-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
#patient-dialog .pd-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 1.15rem; }
#patient-dialog .pd-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 4px; }
#patient-dialog .pe { gap: 14px; }
#patient-dialog .pe .field { gap: 6px; }
#patient-dialog .pe-row { grid-template-columns: minmax(0, 1fr); gap: 14px; }
#patient-dialog .stepper { grid-template-columns: 60px minmax(0, 1fr) 60px; }
#patient-dialog .step, #patient-dialog .weight input { height: 62px; }
#patient-dialog .weight input { font-size: 1.7rem; }
#patient-dialog .jumps button { min-height: 48px; font-size: 1rem; }
#patient-dialog .stepper.small { grid-template-columns: 52px minmax(0, 1fr) 52px; }
#patient-dialog .stepper.small .step, #patient-dialog .stepper.small input { height: 52px; }
#patient-dialog .seg button { min-height: 44px; }
#patient-dialog .seg-lg button { min-height: 56px; }
#patient-dialog .hint { margin-top: 10px; font-size: .84rem; }
#patient-dialog .dialog-actions { margin-top: auto; padding-top: 10px; }
#patient-dialog .dialog-actions .btn { min-height: 52px; }
/* the age and its unit side by side once both fit - one row of the form instead of two */
@media (min-width: 400px) { #patient-dialog .age { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }
/* a desktop: a dialog in the middle, as tall as the form - not a whole screen of empty space around a 560 px column */
@media (min-width: 960px) {
  #patient-dialog { inset: 0; margin: auto; width: min(560px, 94vw); height: fit-content; max-height: 92vh; border-radius: var(--r-xl); padding: 16px 22px 18px; }
}

/* ---------- offline selection: species × data parts × SPC languages ---------- */
.offline-sel { display: grid; gap: 12px; margin-top: 12px; }
.offline-sel h3 { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 6px; }
/* ten animals: two rows of five on a phone, one row of ten on a wider screen */
.sel-species { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 600px) { .sel-species { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
.sel-species button {
  min-height: 52px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); cursor: pointer;
  display: grid; justify-items: center; align-content: center; font-size: .72rem; font-weight: 700;
}
.sel-species button span { font-size: 1.25rem; line-height: 1.1; }
.sel-species button.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.sel-species .all { grid-column: 1 / -1; min-height: 44px; display: flex; justify-content: center; align-items: center; gap: 8px; font-size: .92rem; }
.check { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; font-weight: 650; font-size: .94rem; margin-bottom: 8px; }
.check input { flex: none; width: 22px; height: 22px; padding: 0; margin-top: 1px; accent-color: var(--accent); -webkit-appearance: auto; appearance: auto; }
.check small { display: block; font-weight: 400; color: var(--muted); font-size: .82rem; }
.check.locked { cursor: default; opacity: .8; }
.estimate { padding: 8px 12px; border-radius: 14px; background: var(--soft); font-weight: 750; }
.estimate small { display: block; font-weight: 400; color: var(--muted); font-size: .82rem; }
.scope-note { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 4px 4px 4px 12px; margin-bottom: 10px;
  border-radius: 14px; background: var(--soft); border: 1px dashed var(--line); font-size: .86rem; color: var(--muted); }

/* ---------- offline: banner under the top bar, "saved on device" mark ---------- */
.offline-banner {
  display: flex; align-items: center; gap: 10px; padding: 9px max(14px, env(safe-area-inset-left));
  background: var(--warn-soft); color: var(--warn); font-size: .86rem; font-weight: 700; border-bottom: 1px solid var(--line);
}
.offline-banner svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.offline-banner span { flex: 1; min-width: 0; }
.offline-banner a { color: inherit; font-weight: 800; text-decoration: underline; flex: none; }
/* the mobile app: a newer APK on vetlek.pet (native.js) */
.offline-banner.app-update { background: var(--accent-soft); color: var(--accent); }
.offline-banner.app-update .link { flex: none; color: inherit; font-weight: 700; min-height: 0; padding: 0; }
/* a required update (updates.js): works until the deadline, then the screen below */
.offline-banner.app-update.required { background: var(--warn-soft); color: var(--warn); }
/* no top bar above it (the login screen): the banner keeps clear of the phone's status bar itself */
.no-user .offline-banner.app-update { padding-top: calc(9px + env(safe-area-inset-top)); }
/* the screen of a version that may no longer be used: only the download / "Odśwież" */
.update-block { inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border: 0; padding: 24px;
  background: var(--bg); color: var(--ink); display: grid; place-items: center; }
.update-block:not([open]) { display: none; }
.update-block::backdrop { background: var(--bg); }
.update-card { max-width: 26rem; text-align: center; display: grid; gap: 14px; justify-items: center;
  padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
.update-card h2 { margin: 0; font-size: var(--fs-xl); }
.update-card p { margin: 0; color: var(--muted); }
.update-card .btn { min-width: 14rem; }
.update-card .hint { font-size: var(--fs-sm); }
.off-mark {
  display: inline-flex; align-items: center; justify-content: center; flex: none; vertical-align: middle;
  width: 22px; height: 22px; border-radius: 7px; background: var(--ok-soft); color: var(--ok);
}
.off-mark svg { width: 15px; height: 15px; fill: currentColor; }
.mini-name .off-mark { margin-left: 4px; }
.legend { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--muted); margin: 0 0 12px; }
.muted-note { padding: 12px 14px; border-radius: 14px; background: var(--soft); color: var(--muted); font-size: .9rem; }

/* ---------- settings screen ---------- */
#settings .card h2 { margin-bottom: 8px; }
/* switches and ticks are rows of a list: the words on the left, the control on the right, a line between the rows */
#settings .switch, #settings .check { flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 12px;
  margin: 0; padding: 10px 2px; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
#settings .switch small, #settings .check small { display: block; font-weight: 400; color: var(--muted); font-size: .82rem; }
#settings .field { margin-bottom: 10px; }
#settings .field .seg { margin-top: 2px; }
#settings .sg-body p { margin: 6px 0 10px; }
/* the state of the data: a name and its value side by side, one line each - on a phone too */
#set-status dl.kv { grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; gap: 3px 12px; margin: 4px 0 0; font-size: .9rem; }
#set-status dl.kv dt { margin-top: 0; }
.btn-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.btn.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }

/* ---------- browse: medicines / substances A-Z ---------- */
.browse-tabs { margin-bottom: 10px; }
.seg a { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 11px; font-weight: 700; color: var(--muted); text-align: center; padding: 0 8px; }
.seg a.on { background: var(--card); color: var(--accent); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.browse-tools { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.browse-tools input { flex: 1; min-width: 0; }
.letter { content-visibility: auto; contain-intrinsic-size: auto 600px; }
.letter-h { font-size: .95rem; color: var(--accent); margin: 14px 4px 6px; scroll-margin-top: calc(var(--top) + 8px); }
.letter .card { margin-bottom: 0; }
.brow-list { padding-top: 4px; padding-bottom: 4px; }
.brow { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; padding: 10px 0; border-top: 1px solid var(--line); color: var(--ink); }
.brow:first-child { border-top: 0; }
.brow-main { display: grid; gap: 2px; min-width: 0; }
.brow-main b { font-weight: 700; }
.brow-main small { color: var(--muted); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brow-main .badge { justify-self: start; }
#browse-list { padding-bottom: 88px; }
/* species filter chip ("[icon] pies · zmień") and its multi-select sheet */
/* phones: filter input on its own row, species button full width under it - nothing gets squeezed */
.browse-tools { flex-wrap: wrap; }
.browse-tools input { flex: 1 0 100%; }
.filter-btn { display: flex; flex: 1 0 100%; justify-content: space-between; align-items: center; gap: 8px; min-height: 48px; }
/* the contraindication filters of the catalogue: a full row on phones, like the species button */
#safe-slot { flex: 1 0 100%; }
#safe-slot .chip { width: 100%; min-height: 48px; }
@media (min-width: 720px) {
  .browse-tools { flex-wrap: nowrap; }
  .browse-tools input { flex: 1 1 auto; }
  .filter-btn { flex: 0 1 auto; max-width: 45%; justify-content: flex-start; }
  #safe-slot { flex: 0 1 auto; }
  #safe-slot .chip { width: auto; }
}
.brow .pv small { display: block; color: var(--warn); }
.filter-btn #species-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.all-animals { margin: 0 0 6px; min-height: 56px; }
.all-animals.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.sheet-hint { margin: 8px 2px 10px; }
.confirm p { margin: 4px 0 16px; line-height: 1.45; }
.confirm .field-label { text-transform: none; letter-spacing: 0; font-size: .86rem; }
.confirm .confirm-input { width: 100%; min-width: 0; font-size: 1.05rem; }
.confirm .btn.danger:not(:disabled) { background: var(--bad); color: var(--on-bad); border-color: var(--bad); }
.confirm .btn:disabled { opacity: .45; }
@media (min-width: 720px) {
}
.substance-hits { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.substance-hits a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: .88rem; }
.other-species summary { cursor: pointer; font-weight: 700; min-height: var(--tap); padding: 10px 0; }
.other-species[open] summary { padding-bottom: 4px; }
@media (min-width: 720px) {
  .az { right: max(6px, calc((100vw - 1180px) / 2 - 28px)); }
}

@media (max-width: 519px) {
  .topbar { flex-wrap: wrap; row-gap: 8px; }
  .brand { margin-right: auto; }
}
.patient-pill { margin-left: auto; }
.p-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 379px) {
  .seg button { font-size: .84rem; }
  .jumps button { font-size: .84rem; }
  .stepper { grid-template-columns: 46px minmax(0, 1fr) 46px; }
  .patient-pill { padding: 0 10px; }
}
.tbl { margin: 8px 0 12px; }

/* ---------- larger phones ---------- */
@media (min-width: 480px) {
  .pe-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .species { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}

/* ---------- tablets ---------- */
@media (min-width: 720px) {
  :root { --top: calc(64px + env(safe-area-inset-top)); } /* the bar with the section tabs (6 + 45 + 6 px) */
  .topbar { padding-inline: max(16px, calc((100vw - 1180px) / 2)); gap: 10px; }
  .brand span { display: inline; }
  .view { padding-inline: 16px; }
  h1 { font-size: 1.5rem; }
  .card { padding: 20px; }
  .variants, .days { margin: 0; padding-inline: 0; flex-wrap: wrap; overflow: visible; }
  .pe.compact .species { margin: 0 0 14px; padding: 0; flex-wrap: wrap; overflow: visible; }
  dl.kv { grid-template-columns: max-content 1fr; }
  dl.kv dt { margin-top: 0; }
  dialog.sheet { margin: auto; width: min(520px, 94vw); border-radius: 24px; padding: 20px 22px; }
  .sheet-grip { display: none; }
  .toast { bottom: 24px; }
  .big { font-size: 2.7rem; }
}

/* ---------- desktop ---------- */
@media (min-width: 960px) {
  /* drug card: the key points of the SPC in two columns - the width is there, and every tile's first line is short */
  .p-info > .key-points:not(.locked-card) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; align-items: start; }
  .p-info > .key-points:not(.locked-card) > :not(.tile) { grid-column: 1 / -1; }
  .p-info > .key-points > .tile:nth-of-type(2) { border-top: 0; }
  .answer { position: sticky; top: calc(var(--top) + 12px); }
  .product { padding-bottom: 0; }
  .sticky-dose, .fab { display: none !important; }
  .reader { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 20px; align-items: start; }
  .reader .toc { display: block; max-height: max(320px, var(--doc-h)); overflow: auto; overscroll-behavior: contain; font-size: .86rem; }
  .reader .toc a { padding: 6px 8px; border-bottom: 0; font-size: .86rem; }
  .quick { margin-inline: 0; padding-inline: 0; }
}

/* ---------- patient on the home screen ---------- */
.patient-card .pe-start { margin-top: 0; }
.patient-card .dialog-actions { margin-top: 14px; }
.patient-card .search-btn { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; }
.search-btn svg { flex: none; width: 18px; height: 18px; fill: currentColor; }
.patient-summary { display: flex; flex-wrap: wrap; gap: 8px; }
.patient-summary span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-weight: 750; font-size: 1.05rem;
}
.mini-sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- reports ("Zgłoś") ---------- */
.report-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.report-kinds .pick-tile .pick-e { font-size: 1.7rem; }
.report-about { margin: 0 0 10px; overflow-wrap: anywhere; }
.report .field { margin-top: 10px; }
.report > p.small { margin: 8px 0 0; }
.report textarea {
  width: 100%; min-width: 0; min-height: 96px; resize: vertical; font: inherit; font-size: 1rem; line-height: 1.45;
  padding: 10px 12px; border: 1.5px solid var(--field-line); border-radius: 14px; background: var(--card); color: var(--ink);
}
.report textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* VetLek for practices (clinic.js): the order, the join link, the cancellation */
.clinic-order { display: grid; gap: 10px; }
.clinic-order .seg { display: flex; gap: 8px; border: 0; padding: 0; margin: 0; }
.clinic-two { display: grid; grid-template-columns: 8.5rem 1fr; gap: 10px; }
.clinic-sum { margin: 0; font-size: 1rem; }
.clinic-acts { display: grid; gap: 8px; margin-top: 12px; }
.clinic-more summary { cursor: pointer; font-weight: 650; }
/* under a dosing's quote: "Oznacz jako sprawdzoną" and "Zgłoś błąd w tej dawce" (product.js doseRowHtml) */
.dose-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 10px 0 2px; }
.report-link {
  display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: var(--tap);
  border: 0; border-top: 1px solid var(--line); background: none; padding: 0; font: inherit; font-weight: 650;
  color: var(--muted); cursor: pointer; text-align: left;
}

/* ---------- performance modes (Ustawienia → Wydajność) ---------- */
.perf-seg { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
/* weak phones: no animations, blur or shadows - they cost the most while scrolling */
:root[data-perf="saver"] *, :root[data-perf="saver"] *::before, :root[data-perf="saver"] *::after {
  animation: none !important; transition: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
:root[data-perf="saver"] .topbar, :root[data-perf="saver"] .quick { background: var(--bg); }
:root[data-perf="saver"] .card { box-shadow: none; }

/* ---------- withdrawal dates on the drug card ---------- */
.wd-when { display: grid; gap: 4px; margin-bottom: 8px; }
.wd-when input, .tool-in {
  width: 100%; min-height: var(--tap); padding: 0 12px; font: inherit; font-size: 1.05rem; font-weight: 700; color: var(--ink);
  background: var(--card); border: 1.5px solid var(--field-line); border-radius: 14px; outline: none; -webkit-appearance: none;
}
.wd-when input:focus, .tool-in:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.wd-rows { display: grid; gap: 6px; }
.wd-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--soft); font-size: .92rem; }
.wd-row b { text-align: right; }
.wd-row.bad { background: var(--bad-soft); color: var(--bad); }

/* ---------- "Narzędzia": general clinical calculators ---------- */
.tools-head { margin: 2px 2px 8px; }
.tools-head h1 { margin-bottom: 2px; }
.tool-grid { display: grid; gap: 10px; }
.tool-link { display: flex; align-items: center; gap: 14px; margin: 0; color: var(--ink); min-height: 72px; }
.tool-link b { display: block; font-size: 1.02rem; }
.tool-link small { display: block; font-size: .85rem; }
.tool-link > span:nth-child(2) { flex: 1; min-width: 0; }
.tool-icon { font-size: 1.7rem; line-height: 1; }
.tool-go { font-size: 1.5rem; color: var(--muted); }
.tool-link:active { transform: scale(.99); }
.tool-fields { display: grid; gap: 12px; }
.tool-fields .seg button { min-height: 44px; }
select.tool-in { font-size: .98rem; }
.tool-page .fineprint { margin: 12px 0 0; }
/* a medicine picked from the SPC fills the tool; or the values are typed by hand */
.tool-pick .hint { margin-top: 0; }
/* a tool page drawn again in place (a dose tapped, a unit switched): no "rise" - it is not a new page */
.view > .still { animation: none; }
/* what the big number is: "na podanie" / "na dobę", "Pobierz" / "Pompa" - part of the number, not a grey line under it */
.big .per { font-size: .5em; font-weight: 750; letter-spacing: 0; color: var(--ink-2); }
/* RKO without a scale: typical weights in one tap */
.quick-kg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.quick-kg .muted { width: 100%; }
/* fields a picked medicine filled in - lightly green while they agree with the SPC (the dose: while the check says so) */
.spc-tag { font-size: .7rem; font-weight: 750; color: var(--ok); background: var(--ok-soft); border-radius: 6px; padding: 1px 6px; margin-left: 4px; }
.field.spc-ok input { border-color: var(--ok); border-color: color-mix(in srgb, var(--ok) 55%, var(--line)); background: var(--ok-soft); }
.tool-side { display: grid; gap: 12px; margin-top: 12px; }
.tool-pick .p-badges { margin: 8px 0 4px; }
.tool-pick .ctl { margin-top: 12px; }
#tool-check:not(:empty) { margin-top: 10px; }
.tool-side .card { margin: 0; }
/* "Wybierz lek" in a calculator: the catalogue's list as a full-screen dialog */
dialog.fullsheet {
  border: 0; margin: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%; overflow-y: auto;
  background: var(--bg); color: var(--ink);
  padding-block: calc(8px + env(safe-area-inset-top)) calc(96px + env(safe-area-inset-bottom)); padding-inline: 16px;
}
dialog.fullsheet[open] { animation: slide-up .25s var(--ease); }
dialog.fullsheet > * { max-width: 1180px; margin-inline: auto; }
.dp-head {
  position: sticky; top: calc(-8px - env(safe-area-inset-top)); z-index: 5; background: var(--bg);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; padding-block: 8px; margin-bottom: 6px;
}
.dp-head h1 { margin: 0; }
.dp-head .back { border: 0; background: none; cursor: pointer; color: inherit; }
dialog.fullsheet .browse-tools { flex-wrap: wrap; }
dialog.fullsheet .browse-tools input { flex-basis: 100%; }
/* medicine in a tool - compact: small label, the name, one row of small text actions;
   substance, badges, facts and the source are folded into "Szczegóły i źródło" (tools.js pickHtml) */
.tool-pick .pick-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tool-pick .pick-label { display: block; font-size: .7rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.tool-pick .pick-name { line-height: 1.3; min-width: 0; }
.tool-pick .pick-name > b { font-size: 1.08rem; }
.tool-pick .pick-change { flex: none; min-height: 44px; padding: 4px 14px; }
.act-btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; padding: 4px 8px;
  border-radius: 12px; border: 1.5px solid var(--line); background: var(--soft); color: var(--ink);
  font: inherit; font-weight: 750; font-size: .86rem; line-height: 1.2; cursor: pointer; text-decoration: none;
}
.act-btn:hover { border-color: var(--accent); color: var(--accent); }
.act-btn:active { transform: scale(.98); }
.calc-actions .act-btn { min-width: 140px; }
.tool-pick .pick-more { margin-top: 10px; }
.tool-pick .pick-more > :not(summary) { margin-top: 8px; }
.tool-pick .pick-src { font-size: .88rem; margin-bottom: 0; }
@media (max-width: 600px) {
  .tool-pick .ctl { margin-top: 10px; }
}

/* patient card: the last patients. Stan pacjenta, leczone schorzenie i podawane leki zniknęły z karty - aplikacja
   nie pyta o nic, czym sama nie liczy; co ChPL mówi o stanach i interakcjach, stoi na karcie leku */
.pe-history { margin: 0 0 10px; }
/* one row: "↶ Ostatni" and the chips slide sideways together (ui.js historyHtml) */
.history-chips { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding: 2px 0; scrollbar-width: none; }
.history-chips::-webkit-scrollbar { display: none; }
.history-chips > .field-label { flex: none; white-space: nowrap; margin-right: 2px; }
.history-chip { display: inline-flex; align-items: center; gap: 6px; flex: none; white-space: nowrap; padding: 0 12px; }
.history-chip small { color: var(--muted); font-weight: 600; font-size: .72rem; }
.patient-card .pe-history { margin: 8px 0 0; }
/* "Interakcje i niezgodności" */
.int-row { border-top: 1px solid var(--line); }
.int-row:first-of-type { border-top: 0; }
.int-row summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 0; min-height: 44px; }
.int-row .int-e { font-size: .84rem; color: var(--muted); }
.int-row.bad .int-e { color: var(--bad); font-weight: 750; }
.int-row.warn .int-e { color: var(--warn); font-weight: 700; }
.int-row p { margin: 0 0 10px; font-size: .9rem; border-left: 3px solid var(--line); padding-left: 10px; }
.int-h { font-size: 1rem; margin: 14px 0 6px; }
.inc-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: .92rem; }
.inc-list li.warn::marker { color: var(--warn); }
.inc-list li.ok::marker { color: var(--ok); }
.spc-course b { color: var(--ink); }

/* one chosen preparation / dose + "Inne (N)" opening the full list in a sheet - compact on phones */
.pick-one { display: flex; gap: 8px; align-items: stretch; }
.pick-one .variant { flex: 1 1 auto; min-width: 0; max-width: none; width: auto; margin: 0; }
.more-btn {
  flex: none; display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 14px; border-radius: 14px;
  border: 1.5px dashed var(--line); background: var(--soft); color: var(--accent); font-weight: 750; font-size: .88rem; cursor: pointer; white-space: nowrap;
}
.pick-row.on { border-color: var(--accent); background: var(--accent-soft); }
.pick-row.other { color: var(--muted); }
.best-tag { font-style: normal; font-size: .7rem; font-weight: 800; color: var(--accent); background: var(--accent-soft); border-radius: 6px; padding: 1px 6px; vertical-align: middle; }

/* the chosen segment clearly visible (card on soft background was barely visible in dark mode) */
.seg button.on { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
/* four units (CRI): 2 × 2 instead of four squeezed buttons */
.tool-fields .seg:has(> :nth-child(4)) { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* five and more (dehydration %, salts): three a row, long names wrap instead of running out of the button */
.tool-fields .seg:has(> :nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tool-fields .seg button { white-space: normal; line-height: 1.2; padding: 4px; }

/* tool page: phones one column; the result right after the fields, a bar at the bottom while it is further down */
.tool-page { padding-bottom: 76px; }
.tool-page .pbar-card { position: static; }
.tool-layout { display: grid; gap: 12px; }
.tool-main, .tool-aside { display: grid; gap: 12px; align-content: start; min-width: 0; }
.tool-layout .card, .tool-side .card { margin: 0; }
.tool-result #tool-check:not(:empty) { margin: 0 0 10px; }
/* the dose agrees with the SPC: one slim line over the result, not a box as loud as a warning */
.tool-result #tool-check .alert.ok { padding: 7px 12px; font-size: .86rem; }
.tool-result.bad .result-box { box-shadow: inset 0 0 0 2px var(--bad); }
.tool-sticky {
  position: fixed; z-index: 25; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
  display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border: 0; border-radius: 18px;
  background: var(--ink); color: var(--bg); box-shadow: 0 12px 32px rgba(0, 0, 0, .25); cursor: pointer; text-align: left; animation: slide-up .22s var(--ease);
}
.tool-sticky b { font-size: 1.15rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-sticky small { flex: none; opacity: .75; font-weight: 700; }
.tool-sticky.bad { background: var(--bad); color: var(--on-bad); }
.tool-sticky.warn { background: var(--warn); color: var(--card); }
.tool-sticky b { flex: 1; }
#ts-ico { flex: none; display: inline-flex; font-size: 1.15rem; line-height: 1; }
#ts-ico:empty { display: none; }
#ts-ico svg.ico.ico { width: 20px; height: 20px; stroke-width: 2.2; }
/* the tool's head: its icon, name and what it counts */
.tool-head { align-items: center; }
.tool-title { display: flex; align-items: center; gap: 10px; }
.tool-title > div { min-width: 0; }
/* "Podaj masę ciała ↑" / "Wpisz dawkę ↑": a tap goes to the empty field (tools.js focusEmpty) */
.tool-result .prompt[role="button"] { cursor: pointer; color: var(--accent); background: var(--accent-soft);
  border: 1.5px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); }
@media (hover: hover) { .tool-result .prompt[role="button"]:hover { border-style: solid; } }
.pick-label svg.ico.ico, .tool-pick-min svg.ico.ico, .act-btn svg.ico.ico, .fields-head .link svg.ico.ico { width: 16px; height: 16px; }
.act-btn { gap: 6px; }

/* the head of a tool in one row: back, the tool, RKO and "Narzędzia ▾" (every tool in a sheet) */
.tool-head { margin-bottom: 8px; }
.tool-head h1 { font-size: 1.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-head .p-sub { display: none; }
.tool-nav { display: flex; gap: 6px; align-items: center; }
.tool-nav .chip { padding: 0 10px; gap: 4px; }
.tool-nav .chip.urgent { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }
.tool-nav .chip.urgent svg.ico.ico { color: var(--bad); }
.tool-nav .ta-l { display: none; }
@media (min-width: 600px) { .tool-nav .ta-l { display: inline; } .tool-head .p-sub { display: block; } }
/* the tools in a sheet: grouped, the one on screen marked, RKO red */
.sheet-sub { margin: 14px 2px 6px; font-size: .76rem; font-weight: 750; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.sheet-sub:first-child { margin-top: 0; }
.sheet-list { display: grid; gap: 6px; }
.sheet-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 12px; border: 1.5px solid var(--line);
  border-radius: var(--r-md); background: var(--card); color: var(--ink); font: inherit; font-weight: 650; text-align: left; cursor: pointer; text-decoration: none; }
.sheet-row > span { flex: 1; min-width: 0; display: grid; }
.sheet-row small { color: var(--muted); font-weight: 500; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* "Gdzie policzyć tę dawkę?": the dose on top, what each tool counts in full (it is the reason to pick) */
.tool-choice .tc-dose { margin: 0 0 12px; }
.tool-choice .sheet-row small { white-space: normal; }
.sheet-row.on { border-color: var(--accent); background: var(--accent-soft); }
.sheet-row.urgent b { color: var(--bad); }
.sheet-row > svg.ico.ico { width: 18px; height: 18px; color: var(--muted); }
@media (hover: hover) { .sheet-row:hover { border-color: var(--line-strong); } }
.pick-more-sheet .why { margin-top: 12px; }
.dose-sheet .dose-list { margin-bottom: 4px; }
/* the patient right in the tool, one line */
.tool-patient { padding: 8px; }
/* one card: the medicine and its dose, what is typed, the result, the SPC's values in a line, copy / formula */
.tool-card { display: grid; gap: 12px; }
.tool-card > [hidden] { display: none; }
.tool-pick .pick-head { display: flex; align-items: center; gap: 8px; }
.tool-pick .pick-head > svg.ico.ico { color: var(--accent); width: 20px; height: 20px; }
.tool-pick .pick-name { flex: 1; min-width: 0; line-height: 1.25; }
.tool-pick .pick-name > b { font-size: 1.05rem; }
/* the strengths of the medicine: every one in view under its name (a button "zmień moc ▾" hid that there is a choice),
   the picked one filled and ticked, the amount in each for the dose in the fields */
.pick-strengths { display: grid; gap: 6px; }
.ps-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ps-chip { display: grid; justify-items: start; gap: 1px; min-height: 44px; padding: 6px 12px; border: 1.5px solid var(--line);
  border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ps-chip b { display: inline-flex; align-items: center; gap: 4px; font-size: .92rem; }
.ps-chip b svg.ico.ico { width: 15px; height: 15px; }
.ps-chip small { color: var(--muted); font-size: .76rem; font-weight: 650; }
.ps-chip small.warn { color: var(--warn); }
.ps-chip.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); cursor: default; }
.ps-chip.on b { color: var(--accent); }
.ps-chip.other { border-style: dashed; }
.ps-chip:not(.on):active { transform: scale(.98); }
@media (hover: hover) { .ps-chip:not(.on):hover { border-color: var(--accent); } }
.tool-pick .pick-change { padding: 4px 12px; }
.tool-pick .pick-dots { width: 44px; padding: 0; font-size: 1.2rem; letter-spacing: .05em; }
.tool-pick > * + * { margin-top: 8px; }
.tool-pick .spc-note { margin: 8px 0 0; }
.tool-pick .spc-note .link { display: inline; min-height: 0; padding-block: 12px; margin-block: -12px; }
.pick-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; }
.pick-mode { color: var(--muted); font-size: .88rem; font-weight: 650; }
.pick-start { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 12px; border: 1.5px dashed color-mix(in srgb, var(--accent) 50%, var(--line));
  border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent); font: inherit; text-align: left; cursor: pointer; }
.pick-start > span:nth-child(2) { flex: 1; display: grid; }
.pick-start small { color: var(--ink-2); font-size: .8rem; }
.pick-fact { display: flex; gap: 6px; align-items: baseline; margin: 0; font-size: .9rem; color: var(--ink-2); }
.pick-fact svg.ico.ico { color: var(--ok); }
.pick-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.pick-opts .chip small { font-weight: 500; color: var(--muted); }
/* the dosing in the calculation: one line - a tap lists every dosing of the SPC */
.dose-now { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 52px; padding: 6px 12px;
  border: 1.5px solid var(--accent); border-radius: var(--r-md); background: var(--accent-soft); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.dose-now.other { border-color: var(--warn); background: var(--warn-soft); }
/* the vet's own dose: not the SPC's - drawn apart (dashed), said in words */
.dose-now.own { border-style: dashed; border-color: var(--warn); background: var(--card); }
.dose-now.own .dn-main small:first-child { color: var(--warn); }
.dn-main { display: grid; min-width: 0; }
.dn-main small { color: var(--muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dn-main small:first-child { font-size: .7rem; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); }
.dn-main b { font-size: 1.05rem; }
.dn-go { flex: none; color: var(--accent); font-weight: 700; font-size: .85rem; }
.tool-pick .badge.mine { margin-top: 6px; }
/* copy the result, the formula and its source (a sheet), clear / back to the SPC - one row of small links */
.tool-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; margin-top: -4px; }
.tool-foot .link { gap: 5px; }
.tool-foot .link svg.ico.ico { width: 16px; height: 16px; }
#fields-act { margin-left: auto; }
.fields-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 32px; margin-bottom: 8px; }
.fields-head h2 { margin: 0; font-size: .76rem; font-weight: 750; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.fields-head .link { padding: 4px 0; }
.tool-link .tool-drug { color: var(--accent); font-weight: 700; margin-top: 2px; }
.brief-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.brief-actions .btn { flex: 1 1 auto; }

/* "Policz w narzędziu:" on the drug card (product.js toolsRow): chips - the tool's icon and its name, the best fit tinted */
.tool-chip { gap: 8px; padding: 0 12px 0 5px; }
.tool-chip.best { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.tool-chip.best .t-ico { background: var(--card); }

/* picker of a calculator: the filters are pills side by side, not three full-width rows */
dialog.fullsheet .filter-btn, dialog.fullsheet #safe-slot, dialog.fullsheet #tool-slot { flex: 0 1 auto; max-width: 100%; }
dialog.fullsheet .filter-btn, dialog.fullsheet #safe-slot .chip, dialog.fullsheet #tool-slot .chip { width: auto; min-height: 40px; }

/* tablets: tiles in two columns; desktop: three, and the tool page in two columns with the result sticky */
@media (min-width: 720px) {
  .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .tool-page { padding-bottom: 0; }
  .tool-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  /* a tool without a medicine: one column, no empty half of the screen */
  .tool-layout.solo { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
  .tool-aside { position: sticky; top: calc(var(--top) + 12px); max-height: calc(100vh - var(--top) - 24px); overflow-y: auto; overscroll-behavior: contain; }
  .tool-sticky { display: none !important; }
}
@media (min-width: 1100px) {
  .tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.bad-text { color: var(--bad); font-weight: 700; }
.alert.ok { background: var(--ok-soft); color: var(--ok); }
/* chip w oknie wyboru leku dla kalkulatora: "pasujące do narzędzia" włączone / wyłączone
   (filtry przeciwwskazań usunięte - lista nie ukrywa już leków) */
.chip.off { background: var(--soft); color: var(--muted); border-style: dashed; }
.filter-chip { white-space: normal; text-align: left; line-height: 1.25; padding-block: 6px; }
.results-head .chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.conc summary { cursor: pointer; color: var(--muted); font-size: .9rem; padding: 4px 0; min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; }
.conc-grid { display: grid; gap: 10px; margin-top: 8px; }
.emerg-wrap { overflow-x: auto; }
.emerg { width: 100%; border-collapse: collapse; font-size: .9rem; }
.emerg th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 6px 8px; }
.emerg td { padding: 8px; border-top: 1px solid var(--line); vertical-align: top; }
.emerg td small { display: block; color: var(--muted); font-size: .76rem; }
.emerg td.n { text-align: right; white-space: nowrap; }
/* a greyed drug (lidocaine in a cat, a drug outside table 1 in poultry): still listed with why, clearly not the first choice */
.emerg tr.avoid td, .emerg tr.avoid td b { color: var(--muted); }
.emerg tr.avoid td small.cpr-note { color: var(--bad); }
/* a tracheal-only dose: 5-10× the i.v. one - set apart, never read in its place */
.emerg tr.et td { border-top: 2px solid var(--warn); background: var(--warn-soft); }
.emerg tr.et td:first-child b { color: var(--warn); }
/* the row under a drug: its regulation note, its notes and the dilution, the table's width */
.emerg tr.sub td { border-top: 0; padding-top: 0; }
.emerg td small.dil { color: var(--warn); font-weight: 650; white-space: normal; }
.emerg td small.cpr-note, .emerg td small.cpr-food, .emerg td small.dil { margin-top: 3px; line-height: 1.35; }
.emerg td small.cpr-note > svg.ico.ico { width: 14px; height: 14px; margin-right: 3px; vertical-align: -2px; }
.emerg td small.cpr-food { color: var(--warn); font-weight: 600; }
.cpr-once { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; font-size: .72rem; font-weight: 700;
  color: var(--accent); background: var(--accent-soft); vertical-align: 1px; white-space: nowrap; }
/* above the table: what it stands on - an extrapolation in a warning's colour */
.cpr-basis { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--soft); font-size: .88rem; line-height: 1.4; }
.cpr-basis p { margin: 0; }
.cpr-basis small { display: block; margin-top: 2px; color: var(--muted); font-size: .78rem; }
.cpr-basis .basis-tag { display: inline-block; margin-right: 4px; padding: 0 6px; border-radius: 999px; font-size: .72rem; font-weight: 700;
  color: var(--muted); background: var(--card); }
.cpr-basis.extrapolated { background: var(--warn-soft); border-left: 3px solid var(--warn); }
.cpr-basis.extrapolated .basis-tag { color: var(--warn); }
.cpr-basis > svg.ico.ico { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--warn); }
.cpr-unknown { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px; color: var(--bad); font-weight: 650; font-size: .9rem; }
.cpr-unknown > svg.ico.ico { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.cpr-unknown .link { font-weight: 700; }
.cpr-mass { margin: 0 0 8px; font-size: .85rem; font-weight: 600; }
.cpr-neo { margin: 0 0 10px; }
/* where a strength comes from: a line of its own under it - the column stays as narrow as its numbers */
.emerg td.n .conc-tag, .emerg td.n .spc-tag { display: block; width: fit-content; margin: 2px 0 0 auto; }
.cpr-tnote { margin: 10px 0 8px; font-size: .85rem; line-height: 1.45; color: var(--ink-2); }
.cpr-na .cpr-basis b { font-size: .95rem; }
.alert.cpr-legal { font-weight: 400; color: var(--ink); font-size: .85rem; line-height: 1.45; }
.alert.cpr-legal > svg.ico.ico { color: var(--warn); }
@media (min-width: 700px) {
  .tool-grid, .tool-fields, .conc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (hover: hover) {
  .tool-link:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
}
/* four section tabs next to the search field on narrow phones */
@media (max-width: 420px) {
  .tab { min-width: 34px; padding: 0 5px; }
  .tabs { gap: 1px; }
}

@media (hover: hover) {
  .result:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .sp-btn:hover, .variant:hover, .chip:hover, .days button:hover { border-color: var(--accent); }
  .toc a:hover { background: var(--soft); }
}

/* ---------- accounts (js/auth.js) ---------- */
body.no-user .patient-pill, body.no-user .tabs { display: none; }
.auth { display: grid; place-items: start center; padding-top: 4vh; }
.auth-card { width: min(100%, 480px); padding: 18px 16px 14px; }
.auth-brand { display: flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 800; font-size: 1.1rem; margin-bottom: 10px; }
.auth-brand svg { width: 28px; height: 28px; fill: currentColor; }
.auth-card h1 { margin: 0 0 4px; font-size: 1.3rem; }
.auth-form { display: grid; gap: 10px; margin-top: 12px; }
.auth-form .btn.block { margin-top: 4px; }
.auth-form .switch { margin-top: 0; padding: 10px 12px; }
.auth-links { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 0; }
.auth-more { border: 1.5px solid var(--line); border-radius: 14px; padding: 10px 14px; }
.auth-more summary { cursor: pointer; font-weight: 650; }
.auth-more .opt { font-weight: 500; color: var(--muted); }
.auth-more[open] summary { margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips .chip { display: inline-flex; align-items: center; gap: 6px; }
.chips .chip input { width: 18px; height: 18px; margin: 0; padding: 0; accent-color: var(--accent); -webkit-appearance: auto; appearance: auto; }
.chips .chip:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.terms-doc { border: 1.5px solid var(--line); border-radius: 14px; padding: 10px 14px; margin-top: 10px; }
.terms-doc summary { cursor: pointer; font-weight: 700; }
.terms-text { max-height: 50vh; overflow: auto; margin-top: 8px; font-size: .92rem; }
.terms-text h2 { font-size: 1.1rem; margin: 10px 0 6px; }
.terms-text h3 { font-size: .98rem; margin: 12px 0 4px; }
.terms-text p { margin: 0 0 8px; }
.account-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.account-actions .btn { text-decoration: none; }
.danger-link { color: var(--bad); }

/* ---------- corrections builder (js/propose.js) ---------- */
/* a dosing: its words, then its three actions in one row under them - "Zgadza się", "Popraw" and, last, "Błędne";
   full-size targets with a clear gap, not one tap for the other */
.rv-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); align-items: start; }
.rv-card h2 + .rv-row, .rv-card .card-head + .rv-row { border-top: 0; }
.rv-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rv-actions .btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 8px; font-size: .86rem; line-height: 1.15; white-space: normal; }
@media (min-width: 560px) { .rv-actions .btn { flex: 0 1 auto; padding: 0 14px; } }
.rv-intro { margin: 0 2px 8px; }
.rv-main .why { margin-top: 4px; }
.badge.ok { background: var(--accent-soft); color: var(--accent); }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 12px; }
.pf.changed .field-label { color: var(--accent); }
.pf.changed input, .pf.changed select { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pf-bool .switch { margin-top: 0; padding: 8px 12px; }
.builder .field-label .opt { display: block; text-transform: none; letter-spacing: 0; font-weight: 500; }
.sec-edit { font-size: .92rem; line-height: 1.45; }
.sec-fix { float: right; border: 1px solid var(--line); background: var(--card); color: var(--muted); border-radius: 8px; width: 30px; height: 30px; cursor: pointer; font-size: .95rem; margin-left: 8px; }
.sec-fix:hover { color: var(--accent); border-color: var(--accent); }
/* the pencil stays small next to the heading; the finger has 44 × 44 px around it */
.sec-fix { position: relative; }
.sec-fix::after { content: ""; position: absolute; inset: -7px; }
.mine-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: .92rem; }
.mine .mine-row:first-child { border-top: 0; }
.tag { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--soft); white-space: nowrap; }
.tag.new { background: var(--warn-soft); color: var(--warn); }
.tag.done { background: var(--accent-soft); color: var(--accent); }
.tag.rejected { background: var(--bad-soft); color: var(--bad); }
.tag.plus { background: var(--accent); color: var(--accent-ink); } /* PRO PLUS - looked at first */
@media (max-width: 560px) { .pf-grid { grid-template-columns: 1fr 1fr; } }
/* builder: one group at a time */
.pf-pick { margin-bottom: 4px; }
.pf-pick .chips { margin-top: 6px; }
.pf-chip.faint { color: var(--muted); }
.pf-chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.pf-group { border: 1.5px solid var(--line); border-radius: 14px; padding: 8px 10px 10px; margin: 0; min-width: 0; }
.pf-group legend { font-weight: 750; padding: 0 6px; }
.pf-hint { margin: 0 0 8px; color: var(--muted); font-size: .85rem; }
.pf-help { font-size: .76rem; color: var(--muted); }
.pf-preview { border-radius: 14px; background: var(--soft); padding: 10px 12px; font-size: .92rem; }
.pf-preview #pf-preview { margin-top: 4px; font-weight: 650; }
.builder .sheet-body, .builder { display: grid; gap: 10px; }
/* "Sprawdź i popraw" / "Popraw ChPL" above every tool result and on the drug card */
.fix-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.fix-links .btn { text-decoration: none; }
.report-kinds .pick-tile.goes { border-style: dashed; }
/* "Nie wiesz, jak to poprawić?" guide (report.js openGuide) */
.guide-steps { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 10px; }
.guide-steps li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: start; }
.guide-steps p { margin: 2px 0 0; color: var(--muted); font-size: .88rem; }
.guide-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: .9rem; }
/* "Nie wiesz, jak to poprawić?" (the review) / "Jak to zrobić?" (the editors, folded): one line above the screen's
   content - the three-step guide one tap away, the form right under it */
.help-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin: 0 2px 6px; font-size: .9rem; color: var(--ink-2); }
details.help-line { display: block; }
.help-line svg.ico.ico { width: 18px; height: 18px; color: var(--accent); }
.help-line summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; color: var(--accent); font-weight: 650; }
.help-line summary::-webkit-details-marker { display: none; }
.help-line summary::after { content: ""; width: 7px; height: 7px; margin-left: 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--ease); }
.help-line[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.help-line p { margin: 0 0 8px; color: var(--ink-2); }
/* two panes: content + the SPC (js/propose.js twoPane) - columns on a wide screen, tabs on a phone */
.dp-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; padding: 4px 2px 8px; }
.dp-quick { display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 8px; }
.dp-text { font-size: .95rem; line-height: 1.55; }
.dp-text h3 { font-size: .98rem; margin: 16px 0 6px; }
.doc-html p.hit, .doc-html td.hit { background: var(--warn-soft); border-radius: 8px; padding: 2px 6px; margin-left: -6px; }
.pane-tabs { display: flex; gap: 8px; margin: 0 0 12px; }
.pane-tabs .chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.two-pane .pane-doc { display: none; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); }
.two-pane.show-doc .pane-doc { display: block; }
.two-pane.show-doc .pane-main { display: none; }
.builder.card { display: grid; gap: 12px; }
.builder .dialog-actions .btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.sec-fix { text-decoration: none; display: inline-grid; place-items: center; }
@media (min-width: 1000px) {
  .pane-tabs { display: none; }
  .two-pane { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 44%); gap: 16px; align-items: start; }
  /* the SPC column is as tall as its text and the whole page scrolls - no box inside a box on a desktop */
  .two-pane .pane-doc, .two-pane.show-doc .pane-doc { display: block; }
  .two-pane.show-doc .pane-main { display: block; }
  .pane-doc .dp-quick { position: sticky; top: calc(var(--top, 64px) + 4px); z-index: 5; background: var(--card); padding-top: 6px; }
}
.builder textarea { width: 100%; min-width: 0; min-height: 90px; resize: vertical; font: inherit; font-size: 1rem; line-height: 1.45; padding: 12px 14px; border: 1.5px solid var(--field-line); border-radius: 14px; background: var(--card); color: var(--ink); }
.builder textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.builder textarea.sec-edit { min-height: 260px; font-size: .95rem; }
/* phone: the tabs stay under the top bar, the ChPL tab fills the rest of the screen and scrolls on its own,
   so the vet switches form <-> ChPL from anywhere without scrolling back up */
@media (max-width: 999px) {
  .pane-tabs { position: sticky; top: var(--top); z-index: 10; margin: 0 -12px 10px; padding: 8px 12px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); }
  .two-pane.show-doc .pane-doc { display: flex; flex-direction: column; min-height: 0; height: calc(100dvh - var(--top) - 72px); padding: 10px 6px 10px 12px; }
  .two-pane.show-doc .pane-doc .dp-text { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; flex: 1; min-height: 0; padding-right: 8px; }
  .two-pane.show-doc .pane-doc .dp-quick { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .two-pane.show-doc .pane-doc .dp-quick .chip { flex: none; }
}
.sel-fab { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 30; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }

/* "sprawdzona przeze mnie" */
.confirm-btn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.badge.mine { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.pick-one .badge.mine { align-self: center; }
.pick-row .badge.mine { margin-left: auto; }
/* "Zgłoś błąd" at the top of the drug card */
.p-report { margin: 10px 0 4px; }
.p-report .report-big { margin-top: 0; min-height: 50px; font-size: 1rem; color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.p-report .fix-links { margin-top: 8px; }
@media (min-width: 720px) { .p-report { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; } .p-report .fix-links { margin-top: 0; } }

/* the drug document's dosings (product.js doseRowHtml, propose.js builder) */
.dose-main .dose-tx { color: var(--ink); }
.dose-main .dose-uw { font-style: italic; }
.badge.warn { background: var(--warn-soft, #fff3d6); color: var(--warn, #8a5a00); border-color: transparent; }
.pf-species { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sp-check { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1.5px solid var(--line); border-radius: 999px; cursor: pointer; font-size: .88rem; }
.sp-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); -webkit-appearance: auto; appearance: auto; }
.sp-check:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.pf-checks { grid-column: 1 / -1; display: grid; gap: 8px; }
.pf-checks .switch { margin-top: 0; padding: 10px 12px; font-weight: 600; }
.pf-group .field[data-key="gatunki"], .pf-group .field[data-key="opis"], .pf-group .field[data-key="kiedy"], .pf-group .field[data-key="uwagi"] { grid-column: 1 / -1; }

/* ---------- navigation: the sections in the top bar from tablets up, at the bottom of a phone (index.html) ---------- */
.top-search svg { fill: var(--ink); }
.navbar { display: none; }
body.no-user .navbar, body.no-user .top-search { display: none; }
@media (max-width: 719.98px) {
  /* the bar's real height (4 + 48 + 4 px and its border): what floats over the page rides just above it */
  :root { --nav-h: calc(57px + env(safe-area-inset-bottom)); }
  .topbar .tabs { display: none; }
  .navbar {
    position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px;
    padding: 4px max(8px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    background: color-mix(in srgb, var(--card) 92%, transparent); border-top: 1px solid var(--line);
    backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  }
  .nav-item {
    position: relative; display: grid; justify-items: center; align-content: center; gap: 1px; min-height: 48px; padding: 2px;
    border-radius: 14px; color: var(--muted); font-size: .72rem; font-weight: 750; letter-spacing: .01em; line-height: 1.2;
  }
  .nav-item svg { width: 24px; height: 24px; fill: currentColor; padding: 1px 14px; box-sizing: content-box; border-radius: 999px; transition: background .15s; }
  .nav-item.on { color: var(--accent); }
  .nav-item.on svg { background: var(--accent-soft); }
  .nav-item:active svg { transform: scale(.92); }
  .nav-item .dot { position: absolute; top: 4px; left: calc(50% + 12px); width: 9px; height: 9px; border-radius: 50%; background: var(--line); border: 2px solid var(--card); }
  .nav-item .count { top: 0; right: auto; left: calc(50% + 6px); }
  .nav-item svg { padding: 1px 10px; } /* five sections: the pill around the icon a little narrower */
  .view { padding-bottom: calc(var(--nav-h) + 24px); }
  /* what floats over the page rides above the bar */
  .sticky-dose, .tool-sticky { bottom: calc(var(--nav-h) + 8px); }
  .fab { bottom: calc(var(--nav-h) + 12px); }
  .az-index { bottom: calc(var(--nav-h) + 10px); }
  .toast { bottom: calc(var(--nav-h) + 18px); }
  .sel-fab { bottom: calc(var(--nav-h) + 14px); }
  dialog .az-index { bottom: calc(12px + env(safe-area-inset-bottom)); }
  /* the keyboard is up: the bar steps aside, floating results sit right above the keyboard (tools.js syncSticky) */
  body.typing .navbar { display: none; }
  body.typing .sticky-dose, body.typing .tool-sticky { bottom: calc(10px + env(safe-area-inset-bottom)); }
  body.typing .view { padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
}

/* ---------- start screen: search, patient, tools at hand, favourites ---------- */
.home-search { margin-bottom: 10px; }
.search-field {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: 16px; cursor: text;
  background: var(--card); border: 1.5px solid var(--field-line); box-shadow: var(--shadow);
}
.search-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.search-field svg { width: 22px; height: 22px; fill: var(--muted); flex: none; }
.search-field input { flex: 1; min-width: 0; height: 44px; border: 0; padding: 0; background: none; font-size: 1.08rem; box-shadow: none; }
.search-field input:focus { box-shadow: none; }
/* ✕ in a search field: one tap clears it (search-clear in app.js / browse.js) */
.search-clear { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-right: -12px; border: 0; border-radius: 50%;
  background: none; color: var(--muted); cursor: pointer; }
.search-clear svg.ico.ico { width: 18px; height: 18px; }
@media (hover: hover) { .search-clear:hover { color: var(--ink); background: var(--soft); } }
#home-results:not(:empty) { margin-top: 10px; }
#home-results .card { margin-bottom: 8px; }
#home-results .btn.block { margin-top: 0; }
.home-none { display: grid; gap: 4px; }
.home-none p { margin: 0; }
.home-none .btn-row { margin-top: 10px; }
.view.searching #home-lists, .view.searching .guide-card { display: none; }
/* desktop: search and the work on the left, the lists (favourites, recent, changes) on the right */
@media (min-width: 960px) {
  .home { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  .home-side { position: sticky; top: calc(var(--top) + 12px); }
  .view.searching .home { grid-template-columns: minmax(0, 1fr); }
}
/* phones: one column, the favourites and the recent right under the patient - on the first screen, before the tools;
   the two sponsored places stay apart ("Zmiany w ChPL" between them), the data line last */
@media (max-width: 959.98px) {
  .home { display: flex; flex-direction: column; }
  .home-main, .home-side { display: contents; }
  .home-main > .home-tools, .home-main > .home-tools ~ *, .home-side > :not(.home-mini) { order: 1; }
  .home-side > .ad-home_strip { order: 2; }
  .home-side > .scope-note, .home-side > .data-line { order: 3; }
}
.patient-card .pc-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.patient-card .pc-actions { display: flex; gap: 8px; }
.patient-card .pc-actions .btn { min-height: 44px; }
.home-tools .card-head { margin-bottom: 8px; }
/* the tiles: the small icon over a short name - two rows of three on a phone, one row of six on a tablet */
.quick-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.qt {
  display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 64px; padding: 6px 4px; text-align: center;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); color: var(--ink); transition: transform .12s var(--ease), border-color .15s;
}
.qt b { font-size: clamp(.68rem, 3.4vw, .86rem); font-weight: 700; line-height: 1.15; overflow-wrap: break-word; max-width: 100%; }
.qt-ico { font-size: 1.6rem; line-height: 1; }
.qt:active { transform: scale(.96); }
.emergency {
  display: flex; align-items: center; gap: 10px; min-height: 52px; margin-top: 8px; padding: 6px 10px 6px 8px; border-radius: var(--r-md);
  background: var(--bad-soft); color: var(--bad); border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent);
}
.emergency .t-ico.bad { background: var(--card); }
.emergency > span:nth-child(2) { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.emergency b { font-size: 1rem; }
.emergency small { color: var(--ink-2); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emergency .tool-go { color: var(--bad); }
@media (hover: hover) { .qt:hover { border-color: var(--accent); } .emergency:hover { border-color: var(--bad); } }
@media (min-width: 720px) {
  .quick-tools { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* desktop (the tools in the left column): three a row, the icon beside the name - lower tiles, nothing squeezed */
@media (min-width: 960px) {
  .quick-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .qt { display: flex; justify-content: flex-start; gap: 10px; min-height: 52px; padding: 6px 10px; text-align: left; }
  .qt b { font-size: .9rem; }
}
/* the chevron of a row: an icon, the same everywhere */
.tool-go svg.ico.ico { width: 20px; height: 20px; }
.mini-main { display: grid; gap: 1px; min-width: 0; flex: 1; }
.mini .tool-go { font-size: 1.3rem; }
/* the start screen's lists: two short lines a row (the name; substance · form) - about 44 px a row, not 52 */
.home .mini { min-height: 44px; padding: 3px 0; }
.home .mini-main { line-height: 1.3; }
.home-mini .card-head { margin-bottom: 2px; }
/* phones: three rows of each list (app.js MINI_ROWS), "+N więcej" opens the rest in place - the tools stay near the
   first screen; wide screens (the lists in their own column) show them all */
@media (max-width: 959.98px) { .home-mini:not(.open) .mini:nth-child(n+4) { display: none; } }
@media (min-width: 960px) { .home-mini .card-head .mini-more { display: none; } }

/* ---------- drug card: shortcuts under the name (the corrections are in "⋯") ---------- */
.p-quick { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -12px 10px; padding: 0 12px; }
.p-quick::-webkit-scrollbar { display: none; }
.p-quick .chip { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); min-height: 44px; }
@media (min-width: 720px) { .p-quick { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } }
/* the tool page: "Karta leku" and "Potwierdź dawkę" side by side, the corrections folded away */
/* "2 dawkowania · na karcie leku" is a pointer, not a warning */
.brow .pv.muted small { color: var(--muted); }
.dosing > h2 { margin-bottom: 2px; }
.dose-meta { margin: 0 0 10px; color: var(--muted); font-size: .85rem; }
.spc-note { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--warn-soft);
  border-left: 3px solid var(--warn); color: var(--ink); font-size: .85rem; line-height: 1.4; }
.spc-note > svg.ico.ico { color: var(--warn); width: 18px; height: 18px; margin-top: 1px; }
.tool-pick-min { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 2px; }
.emerg th { white-space: nowrap; }
/* RKO: the one tool used in a hurry - red on the list of tools as on the start screen */
.tool-link.urgent { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.tool-link.urgent b, .tool-link.urgent .tool-go { color: var(--bad); }
/* the SPC reader: the text first - one row of head (the title, the version, ✎ how to correct the text), the shortcuts
   in one sliding row on every screen, the text above the bottom bar */
.doc-head { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-bottom: 6px; }
.doc-head h1 { font-size: 1.08rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.doc-head .p-sub { font-size: .84rem; }
.doc-fix svg.ico.ico { width: 20px; height: 20px; color: var(--accent); }
.reader { --doc-h: calc(100dvh - var(--doc-top, var(--top)) - 16px - var(--nav-h, 0px)); }
.quick { flex-wrap: nowrap; overflow-x: auto; margin: 0 -12px 6px; padding: 2px 12px; }
.quick .chip { flex: none; }
@media (min-width: 720px) {
  .doc-head h1 { font-size: 1.2rem; }
  .quick { margin-inline: 0; padding-inline: 0; }
}

/* ---------- tool page: under the tool the result, the key points of the SPC and the whole SPC (tools.js renderTools) ---------- */
.tool-doc .dp-head { position: static; display: flex; padding: 0 0 8px; background: none; }
.tool-doc .dp-text { overflow: visible; }
.tool-doc > .loading { padding: 24px 8px; }
.tool-side .key-points .card-head { margin-bottom: 4px; }
@media (max-width: 959.98px) {
  /* the shortcuts to the SPC's points ride under the top bar while its text is read */
  .tool-doc .dp-quick {
    position: sticky; top: var(--top); z-index: 5; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 0 -16px; padding: 8px 16px; background: var(--card); border-bottom: 1px solid var(--line);
  }
  .tool-doc .dp-quick::-webkit-scrollbar { display: none; }
  .tool-doc .dp-quick .chip { flex: none; }
  .tool-doc .sec { scroll-margin-top: calc(var(--top) + 64px); }
}
@media (min-width: 960px) {
  .tool-doc .dp-quick { position: sticky; top: 0; z-index: 5; background: var(--card); padding: 4px 0 8px; }
}
/* one column on phones that never grows past the screen (a wide SPC table scrolls inside its own box) */
.tool-layout { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .tool-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.tool-main, .tool-aside, .tool-side { grid-template-columns: minmax(0, 1fr); }


/* ================================================================== the list of medicines A-Z (browse.js)
   A search field with the filters that stays under the top bar, the kind of medicine as a row of chips, sticky
   letter headings, an A-Z strip at the edge; rows: name, substance · form, strengths, animals - a table on wide
   screens. */
/* a phone: the head is one row - ‹, the tabs (they name the list; its heading is there for screen readers), the count */
.browse-head { grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 8px; margin-bottom: 2px; }
.browse-head .browse-tabs { grid-column: 2; grid-row: 1; grid-auto-columns: auto; margin: 0; padding: 2px; }
.browse-head .p-title { grid-column: 3; grid-row: 1; padding: 0; text-align: right; }
.browse-head h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.browse-tabs a { min-height: 44px; }
.browse-bar {
  position: sticky; top: var(--top); z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 0 calc(-1 * max(12px, env(safe-area-inset-left))) 4px; padding: 6px max(12px, env(safe-area-inset-left));
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.bar-search { flex: 1 1 160px; min-width: 0; min-height: 46px; border-radius: 14px; padding-inline: 12px; gap: 8px; }
.bar-search input { height: 44px; font-size: 1rem; }
.bar-search svg { width: 20px; height: 20px; }
.browse-bar .filter-btn, dialog.fullsheet .browse-bar .filter-btn {
  flex: none; width: auto; max-width: none; min-height: 46px; padding: 0 10px 0 12px; border-radius: 14px;
  display: inline-flex; align-items: center; gap: 4px; justify-content: center;
}
.filter-btn svg { width: 20px; height: 20px; fill: currentColor; }
.filter-btn .fb-label { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.filter-btn .fb-name { display: none; }
.filter-btn .fb-short { font-weight: 750; }
.fb-caret { width: 18px !important; height: 18px !important; opacity: .7; margin-left: -2px; }
.filter-btn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
/* the kind of medicine: one row of chips, sliding sideways */
.type-quick {
  flex: 1 0 100%; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  margin: 0 calc(-1 * max(12px, env(safe-area-inset-left))); padding: 2px max(12px, env(safe-area-inset-left));
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
.type-quick::-webkit-scrollbar { display: none; }
.tq { min-height: var(--tap); padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; }
.tq small { color: var(--muted); font-size: .74rem; font-weight: 650; }
.tq.on small { color: inherit; } /* a count on a chosen chip: full colour (opacity fell under 4.5:1) */
.tq-ic { display: inline-flex; flex: none; } /* the chip's icon (typeIcon / formIcon): 18 px, .chip svg.ico */
.tq-x { font-weight: 850; font-size: .8rem; margin-left: 2px; }
.chip[data-mine].on svg.ico.ico { fill: currentColor; } /* "Moje leki" on: the star filled, like a favourite's */
/* the bar's second row: the animals picked as a chip that stays put (✕: all animals), the kinds sliding next to it */
.bar-chips { flex: 1 0 100%; display: flex; align-items: center; gap: 6px; min-width: 0; }
.bar-chips:not(:has(> :not([hidden]))) { display: none; }
/* basis 0: the kinds take what the animals' chip leaves - a basis of their whole content (2000 px of chips) made the
   shrinking squeeze the chip to a sliver on phones (tests/js/browsebar.test.mjs) */
.bar-chips > .type-quick { flex: 1 1 0; min-width: 0; margin: 0; padding: 2px 0; }
.browse-active { flex: 0 1 auto; display: flex; min-width: 0; max-width: 62%; }
.ba-chip { max-width: 100%; gap: 4px; }
.ba-names { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ba-names small { color: inherit; font-size: .76rem; font-weight: 600; }

/* the kind of medicine: the full sheet */
.type-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 8px; }
.type-row {
  display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 6px 10px; text-align: left; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink);
}
.type-row .tr-ic { display: inline-flex; flex: none; color: var(--muted); }
.type-row .tr-ic svg.ico.ico { width: 22px; height: 22px; }
.type-row.on .tr-ic { color: inherit; }
.type-row .tr-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.type-row .tr-name { font-weight: 750; font-size: .9rem; line-height: 1.2; overflow-wrap: anywhere; }
.type-row .tr-n { font-size: .74rem; font-weight: 650; color: var(--muted); }
.type-row.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.type-row.on .tr-n { color: inherit; }
.type-row:active { transform: scale(.98); }
.type-list .type-subs {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 4px; padding: 10px;
  border-radius: 14px; background: var(--soft); border: 1px dashed var(--line);
}
.type-subs .chip { min-height: 40px; font-size: .84rem; }
.type-subs .chip small { color: var(--muted); font-weight: 650; }
.type-subs .chip.on small { color: inherit; }
.form-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.form-chip { min-height: 40px; display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; }
.form-chip small { color: var(--muted); font-weight: 650; }
.form-chip.on small { color: inherit; }
/* "Wyczyść" and "Pokaż N leków" stay on the screen while the sheet scrolls */
.sheet-foot {
  position: sticky; bottom: calc(-20px - env(safe-area-inset-bottom)); z-index: 3;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 8px;
  margin: 16px -16px calc(-20px - env(safe-area-inset-bottom)); padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--card); border-top: 1px solid var(--line);
}
.sheet-foot .btn { min-height: 50px; }
.sheet-foot .btn:disabled { opacity: .45; }

/* letters: the heading stays under the bar while its section scrolls */
.letter-h {
  position: sticky; top: calc(var(--top) + var(--bar-h, 60px)); z-index: 5;
  margin: 0 -4px; padding: 4px 8px; background: var(--bg); font-size: .92rem; font-weight: 850; color: var(--accent);
}
.letter { scroll-margin-top: calc(var(--top) + var(--bar-h, 60px) - 4px); }
.letter + .letter { margin-top: 4px; }
#browse-list { padding-bottom: 24px; }

/* rows: two lines on a phone - the name with its marks and the strengths after it (a long name pushes them to a line
   of their own), then the substance · form with the animals at the end */
.brow { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 0; }
.brow-main { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.bl-name { flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.bl-name b { font-weight: 750; font-size: 1rem; overflow-wrap: anywhere; }
.bl-name .badge { padding: 1px 6px; font-size: .68rem; }
.bl-str { flex: 0 1 auto; display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.bl-str:empty { display: none; }
.bl-meta { flex: 1 0 100%; display: flex; align-items: center; gap: 6px; min-width: 0; }
.bl-line { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; color: var(--muted); }
.bl-sub { color: color-mix(in srgb, var(--ink) 78%, var(--muted)); }
.bl-form > span::before { content: " · "; }
.bl-sub:empty + .bl-form > span::before { content: none; }
.bl-cls { display: none; }
.bl-sp { flex: none; margin-left: auto; display: flex; align-items: center; gap: 1px; color: var(--muted); }
.bl-sp svg { width: 19px; height: 19px; }
.sp-more { font-size: .72rem; font-weight: 750; margin-left: 2px; white-space: nowrap; }
.bl-go { flex: none; color: var(--muted); font-size: 1.5rem; line-height: 1; opacity: .7; }
.bl-go svg.ico.ico { width: 20px; height: 20px; }
.brow > .pv { max-width: 42%; }
.subst-list .brow .pv { max-width: none; }
.list-head { display: none; }

/* the A-Z strip at the edge (only the letters of this list) and the big letter while a finger slides on it */
.az-index {
  position: fixed; z-index: 24; right: max(0px, env(safe-area-inset-right));
  top: calc(var(--top) + var(--bar-h, 60px) + 10px); bottom: calc(14px + env(safe-area-inset-bottom));
  width: 26px; display: flex; flex-direction: column; justify-content: center; gap: 0;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.az-index button {
  flex: 0 1 22px; min-height: 12px; width: 26px; border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--accent); font-size: .68rem; font-weight: 850; line-height: 1; border-radius: 6px;
}
.az-index button.cur { background: var(--accent); color: var(--accent-ink); }
.az-bubble {
  position: fixed; z-index: 26; right: 44px; top: 42%; width: 68px; height: 68px; border-radius: 18px;
  display: grid; place-items: center; font-size: 2.1rem; font-weight: 850;
  background: var(--accent); color: var(--accent-ink); box-shadow: 0 12px 30px rgba(0, 0, 0, .3);
}
@media (max-width: 719px) {
  /* room for the strip on the right: the rows end before it */
  #browse-list { margin-right: 14px; }
}

@media (min-width: 720px) {
  .browse-head { grid-template-columns: auto minmax(0, 1fr) minmax(260px, 340px); margin-bottom: 4px; }
  .browse-head .browse-tabs { grid-column: 3; grid-auto-columns: 1fr; }
  .browse-head .p-title { grid-column: 2; text-align: left; }
  .browse-head h1 { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .browse-bar { margin-inline: -16px; padding-inline: 16px; }
  .type-quick { margin-inline: -16px; padding-inline: 16px; }
  .filter-btn .fb-name { display: inline; }
  .filter-btn .fb-short { display: none; }
  .browse-bar .filter-btn { max-width: 30%; }
  .filter-btn .fb-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: inline-block; }
  .filter-btn .fb-label svg { vertical-align: -4px; }
  .sheet-foot { margin-inline: -22px; padding-inline: 22px; }
  .az-index { right: max(4px, calc((100vw - 1180px) / 2 - 30px)); }
}

/* wide screens: the rows are a table - Lek · Substancja · Postać · Moc · Zwierzęta */
@media (min-width: 960px) {
  .list-head, .brow-list .brow {
    display: grid; column-gap: 16px; align-items: center;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.7fr) minmax(0, 1.4fr) minmax(0, 1.1fr) 116px 124px;
  }
  .list-head {
    padding: 0 21px 6px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  }
  .brow-list .brow { padding: 8px 0; }
  .brow-list .brow-main, .brow-list .bl-line, .brow-list .bl-meta { display: contents; }
  /* every cell in its column of the one row (the strengths come before the substance in the markup) */
  .brow-list .brow > *, .brow-list .bl-name, .brow-list .bl-str, .brow-list .bl-sub, .brow-list .bl-form, .brow-list .bl-sp { grid-row: 1; }
  .brow-list .bl-name { grid-column: 1; }
  .brow-list .bl-sub { grid-column: 2; }
  .brow-list .bl-form { grid-column: 3; }
  .brow-list .bl-str { grid-column: 4; }
  .brow-list .bl-sp { grid-column: 5; margin-left: 0; }
  .brow-list .brow > .pv, .brow-list .bl-go { grid-column: 6; }
  .brow > .pv { max-width: none; }
  .brow-list .bl-name { flex-wrap: nowrap; }
  .brow-list .bl-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .brow-list .bl-line > * { min-width: 0; font-size: .88rem; }
  .brow-list .bl-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .brow-list .bl-form { display: grid; min-width: 0; color: var(--muted); }
  .brow-list .bl-form > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .brow-list .bl-form > span::before { content: none; }
  .brow-list .bl-cls { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; }
  .brow-list .bl-sp { justify-self: start; }
  .brow-list .brow > .pv, .brow-list .bl-go { justify-self: end; }
  .subst-list .brow { display: flex; }
}

/* the calculator's picker: its own head (the SPC panel's .dp-head is laid out as a row) */
dialog.fullsheet .dp-head { display: grid; grid-template-columns: auto minmax(0, 1fr); justify-content: normal; align-items: center; padding: 8px 0; }
dialog.fullsheet .dp-head .p-title { text-align: left; }
/* the picker's bar stays in the dialog's centred column (dialog.fullsheet > *), like its head and its list */
dialog.fullsheet .browse-bar { margin-inline: auto; padding-inline: 0; background: var(--bg); }
dialog.fullsheet .type-quick { margin-inline: 0; padding-inline: 0; }
dialog.fullsheet .bar-search { flex-basis: 110px; }
.trial-line { display: flex; align-items: center; gap: 8px; margin: 0 2px 6px; font-size: .84rem; color: var(--muted); }
.trial-line svg.ico.ico { width: 16px; height: 16px; }
@media (max-width: 719px) { .trial-line { margin-right: 26px; } }

/* ---------- sponsoring (ads.js): a separate card, always "Sponsorowane" - calm, never louder than the data ---------- */
.ad-card { padding: 0; overflow: hidden; }
.ad-card.ad-product { padding: 16px 16px 0; }
.ad-card.ad-product h2 { margin-bottom: 6px; }
.ad-lab { display: flex; align-items: center; gap: 8px; padding: 6px 6px 0 12px; font-size: .74rem; font-weight: 700; letter-spacing: .02em; color: var(--muted); }
.ad-product .ad-lab { padding: 0 0 8px; }
.ad-lab > span { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.ad-why { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; color: var(--muted);
  font: inherit; font-weight: 650; cursor: pointer; padding: 6px 0; min-height: 32px; }
.ad-why svg { width: 15px; height: 15px; fill: currentColor; }
.ad-x { flex: none; border: 0; background: none; color: var(--muted); font-size: 1rem; cursor: pointer; width: 40px; height: 32px; border-radius: 999px; }
.ad-x:hover { background: var(--soft); }
/* "Dlaczego to widzę?" and ✕ stay small in their line; the finger gets 44 px around each (no overlap between them) */
.ad-why, .ad-x { position: relative; }
.ad-why::after, .ad-x::after { content: ""; position: absolute; inset: -6px -2px; }
.ad-main { display: block; color: var(--ink); }
.ad-product .ad-main { margin: 0 -16px; border-top: 1px solid var(--line); }
.ad-img { display: block; width: 100%; aspect-ratio: 3 / 1; object-fit: cover; background: var(--soft); margin-top: 6px; }
.ad-in { padding: 8px 12px 10px; }
.ad-product .ad-in { padding: 12px 16px 14px; }
.ad-t { font-weight: 750; font-size: 1rem; }
.ad-b { margin: 4px 0 0; color: var(--muted); font-size: .9rem; }
.ad-cta { display: inline-block; margin-top: 6px; font-weight: 700; font-size: .9rem; color: var(--accent); }
.ad-partner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -2px 2px 12px; font-size: .86rem; }
.ad-partner-go { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); min-height: 32px; }
.ad-partner-go img { height: 22px; max-width: 90px; object-fit: contain; }
.ad-why-s { margin-left: 0; font-size: .74rem; }
/* the strip: one line - a logo, "Sponsorowane · who", the text; the size of one row of a list */
.ad-strip { display: flex; align-items: center; gap: 4px; margin: 0 0 10px; padding: 4px 6px 4px 12px; min-height: 52px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.ad-strip-go { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--ink); padding: 4px 0; }
.ad-strip-go img { width: 36px; height: 36px; object-fit: contain; border-radius: 8px; flex: none; }
.ad-strip-t { min-width: 0; display: grid; }
.ad-strip-t small { font-size: .7rem; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.ad-strip-t b { font-size: .9rem; font-weight: 650; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ad-why-i { margin-left: 0; width: 40px; justify-content: center; }
.ad-why-i svg { width: 18px; height: 18px; }
.ad-lab .ad-why-i { margin-left: auto; } /* the card's label: "Sponsorowane · who" on the left, ⓘ and ✕ on the right */
.ad-text .ad-in { padding-top: 6px; }
/* the graphic strip: "Sponsorowane · who", ⓘ and ✕ on one small line, then the picture the width of the screen (6:1) */
.ad-wide { margin: 0 0 10px; }
.ad-wide .ad-lab { padding: 0 0 2px 4px; }
.ad-wide-img { display: block; width: 100%; aspect-ratio: 6 / 1; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); background: var(--soft); }
/* the strips on top of a card and above the list: the card's / list's own spacing around them */
.product > .ad-product_top, .hist-page > .ad-product_top { margin: 4px 0 12px; }
.login-partner { margin-top: 12px; }
.login-partner .ad-partner, .login-partner .ad-strip { justify-content: center; margin: 0; }
.ad-why-body ul { margin: 8px 0 10px; padding-left: 20px; }
.ad-why-body li { margin: 4px 0; }
/* "Zgłoś reklamę" (ads.js): under "Dlaczego to widzę?", then the reasons as one-tap rows */
.ad-report-line { margin: 0 0 4px; }
.ad-report .switch { margin-top: 8px; padding: 10px 12px; }

/* ---------- "Zmiany w ChPL" (changes.js) ---------- */
/* two rows of filters: the kind of change, then one sliding row of chips - "Moje leki", the animals, the kinds */
.chg-bar { display: grid; gap: 6px; margin-bottom: 8px; }
.chg-kinds button { font-size: .84rem; }
.chg-types { margin-top: 0; }
.chg-types .filter-btn { flex: none; width: auto; max-width: none; min-height: var(--tap); justify-content: flex-start; gap: 4px; }
.chg-types .filter-btn .fb-name { display: inline; }
.chg-types .filter-btn svg { width: 18px; height: 18px; }
/* "Wszystkie" / "Tygodnie" and a week (changes.js): its numbers over the whole database in four tiles */
.chg-tabs { margin: 0 0 10px; }
.chg-week-nav { margin: 0 0 8px; }
.chg-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.chg-tile { display: grid; justify-items: center; align-content: center; gap: 2px; padding: 10px 4px; border-radius: 12px; background: var(--card);
  border: 1px solid var(--line); text-align: center; }
.chg-tile b { font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.chg-tile small { font-size: .72rem; color: var(--muted); font-weight: 650; line-height: 1.2; }
.chg-tiles-note { margin: 4px 4px 10px; }
.chg-week-sec h2 { font-size: 1rem; margin: 0 0 6px; }
.chg-week-row .chg-new-dot { vertical-align: 1px; }
.bl-wd { margin-left: 4px; }
.p-withdrawn { margin: 8px 0; }
.chg-day { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 12px 4px 6px; }
.chg-item { display: block; color: var(--ink); padding: 10px 14px; }
/* an entry's head, two lines: the medicine (its link a finger tall, the line not) with "nowe" and the kind of document,
   then when and what it is, cut at the end */
.chg-top { display: flex; align-items: center; gap: 6px; }
.chg-top .chg-kind, .chg-top .chg-new-dot { flex: none; }
.chg-top .chg-new-dot { margin-left: 0; }
.chg-kind { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.chg-new-dot { font-size: .7rem; font-weight: 800; text-transform: uppercase; color: var(--accent-ink); background: var(--accent); border-radius: 6px; padding: 2px 6px; margin-left: 6px; }
.chg-name { display: block; flex: 1 1 auto; min-width: 0; padding-block: 9px; margin-block: -9px; font-weight: 750; font-size: 1.05rem; line-height: 1.3; color: var(--ink); }
.chg-desc { margin: 8px 0 0; padding: 6px 10px; border-radius: 10px; background: var(--accent-soft); font-size: .9rem; }
.chg-desc b { color: var(--accent); }
.chg-points { margin-top: 2px; }
.chg-point { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.chg-point-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-bottom: 4px; }
.chg-point-h small { color: var(--muted); font-size: .78rem; }
.chg-point.imp .chg-point-h b { color: var(--warn); }
.chg-hunk { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 4px 8px; margin: 4px 0; font-size: .9rem; line-height: 1.45; }
.chg-hunk p { margin: 0; overflow-wrap: anywhere; }
.chg-l { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 3px 0; text-align: center;
  border-radius: 6px; align-self: start; }
.chg-l.was { background: var(--del); color: var(--bad); }
.chg-l.now { background: var(--ins); color: var(--ok); }
.chg-hunk del { text-decoration: line-through; text-decoration-thickness: 1px; }
.chg-more { margin: 2px 0 0 66px; }
/* the entry's foot: "bez zmian", "Pokaż wszystkie" and "Pełne porównanie" in one row (it wraps on a narrow phone) */
.chg-point-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 12px; margin-top: 2px; }
.chg-point-foot .chg-go { margin-left: auto; }
.chg-wait { margin: 6px 0 0; }
.chg-wait .spinner { width: 14px; height: 14px; margin-right: 6px; }
.chg-pager { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 6px 0 10px; }
.chg-pager > span:empty { min-width: 1px; }
.chg-sub { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chg-sum { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.chg-pt { display: inline-flex; align-items: baseline; gap: 5px; border-radius: 10px; padding: 4px 9px; background: var(--soft); border: 1px solid var(--line); font-size: .84rem; }
.chg-pt small { color: var(--muted); font-size: .74rem; }
.chg-pt.imp { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.chg-pt.imp small { color: inherit; }
.chg-pt.more { color: var(--muted); }
.chg-go { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; font-size: .88rem; color: var(--accent); }
.chg-new summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; cursor: pointer; min-height: var(--tap); }
.chg-new[open] summary { margin-bottom: 4px; }
/* notifications and the weekly e-mail: settings of the screen, folded at its end - one tap opens them */
.chg-alerts { padding-block: 4px; }
.chg-alerts[open] { padding-bottom: 14px; }
.chg-alerts > summary { display: flex; align-items: center; gap: 10px; min-height: var(--tap); cursor: pointer; list-style: none; font-weight: 700; }
.chg-alerts > summary::-webkit-details-marker { display: none; }
.chg-alerts > summary svg.ico.ico { width: 20px; height: 20px; color: var(--accent); }
.chg-alerts > summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-left: auto; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .2s var(--ease); }
.chg-alerts[open] > summary::after { transform: rotate(-135deg); }
.chg-alerts .switch { padding: 10px 12px; margin-top: 8px; }
.chg-alerts .switch small { display: block; font-weight: 400; color: var(--muted); font-size: .82rem; }
.chg-alerts .switch:first-of-type { margin-top: 4px; }
.chg-note { text-align: center; margin: 0 8px 12px; }
.chg-count { display: inline-block; vertical-align: 2px; margin-left: 6px; font-size: .72rem; font-weight: 800; color: var(--accent-ink); background: var(--accent); border-radius: 999px; padding: 2px 8px; }

/* the account: a vet's licence number */
.pwz-row { display: flex; align-items: center; gap: 4px 10px; justify-content: space-between; flex-wrap: wrap; padding: 6px 6px 6px 12px; border-radius: 12px; background: var(--soft); font-size: .9rem; margin: 0 0 6px; }
.pwz-row > span { flex: 1 1 180px; min-width: 0; }
.pwz-ok { color: var(--ok); font-weight: 700; }
.pwz-row small { display: block; color: var(--muted); font-size: .8rem; margin-top: 1px; }
.danger-text { color: var(--bad); }

/* licences (license.js): what a licence gives, in place of the SPC content - calm, the official PDF next to it */
.license-lock p { margin: 0 0 10px; }
.lock-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 4px; }
.lock-line { margin: 8px 0 0; padding: 8px 12px; border-radius: 12px; background: var(--soft); font-size: .9rem; }
.license-row { background: var(--accent-soft); }

/* the trial (license.js): what full access gives, greyed where it would be - its shape, never its content */
.lock-ico { display: inline-flex; vertical-align: -.1em; color: var(--muted); }
.lock-ico svg.ico.ico { width: 17px; height: 17px; }
.locked-card { position: relative; overflow: hidden; }
.ghosted { display: grid; gap: 8px; opacity: .6; filter: blur(.6px); pointer-events: none; user-select: none; }
.ghost-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1.5px dashed var(--line); border-radius: 14px; }
.ghost-lines { flex: 1; display: grid; gap: 7px; }
.gb { display: block; height: 11px; border-radius: 6px; background: color-mix(in srgb, var(--muted) 22%, var(--soft)); }
.gb.thin { height: 8px; opacity: .7; }
.gb.pill { width: 70px; height: 26px; border-radius: 9px; flex: none; }
.lock-over { position: relative; margin-top: -46px; padding-top: 46px; background: linear-gradient(to bottom, transparent, var(--card) 44px); }
.lock-over p { margin: 0 0 8px; }
.lock-over .btn { margin-bottom: 0; } /* the way to it and the official PDF: one row (.lock-actions) */
.doc-ghost { padding: 6px 0 20px; }
.tiles-locked { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.tile-locked { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 6px 10px; border: 1.5px dashed var(--line);
  border-radius: var(--r-sm); background: var(--soft); color: var(--muted); font: inherit; font-size: .86rem; font-weight: 650; line-height: 1.2;
  text-align: left; cursor: pointer; }
.tile-locked svg.ico.ico { width: 15px; height: 15px; opacity: .8; }
@media (hover: hover) { .tile-locked:hover { border-color: var(--line-strong); color: var(--ink); } }
@media (min-width: 720px) { .tiles-locked { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lock-foot { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 10px; }
.lock-foot p { margin: 0 0 8px; }
.chip.locked, .btn.locked { background: var(--soft); color: var(--muted); border: 1.5px dashed var(--line); }
.p-quick .chip { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); font-family: inherit; }
.p-quick .chip.locked { color: var(--muted); }
.why-locked { display: block; width: 100%; margin: 0; padding: 0 14px 10px; border: 0; background: none; text-align: left; font: inherit;
  font-size: .85rem; color: var(--muted); cursor: pointer; }
.pv.locked small { color: var(--muted); }
.pv.locked { color: var(--muted); justify-items: center; min-width: 28px; }
.pv.locked svg.ico.ico { width: 18px; height: 18px; }
.pv-n { font-size: .82rem; }
.btn.locked:not(:disabled):hover { background: var(--soft); border-color: var(--line-strong); }
.trial-note { margin: 10px 0 0; font-size: .82rem; color: var(--muted); }
.trial-note svg.ico.ico, .reader-fix svg.ico.ico, .report-link svg.ico.ico { width: 16px; height: 16px; }
.trial-card { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); background: linear-gradient(135deg, var(--accent-soft), var(--card) 65%); }
.trial-card p { margin: 8px 0 12px; }
.trial-left { font-size: .82rem; font-weight: 800; color: var(--accent); }
.trial-meter { height: 8px; margin: 8px 0 4px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); overflow: hidden; }
.trial-meter span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.trial-meter + .muted { margin: 0; }
.verify-sheet .gives { list-style: none; margin: 8px 0 10px; padding: 0; display: grid; gap: 8px; }
.verify-sheet .gives li { display: flex; gap: 12px; align-items: flex-start; }
.verify-sheet .gives li > span:first-child { font-size: 1.25rem; line-height: 1.2; }
.gives.compact li > svg.ico.ico { color: var(--accent); width: 20px; height: 20px; }
.verify-wait svg.ico.ico { width: 16px; height: 16px; }
.verify-sheet .gives small { display: block; color: var(--muted); font-size: .82rem; }
.verify-cta { margin: 10px 0 8px; }
.verify-cta .btn.block { margin-top: 0; }
.verify-wait { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--soft); font-size: .9rem; }
/* the trial: "Otwórz lek (1 z N)" and the question before it */
.p-quick .chip.open-chip { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
[data-trial-ask] small { font-weight: 600; opacity: .8; }
.trial-ask p { margin: 0 0 10px; }
.gives.compact { list-style: none; margin: 6px 0 12px; padding: 0; display: grid; gap: 6px; font-size: .92rem; }
.gives.compact li { display: flex; gap: 10px; align-items: center; }
.trial-cost { padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); }
.field textarea { width: 100%; min-height: 84px; padding: 12px 14px; border: 1.5px solid var(--field-line); border-radius: 14px; background: var(--card);
  color: var(--ink); font: inherit; resize: vertical; }
.field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ---------- "Kalkulator" (calculator.js): the phone's calculator inside the app - big keys, the result in one glance ---------- */
.calc-layout { display: grid; gap: 12px; align-items: start; }
@media (min-width: 960px) { .calc-layout { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 16px; } }
.calc-card { display: grid; gap: 12px; padding: 14px; }
.calc-mode { margin: 0; }
.calc-screen {
  display: grid; justify-items: end; align-content: end; gap: 4px; width: 100%; min-height: 116px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--soft); color: var(--ink); font: inherit; text-align: right;
  cursor: copy; font-variant-numeric: tabular-nums;
}
.calc-expr { font-size: 2rem; font-weight: 750; line-height: 1.15; word-break: break-all; }
.calc-screen.done .calc-expr { color: var(--accent); }
.calc-preview { min-height: 1.4em; color: var(--muted); font-size: 1.15rem; font-weight: 650; }
.calc-keys { display: grid; gap: 8px; }
.calc-basic, .calc-adv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ck {
  min-height: 58px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink);
  font: inherit; font-size: 1.35rem; font-weight: 650; cursor: pointer; touch-action: manipulation; user-select: none;
  display: grid; place-items: center; align-content: center; gap: 0; transition: transform .08s var(--ease), background .15s;
}
.ck:active { transform: scale(.96); }
.ck.op { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.ck.eq { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.ck.fn { background: var(--soft); color: var(--warn); }
.ck small { font-size: .68rem; font-weight: 700; color: var(--muted); }
.calc-adv .ck { min-height: 46px; font-size: 1.05rem; }
.calc-history-card h2 { margin-top: 0; }
.calc-hist { list-style: none; margin: 0 0 8px; padding: 0; }
.calc-hist li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.calc-hist li:first-child { border-top: 0; }
.ch-main { display: grid; gap: 2px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.ch-expr { color: var(--muted); font-size: .88rem; word-break: break-all; }
.ch-main b { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.ch-note { font-size: .88rem; font-style: italic; }
.ch-acts { display: grid; justify-items: end; gap: 2px; }
.calc-note-form textarea { width: 100%; }

/* ---------- "Zatrucia": what was eaten, the dose per kg, the ladder of the Merck doses ---------- */
.tox-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tox-grid button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; padding: 6px 4px;
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; }
.tox-grid button svg.ico.ico { width: 24px; height: 24px; }
.tox-grid button.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.tox-grid.small button { min-height: 42px; font-size: .78rem; font-weight: 650; }
.field-or { margin: 2px 0 -4px; color: var(--muted); font-size: .82rem; }
.tox-status { margin: 0 0 8px; padding: 10px 12px; border-radius: 12px; font-weight: 750; }
.tox-status.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.tox-status.warn { background: var(--warn-soft); color: var(--warn); }
.tox-status.bad, .tox-status.crit { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); }
.tox-ladder { list-style: none; margin: 10px 0 4px; padding: 0; display: grid; gap: 4px; }
.tox-ladder li { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 8px; padding: 6px 10px; border-radius: 10px; background: var(--soft);
  color: var(--muted); font-size: .86rem; }
.tox-ladder li b { font-variant-numeric: tabular-nums; }
.tox-ladder li.on { color: var(--ink); }
.tox-ladder li.on.warn { background: var(--warn-soft); }
.tox-ladder li.on.bad, .tox-ladder li.on.crit { background: color-mix(in srgb, var(--bad) 14%, transparent); }
/* a species without thresholds of its own: grey (consult), muted (low risk, not applicable), "below" another species'
   thresholds grey with a warning - never the green of "below"; an extrapolation's banner in a warning's colour */
.tox-status > svg.ico.ico { width: 18px; height: 18px; vertical-align: -3px; }
.tox-status.consult, .tox-status.below { background: var(--soft); color: var(--ink); border-left: 3px solid var(--muted); }
.tox-status.low { background: var(--soft); color: var(--ink-2); font-weight: 650; }
.tox-status.na { background: var(--soft); color: var(--ink-2); font-weight: 500; line-height: 1.45; }
.tox-basis { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 8px; padding: 8px 12px; border-radius: var(--r-sm);
  background: var(--warn-soft); border-left: 3px solid var(--warn); font-size: .88rem; line-height: 1.4; }
.tox-basis p { margin: 0; }
.tox-basis > svg.ico.ico { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--warn); }
.tox-text { margin: 8px 0 0; font-size: .88rem; line-height: 1.45; }
.tox-ev { margin: 6px 0 0; font-size: .82rem; color: var(--muted); }
.tox-chronic { margin: 8px 0 0; font-size: .85rem; }
.tox-chronic > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--ink-2); font-weight: 650; }
.tox-chronic ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; line-height: 1.4; }
.result-box .tox-src { margin: 8px 0 0; }
.tox-need { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; font-weight: 650; font-size: .9rem; }
.tox-need > svg.ico.ico { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--warn); }
.tox-need .link { font-weight: 700; }
/* "Zatrucia" - the treatment under the result (toxtreat.js): folded until opened, steps, a dose field per drug */
.tox-tx { margin: 12px 0 4px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); }
.tox-tx > summary { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; min-height: 44px; cursor: pointer; list-style: none; }
.tox-tx > summary::-webkit-details-marker { display: none; }
.tox-tx > summary::after { content: "▾"; position: absolute; right: 14px; color: var(--muted); }
.tox-tx > summary { position: relative; padding-right: 36px; }
.tox-tx[open] > summary::after { content: "▴"; }
.tox-tx > summary small { color: var(--muted); font-size: .8rem; }
.tx-hint { margin: 0 14px 8px; }
.tx-steps { margin: 0; padding: 0 14px 0 34px; display: grid; gap: 12px; }
.tx-title { display: block; margin-bottom: 4px; }
.tx-drugs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tx-drug { padding: 8px 10px; border-radius: 10px; background: var(--soft); }
.tx-drug.dim { opacity: .55; }
.tx-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tx-head .chip { min-height: 36px; margin-left: auto; }
.tx-sp { font-size: .75rem; font-weight: 700; color: var(--muted); }
.badge.tx-warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.tx-ref { margin-top: 2px; font-size: .86rem; color: var(--muted); }
.tx-dose { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.tx-dose .tx-l { font-size: .86rem; font-weight: 700; color: var(--muted); }
.tx-dose .tx-in { flex: 0 1 7.5em; min-height: 44px; }
.tx-unit { font-weight: 700; }
.tx-amt { margin-top: 4px; font-variant-numeric: tabular-nums; }
.tx-amt:empty { display: none; }
.tx-note { margin: 4px 0 0; font-size: .9rem; }
.tx-foot { margin: 12px 14px 12px; font-size: .84rem; color: var(--muted); }
/* the step of emesis of a species that must not be made to vomit; an emetic's caution and sources; a note of the data */
.tx-step.tx-stop > .tx-title { color: var(--bad); }
.tx-caution { display: flex; gap: 6px; align-items: flex-start; margin: 4px 0 0; font-size: .85rem; color: var(--warn); }
.tx-caution > svg.ico.ico { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.tx-src { display: block; margin-top: 2px; font-size: .76rem; color: var(--muted); }
.tx-snote { margin: 6px 0 0; padding: 6px 10px; border-left: 3px solid var(--accent); border-radius: 6px; background: var(--soft); font-size: .88rem; }
.tx-snote p { margin: 0; }
.tx-snote .tx-ref { margin-top: 2px; }

/* ---------- "Karta znieczulenia": the drugs of the anaesthesia in ml for this patient ---------- */
/* phones: patient, protocols, what to draw up, the drugs, emergencies; wide: the drugs left, what to draw up right, in view */
@media (min-width: 960px) {
  .an-page { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .an-page > .tool-patient, .an-page > .an-protos, .an-page > .an-card { grid-column: 1; }
  .an-page > .an-sum, .an-page > .an-emerg { grid-column: 2; }
  .an-page > .an-sum { grid-row: 1 / span 3; position: sticky; top: 76px; }
}
.an-guide { margin: 0 0 8px; padding-left: 20px; display: grid; gap: 2px; font-size: .86rem; color: var(--muted); }
.an-guide b { color: var(--ink); }
.an-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.an-row { display: grid; gap: 6px; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); }
.an-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.an-top .an-drug { flex: 1; min-width: 0; }
.an-drug-name { display: flex; align-items: baseline; gap: 6px; min-height: 44px; min-width: 0; max-width: 100%; padding: 0; border: 0; background: none;
  color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.an-drug-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-step { min-height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); color: var(--accent);
  font: inherit; font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.an-x { width: 34px; height: 34px; border: 0; border-radius: 10px; background: none; color: var(--muted); cursor: pointer; font-size: 1rem; }
.an-x:hover { background: var(--soft); color: var(--bad); }
.an-drug { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.an-drug b { font-size: 1.02rem; }
.an-in { width: 100%; min-height: 44px; padding: 0 10px; border: 1.5px solid var(--field-line); border-radius: 10px; background: var(--card); color: var(--ink); font: inherit; font-size: 16px; }
.an-in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.an-name { flex: 1 1 180px; }
.an-spc { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.an-spc .chip { min-height: 32px; font-size: .8rem; padding: 0 10px; }
.an-spc .chip small { font-weight: 500; color: var(--muted); }
.an-fields { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .8fr); gap: 8px; }
.an-f { display: grid; gap: 4px; font-size: .78rem; font-weight: 700; color: var(--muted); }
.an-f small { font-weight: 500; }
.an-dose { display: flex; gap: 4px; }
.an-dose input { flex: 1 1 auto; min-width: 0; }
.an-dose select { flex: none; width: 80px; }
.an-dose select { min-height: 44px; border: 1.5px solid var(--field-line); border-radius: 10px; background: var(--soft); color: var(--ink); font: inherit; font-size: .8rem; padding: 0 4px; }
.an-res { display: flex; align-items: baseline; justify-content: flex-end; gap: 10px; min-height: 28px; }
.an-res b { font-size: 1.35rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.an-res small { color: var(--muted); }
.an-add { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.an-save { margin-top: 10px; }
.an-sum ol { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.an-sum li { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) auto auto; gap: 8px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); }
.an-sum li:first-child { border-top: 0; }
.an-sum-step { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.an-sum li b { font-size: 1.15rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.an-sum li small { color: var(--muted); min-width: 3em; }
.an-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.an-proto-list { display: flex; flex-wrap: wrap; gap: 6px; }
.an-proto { display: inline-flex; align-items: center; }
.an-emerg summary { cursor: pointer; font-weight: 750; }
.an-emerg-body { margin-top: 10px; }
@media (max-width: 520px) {
  .an-fields { grid-template-columns: 1fr 1fr; }
  .an-fields .an-f:first-child { grid-column: 1 / -1; }
  .an-sum li { grid-template-columns: minmax(0, 1fr) auto; }
  .an-sum-step { grid-column: 1 / -1; }
}
@media print {
  body.print-an * { visibility: hidden; }
  body.print-an .an-sum, body.print-an .an-sum * { visibility: visible; }
  body.print-an .an-sum { position: absolute; inset: 0 auto auto 0; width: 100%; border: 0; box-shadow: none; }
  body.print-an .an-actions { display: none; }
}

/* ---------- start screen: the patient in one line, the guide of a new user ---------- */
.patient-card.compact { padding: 8px; }
.pc-empty { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 2px;
  border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.pc-empty b { font-size: 1.02rem; }
.pc-empty small { color: var(--muted); font-size: .84rem; }
.pc-plus { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--accent); color: var(--accent-ink); font-size: 1.4rem; font-weight: 800; }
.pc-plus svg.ico.ico { width: 22px; height: 22px; stroke-width: 2.2; }
.data-line { text-align: center; margin: var(--sp-3) var(--sp-2) 0; }
.pc-line { display: flex; align-items: center; gap: 8px; }
.pc-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 8px; border: 0; border-radius: 12px;
  background: var(--accent-soft); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.pc-who .pc-ico svg { width: 26px; height: 26px; }
/* the patient (and, when it was set hours ago, a second short line under it) - each line cut with "…", never wrapped */
.pc-text { flex: 1; min-width: 0; display: grid; font-size: 1rem; line-height: 1.3; }
.pc-text > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the one missing step as one clear button (the alert icon, "Podaj masę ›") - a button, not a note */
.pc-need { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; margin-top: 8px; padding: 8px 12px; border-radius: var(--r-sm);
  border: 1.5px solid color-mix(in srgb, var(--warn) 40%, transparent); background: var(--warn-soft);
  color: var(--warn); font: inherit; font-size: .9rem; font-weight: 750; text-align: left; cursor: pointer; }
.pc-need svg.ico.ico { width: 18px; height: 18px; }
.pc-need .pn-go { margin-left: auto; font-size: 1.2rem; line-height: 1; }
@media (hover: hover) { .pc-need:hover { border-color: var(--warn); } }
.patient-card.compact .pe-history { margin-top: 8px; }
/* a patient set hours ago says so, quietly (ui.js patientSince): on the card a small line under the patient, in the
   top bar a small clock */
.pc-text .pc-since { color: var(--muted); font-size: .8rem; font-weight: 600; }
.pc-since svg.ico.ico { width: 13px; height: 13px; margin-right: 4px; vertical-align: -.15em; }
.pp-old svg.ico.ico { width: 14px; height: 14px; }
.pp-old { display: inline-flex; color: var(--muted); }
/* a weight past what the species plausibly weighs: a question under the field's name, the number stays as typed */
.pe-warn { display: block; color: var(--warn); font-size: .88rem; font-weight: 700; text-transform: none; letter-spacing: 0; }
/* an editor that came back with the text not sent (propose.js drafts) */
.draft-note { margin: 0; }
/* "Jak zacząć": the three steps as one row of short names; the step to do now in one line under them, with its button */
.guide-card { padding-block: 10px; }
.guide-card .card-head { margin-bottom: 4px; }
.guide-card .card-head h2 { font-size: var(--fs-md); }
.guide-card .gs-count { font-weight: 650; }
.gs-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .88rem; font-weight: 650; color: var(--muted); }
.gs-steps li { display: inline-flex; align-items: center; gap: 6px; }
.gs-steps li + li::before { content: ""; width: 12px; height: 2px; margin-right: 2px; border-radius: 1px; background: var(--line-strong); }
.gs-steps li.now { color: var(--accent); font-weight: 750; }
.gs-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line-strong); color: var(--muted); font-weight: 800; font-size: .8rem; }
.gs-steps li.now .gs-n { border-color: var(--accent); background: var(--card); color: var(--accent); }
.gs-n svg.ico.ico { width: 14px; height: 14px; stroke-width: 2.4; }
.gs-steps li.done .gs-n { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.gs-now { display: flex; align-items: center; gap: 10px; min-height: 52px; margin: 8px -4px 0; padding: 4px 4px 4px 10px; border-radius: var(--r-md);
  background: var(--accent-soft); font-size: .9rem; line-height: 1.3; }
.gs-now > span { flex: 1; min-width: 0; }
.gs-now .btn { flex: none; }

/* ---------- drug card: compact dosing rows ---------- */
.dosing .card-head { margin-bottom: 8px; }
.dosing .pc-need { margin: 0 0 10px; }
.dose-who { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dose-uw { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dose-more { margin: 0; padding: 0 14px 10px; }
.dose-more summary { font-size: .82rem; }
.dose-more .dose-tx { margin: 6px 0; font-weight: 600; color: var(--ink); }
.dose-more .dose-q { margin: 6px 0; border-left: 3px solid var(--line); padding-left: 10px; color: var(--ink); }
/* an EU medicine's quote: the original and the AI translation, one switch for both (eu.js) */
.eu-q { margin: 6px 0; }
.eu-switch { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.eu-switch .chip { min-height: 36px; }
.dose-more .eu-q .dose-q, .eu-q .eu-quote { margin: 6px 0; border-left: 3px solid var(--line); padding-left: 10px; color: var(--ink); }
.eu-ai { display: block; margin-top: 4px; color: var(--muted); font-size: .8rem; }
.eu-banner a { white-space: nowrap; }
.doc-switch { margin: 8px 0; }
/* the catalogue's source: Wszystkie / ChPL / UPD - only when the data has EU medicines (browse.js) */
.src-switch { display: inline-flex; gap: 4px; align-items: center; }
.src-switch .chip { min-height: 36px; padding-inline: 10px; }
.spc-note { font-size: .84rem; }
/* the head of the dosings in one line: the title and whom the amounts are for (a tap changes the patient) - on the
   narrowest phones the patient goes under the title, to the right */
.dosing .dose-head { align-items: center; flex-wrap: wrap; row-gap: 6px; margin-bottom: 8px; }
.dose-head .dose-for { width: auto; max-width: 100%; margin: 0 0 0 auto; padding: 0 10px 0 12px; gap: 6px; font-size: .88rem; }
.dose-head .dose-for > svg.ico.ico { width: 16px; height: 16px; color: var(--accent); }
.dosing .pc-need, .dosing .dose-meta, .dosing .dose-from { margin: 0 0 8px; }
.dosing .spc-note { margin: 0 0 8px; padding: 6px 10px; }
/* a dosing: less air around the dose and its amount, "Szczegóły i cytat z ChPL" right under it (still 44 px tall) */
.dosing .dose-list { gap: 6px; }
.dosing .dose-pick { min-height: 52px; padding: 8px 12px; }
.dosing .dose-row > .dose-more { padding: 0 12px; }
.dosing .dose-row > .dose-more[open] { padding-bottom: 8px; }
.dosing .dose-others { margin-top: 2px; }
/* "Policz w narzędziu:" - the tools this preparation goes to, one row under the head of its dosings */
.dose-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.dt-label { font-size: .82rem; font-weight: 700; color: var(--muted); margin-right: 2px; }
/* ---------- the drug card's dosings: one card per dose, read top down - the dose and for whom, what to give (the
   tiles: the card's only buttons), when and how long - and the SPC's words behind one summary ---------- */
.dosing .dose-list:has(.dcard) { gap: 10px; }
.dcard { display: grid; gap: 10px; min-width: 0; padding: 12px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); }
.dcard.other { background: var(--soft); border-style: dashed; }
.dc-head { display: grid; gap: 4px; min-width: 0; }
.dc-dose { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: 0; }
.dc-dose b { font-size: 1.12rem; font-weight: 800; letter-spacing: -.01em; }
.dc-sk { color: var(--muted); font-size: .86rem; }
.dc-words { margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.dc-marks { display: flex; flex-wrap: wrap; gap: 4px; }
.dc-who { margin: 0; color: var(--muted); font-size: .84rem; overflow-wrap: anywhere; }
/* what to give: one strength - a wide tile; several - side by side, two in a row on a phone */
.dc-amts { display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); }
.dc-amt { position: relative; display: grid; align-content: start; justify-items: start; gap: 3px; min-width: 0; min-height: 60px;
  padding: 9px 36px 9px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; }
.dc-amt > svg.ico { position: absolute; top: 9px; right: 9px; width: 20px; height: 20px; color: var(--accent); }
.dc-amt .dc-n { font-size: 1.14rem; line-height: 1.2; color: var(--accent); }
.dc-amt .dc-n .per { font-size: .8em; }
.dc-amt .dc-st { font-size: .84rem; font-weight: 650; overflow-wrap: anywhere; }
.dc-amt .dc-cur { display: inline-block; margin-left: 2px; padding: 0 6px; border-radius: 6px; background: var(--soft); color: var(--muted);
  font-size: .72rem; font-weight: 700; vertical-align: 1px; }
.dc-amt small { font-size: .76rem; line-height: 1.3; color: var(--muted); }
.dc-amt .dc-ok { display: inline-flex; align-items: center; gap: 3px; color: var(--accent); font-weight: 650; }
.dc-amt .dc-ok svg.ico { width: 13px; height: 13px; }
.dc-amt .dc-none { font-size: .86rem; color: var(--muted); }
/* the one amount of a dose, and the strength the card is of: drawn as the answer */
.dc-amts:not(.many) .dc-amt, .dc-amt.cur { border-color: var(--accent); background: var(--accent-soft); }
.dc-amt.cur .dc-cur { background: var(--card); color: var(--accent); }
.dc-amt.warn { border-color: var(--warn); background: var(--warn-soft); }
.dc-amt.warn .dc-n, .dc-amt.warn .dc-note { color: var(--warn); font-weight: 650; }
.dc-amt.static { cursor: default; padding-right: 12px; border-style: dashed; }
.dc-amt:not(.static):active { transform: scale(.98); }
@media (hover: hover) { .dc-amt:not(.static):hover { border-color: var(--accent); box-shadow: 0 2px 10px rgb(0 0 0 / .08); } }
.dcard > .dc-more { margin: 0; padding: 0; }
.dc-more > summary { font-size: .82rem; }
.dose-ind-more + .dose-ind-more { border-top: 1px solid var(--line); margin-top: 8px; }
.dose-more .dose-ind-h { margin: 8px 0 2px; font-weight: 700; color: var(--ink); }
.dosing .trial-note { margin-top: 8px; }

/* ---------- the list of tools: phones - one list per group; wider screens - the same rows as tiles ---------- */
.tool-group { margin: 0 0 var(--sp-3); }
.tool-group h2 { margin: 0 4px var(--sp-2); font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.tool-list { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0 var(--sp-4); background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); }
.tool-row { display: flex; align-items: center; gap: var(--sp-3); min-height: 54px; padding: 6px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.tool-row:first-child { border-top: 0; }
.tool-row .tt-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.tool-row b { font-size: var(--fs-md); font-weight: 700; line-height: 1.25; }
.tool-row small { color: var(--muted); font-size: var(--fs-sm); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-row .tool-drug { color: var(--accent); font-weight: 650; font-size: var(--fs-xs); }
.tool-row .tool-go { color: var(--muted); }
.tool-row.urgent b { color: var(--bad); }
.tool-row:active { opacity: .7; }
@media (min-width: 720px) {
  .tool-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0; background: none; border: 0; box-shadow: none; }
  .tool-row { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); box-shadow: var(--shadow); }
  .tool-row:first-child { border-top: 1px solid var(--line); }
  .tool-row small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .tool-row.urgent { border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }
}
@media (hover: hover) and (min-width: 720px) { .tool-row:hover { border-color: var(--accent); } .tool-row.urgent:hover { border-color: var(--bad); } }
@media (min-width: 1100px) { .tool-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- settings: the account first, then one card of rows - "Zgłoś" and the folded sections ---------- */
.set-list { padding: 0; }
.set-list > * + * { border-top: 1px solid var(--line); }
/* the focus ring inside the row - rows reach the card's edge */
.set-row:focus-visible, .set-group > summary:focus-visible { outline-offset: -3px; border-radius: var(--r-md); }
.set-group { padding: 0; }
.set-row, .set-group > summary { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 6px 14px; cursor: pointer; list-style: none; }
.set-row { border: 0; background: none; color: var(--ink); font: inherit; text-align: left; }
.set-row b { font-weight: 700; }
.set-go { margin-left: auto; display: inline-flex; color: var(--muted); }
.set-go svg.ico.ico { width: 18px; height: 18px; }
@media (hover: hover) { .set-row:hover .sg-t b { color: var(--accent); } }
.set-group > summary::-webkit-details-marker { display: none; }
.set-group > summary::after { content: ""; width: 9px; height: 9px; margin-left: auto; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .2s var(--ease); flex: none; }
.set-group[open] > summary::after { transform: rotate(-135deg); }
.sg-ico { font-size: 1.2rem; }
.sg-t { display: grid; min-width: 0; }
.sg-t small { color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-t #report-queue { white-space: normal; color: var(--warn); }
.sg-body { padding: 0 14px 12px; }
.sg-body h2 { font-size: .95rem; margin: 14px 0 6px; }
.sg-body > div:first-child > .card-head h2, .sg-body > div:first-child > h2 { margin-top: 2px; }
.set-src { margin: 4px 2px 0; }
.dose-more p { margin: 6px 0; font-size: .86rem; }
.dose-uw-full { font-style: italic; }

/* ================================================================== UX pass (29.09): forms, account, settings, sheets
   Everything here uses the tokens at the top; the rules it replaces were changed in place above. */

/* ---------- forms: the error next to the form, the field it is about marked, a password that can be shown ---------- */
.form-error { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--bad-soft); color: var(--bad); font-size: .9rem; font-weight: 650; line-height: 1.35; }
.form-error svg.ico.ico { width: 18px; height: 18px; margin-top: 1px; }
.sheet-body .form-error { margin-top: 12px; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--bad); }
input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--bad-soft); border-color: var(--bad); }
.switch:has(input[aria-invalid="true"]) { border-color: var(--bad); }
/* "Pokaż hasło" sits after the field's label (not part of the field's name), laid over the right end of the field */
.pw-field { position: relative; display: grid; }
.pw-field input { width: 100%; padding-right: 50px; }
.pw-eye { position: absolute; bottom: calc((var(--tap) - 44px) / 2); right: 2px; display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); cursor: pointer; }
.pw-eye svg.ico.ico { width: 20px; height: 20px; }
@media (hover: hover) { .pw-eye:hover { color: var(--ink); } }
.auth-form input:not([type="checkbox"]), .sheet-body.auth-form input:not([type="checkbox"]), .auth-form select { width: 100%; }

/* ---------- login and registration: no bar above the card - the brand is on the card ---------- */
body.no-user .topbar { display: none; }
.auth { padding-top: max(2vh, calc(10px + env(safe-area-inset-top))); }
.auth-card { box-shadow: var(--shadow); }
.auth-card > .muted { margin: 0 0 4px; }
.auth-links .link { min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- the account in the settings: who, the access, one row to the rest (auth.js accountSheet) ---------- */
.acct-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.acct-ava { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 1.05rem; }
.acct-who { flex: 1; min-width: 0; display: grid; gap: 1px; }
#settings .acct-who h2, .acct-who h2 { margin: 0; font-size: var(--fs-lg); overflow-wrap: anywhere; }
.acct-who small { color: var(--muted); font-size: .84rem; overflow-wrap: anywhere; }
/* the card ends with its one row, like a list: the row's line on top, the card's edge under it */
#set-account { padding-bottom: 2px; }
#set-account > .acct-row { margin-top: 4px; border-top: 1px solid var(--line); border-bottom: 0; min-height: 48px; }
.acct-list { display: grid; margin: 4px 0 12px; border-top: 1px solid var(--line); }
.acct-sheet .acct-list { margin-top: 0; }
.acct-sheet .btn.block { margin-top: 0; }
.acct-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 0 2px; border: 0; border-bottom: 1px solid var(--line);
  background: none; color: var(--ink); font: inherit; font-weight: 650; text-align: left; cursor: pointer; text-decoration: none; }
.acct-row > span { flex: 1; min-width: 0; }
.acct-row > svg.ico.ico { width: 20px; height: 20px; color: var(--muted); }
.acct-row > svg.ico.ico:last-child { width: 18px; height: 18px; }
@media (hover: hover) { .acct-row:hover { background: var(--soft); } }
.acct-note { margin: 8px 2px 0; }
.acct-more { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 16px; margin: 2px 2px 0; }

/* ---------- settings: the folded groups with an icon each ---------- */
.sg-ico { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--soft); color: var(--accent); font-size: 1.1rem; }
.sg-ico svg.ico.ico { width: 19px; height: 19px; }
.set-group > summary b { font-weight: 700; }
@media (hover: hover) { .set-group > summary:hover .sg-t b { color: var(--accent); } }
#set-theme .seg { margin-bottom: 4px; }
#set-theme + #set-perf h2 { margin-top: 14px; }

/* ---------- "Zgłoś": the kinds as compact tiles - the description field stays in view ---------- */
.report-kinds.pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.report-kinds .pick-tile { aspect-ratio: auto; min-height: 48px; display: flex; align-items: center; justify-content: flex-start; gap: 8px;
  padding: 6px 10px; border-radius: var(--r-md); font-size: .88rem; text-align: left; line-height: 1.2; }
.report-kinds .pick-tile .pick-e { font-size: 1rem; display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none;
  border-radius: var(--r-sm); background: var(--soft); color: var(--accent); }
.report-kinds .pick-tile.on .pick-e { background: var(--card); }
.report-kinds .pick-e svg.ico.ico { width: 19px; height: 19px; }
.report textarea::placeholder { font-size: .95rem; }

/* ---------- "Zmiany w ChPL": the kinds of changes wrap instead of running out of the bar ---------- */
.chg-kinds { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chg-kinds button { white-space: normal; line-height: 1.15; padding: 4px; min-height: 44px; }

/* ---------- lists on the start screen and the patient ---------- */
.mini .tool-go { color: var(--muted); display: inline-flex; }
.card > h2 .fav-ico, .home-mini h2 .fav-ico { display: inline-flex; vertical-align: -.15em; }
.pbar-who { gap: 8px; }
.pbar-who > span:first-child { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.pbar-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn.ghost.small svg.ico.ico { width: 18px; height: 18px; }

/* ---------- the trial card: the head, the bar, one row - the step to full access and "Co zyskuję?" ---------- */
.trial-card { padding-block: 10px; }
.trial-card .card-head { margin-bottom: 4px; }
.trial-card .trial-meter { margin-top: 4px; }
.trial-card p.small { margin: 8px 0 12px; color: var(--ink-2); }
.trial-card .trial-foot { align-items: center; gap: 4px 14px; margin: 8px 0 0; }
.trial-card .trial-foot .verify-wait { flex: 1 1 100%; margin: 0; }

/* ---------- the drug card's quick links: compact enough for three in a phone's row ---------- */
.p-quick .chip { padding: 0 12px; gap: 6px; }
.p-quick .chip svg.ico.ico { width: 17px; height: 17px; color: var(--accent); }
.p-quick .chip.locked svg.ico.ico { color: var(--muted); }
.dose-meta { font-size: .84rem; }

/* ---------- empty states and errors: the words, then the way on ---------- */
.empty b { color: var(--ink); }
.empty .btn { margin: 16px 4px 0; }
.home-none .btn-row .btn { margin: 0; }

/* ---------- "Karta znieczulenia": icons and touch targets ---------- */
.an-x { display: inline-grid; place-items: center; width: 44px; height: 44px; }
.an-x svg.ico.ico { width: 18px; height: 18px; }
.an-step { min-height: 44px; }
.an-spc .chip { min-height: 44px; }
.an-emerg summary { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.an-emerg summary svg.ico.ico { color: var(--bad); }
.an-add .chip svg.ico.ico { width: 16px; height: 16px; color: var(--accent); }
.an-actions .btn svg.ico.ico, .an-save svg.ico.ico { width: 17px; height: 17px; }
.ch-note svg.ico.ico { width: 14px; height: 14px; }
.an-emerg summary { list-style: none; cursor: pointer; }
.an-emerg summary::-webkit-details-marker { display: none; }
.an-emerg summary::after { content: ""; width: 9px; height: 9px; margin-left: auto; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .2s var(--ease); flex: none; }
.an-emerg[open] summary::after { transform: rotate(-135deg); }
.chg-note summary { cursor: pointer; display: inline-flex; min-height: 44px; align-items: center; color: var(--accent); font-weight: 650; }
.chg-note p { margin: 0 0 8px; text-align: left; }
/* reading screens on a wide screen: a comfortable line length */
@media (min-width: 960px) {
  #settings, .chg-page { max-width: 820px; margin-inline: auto; }
  .home-side { top: calc(var(--top) + 4px); }
}
/* RKO is used in a hurry: the doses right under the weight, the concentrations and the medicine after them */
.t-cpr .tool-card > .tool-result { order: -1; }
.ver.single { grid-template-columns: minmax(0, 1fr) auto; }
#diff-out:empty { display: none; }
.card .muted-note { margin-top: 14px; }
/* the drug card's shortcuts on a phone: equal buttons in one row, the icon over a short name - nothing cut off, and
   no taller than a finger needs */
@media (max-width: 719.98px) {
  .p-quick-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; overflow: visible; margin: 0 0 10px; padding: 0; }
  .p-quick-grid .chip { flex-direction: column; justify-content: center; gap: 2px; min-height: 48px; padding: 4px; border-radius: var(--r-md);
    font-size: .76rem; line-height: 1.15; white-space: normal; text-align: center; }
  .p-quick-grid .chip svg.ico.ico { width: 18px; height: 18px; }
}

/* ---------- the first start: the shape of the start screen while the data loads; errors with the way on ---------- */
.boot { display: grid; gap: 10px; }
.sk { display: block; border-radius: var(--radius); background: linear-gradient(90deg, var(--card) 0%, var(--soft) 50%, var(--card) 100%);
  background-size: 200% 100%; border: 1px solid var(--line); animation: sk-shine 1.4s linear infinite; }
.sk-search { height: 48px; }
.sk-card { height: 70px; } /* the patient in one line */
.sk-card.tall { height: 200px; } /* the tools at hand */
@keyframes sk-shine { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.boot .loading { padding: 12px 0; }
.empty.state { display: grid; justify-items: center; gap: 8px; max-width: 420px; margin: 0 auto; }
.empty.state b { font-size: var(--fs-lg); }
.empty.state .btn { margin-top: 8px; }
svg.ico.ico.state-ico { width: 40px; height: 40px; color: var(--muted); stroke-width: 1.5; }
.sec-fix svg.ico.ico { width: 16px; height: 16px; }
.dp-head b svg.ico.ico { width: 18px; height: 18px; color: var(--accent); }
/* a select of a tool keeps its arrow (the field's background shorthand took it away) */
select.tool-in { padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
/* links in card heads ("Wszystkie ›", "Ukryj", "Wyczyść"): a finger-sized target without moving the head */
.card-head .link, .fields-head .link { display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; padding-inline: 4px; margin-inline-end: -4px; }

/* the smallest phones (320 px): the weight of the patient stays readable, the drug card's shortcuts slide sideways */
@media (max-width: 379px) {
  .pc-new { padding: 0 12px; }
  .pc-new .pc-new-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pc-who .pbar-edit { display: none; }
  .p-quick-grid { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -12px 10px; padding: 0 12px; }
  .p-quick-grid .chip { flex-direction: row; min-height: 44px; padding: 0 12px; font-size: .84rem; white-space: nowrap; border-radius: 999px; }
  .p-quick-grid .chip svg.ico.ico { width: 17px; height: 17px; }
}

/* ---------- "Sprawdzaj" (checks.js) ---------- */
.ck-home { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.ck-home > span:nth-child(2) { flex: 1; display: grid; }
.ck-home small { color: var(--muted); }
.ck-home-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent); }
.ck-card { display: grid; gap: 10px; }
.ck-drug b { font-size: 1.05rem; }
.ck-dose { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r-md); background: var(--accent-soft); }
.ck-dose b { font-size: 1.2rem; }
.ck-dose small { color: var(--ink-2); }
.ck-spc { border-top: 1px solid var(--line); padding-top: 8px; }
.ck-spc-h { font-size: .76rem; font-weight: 750; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.ck-spc-text { max-height: 40vh; overflow: auto; font-size: .92rem; line-height: 1.5; white-space: pre-line; margin: 0; }
/* one task at a time: a reading column, not the full width of a desktop */
.checks { max-width: 760px; margin-inline: auto; }
.ck-q { margin: 14px 2px 2px; font-weight: 700; }
.ck-note { margin: 0 2px 8px; }
.ck-note-add { gap: 4px; font-size: .92rem; }
.ck-note-add svg.ico.ico { width: 16px; height: 16px; stroke-width: 2.2; }
.ck-note-field { margin: 4px 0 0; }
/* three tiles in one row - "Źle" on the left, "Dobrze" on the right; icon above the word, so they fit a 320 px phone */
.ck-actions { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 8px; }
.ck-actions .btn { flex-direction: column; gap: 3px; min-height: 66px; padding: 8px 6px; border-radius: 16px; font-size: .98rem; line-height: 1.15; }
.ck-actions .btn svg.ico.ico { width: 22px; height: 22px; stroke-width: 2.4; }
.ck-actions .ck-bad { background: var(--bad-soft); color: var(--bad); border: 1px solid color-mix(in srgb, var(--bad) 30%, var(--line)); }
.ck-actions .ck-bad[aria-expanded="true"] { background: var(--bad); color: var(--on-bad); border-color: var(--bad); }
.ck-actions .ck-unsure { background: var(--soft); color: var(--ink-2); border: 1px solid var(--line); font-size: .9rem; font-weight: 650; }
.ck-unsure-ico { display: grid; place-items: center; width: 20px; height: 20px; font-size: 1.05rem; font-weight: 800; line-height: 1; }
@media (hover: hover) {
  .ck-actions .ck-bad:not(:disabled):hover { background: color-mix(in srgb, var(--bad) 16%, var(--card)); }
  .ck-actions .ck-bad[aria-expanded="true"]:not(:disabled):hover { background: var(--bad); }
  .ck-actions .ck-unsure:not(:disabled):hover { background: var(--soft); border-color: var(--line-strong); }
  .ck-why .btn.ck-send-bad:not(:disabled):hover { background: color-mix(in srgb, var(--bad) 88%, var(--ink)); }
}
.ck-why { margin-top: 10px; }
.ck-why .btn.ck-send-bad { background: var(--bad); color: var(--on-bad); }
.ck-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.ck-why .ck-note-field { margin: 0 0 4px; }
.ck-control { margin-bottom: 10px; }
a.set-row { color: var(--ink); text-decoration: none; }

/* ---------- Samouczek (tour.js) ---------- */
/* the screen dark but for one lit element: four panels around it catch the taps beside it, the ring shows it */
.tour { position: fixed; inset: 0; z-index: 1000; pointer-events: none; }
.tour-shade { position: fixed; background: rgba(6, 12, 16, .64); pointer-events: auto; }
.tour-ring { position: fixed; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 3px var(--accent), 0 0 0 8px color-mix(in srgb, var(--accent) 30%, transparent);
  animation: tour-pulse 1.8s ease-in-out infinite; }
/* the dark slides to the next element only when the step changes - while the page scrolls it follows at once */
.tour.moving .tour-shade, .tour.moving .tour-ring { transition: left .28s var(--ease), top .28s var(--ease), width .28s var(--ease), height .28s var(--ease); }
.tour.moving .tour-bubble { transition: left .22s var(--ease), top .22s var(--ease); }
/* a step that leaves the screen usable (the weight in the patient form): a lighter dark the taps go through */
.tour.free .tour-shade { pointer-events: none; background: rgba(6, 12, 16, .34); }
/* the patient form opens without its slide while the tutorial points into it (a moving form would move the light) */
.touring dialog[open] { animation: none; }
.tour-ring.nudge { animation: tour-nudge .45s var(--ease); }
@keyframes tour-pulse { 50% { box-shadow: 0 0 0 3px var(--accent), 0 0 0 14px color-mix(in srgb, var(--accent) 12%, transparent); } }
@keyframes tour-nudge { 25% { transform: scale(1.06); } 60% { transform: scale(.98); } }
.tour-bubble { position: fixed; width: min(380px, calc(100vw - 24px)); padding: 14px 16px 12px; border-radius: 20px; pointer-events: auto;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(0, 0, 0, .38);
  animation: tour-in .22s var(--ease); }
.tour-bubble.phone { width: calc(100vw - 24px); }
.tour-bubble.off { box-shadow: 0 10px 34px rgba(0, 0, 0, .3); }
/* a phone with the keyboard up: two lines of the words, no progress bar - the field being typed in stays in sight */
.tour-bubble.compact { padding: 10px 14px 8px; }
.tour-bubble.compact .tour-bar { display: none; }
.tour-bubble.compact h2 { font-size: 1rem; margin-bottom: 4px; }
.tour-bubble.compact p { font-size: .9rem; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@keyframes tour-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.tour-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -4px -6px 2px 0; }
.tour-step { font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.tour-x { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 12px; background: none; color: var(--muted); cursor: pointer; }
.tour-x svg.ico.ico { width: 18px; height: 18px; }
.tour-bar { height: 4px; border-radius: 4px; background: var(--soft); overflow: hidden; margin: 2px 0 10px; }
.tour-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .3s var(--ease); }
.tour-bubble h2 { font-size: 1.14rem; margin: 0 0 6px; }
.tour-bubble p { margin: 0 0 12px; color: var(--ink-2); line-height: 1.45; }
.tour-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tour-actions .tour-skip { margin-right: auto; color: var(--muted); font-weight: 600; }
.tour-actions .btn.small { min-height: 44px; }
.tour-tap { display: inline-flex; align-items: center; gap: 4px; font-size: .85rem; font-weight: 650; color: var(--accent); }
.tour-tap svg.ico.ico { width: 16px; height: 16px; }
/* the app's messages stay readable over the dark screen */
.touring .toast { z-index: 1001; }
@media (hover: hover) { .tour-x:hover { background: var(--soft); color: var(--ink); } }
/* "Pokaż mi krok po kroku" on "Jak zacząć" */
.gs-tour { gap: 4px; margin-top: 4px; }
.gs-tour svg.ico.ico { width: 16px; height: 16px; }

/* ---------- "Ważne przed użyciem" and the standing line (vetlek/terms.py SAFETY) ---------- */
.safety-box { margin: 0 0 14px; padding: 12px 14px; border-radius: var(--r-md); background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--line)); }
.safety-box h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 1.02rem; color: var(--ink); }
.safety-box h2 svg.ico.ico { color: var(--warn); width: 20px; height: 20px; }
.safety-box ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--ink-2); line-height: 1.45; }
.switch.understood { align-items: flex-start; margin: 4px 0 10px; }
.advice-note { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0; font-size: .8rem; line-height: 1.4; color: var(--muted); }
.advice-note svg.ico.ico { flex: none; width: 15px; height: 15px; margin-top: 1px; }
/* where the dosings and the key points come from, the official PDF one tap away (product.js sourceLine) */
.src-line { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: .8rem; line-height: 1.4; color: var(--muted); }
.src-line svg.ico.ico { flex: none; width: 15px; height: 15px; }
.src-line a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 650; }
.dose-acts .dose-pdf { gap: 6px; }
.dose-acts .dose-pdf svg.ico.ico { width: 16px; height: 16px; }
/* RKO: the vet's own ampoules (tools.js ownConcButton) and where each concentration in the table comes from */
.conc-own { margin: 0 0 10px; }
.conc-tag { display: inline-block; margin-left: 4px; font-size: .72rem; color: var(--muted); }
.conc-tag.own { padding: 0 6px; border-radius: 999px; font-weight: 600; color: var(--accent); background: var(--accent-soft); }
.conc-sum { margin: 0 0 8px; font-size: .85rem; font-weight: 600; }
.own-conc-form .conc-grid { margin: 10px 0; }
/* a field of the sheet (toolcalc.js ownConcFormHtml): a neighbour's hint or warning never stretches its input */
.own-conc-form .conc-field { align-content: start; }
.own-conc-form .conc-hint { font-size: .8rem; color: var(--muted); }
/* a strength unusual for the drug (a percent typed as mg/ml): said under the field, with the box that confirms it */
.own-conc-form .conc-odd { padding: 8px 10px; border-radius: var(--r-sm); background: var(--warn-soft); }
.own-conc-form .conc-odd:empty { display: none; }
.own-conc-form .conc-warn { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: .84rem; font-weight: 650; color: var(--warn); }
.own-conc-form .conc-warn svg.ico.ico { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.own-conc-form .conc-ok { margin-top: 8px; padding: 10px 12px; font-size: .86rem; background: var(--card); }
/* the tutorial reads the phone's bars over the page from this (tour.js) - nothing to see */
.tour-inset { position: fixed; top: 0; left: 0; width: 0; height: 0; visibility: hidden; pointer-events: none;
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); }
/* "Kup dostęp" (billing.js): the plans of the account's tier, the consent */
.buy-sheet .plans { border: 0; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.buy-sheet .plan { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--card, var(--soft)); cursor: pointer; }
.buy-sheet .plan:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.buy-sheet .plan input { accent-color: var(--accent); width: 20px; height: 20px; flex: none; }
.buy-sheet .plan-name { flex: 1; min-width: 0; display: grid; }
.buy-sheet .plan-name small { color: var(--muted); }
.buy-sheet .plan strong { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.buy-sheet .buy-tier { font-size: .9rem; margin: 4px 0 10px; }
.buy-sheet .buy-tier.ok { color: var(--accent); font-weight: 700; }
.buy-sheet .buy-consent span { font-size: .88rem; }
/* "Subskrypcja" and "Wesprzyj rozwój" (subscription.js) - a browser only */
.sub-page .card { margin-bottom: 12px; }
.sub-page .card h2 { margin: 0 0 8px; }
.sub-lede { margin: 0 4px 12px; }
.sub-what { font-size: 1.05rem; margin: 0 0 6px; }
.sub-status .btn.block { margin-top: 8px; }
.sub-warn { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--bad-soft); color: var(--bad); font-weight: 650; }
.sub-warn svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; }
.badge.bad { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.pay-list { list-style: none; margin: 0; padding: 0; }
.pay-list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.pay-list li:last-child { border-bottom: 0; }
.pay-list li span:first-child { flex: 1; color: var(--muted); }
.sub-help p { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; }
.sub-help svg { width: 20px; height: 20px; flex: none; margin-top: 2px; fill: none; stroke: var(--muted); stroke-width: 1.8; }
.raised-total { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; margin: 0; font-variant-numeric: tabular-nums; }
.raised-bar { height: 10px; }
.raised-h { font-size: .95rem; margin: 12px 0 6px; }
.raised-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; color: var(--muted); font-size: .9rem; }
.donate-form { display: grid; gap: 12px; }
.donate-form fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.donate-form .chip { position: relative; }
.donate-form .chip input { position: absolute; opacity: 0; pointer-events: none; }
.donate-form .chip:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.donate-form .chip:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.donate-form [data-other][hidden] { display: none; }
/* full access just switched on (billing.js showWelcome) */
.welcome-gives { list-style: none; margin: 4px 0 12px; padding: 0; display: grid; gap: 8px; }
.welcome-gives li { display: flex; gap: 10px; align-items: flex-start; }
.welcome-gives svg { width: 20px; height: 20px; flex: none; color: var(--accent); margin-top: 1px; }
/* "Ukryte reklamy" (ads.js hiddenAdsSheet) */
.hidden-ads-list { list-style: none; margin: 8px 0 12px; padding: 0; }
.hidden-ads-list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.hidden-ads-list li > span { flex: 1; min-width: 0; display: grid; }
.hidden-ads-list small { color: var(--muted); }
#set-hidden-ads:empty { display: none; }

/* ---------- the first steps (js/onboarding.js) ---------- */
.ob-progress{display:flex;align-items:center;gap:6px;margin:0 0 14px}
.ob-progress span{width:28px;height:6px;border-radius:3px;background:var(--line)}
.ob-progress span.on{background:var(--accent)}
.ob-progress small{margin-left:auto;color:var(--muted)}
.ob-species{border:0;padding:0;margin:0}
.ob-benefits{background:var(--soft);border:1px solid var(--line);border-radius:var(--r-lg,14px);padding:12px 14px;margin:0 0 14px}
.ob-benefits ul{margin:8px 0 0;padding-left:18px}
.ob-benefits .i,.ob-benefits svg{width:18px;height:18px;vertical-align:-3px}
.ob-prices{list-style:none;margin:6px 0 2px;padding:0;display:grid;gap:4px}
.ob-prices li{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:baseline}
.ob-prices b{color:var(--accent);font-size:1.05rem}.ob-prices s{color:var(--muted)}
.ob-choice{display:grid;gap:10px;margin:0 0 6px}
.ob-checks{display:grid;gap:8px;margin:12px 0 6px}
.ob-check{border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-height:44px}
.ob-check.missing{border-color:var(--bad);box-shadow:0 0 0 2px color-mix(in srgb,var(--bad) 25%,transparent)}
.req-mark{color:var(--bad)}
.req-soft{color:var(--muted);font-weight:500}
.ob-legend{margin:0 0 4px;font-size:.85rem;color:var(--muted)}
.ob-optional{display:grid;gap:12px;border:1px dashed var(--line);border-radius:12px;padding:12px;margin:6px 0 4px}
.ob-optional-head{margin:0;font-size:.85rem;font-weight:650;color:var(--muted)}
.ob-all.pulse{animation:ob-pulse 1.6s ease-in-out infinite}
@keyframes ob-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 45%,transparent)}50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 0%,transparent);border-color:var(--accent)}}
@media (prefers-reduced-motion:reduce){.ob-all.pulse{animation:none;border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent)}}

/* ---------- offers of partners (js/partners.js) ---------- */
.partner-offer{border-style:dashed}
.po-tag{margin:0 0 4px;font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.po-done{display:flex;align-items:center;gap:6px;color:var(--accent);font-weight:650}
.po-done svg{width:18px;height:18px}
.po-sub{margin:10px 0 4px;font-weight:650}
.po-data{margin:0 0 10px;padding-left:18px}
.po-consent span{font-size:.92rem}
.po-list{display:grid;gap:8px;margin:0 0 12px}
.po-row{display:flex;justify-content:space-between;gap:10px;align-items:center;border-bottom:1px solid var(--line);padding:6px 0}
.po-row small{display:block;color:var(--muted)}
.training .tr-date{margin:0;color:var(--accent);font-weight:700}
.training .tr-tags{display:flex;flex-wrap:wrap;gap:6px}
.training.focus{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- the start of the app: a sponsor's full screen while it loads (js/splash.js) ---------- */
.splash{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;gap:12px;background:var(--bg);
  padding:max(12px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));animation:splash-in .2s ease-out}
.splash.out{opacity:0;transition:opacity .25s ease-in}
.splash-top{display:flex;align-items:center;justify-content:space-between}
.splash-brand{font-weight:800;font-size:1.15rem;color:var(--accent)}
.splash-skip{min-height:44px;padding:0 18px;border-radius:22px;border:1px solid var(--line-strong);background:var(--card);
  color:var(--ink);font:inherit;font-weight:650}
.ad-splash{flex:1;display:flex;flex-direction:column;justify-content:center;gap:8px;width:100%;max-width:520px;margin:0 auto;min-height:0}
.ad-splash .ad-main{display:flex;flex-direction:column;gap:10px;color:inherit;text-decoration:none;min-height:0}
/* never cropped (a sponsor's words may be at its edge): as big as fits, its own proportions */
.ad-splash-img{display:block;width:auto;height:auto;max-width:100%;max-height:58vh;margin:0 auto;border-radius:16px}
.ad-splash .ad-t{font-size:1.2rem;font-weight:750}
.splash-bar{height:3px;border-radius:2px;background:var(--line);overflow:hidden;max-width:520px;width:100%;margin:0 auto}
.splash-bar span{display:block;height:100%;background:var(--accent);transform-origin:left;animation:splash-bar 5s linear forwards}
@keyframes splash-in{from{opacity:0}to{opacity:1}}
@keyframes splash-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.splash,.splash-bar span{animation:none}.splash.out{transition:none}}
/* the login screen's partner may be a card with a picture too */
.login-partner .ad-card{margin:0}

/* the comparison of the plans (pricing.js): below 720 px (a phone) a picker - three tiles and the panel of the chosen plan;
   from 720 px the table of three columns with a column of the features' names. Both are in the markup. */
.pricing { display: grid; gap: 12px; }
.pr-switches { display: grid; gap: 8px; }
.pr-table { display: none; }
.pr-picker { display: grid; gap: 10px; }
.pr-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pr-tab { display: grid; gap: 2px; justify-items: center; padding: 10px 4px; min-width: 0; font: inherit; color: var(--ink); background: var(--soft);
  border: 1.5px solid var(--line); border-radius: var(--r-md); cursor: pointer; }
.pr-tab b { font-size: .85rem; }
.pr-tab strong { font-size: .95rem; font-variant-numeric: tabular-nums; }
.pr-tab.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
.pr-panel { display: grid; gap: 8px; padding: 14px; border: 1.5px solid var(--line); border-radius: var(--r-md); }
.pr-panel-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pr-panel-head .pr-name { font-size: 1.05rem; }
.pr-panel-price { margin: 0; }
.pr-panel-price strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.pr-panel-price small { color: var(--muted); font-size: .8rem; }
.pr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .9rem; }
.pr-list li { padding-left: 1.4rem; position: relative; }
.pr-list li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 800; }
.pr-list li.pr-all { padding-left: 0; font-weight: 650; }
.pr-list li.pr-all::before { content: none; }
.pr-panel .btn { width: 100%; padding-block: 12px; white-space: normal; }
.pr-panel .pr-note { font-size: .82rem; }
.pr-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 6px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.pr-row .pr-feat { grid-column: 1 / -1; font-size: .82rem; font-weight: 650; color: var(--muted); margin-bottom: 2px; }
.pr-head { border-top: 0; align-items: stretch; padding-top: 0; }
.pr-head .pr-feat { display: none; }
.pr-col { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 10px 4px; min-width: 0;
  border: 1.5px solid transparent; border-radius: var(--r-md); }
.pr-col.rec { border-color: var(--accent); background: var(--accent-soft); }
.pr-badges { min-height: 1.35rem; display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.pr-badge { font-size: .68rem; font-weight: 750; border-radius: 6px; padding: 2px 6px; background: var(--accent); color: var(--accent-ink); }
.pr-badge.own { background: var(--soft); color: var(--ink); border: 1px solid var(--line-strong); }
.pr-name { font-size: .95rem; }
.pr-price { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.pr-month { color: var(--muted); font-size: .74rem; min-height: 1em; }
.pr-col .btn { width: 100%; padding-inline: 4px; white-space: normal; line-height: 1.15; }
.pr-slot { margin-top: auto; padding-top: 8px; width: 100%; display: grid; gap: 6px; justify-items: center; align-content: end; min-height: 44px; }
.pr-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 12px; border-radius: 999px; font-size: .8rem; font-weight: 750;
  background: var(--soft); color: var(--ink); border: 1px solid var(--line-strong); }
.btn.pr-cta { font-weight: 750; }
.btn.pr-cta.primary { background: var(--accent); color: var(--accent-ink); border: 1.5px solid var(--accent); }
.btn.pr-cta.outline { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); }
.pr-panel .btn.pr-cta { min-height: 48px; }
@media (hover: hover) {
  .btn.pr-cta.outline:not(:disabled):hover { background: var(--accent-soft); border-color: var(--accent); }
}
.pr-note { font-size: .74rem; color: var(--muted); margin: 0; }
.pr-cell { text-align: center; font-size: .85rem; }
.pr-yes { color: var(--accent); font-weight: 800; }
.pr-no { color: var(--muted); }
.change-sheet .change-amount { font-size: 1.05rem; }
@media (min-width: 720px) {
  .pr-picker { display: none; }
  .pr-table { display: grid; }
  .pr-row { grid-template-columns: minmax(9rem, 1.3fr) repeat(3, minmax(0, 1fr)); }
  .pr-row .pr-feat { grid-column: auto; margin: 0; font-size: .9rem; color: var(--ink); }
  .pr-head .pr-feat { display: block; }
  .pr-switches { grid-template-columns: 1fr 1fr; }
}
/* over the SPC's own words in another language: the original is Polish and binds (ui.js smpcNote) */
.smpc-note { margin: 4px 0 8px; font-size: .78rem; font-style: italic; color: var(--muted, #666); }
/* "PL | EN" (auth.js langSwitchHtml): on the login screen's brand row and in the settings */
.lang-switch { display: inline-flex; gap: 2px; margin-left: auto; border: 1px solid var(--line, #d6dde4); border-radius: 999px; padding: 2px; }
.lang-switch button { min-height: 32px; min-width: 40px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: .8rem; font-weight: 700; color: var(--muted, #5b6977); cursor: pointer; }
.lang-switch button[aria-pressed="true"] { background: var(--accent, #0b6e4f); color: #fff; }
.auth-brand { display: flex; align-items: center; gap: 8px; }
.set-lang { cursor: default; }