/* ============================================================================
   Fraser — styled to the ekw.plus house design system (gordon-product).
   Tokens below mirror gordon-product `src/styles/tokens.css` (the canonical
   source of truth for the ekw look) so fraser reads as part of the same family.

   Type: Inter (variable) ONLY. No monospace, no serif — KW codes / numbers /
   dates use tabular figures (.tnum) for column alignment, per ekw house style.
   (Migrated from IBM Plex Sans 2026-07-10: Plex rasterized Polish diacritics
   off-baseline at small px and the repo shipped one 400-weight file as all
   four weights.)
   ========================================================================== */

:root {
  /* ─── ekw brand: refined dark forest green family ─── */
  --green-900: #0f3622;
  --green-800: #143d2a;   /* primary */
  --green-700: #1a4d35;
  --green-600: #25664a;
  --green-500: #3e8460;
  --green-100: #d4e4d9;
  --green-50:  #ecf3ee;

  /* warm ochre accent (court marks / użytkownik wieczysty) */
  --ochre-700: #8a6826;
  --ochre-500: #b88a3a;
  --ochre-100: #f0e3c6;

  /* muted slate-blue (uprawniony / lokal kind) */
  --slate-700: #2f4a63;
  --slate-500: #4d6f8f;
  --slate-100: #d6e0e9;

  /* neutral warm grays */
  --paper:     #f6f3ec;
  --surface:   #ffffff;
  --surface-2: #faf8f3;
  --ink-900:   #16181a;
  --ink-700:   #2a2f2e;
  --ink-500:   #5a5e57;
  --ink-400:   #82867f;
  --ink-300:   #b0b3ab;
  --line:      #e3ddcf;
  --line-2:    #d5cdb9;

  --success: #2d7a4c;
  --error:   #b94a3f;
  --warning: #c4933c;
  --info:    #3a6ea5;

  /* aliases */
  --bg:            var(--paper);
  --fg:            var(--ink-900);
  --fg-muted:      var(--ink-500);
  --fg-subtle:     var(--ink-400);
  --primary:       var(--green-800);
  --primary-hover: var(--green-900);
  --primary-soft:  var(--green-50);
  --primary-fg:    #fafaf6;
  --border:        var(--line);

  /* typography — Inter for everything; mono aliased to sans */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: var(--font-sans);
  --font-mono: var(--font-sans);

  /* spacing (4px), radii, shadows, type scale — ekw tokens */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px; --sp-10: 64px;
  --r-1: 4px; --r-2: 6px; --r-3: 8px; --r-4: 12px; --r-5: 16px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(20,30,20,.04), 0 1px 1px rgba(20,30,20,.03);
  --shadow-2: 0 1px 3px rgba(20,30,20,.06), 0 8px 24px rgba(20,30,20,.06);
  --shadow-pop: 0 8px 32px rgba(20,30,20,.12), 0 2px 6px rgba(20,30,20,.06);
  /* --t-sm bumped 13→14px: IBM Plex rasterizes the ż overdot high at exactly
     13px, 14px renders clean — ends the per-element ż patching. */
  --t-xs: 12px; --t-sm: 14px; --t-base: 15px; --t-md: 16px;
  --t-lg: 18px; --t-xl: 22px; --t-2xl: 28px; --t-3xl: 36px;

  --ease: cubic-bezier(.22,.78,.30,1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body.ekw {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* tabular figures for any numeric/code content */
.tnum, .kw-id, .kw-dates, .kw-udzial, .chart-total, .chart-row-total,
.entity-ident, .entity-kwcount, .trunc-note, .field input[name="pesel"],
.field input[name="krs"], .field input[name="regon"], .field input[name="min_udzial"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.shell {
  max-width: 1320px;
  margin: 0 auto;
  padding: 44px 32px 64px;
}

/* ---------------------------------------------------------------- topbar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 28px;
  flex-wrap: wrap;
  padding-bottom: 24px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.topbar::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 80px; height: 2px;
  background: var(--primary);
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark {
  width: 44px; height: 44px;
  display: block; flex: none;
  border-radius: var(--r-3);
  box-shadow: var(--shadow-1);
}
.brand-mark svg { display: block; width: 100%; height: 100%; border-radius: var(--r-3); }
.brand-text { display: flex; flex-direction: column; gap: 3px; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-2xl);
  letter-spacing: -.018em;
  line-height: 1;
  color: var(--ink-900);
}
.brand-sub {
  font-size: var(--t-sm);
  color: var(--fg-muted);
  letter-spacing: .005em;
}

/* ---------------------------------------------------------------- cards */
.chart-card,
.search-section,
.entity-card,
.empty-state {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-5);
  box-shadow: var(--shadow-2);
}

.chart-section { margin-bottom: var(--sp-5); }
.chart-card { padding: 24px 26px 20px; }

.chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.chart-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-lg);
  letter-spacing: -.011em;
  color: var(--ink-900);
}
.chart-total {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--primary);
  white-space: nowrap;
}

