──────────────────────────────────────────────────────────────────────────── */
.kp-modal {
padding: 0; margin: auto;
width: min(560px, calc(100vw - 2 * var(--kp-sp-4)));
max-height: min(86vh, calc(100dvh - 2 * var(--kp-sp-5)));
color: var(--ink);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--kp-radius-lg);
box-shadow: var(--shadow);
overflow: hidden;
}
/* dialog musi zostać ukryty, dopóki nie jest otwarty — dlatego display tylko tu */
.kp-modal:not(dialog), dialog.kp-modal[open] { display: flex; flex-direction: column; }
.kp-modal--sm { width: min(420px, calc(100vw - 2 * var(--kp-sp-4))); }
.kp-modal--lg { width: min(760px, calc(100vw - 2 * var(--kp-sp-4))); }
dialog.kp-modal::backdrop { background: var(--scrim, rgba(23, 24, 28, .48)); }
.kp-modal-overlay {
position: fixed; inset: 0; z-index: 50;
display: grid; place-items: center;
padding: var(--kp-sp-4);
background: var(--scrim, rgba(23, 24, 28, .48));
}
.kp-modal__head {
display: flex; align-items: center; gap: var(--kp-sp-3);
padding: var(--kp-sp-3) var(--kp-sp-4);
border-bottom: 1px solid var(--border-soft);
}
.kp-modal__title {
margin: 0; font-family: var(--kp-font-mono); font-size: var(--kp-fs-lg); font-weight: 600;
letter-spacing: var(--kp-tracking-tight);
}
.kp-modal__close {
margin-left: auto; flex: 0 0 auto;
width: 30px; height: 30px; display: grid; place-items: center;
background: none; border: 0; border-radius: 6px; cursor: pointer;
color: var(--muted); font-size: var(--kp-fs-lg); line-height: 1;
}
.kp-modal__close:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.kp-modal__body {
padding: var(--kp-sp-4); overflow-y: auto; min-height: 0;
font-size: var(--kp-fs-sm); color: var(--muted);
}
.kp-modal__body p { margin: 0 0 var(--kp-sp-3); }
.kp-modal__body p:last-child { margin-bottom: 0; }
.kp-modal__foot {
display: flex; align-items: center; justify-content: flex-end; gap: var(--kp-sp-2);
flex-wrap: wrap;
padding: var(--kp-sp-3) var(--kp-sp-4);
border-top: 1px solid var(--border-soft);
/* jak .kp-card--inset: w Nocy --inset == --surface, więc stopka bez domieszki
tła byłaby nieodróżnialna od treści */
background: color-mix(in srgb, var(--canvas) 55%, var(--inset));
}
/* ────────────────────────────────────────────────────────────────────────────
12. Pasek nawigacji, zakładki, breadcrumb
──────────────────────────────────────────────────────────────────────────── */
.kp-nav {
position: sticky; top: 0; z-index: 30;
display: flex; align-items: center; gap: var(--kp-sp-3);
min-height: 52px; padding: 0 var(--kp-sp-4);
background: color-mix(in srgb, var(--canvas) 86%, transparent);
backdrop-filter: saturate(1.25) blur(12px);
-webkit-backdrop-filter: saturate(1.25) blur(12px);
border-bottom: 1px solid var(--border);
}
.kp-nav__brand {
display: inline-flex; align-items: center; gap: var(--kp-sp-2);
flex: 0 0 auto; text-decoration: none; color: var(--ink); border-radius: 6px;
}
.kp-nav__brand img, .kp-nav__brand svg { width: 22px; height: 22px; }
.kp-nav__items {
display: flex; align-items: center; gap: 2px;
min-width: 0; overflow-x: auto; scrollbar-width: none;
list-style: none; margin: 0; padding: 0;
}
.kp-nav__items::-webkit-scrollbar { display: none; }
.kp-nav__item {
display: inline-flex; align-items: center; gap: 6px;
min-height: 34px; padding: 0 10px;
font-family: var(--kp-font-mono); font-size: var(--kp-fs-sm); font-weight: 600;
color: var(--muted); background: none; border: 0; border-radius: var(--kp-radius-sm);
text-decoration: none; white-space: nowrap; cursor: pointer;
transition: color var(--kp-dur-2) var(--kp-ease), background var(--kp-dur-2) var(--kp-ease);
}
.kp-nav__item:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.kp-nav__item[aria-current=page], .kp-nav__item[aria-current=true], .kp-nav__item.is-active {
color: var(--accent-text);
background: color-mix(in srgb, var(--accent) 12%, transparent);
box-shadow: inset 0 -2px 0 var(--accent);
}
.kp-nav__item:disabled { opacity: .45; cursor: not-allowed; }
.kp-nav__actions { margin-left: auto; display: flex; align-items: center; gap: var(--kp-sp-2); flex: 0 0 auto; }
.kp-tabs {
display: flex; gap: 2px; min-width: 0;
overflow-x: auto; scrollbar-width: none;
border-bottom: 1px solid var(--border);
}
.kp-tabs::-webkit-scrollbar { display: none; }
.kp-tab {
display: inline-flex; align-items: center; gap: 6px;
min-height: 38px; padding: 0 12px;
font-family: var(--kp-font-mono); font-size: var(--kp-fs-sm); font-weight: 600;
color: var(--muted); background: none; border: 0; cursor: pointer;
white-space: nowrap; text-decoration: none;
border-radius: var(--kp-radius-sm) var(--kp-radius-sm) 0 0;
}
.kp-tab:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.kp-tab[aria-selected=true], .kp-tab.is-active {
color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent);
}
.kp-tab:disabled { opacity: .45; cursor: not-allowed; }
.kp-tab__count { font-size: var(--kp-fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.kp-crumbs {
display: flex; align-items: center; flex-wrap: nowrap;
min-width: 0; overflow-x: auto; scrollbar-width: none;
list-style: none; margin: 0; padding: 0;
font-family: var(--kp-font-mono); font-size: var(--kp-fs-xs); color: var(--muted);
}
.kp-crumbs::-webkit-scrollbar { display: none; }
.kp-crumbs__item { display: flex; align-items: center; min-width: 0; white-space: nowrap; }
.kp-crumbs__item + .kp-crumbs__item::before {
content: "/"; color: var(--muted); margin: 0 var(--kp-sp-2); flex: 0 0 auto;
}
.kp-crumbs__link {
color: var(--muted); text-decoration: none; border-radius: 4px; padding: 2px 2px;
overflow: hidden; text-overflow: ellipsis;
}
.kp-crumbs__link:hover { color: var(--ink); text-decoration: underline; }
.kp-crumbs__item[aria-current=page], .kp-crumbs__item:last-child { color: var(--ink); }
/* ────────────────────────────────────────────────────────────────────────────
13. Klawisz, kod
──────────────────────────────────────────────────────────────────────────── */
.kp-kbd {
display: inline-flex; align-items: center; justify-content: center;
min-width: 22px; height: 22px; padding: 0 6px;
font-family: var(--kp-font-mono); font-size: var(--kp-fs-xs); font-weight: 600;
color: var(--ink); background: var(--surface);
border: 1px solid var(--border-strong); border-bottom-width: 2px;
border-radius: 5px;
}
.kp-keys { display: inline-flex; align-items: center; gap: 4px; }
.kp-keys__plus { color: var(--muted); font-size: var(--kp-fs-xs); }
.kp-code {
font-family: var(--kp-font-mono); font-size: .92em;
padding: 1px 5px; border-radius: 4px;
color: var(--ink);
background: color-mix(in srgb, var(--ink) 7%, transparent);
border: 1px solid var(--border-soft);
word-break: break-word;
}
.kp-pre {
margin: 0; padding: var(--kp-sp-3);
font-family: var(--kp-font-mono); font-size: var(--kp-fs-sm); line-height: 1.55;
color: var(--ink); background: var(--inset);
border: 1px solid var(--border); border-radius: var(--kp-radius);
overflow-x: auto; max-height: var(--kp-pre-h, none);
tab-size: 2; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.kp-pre--wrap { white-space: pre-wrap; word-break: break-word; }
.kp-pre code { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
/* blok kodu z paskiem tytułu: .kp-codeblock > .kp-codeblock__head + .kp-pre */
.kp-codeblock { border: 1px solid var(--border); border-radius: var(--kp-radius); overflow: hidden; background: var(--inset); }
.kp-codeblock__head {
display: flex; align-items: center; gap: var(--kp-sp-2);
padding: 6px var(--kp-sp-3);
font-size: var(--kp-fs-xs); letter-spacing: var(--kp-tracking-label); text-transform: uppercase;
color: var(--muted); background: var(--surface); border-bottom: 1px solid var(--border);
}
.kp-codeblock > .kp-pre { border: 0; border-radius: 0; }
/* ────────────────────────────────────────────────────────────────────────────
14. Podpowiedź (tooltip) — CSS-only, treść w data-tip
Element musi być fokusowalny (button/a/[tabindex]) — inaczej klawiatura
podpowiedzi nie zobaczy. Dla czytnika ekranu dołóż aria-label/aria-describedby.
──────────────────────────────────────────────────────────────────────────── */
.kp-tip { position: relative; }
.kp-tip::after {
content: attr(data-tip);
position: absolute; left: 50%; bottom: calc(100% + 8px);
transform: translateX(-50%) translateY(3px);
z-index: 40;
padding: 5px 8px; max-width: 240px; width: max-content;
font-family: var(--kp-font-mono); font-size: var(--kp-fs-xs); font-weight: 500;
line-height: 1.35; text-align: center; white-space: normal;
color: var(--fill-ink); background: var(--kp-n-900);
border-radius: var(--kp-radius-sm);
opacity: 0; pointer-events: none;
transition: opacity var(--kp-dur-2) var(--kp-ease), transform var(--kp-dur-2) var(--kp-ease);
}
[data-theme=dark] .kp-tip::after { color: var(--kp-n-900); background: var(--kp-n-050); }
.kp-tip:hover::after, .kp-tip:focus-visible::after {
opacity: 1; transform: translateX(-50%) translateY(0);
}
.kp-tip--bottom::after { bottom: auto; top: calc(100% + 8px); transform: translateX(-50%) translateY(-3px); }
.kp-tip--bottom:hover::after, .kp-tip--bottom:focus-visible::after { transform: translateX(-50%) translateY(0); }
.kp-tip--start::after { left: 0; transform: translateY(3px); }
.kp-tip--start:hover::after, .kp-tip--start:focus-visible::after { transform: translateY(0); }
.kp-tip--end::after { left: auto; right: 0; transform: translateY(3px); }
.kp-tip--end:hover::after, .kp-tip--end:focus-visible::after { transform: translateY(0); }
/* ────────────────────────────────────────────────────────────────────────────
15. Pasek postępu
──────────────────────────────────────────────────────────────────────────── */
.kp-progress {
display: block; width: 100%; height: 8px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--kp-radius-pill);
overflow: hidden;
}
.kp-progress--sm { height: 4px; }
.kp-progress__bar {
display: block; height: 100%;
width: var(--kp-progress, 0%);
background: var(--accent);
border-radius: inherit;
transition: width var(--kp-dur-2) var(--kp-ease);
}
.kp-progress--ok .kp-progress__bar { background: var(--ok-ink); }
.kp-progress--warn .kp-progress__bar { background: var(--warn); }
.kp-progress--danger .kp-progress__bar { background: var(--danger-ink); }
/* nieznany postęp — pasek wędruje */
.kp-progress--indeterminate .kp-progress__bar {
width: 38%; animation: kp-progress-slide 1.3s var(--kp-ease) infinite;
}
@keyframes kp-progress-slide {
from { transform: translateX(-105%); } to { transform: translateX(275%); }
}
/* ────────────────────────────────────────────────────────────────────────────
16. Mobile — cele dotykowe ≥44 px (HIG) i ciaśniejsze marginesy
──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
.kp-btn { --_h: var(--kp-tap); }
.kp-btn--sm { --_h: 38px; }
.kp-btn--icon { width: var(--_h); }
.kp-input, .kp-select { --_h: var(--kp-tap); }
/* iOS zoomuje pole przy foncie < 16 px — dlatego pola rosną na telefonie */
.kp-input, .kp-textarea, .kp-select { font-size: var(--kp-fs-lg); }
.kp-nav { min-height: 56px; padding: 0 var(--kp-sp-3); }
.kp-nav__item { min-height: var(--kp-tap); }
.kp-tab { min-height: var(--kp-tap); }
.kp-choice { min-height: var(--kp-tap); align-items: center; }
.kp-pill { min-height: 36px; }
.kp-card { padding: var(--kp-sp-3); }
.kp-empty { padding: var(--kp-sp-5) var(--kp-sp-3); }
/* dialog jako arkusz od dołu — kciukiem bliżej */
.kp-modal {
width: 100%; max-width: none;
margin: auto auto 0;
border-radius: var(--kp-radius-lg) var(--kp-radius-lg) 0 0;
max-height: 88vh;
}
.kp-modal__foot { padding-bottom: calc(var(--kp-sp-3) + env(safe-area-inset-bottom, 0px)); }
.kp-modal__foot .kp-btn { flex: 1 1 auto; }
}
/* ────────────────────────────────────────────────────────────────────────────
17. Mniej ruchu — wszystko, co pulsuje/wjeżdża, staje
──────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.kp-btn, .kp-pill, .kp-card--link, .kp-input, .kp-textarea, .kp-select,
.kp-checkbox, .kp-radio, .kp-switch, .kp-switch::after,
.kp-nav__item, .kp-tab, .kp-tip::after, .kp-progress__bar {
transition: none;
}
.kp-btn:active, .kp-card--link:active { transform: none; }
.kp-toast { animation: none; }
.kp-skeleton {
animation: none;
background: color-mix(in srgb, var(--ink) 9%, transparent);
}
.kp-progress--indeterminate .kp-progress__bar { animation: none; width: 100%; opacity: .5; }
/* wskaźnik obrotowy zostaje — bez niego nie ma sygnału „trwa" — ale wolniej */
.kp-spinner, .kp-btn[data-loading]::after { animation-duration: 1.6s; }
}