.chart-rows { display: flex; flex-direction: column; gap: 15px; }
.chart-row { display: flex; flex-direction: column; gap: 7px; }
.chart-row-label { display: flex; align-items: baseline; justify-content: space-between; }
.chart-row-name { font-size: var(--t-sm); font-weight: 500; color: var(--ink-700); }
.chart-row-total { font-size: var(--t-xs); color: var(--fg-subtle); }

.bar {
  display: flex;
  height: 28px;
  border-radius: var(--r-2);
  overflow: hidden;
  background: rgba(20,30,20,.05);
  box-shadow: inset 0 0 0 1px rgba(20,30,20,.04);
}
.bar-empty { width: 100%; }
.bar-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2px;
  color: var(--primary-fg);
  font-size: var(--t-xs);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  position: relative;
  animation: barGrow .9s var(--ease) both;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
.bar-seg + .bar-seg { border-left: 1px solid rgba(255,255,255,.35); }
.seg-pct { text-shadow: 0 1px 1px rgba(0,0,0,.16); }
.chart-row:nth-child(1) .bar-seg { animation-delay: .04s; }
.chart-row:nth-child(2) .bar-seg { animation-delay: .11s; }
.chart-row:nth-child(3) .bar-seg { animation-delay: .18s; }
.chart-row:nth-child(4) .bar-seg { animation-delay: .25s; }
@keyframes barGrow { from { width: 0 !important; opacity: 0; } }

/* role-group colours — ekw palette: green / ochre / slate */
.seg-wlasciciel           { background: linear-gradient(180deg, var(--green-600), var(--green-800)); }
.seg-uzytkownik_wieczysty { background: linear-gradient(180deg, var(--ochre-500), var(--ochre-700)); }
.seg-uprawniony           { background: linear-gradient(180deg, var(--slate-500), var(--slate-700)); }

.chart-legend {
  display: flex; flex-wrap: wrap; gap: 18px;
  margin-top: 18px; padding-top: 15px;
  border-top: 1px solid var(--line);
}
.legend-item { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-sm); color: var(--fg-muted); }
.legend-dot { width: 11px; height: 11px; border-radius: var(--r-1); flex: none; }
.chart-empty { padding: 8px 0; }

/* ---------------------------------------------------------------- search */
.search-section { padding: 22px 26px 24px; margin-bottom: 28px; }
.field-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .005em;
  color: var(--fg-muted);
}
.field input[type="text"],
.field input[type="number"],
.field select {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  color: var(--ink-900);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  padding: 10px 12px;
  width: 100%;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field input::placeholder { color: var(--fg-subtle); }
.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--green-600);
  box-shadow: 0 0 0 3px rgba(37,102,74,.15);
}

.filters { margin-top: 16px; }
.filters summary {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--primary);
  cursor: pointer;
  width: fit-content;
  list-style: none;
  user-select: none;
}
.filters summary::-webkit-details-marker { display: none; }
.filters summary::before { content: "▸ "; color: var(--fg-subtle); }
.filters[open] summary::before { content: "▾ "; }
.filters summary:hover { color: var(--primary-hover); }
.filter-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px 16px;
  margin-top: 14px; padding-top: 16px;
  border-top: 1px dashed var(--line-2);
}
.field-checkbox { flex-direction: row; align-items: center; gap: 9px; align-self: end; padding-bottom: 9px; }
.field-checkbox input { width: 16px; height: 16px; accent-color: var(--primary); }
/* Etykieta checkboxa dziedziczy 12px z .field-label — override na 13px był jedynym
   miejscem, gdzie IBM Plex Sans rasteryzował overdot „ż" za wysoko (glitch hintingu
   przy 13px/500). 12px = spójne z resztą etykiet i bez artefaktu. */

.field-error { color: var(--error); font-size: var(--t-sm); margin-top: 12px; }

.search-actions { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
.btn-primary {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--primary-fg);
  background: var(--primary);
  border: none;
  border-radius: var(--r-3);
  padding: 10px 24px;
  cursor: pointer;
  display: inline-block; text-decoration: none;
  box-shadow: var(--shadow-1);
  transition: background .15s var(--ease), transform .1s var(--ease);
}
.btn-primary:hover { background: var(--primary-hover); }
.btn-primary:active { transform: translateY(1px); }

.indicator { display: none; align-items: center; gap: 8px; font-size: var(--t-sm); color: var(--fg-muted); }
.indicator.htmx-request { display: inline-flex; }
.spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(37,102,74,.25);
  border-top-color: var(--green-600);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- results */
.results-summary { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 2px 2px 16px; }
.results-count { font-family: var(--font-display); font-weight: 600; font-size: var(--t-md); color: var(--ink-900); }
.trunc-note {
  margin-left: auto; font-size: var(--t-xs); color: var(--fg-subtle);
  border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 3px 11px;
}
.cards { display: flex; flex-direction: column; gap: 14px; }

.entity-card { padding: 0; overflow: hidden; animation: cardIn .45s var(--ease) both; transition: border-color .15s var(--ease); }
.entity-card:hover { border-color: var(--line-2); }
.cards .entity-card:nth-child(1) { animation-delay: .02s; }
.cards .entity-card:nth-child(2) { animation-delay: .05s; }
.cards .entity-card:nth-child(3) { animation-delay: .08s; }
.cards .entity-card:nth-child(4) { animation-delay: .11s; }
.cards .entity-card:nth-child(n+5) { animation-delay: .14s; }
@keyframes cardIn { from { opacity: 0; transform: translateY(8px); } }

.entity-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 16px 20px 14px;
  background: var(--green-50);
  border-bottom: 1px solid var(--line);
}
.entity-name {
  margin: 0 0 7px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-lg);
  letter-spacing: -.011em;
  color: var(--ink-900);
  line-height: 1.2;
}
.entity-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.type-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
}
.type-osoba_fizyczna { background: var(--slate-100); color: var(--slate-700); }
.type-spolka         { background: var(--ochre-100); color: var(--ochre-700); }
.type-skarb_panstwa  { background: var(--green-100); color: var(--green-800); }
.type-jst            { background: var(--green-50);  color: var(--green-700); border-color: var(--green-100); }
.type-inny           { background: #ececec; color: var(--ink-500); }
.entity-ident { font-size: var(--t-sm); color: var(--fg-muted); }
.entity-seat { font-size: var(--t-sm); color: var(--fg-subtle); }
.entity-kwcount {
  flex: none;
  font-size: var(--t-xs); font-weight: 600;
  color: var(--primary);
  background: var(--green-50);
  border: 1px solid var(--green-100);
  border-radius: var(--r-pill);
  padding: 4px 11px;
  white-space: nowrap;
}

.kw-list { list-style: none; margin: 0; padding: 2px 0; }
.kw-row {
  display: grid;
  grid-template-columns: 170px 1fr 130px 188px;
  align-items: center;
  gap: 14px;
  padding: 10px 20px;
  font-size: var(--t-sm);
  border-left: 3px solid transparent;
  transition: background .14s var(--ease), border-color .14s var(--ease);
}
.kw-row + .kw-row { border-top: 1px solid var(--line); }
.kw-row:hover { background: var(--green-50); border-left-color: var(--green-600); }
.kw-row.rg-uzytkownik_wieczysty:hover { border-left-color: var(--ochre-500); background: rgba(184,138,58,.07); }
.kw-row.rg-uprawniony:hover { border-left-color: var(--slate-500); background: rgba(77,111,143,.07); }

.kw-id { font-weight: 500; color: var(--ink-900); letter-spacing: .005em; }
.kw-role { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-700); }
.role-dot { width: 8px; height: 8px; border-radius: var(--r-1); flex: none; }
.kw-udzial { color: var(--ink-700); }
.kw-dates { color: var(--fg-muted); text-align: right; }

.badge-wykr {
  font-size: 10px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  color: var(--error);
  background: #fdecea;
  border-radius: var(--r-pill);
  padding: 2px 8px;
}
.kw-wykreslony { color: var(--fg-subtle); }
.kw-wykreslony .kw-id { color: var(--fg-subtle); text-decoration: line-through; text-decoration-color: rgba(185,74,63,.5); }
.kw-wykreslony .kw-udzial, .kw-wykreslony .kw-dates { color: var(--fg-subtle); }

/* ---------------------------------------------------------------- empty / foot */
.empty-state { text-align: center; padding: 52px 28px; }
.empty-title { margin: 0 0 8px; font-family: var(--font-display); font-weight: 600; font-size: var(--t-lg); color: var(--ink-900); }
.muted { color: var(--fg-subtle); }
.empty-state .muted { margin: 0; font-size: var(--t-sm); }

.page-foot {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: center;
  margin-top: 40px; padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: var(--t-xs); color: var(--fg-subtle);
}
.foot-dot { color: var(--line-2); }

.scroll-sentinel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 18px;
  font-size: var(--t-sm);
  color: var(--fg-subtle);
}

#results.htmx-swapping { opacity: 0; transition: opacity .12s var(--ease); }
#results { transition: opacity .2s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 720px) {
  .shell { padding: 34px 16px 52px; }
  .field-grid, .filter-grid { grid-template-columns: 1fr 1fr; }
  .kw-row { grid-template-columns: 1fr 1fr; row-gap: 4px; }
  .kw-dates { text-align: left; }
  .kw-id { grid-column: 1 / -1; }
}
@media (max-width: 460px) {
  .field-grid, .filter-grid { grid-template-columns: 1fr; }
}

/* ============================================================ Dział IV — hipoteki */
.topnav { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; justify-content: flex-end; }
.topnav-link {
  font-size: var(--t-sm); font-weight: 500; color: var(--fg-muted); white-space: nowrap;
  text-decoration: none; padding: 6px 13px; border-radius: var(--r-pill);
  border: 1px solid transparent; transition: background .14s var(--ease), color .14s var(--ease);
}
.topnav-link:hover { background: var(--green-50); color: var(--primary); }
.topnav-link.is-active {
  background: var(--green-50); color: var(--primary);
  border-color: var(--green-100); font-weight: 600;
}

/* three side-by-side distributions in the mortgage summary */
.dist-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; }
.dist-title {
  font-size: var(--t-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--fg-subtle); margin-bottom: 12px;
}
.bar-seg.seg-mono { background: linear-gradient(180deg, var(--green-600), var(--green-800)); }
.bar-seg.seg-chf  { background: linear-gradient(180deg, var(--ochre-500), var(--ochre-700)); }

/* folded tail of a distribution — native <details>, no JS */
.chart-tail > summary {
  display: inline-flex; align-items: center; gap: 7px;
  cursor: pointer; user-select: none; list-style: none;
  font-size: var(--t-sm); font-weight: 500; color: var(--green-700);
  padding: 3px 0;
}
.chart-tail > summary::-webkit-details-marker { display: none; }
.chart-tail > summary::before {
  content: ""; width: 0; height: 0;
  border-left: 5px solid currentColor; border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .14s var(--ease);
}
.chart-tail[open] > summary::before { transform: rotate(90deg); }
.chart-tail > summary:hover { color: var(--primary); text-decoration: underline; }
.chart-tail[open] .tail-more { display: none; }
.chart-tail:not([open]) .tail-less { display: none; }
.chart-tail > .chart-rows { margin-top: 15px; }
.chart-tail[open] { margin-bottom: 4px; }

/* currency tag on a mortgage card */
.cur-tag {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .03em;
  padding: 2px 8px; border-radius: var(--r-1); margin-right: 8px; vertical-align: middle;
  background: var(--green-100); color: var(--green-800);
}
.cur-CHF { background: var(--ochre-100); color: var(--ochre-700); }
.cur-EUR, .cur-USD, .cur-GBP, .cur-JPY { background: var(--slate-100); color: var(--slate-700); }

/* mortgage type tags */
.type-mort-zwykla     { background: var(--green-100); color: var(--green-800); }
.type-mort-kaucyjna   { background: var(--ochre-100); color: var(--ochre-700); }
.type-mort-umowna     { background: var(--green-50);  color: var(--green-700); border-color: var(--green-100); }
.type-mort-przymusowa { background: #fdecea; color: var(--error); }
.type-mort-inny       { background: #ececec; color: var(--ink-500); }

.badge-ok {
  font-size: 10px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  color: var(--success); background: var(--green-50);
  border-radius: var(--r-pill); padding: 2px 8px;
}
.mort-wykreslony { opacity: .72; }
.mort-wykreslony .entity-name { text-decoration: line-through; text-decoration-color: rgba(185,74,63,.4); }

/* mortgage detail rows use a 2-col layout (label / value), not the 4-col owner grid */
.mort-detail .kw-row { grid-template-columns: 150px 1fr; }
.mort-creditor { color: var(--ink-700); font-weight: 500; }
.mort-owners { color: var(--ink-700); }
.mort-inne { font-size: var(--t-xs); }

.notice {
  background: #fff7e6; border: 1px solid var(--ochre-100); color: var(--ochre-700);
  border-radius: var(--r-3); padding: 11px 16px; margin-bottom: 16px; font-size: var(--t-sm);
}

/* field-correction history ("było → jest") on a result row */
.kw-history {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 6px; font-size: var(--t-xs); color: var(--fg-subtle);
}
.hist-tag {
  font-size: 10px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  color: var(--ochre-700); background: var(--ochre-100);
  border-radius: var(--r-pill); padding: 2px 8px;
}
.hist-item s { color: var(--fg-muted); }

/* ---------------------------------------------------------------- login (public deployment) */
.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border-radius: var(--r-5);
  box-shadow: var(--shadow-pop);
  padding: 40px 36px 36px;
  text-align: center;
}
.login-brand-mark {
  width: 56px; height: 56px;
  margin: 0 auto 18px;
  display: block;
  border-radius: var(--r-3);
  box-shadow: var(--shadow-1);
}
.login-brand-mark svg { display: block; width: 100%; height: 100%; border-radius: var(--r-3); }
.login-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-xl);
  letter-spacing: -.018em;
  color: var(--ink-900);
  margin: 0 0 4px;
}
.login-sub {
  font-size: var(--t-sm);
  color: var(--fg-muted);
  margin: 0 0 28px;
}
.login-field {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.login-field input {
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  padding: 11px 14px;
  font: inherit;
  font-size: var(--t-sm);
  color: var(--fg);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px rgba(20,30,20,.04);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.login-field input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,102,74,.15);
}
.login-error {
  color: var(--error);
  background: #fbeceb;
  border: 1px solid rgba(185,74,63,.25);
  border-radius: var(--r-3);
  padding: 9px 14px;
  font-size: var(--t-sm);
  margin-bottom: 16px;
}

/* ============================================================ Tabs + Treść KW */
.topnav-tab {
  font-size: var(--t-sm); font-weight: 500; color: var(--fg-muted); white-space: nowrap;
  text-decoration: none; padding: 6px 13px; border-radius: var(--r-pill);
  border: 1px solid transparent; transition: background .14s var(--ease), color .14s var(--ease);
}
.topnav-tab:hover { background: var(--green-50); color: var(--primary); }
.topnav-tab.is-active {
  background: var(--green-50); color: var(--primary);
  border-color: var(--green-100); font-weight: 600;
}

.kw-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.kw-field { flex: 1 1 320px; }
.kw-input {
  font-family: var(--font-mono, monospace); font-size: var(--t-base);
  padding: 10px 14px; border: 1px solid var(--line-2); border-radius: var(--r-3);
  background: var(--surface); color: var(--fg); width: 100%;
}
.kw-input:focus { outline: none; border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(37,102,74,.15); }
.kw-actions { display: flex; gap: 10px; }
.btn-secondary {
  font-family: var(--font-sans); font-size: var(--t-base); font-weight: 600;
  color: var(--primary); background: var(--surface); border: 1px solid var(--green-100);
  border-radius: var(--r-3); padding: 10px 20px; cursor: pointer;
  display: inline-block; text-decoration: none;
  transition: background .15s var(--ease), transform .1s var(--ease);
}
.btn-secondary:hover { background: var(--green-50); }
.btn-secondary:active { transform: translateY(1px); }

.kw-content { margin-top: 26px; }
.kw-empty { color: var(--fg-muted); font-size: 14px; }

.kw-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  padding-bottom: 14px; margin-bottom: 20px; border-bottom: 1px solid var(--line);
}
.kw-num {
  font-family: var(--font-mono, monospace); font-weight: 700; font-size: var(--t-lg);
  color: var(--ink-900); letter-spacing: .02em;
  /* KW = zawsze 15 znaków, ale font jest proporcjonalny → różne numery mają różną
     szerokość i pasek działów by skakał. Stały slot (szerszy niż najszerszy KW) +
     tabularne cyfry pinują start przycisków niezależnie od numeru. */
  display: inline-block; min-width: 17ch; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.kw-sectionbar { display: flex; flex-wrap: wrap; gap: 6px; }
.kw-sectionbtn {
  font-size: var(--t-sm); font-weight: 500; color: var(--fg-muted);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 5px 14px; cursor: pointer;
  display: inline-block; text-decoration: none;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.kw-sectionbtn:hover { background: var(--green-50); color: var(--primary); }
.kw-sectionbtn.is-active {
  background: var(--primary); color: var(--primary-fg); border-color: var(--primary); font-weight: 600;
}
.kw-sectionbtn.is-pending { opacity: .5; border-style: dashed; }
.kw-sectionbtn.is-pending.is-active { opacity: 1; background: var(--surface-2); color: var(--fg-muted); border-color: var(--line); }
.kw-pending { font-style: italic; }

.kw-sectitle {
  font-size: var(--t-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--fg-subtle); margin: 0 0 18px;
}
/* odpis grid — reconstructed table (colspan/rowspan mirror the source layout) */
/* Wrapper scrolls horizontally so the wide odpis grid survives narrow embeds
   (gordon ~60% width) and mobile without collapsing to unreadable columns. */
.ekw-scroll { overflow-x: auto; margin-bottom: 22px; -webkit-overflow-scrolling: touch; }
.ekw-table {
  width: 100%; min-width: 620px; border-collapse: collapse; table-layout: fixed;
  font-size: var(--t-sm); margin-bottom: 0;
}
.ekw-table td {
  border: 1px solid var(--line); padding: 4px 9px; vertical-align: top;
  overflow-wrap: anywhere;
}
.ekw-rub td {
  background: var(--ochre-100); color: var(--ochre-700);
  font-weight: 600; border-color: var(--line-2);
}
/* Zwijalna rubryka: summary przejmuje rolę ochrowej belki nagłówka rubryki. */
.ekw-fold { margin-bottom: 22px; }
.ekw-fold .ekw-scroll { margin-bottom: 0; }
.ekw-fold[open] .ekw-table { margin-top: -1px; }  /* scal ramkę belki i tabeli */
.ekw-fold-h {
  cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 8px;
  background: var(--ochre-100); color: var(--ochre-700);
  font-weight: 600; font-size: var(--t-sm);
  border: 1px solid var(--line-2); padding: 4px 9px;
  list-style: none;
}
.ekw-fold-h::-webkit-details-marker { display: none; }
.ekw-fold-h::before { content: "▸"; font-size: 11px; transition: transform .15s var(--ease); }
.ekw-fold[open] > .ekw-fold-h::before { transform: rotate(90deg); }
.ekw-fold-h:hover { background: var(--ochre-100); filter: brightness(.97); }
.ekw-fold-count {
  margin-left: auto; min-width: 22px; text-align: center;
  font-size: var(--t-xs); font-weight: 700;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  color: var(--ochre-700); background: var(--surface);
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  padding: 1px 8px;
}
.ekw-t  { background: var(--ochre-100); color: var(--ochre-700); font-weight: 600; }
.ekw-hd { background: var(--surface-2); color: var(--fg-subtle); font-weight: 600; font-size: var(--t-xs); }
.ekw-l  { background: var(--surface-2); color: var(--ink-700); }
.ekw-v  { background: var(--surface); color: var(--ink-900); }
/* Wykreślona (historyczna) wartość — komórka ma flagę k, bo jej wiersz ma
   wypełniony indeks wykreślenia („Wykr."). Intensywniejszy szary niż etykiety
   (.ekw-l = --surface-2) + przekreślenie, TYLKO na tej komórce. Wygrywa tłem nad
   .ekw-v/.ekw-l (dalej w kolejności). */
.ekw-k  {
  background: #e6e0d1;
  color: var(--ink-400);
  text-decoration: line-through;
  text-decoration-color: var(--ink-400);
}
.login-submit { display: flex; width: 100%; justify-content: center; margin-top: 6px; }

/* ── Klikalny chip KW → Treść KW (zamiast surowego linku) ───────────── */
.kw-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--t-xs); font-weight: 600;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  color: var(--primary);
  background: var(--green-50);
  border: 1px solid var(--green-100);
  border-radius: var(--r-pill);
  padding: 4px 11px;
  text-decoration: none; white-space: nowrap;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.kw-link:hover { background: var(--green-100); border-color: var(--green-600); color: var(--primary-hover); }
.kw-link:active { transform: translateY(1px); }

/* KW as a link inside a dense list row (podmioty) — keep the compact kw-id look,
   add a clickable affordance instead of the boxed chip. */
a.kw-id--link { color: var(--primary); text-decoration: none; cursor: pointer; }
a.kw-id--link:hover { text-decoration: underline; color: var(--primary-hover); }

/* ── Ładniejsze pickery dat ─────────────────────────────────────────── */
.field input[type="date"] {
  font-family: var(--font-sans); font-size: var(--t-base);
  color: var(--ink-900); background: var(--surface);
  border: 1px solid var(--line-2); border-radius: var(--r-3);
  padding: 9px 12px; width: 100%;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field input[type="date"]:focus {
  outline: none; border-color: var(--green-600); box-shadow: 0 0 0 3px rgba(37,102,74,.15);
}
.field input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer; opacity: .5; transition: opacity .15s var(--ease);
}
.field input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: .85; }

/* ── Hipoteki: daty w filtrach zaawansowanych — 3 kolumny, pary pod sobą ─ */
.date-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; }
.date-grid .date-pair { display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 720px) { .date-grid { grid-template-columns: 1fr; } }

/* ── Mobile: skalowanie gridu odpisu na wąskich ekranach (POC) ────────────
   Mniejszy min-width + font + padding, żeby więcej gridu mieściło się bez
   scrolla. Docelowo gordon zrobi własny, dedykowany widok mobilny. */
@media (max-width: 640px) {
  .ekw-table { min-width: 480px; font-size: var(--t-xs); }
  .ekw-table td { padding: 3px 6px; }
  .ekw-hd { font-size: 10px; }
  .kw-sectionbar { gap: 6px; }
  .kw-sectionbtn { font-size: var(--t-xs); padding: 4px 10px; }
  .kw-num { font-size: var(--t-md); }
  .kw-head { flex-wrap: wrap; gap: 8px; }
}

/* ── Statystyki (landing) ─────────────────────────────────────────────── */
.stats-hero { text-align: center; padding: 12px 0 20px; }
.stats-hero-num {
  font-size: var(--t-3xl); font-weight: 700; line-height: 1.05;
  color: var(--primary); letter-spacing: -.02em;
}
.stats-hero-sub { color: var(--fg-muted); font-size: var(--t-md); margin-top: 6px; }
.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px; margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--line);
}
.stat-tile {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 14px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-3);
}
.stat-tile .stat-n { font-size: var(--t-xl); font-weight: 600; color: var(--ink-900); }
.stat-tile .stat-l { font-size: var(--t-sm); color: var(--fg-muted); }
/* pair smaller cards side-by-side to cut the landing's scroll length */
.stats-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.stats-cols .chart-card { margin: 0; height: 100%; }
@media (max-width: 820px) { .stats-cols { grid-template-columns: 1fr; } }

/* ── Objaśnienia filtrów (details pod formularzem) ────────────────────── */
.filters-help { margin-top: 14px; font-size: var(--t-sm); color: var(--ink-700); }
.filters-help > summary {
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  color: var(--fg-subtle); font-weight: 500; user-select: none;
}
.filters-help > summary::before { content: "ⓘ"; font-size: 13px; }
.filters-help > summary:hover { color: var(--ink-700); }
.filters-help-list {
  margin: 12px 0 0; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3);
  display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px;
}
.filters-help-list dt { font-weight: 600; color: var(--ink-900); }
.filters-help-list dd { margin: 0; }
@media (max-width: 640px) { .filters-help-list { grid-template-columns: 1fr; gap: 2px; }
  .filters-help-list dd { margin-bottom: 8px; } }

/* ── Panel admina ─────────────────────────────────────────────────────── */
.admin-form { display: flex; flex-direction: column; gap: 14px; }
.admin-perms { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 4px 0; }
.perm-chk { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-sm); color: var(--ink-700); }
.perm-chk input { accent-color: var(--primary); }
.admin-user { border-top: 1px solid var(--line); padding: 16px 0; display: flex; flex-direction: column; gap: 10px; }
.admin-user:first-of-type { border-top: none; }
.admin-user-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.admin-uname { font-weight: 600; color: var(--ink-900); }
.admin-row-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-del { margin-left: auto; }  /* pin „Usuń" to the container's right edge */
.admin-pw {
  max-width: 260px;
  font-family: var(--font-sans); font-size: var(--t-base); color: var(--ink-900);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-3);
  padding: 9px 12px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.admin-pw::placeholder { color: var(--fg-subtle); }
.admin-pw:focus { outline: none; border-color: var(--green-600); box-shadow: 0 0 0 3px rgba(37,102,74,.15); }
.btn-danger {
  font-family: var(--font-sans); font-size: var(--t-sm); font-weight: 600;
  color: var(--error); background: #fdecea; border: 1px solid #f3c9c4;
  border-radius: var(--r-3); padding: 8px 16px; cursor: pointer;
}
.btn-danger:hover { background: #fbdad6; }
.audit-list { display: flex; flex-direction: column; }
.audit-row {
  display: grid; grid-template-columns: max-content 170px 1fr; gap: 12px;
  font-size: var(--t-sm); padding: 6px 0; border-bottom: 1px solid var(--surface-2);
}
.audit-ts { color: var(--fg-muted); white-space: nowrap; }  /* „2026-07-10 12:00" w 1 linii */
.audit-kind { color: var(--ink-700); font-weight: 500; }
.audit-detail { color: var(--ink-700); overflow-wrap: anywhere; }
@media (max-width: 640px) { .audit-row { grid-template-columns: 1fr; gap: 2px; } }

/* ── Mobile pass — cała apka na wąskich ekranach ─────────────────────── */
@media (max-width: 640px) {
  .shell { padding: 16px 12px 40px; }
  .topbar { flex-direction: column; align-items: stretch; gap: 12px; padding-bottom: 14px; margin-bottom: 18px; }
  .topbar::after { display: none; }
  .brand-name { font-size: var(--t-xl); }
  .topnav { margin-left: 0; justify-content: flex-start; gap: 4px 6px; }
  .topnav-tab, .topnav-link { padding: 6px 10px; font-size: var(--t-sm); }
  .field-grid, .filter-grid { grid-template-columns: 1fr; }
  .search-actions { flex-wrap: wrap; gap: 10px; }
  .chart-card { padding: 16px 14px 14px; }
  .chart-head { flex-wrap: wrap; gap: 4px 12px; }
  .chart-head h2 { font-size: var(--t-md); }
  .stats-hero-num { font-size: var(--t-2xl); }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .entity-card { padding: 15px 14px; }
  .entity-head { flex-wrap: wrap; gap: 8px; }
  .btn-primary, .btn-secondary { padding: 9px 16px; }
  .admin-pw { max-width: none; flex: 1 1 160px; }
}

.search-hint { font-size: var(--t-sm); color: var(--fg-muted); margin: 2px 0 0; line-height: 1.45; }