/* Intecom - Zadania (od 0.9.0). Tokeny i klasy skopiowane z Hegios (app.html, DESIGN.md): system h-* na zmiennych
   --h-*, twarde kąty, paleta chłodna. Bez czcionek z sieci (fonty systemowe), bez ciemnego motywu, bez starych klas.
   Zadania (.tz-*, .tk-*, .tkm-*) jak w Hegios, bez osób, kalendarza i "nowych". Wąsko: poniżej 900 px menu projektów
   to przewijany pasek, a nawigacja Zadania | Notatnik stoi na dole; poniżej 760 px okno zadania na cały ekran, pola
   z boku (termin, etap, priorytet, projekt) pod tytułem i opisem, tablica przewija się w bok. */

:root {
    --h-bg:           #EEF0F3;
    --h-surface:      #FFFFFF;
    --h-text:         #23272E;
    --h-text-muted:   #5B6673;
    --h-border:       #CBD1DA;
    --h-border-strong:#7D889A;
    --h-accent:       #2E64A8;
    --h-accent-dark:  #255A99;
    --h-accent-bg:    #E8EFF8;
    --h-navy:         #1C2E4A;
    --h-anthracite:   #23272E;
    --h-graphite:     #4B5563;

    --h-nav-bg:          #1C2E4A;
    --h-nav-text:        #E6EBF2;
    --h-nav-text-muted:  #9AA7BA;
    --h-nav-active-bg:   #2D4567;
    --h-nav-active-text: #FFFFFF;
    --h-nav-active-bar:  #7FAEE8;
    --h-nav-hover-bg:    #25384F;

    --h-toast-bg:     #23272E;
    --h-toast-text:   #F2F4F7;

    --h-success:      #276B45;
    --h-success-bg:   #E6F2EA;
    --h-warning:      #B3261E;
    --h-warning-bg:   #FBEAE7;
    --h-error:        #7A1B1F;
    --h-error-bg:     #F3DCDC;
    --h-info:         #4B5563;
    --h-info-bg:      #E9ECF1;

    --h-font-ui:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --h-font-mono: 'JetBrains Mono', ui-monospace, Consolas, 'Courier New', monospace;

    --h-fs-11: 11px; --h-fs-12: 12px;
    --h-fs-13: 13px; --h-fs-14: 14px; --h-fs-15: 15px;
    --h-fs-16: 16px; --h-fs-20: 20px; --h-fs-22: 22px; --h-fs-24: 24px;
    --h-fw-reg: 400; --h-fw-med: 500; --h-fw-sem: 600;
    --h-lh-tight: 1.45; --h-lh-base: 1.55; --h-lh-loose: 1.65;

    --h-sp-1: 4px;  --h-sp-2: 8px;  --h-sp-3: 12px;
    --h-sp-4: 16px; --h-sp-5: 24px; --h-sp-6: 32px; --h-sp-7: 48px;

    --h-rad-sm: 0; --h-rad-md: 0; --h-rad-lg: 0;

    --h-shadow-sm: 0 1px 2px rgba(35,39,46,.05);
    --h-shadow-md: 0 2px 6px rgba(35,39,46,.08);
    --h-shadow-lg: 0 6px 16px rgba(35,39,46,.10);

    --h-btn-pad:   10px 16px;
    --h-input-pad: 10px 12px;

    /* wysokość dolnej nawigacji (poniżej 900 px), toast i okna liczą od niej */
    --crm-dol: 0px;
}

/* -- podstawy -- */
* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
    font-family: var(--h-font-ui); background: var(--h-bg); color: var(--h-text);
    height: 100vh; height: 100dvh; overflow: hidden;
    font-size: var(--h-fs-14); line-height: var(--h-lh-base);
    -webkit-text-size-adjust: 100%;
}
:where(a:any-link) { color: var(--h-accent); }
:where(input,textarea)::placeholder { color: var(--h-text-muted); opacity: 1; }
:where(button,input,select,textarea,img) { border-radius: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

.h-text-muted { color: var(--h-text-muted); }
.h-num { font-family: var(--h-font-mono); font-feature-settings: 'tnum'; }

/* -- powłoka: pasek z nazwą, menu modułów po lewej (od 900 px), treść -- */
.layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); grid-template-rows: 56px minmax(0, 1fr); height: 100vh; height: 100dvh; }
.topbar {
    grid-column: 1 / 3; background: var(--h-nav-bg); color: var(--h-nav-active-text);
    display: flex; align-items: center; padding: 0 24px; padding-left: max(24px, env(safe-area-inset-left));
}
.topbar-t { font-size: var(--h-fs-16); font-weight: var(--h-fw-sem); letter-spacing: .2px; }
.sidebar { background: var(--h-nav-bg); padding: 12px 0; overflow-y: auto; display: flex; flex-direction: column; }
.sidebar a {
    display: flex; align-items: center; gap: 12px; padding: 12px 22px; color: var(--h-nav-text-muted); text-decoration: none;
    font-size: var(--h-fs-14); font-weight: var(--h-fw-med); border-left: 3px solid transparent; transition: background .15s, color .15s;
}
.sidebar a:hover { color: var(--h-nav-text); background: var(--h-nav-hover-bg); }
.sidebar a.active { color: var(--h-nav-active-text); border-left-color: var(--h-nav-active-bar); background: var(--h-nav-active-bg); }
.sidebar a svg { flex-shrink: 0; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sidebar a:focus-visible { outline: 2px solid var(--h-nav-active-bar); outline-offset: -2px; }
.sb-badge {
    margin-left: auto; min-width: 20px; padding: 0 6px; background: var(--h-warning); color: #fff; font-size: var(--h-fs-11);
    font-weight: var(--h-fw-sem); line-height: 20px; text-align: center; font-family: var(--h-font-mono);
}
.content { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 24px 32px; min-width: 0; }

/* -- baner "Bez sieci" nad treścią -- */
.h-alert {
    padding: 10px 14px; border: 1px solid; font-size: var(--h-fs-13); line-height: var(--h-lh-base);
    display: flex; gap: 10px; align-items: center; color: var(--h-text); flex-wrap: wrap;
}
.h-alert-warning { background: var(--h-warning-bg); border-color: var(--h-warning); }
.h-alert-icon { flex-shrink: 0; width: 16px; height: 16px; color: var(--h-warning); fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.h-alert-content { flex: 1; min-width: 0; }
.crm-baner { margin-bottom: var(--h-sp-3); }

/* -- przyciski -- */
.h-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: var(--h-btn-pad);
    border: 1px solid transparent; font-size: var(--h-fs-14); font-weight: var(--h-fw-med); line-height: 1;
    cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; white-space: nowrap; background: none;
}
.h-btn:disabled { opacity: .5; cursor: not-allowed; }
.h-btn-primary { background: var(--h-text); color: #fff; }
.h-btn-primary:hover:not(:disabled) { background: #000; }
.h-btn-secondary { background: var(--h-surface); color: var(--h-text); border-color: var(--h-border-strong); }
.h-btn-secondary:hover:not(:disabled) { background: var(--h-bg); }
.h-btn-accent { background: var(--h-accent); color: #fff; }
.h-btn-accent:hover:not(:disabled) { background: var(--h-accent-dark); }
.h-btn-danger { background: var(--h-surface); color: var(--h-error); border-color: var(--h-error); }
.h-btn-danger:hover:not(:disabled) { background: var(--h-error-bg); }
.h-btn-ghost { background: transparent; color: var(--h-text-muted); }
.h-btn-ghost:hover:not(:disabled) { color: var(--h-text); background: var(--h-bg); }
.h-btn-sm { padding: 6px 12px; font-size: var(--h-fs-13); }
.h-btn:focus-visible { outline: 2px solid var(--h-accent); outline-offset: 1px; }
.h-icon-btn {
    background: transparent; border: 1px solid transparent; width: 30px; height: 30px; display: inline-flex; align-items: center;
    justify-content: center; cursor: pointer; color: var(--h-text-muted); transition: color .15s ease, background .15s ease;
}
.h-icon-btn:hover { color: var(--h-text); background: var(--h-bg); }
.h-icon { width: 18px; height: 18px; stroke-width: 1.75; stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.h-icon-sm { width: 14px; height: 14px; }

/* -- pola -- */
.h-input, .h-select, .h-textarea {
    font-size: var(--h-fs-14); color: var(--h-text); background: var(--h-surface); border: 1px solid var(--h-border-strong);
    padding: var(--h-input-pad); line-height: var(--h-lh-base); width: 100%; transition: border-color .15s ease, box-shadow .15s ease;
}
.h-input:focus, .h-select:focus, .h-textarea:focus { outline: none; border-color: var(--h-accent); box-shadow: 0 0 0 3px rgba(46,100,168,.18); }
.h-textarea { resize: vertical; }
.h-field { display: flex; flex-direction: column; gap: var(--h-sp-1); min-width: 0; }
.h-field > label { font-size: var(--h-fs-13); font-weight: var(--h-fw-med); color: var(--h-text); }
.h-empty { text-align: center; padding: var(--h-sp-6) var(--h-sp-4); color: var(--h-text-muted); font-size: var(--h-fs-14); line-height: var(--h-lh-loose); }

/* -- toast: dół, środek, jeden naraz; nad dolną nawigacją -- */
.h-toast {
    position: fixed; bottom: calc(var(--h-sp-5) + var(--crm-dol) + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%);
    z-index: 2000; display: flex; align-items: center; gap: var(--h-sp-3); background: var(--h-toast-bg); color: var(--h-toast-text);
    padding: var(--h-sp-3) var(--h-sp-4); box-shadow: var(--h-shadow-lg); max-width: min(560px, calc(100vw - 32px)); width: max-content;
    font-size: var(--h-fs-13); line-height: var(--h-lh-base); cursor: pointer;
}
.h-toast-success, .h-toast-info { background: var(--h-toast-bg); }
.h-toast-warning { background: var(--h-warning); color: #fff; }
.h-toast-error { background: var(--h-error); color: #fff; }
.h-toast span { min-width: 0; overflow-wrap: anywhere; }
.h-toast button {
    flex-shrink: 0; background: none; border: 1px solid currentColor; color: inherit; padding: var(--h-sp-1) var(--h-sp-3);
    font-weight: var(--h-fw-sem); cursor: pointer; min-height: 32px;
}

/* -- okno (hForm, hConfirm): nad wszystkim poza toastem -- */
.act-dlg-bg {
    position: fixed; inset: 0; background: rgba(35,39,46,.45); z-index: 1100; display: flex; align-items: center;
    justify-content: center; padding: var(--h-sp-4);
}
.act-dlg {
    background: var(--h-surface); box-shadow: var(--h-shadow-lg); width: 440px; max-width: 100%; max-height: 90vh;
    overflow-y: auto; padding: var(--h-sp-5);
}
.act-dlg:focus { outline: none; }
.act-dlg-head { display: flex; align-items: center; gap: var(--h-sp-2); }
.act-dlg-head b { flex: 1; font-size: var(--h-fs-16); color: var(--h-text); overflow-wrap: anywhere; }
.act-dlg-sub { font-size: var(--h-fs-13); color: var(--h-text-muted); margin-top: var(--h-sp-1); }
.act-dlg .h-field { margin-top: var(--h-sp-3); }
.act-dlg-actions { display: flex; justify-content: flex-end; gap: var(--h-sp-2); margin-top: var(--h-sp-4); }
.h-form-info { white-space: pre-line; margin-top: var(--h-sp-3); }
@media (max-width: 600px) {
    .act-dlg-bg { padding: 0; align-items: stretch; }
    .act-dlg { width: 100%; max-height: none; padding-bottom: calc(var(--h-sp-5) + env(safe-area-inset-bottom)); }
}

/* -- Zadania: zakładki, szukanie, pasek dodawania -- */
.tz-ik { flex-shrink: 0; display: inline-block; vertical-align: -3px; }
.tz-head { background: var(--h-surface); border: 1px solid var(--h-border); }
.tz-bar1 { display: flex; align-items: stretch; border-bottom: 1px solid var(--h-border); }
.tz-tabs { flex: 1; min-width: 0; display: flex; align-items: stretch; padding: 0 var(--h-sp-2); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tz-tabs::-webkit-scrollbar { display: none; }
.tz-tab { display: flex; align-items: center; flex-shrink: 0; min-width: 0; padding-right: var(--h-sp-3); box-shadow: inset 0 -3px 0 transparent; }
.tz-tab.is-on { box-shadow: inset 0 -3px 0 var(--h-accent); }
.tz-tab-b {
    display: inline-flex; align-items: center; gap: var(--h-sp-2); background: none; border: none; min-width: 0;
    padding: 13px var(--h-sp-2) 11px var(--h-sp-3); font-size: var(--h-fs-15); color: var(--h-graphite); cursor: pointer; white-space: nowrap;
}
.tz-tab-b:hover { color: var(--h-text); }
.tz-tab.is-on .tz-tab-b { color: var(--h-text); font-weight: var(--h-fw-sem); }
.tz-tab-n { overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.tz-k { font-size: var(--h-fs-12); color: var(--h-text-muted); font-weight: var(--h-fw-med); font-family: var(--h-font-mono); }
.tz-pill { font-size: var(--h-fs-11); font-weight: var(--h-fw-sem); background: var(--h-accent); color: #fff; padding: 1px 6px; line-height: 1.4; }
.tz-pill.is-late { background: var(--h-error); }
.tz-bar1-r { display: flex; align-items: center; gap: var(--h-sp-2); padding: 6px var(--h-sp-3); flex-shrink: 0; }
.tz-search {
    display: flex; align-items: center; gap: 6px; border: 1px solid var(--h-border); background: var(--h-surface); padding: 0 10px;
    color: var(--h-graphite); width: 38px; height: 34px; overflow: hidden; cursor: pointer; transition: width .15s;
}
.tz-search:hover { border-color: var(--h-border-strong); }
.tz-search:focus-within, .tz-search.is-filled { width: 240px; cursor: text; border-color: var(--h-border-strong); }
.tz-search:focus-within { border-color: var(--h-accent); box-shadow: 0 0 0 2px var(--h-accent-bg); }
.tz-search input[type=search] {
    flex: 1; min-width: 0; width: auto; border: none; outline: none; background: transparent; font-size: var(--h-fs-13);
    padding: 8px 0; color: var(--h-text); -webkit-appearance: none; appearance: none;
}
.tz-bar2 { display: flex; align-items: center; gap: var(--h-sp-3); padding: var(--h-sp-3); flex-wrap: wrap; }
.tz-add { flex: 1 1 560px; display: flex; align-items: center; gap: var(--h-sp-2); flex-wrap: wrap; min-width: 0; }
.tz-add-in {
    flex: 1 1 calc(100% - 100px); min-width: 0; display: flex; align-items: center; gap: var(--h-sp-2); border: 1px solid var(--h-border-strong);
    background: var(--h-surface); padding: 0 0 0 var(--h-sp-3); color: var(--h-text-muted); cursor: text;
}
.tz-add-in:focus-within { border-color: var(--h-accent); box-shadow: 0 0 0 2px var(--h-accent-bg); }
.tz-add-t { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: var(--h-fs-14); padding: 8px 0; color: var(--h-text); }
.tz-mic {
    flex-shrink: 0; width: 38px; align-self: stretch; min-height: 36px; display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; border-left: 1px solid var(--h-border); color: var(--h-graphite); cursor: pointer;
}
.tz-mic:hover { color: var(--h-text); background: var(--h-bg); }
.tz-mic[aria-pressed="true"] { color: #fff; background: var(--h-accent); }
.tz-add .h-select { width: auto; max-width: 220px; }
.tz-add > .h-btn { align-self: stretch; }
.tz-add-time { width: 112px; flex-shrink: 0; }
.tz-add-info { font-size: var(--h-fs-13); color: var(--h-text-muted); display: flex; align-items: center; gap: var(--h-sp-3); min-height: 36px; }
.tz-dykt { flex-basis: 100%; font-size: var(--h-fs-12); color: var(--h-text-muted); min-height: 18px; white-space: nowrap; overflow: hidden; }
.tz-dykt.wrap { white-space: normal; }
/* przełącznik dnia przy dodawaniu (Dziś, Jutro, Pn, Za tydzień, Bez terminu) i Lista / Tablica */
.tz-seg { display: inline-flex; border: 1px solid var(--h-border-strong); flex-shrink: 0; max-width: 100%; }
.tz-seg button {
    display: inline-flex; align-items: center; gap: 6px; background: var(--h-surface); border: none; border-left: 1px solid var(--h-border-strong);
    font-size: var(--h-fs-13); color: var(--h-graphite); padding: 6px 12px; min-height: 36px; cursor: pointer; white-space: nowrap;
}
.tz-seg button:first-child { border-left: none; }
.tz-seg button:hover { color: var(--h-text); background: var(--h-bg); }
.tz-seg button.is-on { background: var(--h-navy); color: #fff; }
.tz-seg button:focus-visible { outline: 2px solid var(--h-accent); outline-offset: -2px; }

/* -- projekty po lewej (od 900 px), pasek nad listą (wąsko) -- */
.tz-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--h-sp-4); margin-top: var(--h-sp-3); align-items: start; }
.tz-side { background: var(--h-surface); border: 1px solid var(--h-border); padding: var(--h-sp-3); }
.tz-side-t { font-size: var(--h-fs-11); font-weight: var(--h-fw-sem); color: var(--h-text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: var(--h-sp-2); }
.tz-projs { display: flex; flex-direction: column; }
.tz-pw { display: flex; align-items: center; gap: var(--h-sp-2); padding: var(--h-sp-2); font-size: var(--h-fs-13); color: var(--h-text); cursor: pointer; min-height: 36px; }
.tz-pw:hover { background: var(--h-bg); }
.tz-pw:focus-visible { outline: 2px solid var(--h-accent); outline-offset: -2px; }
.tz-pw.is-active { background: var(--h-bg); font-weight: var(--h-fw-sem); box-shadow: inset 3px 0 0 var(--h-accent); }
.tz-pw-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tz-cnt { font-size: var(--h-fs-11); color: var(--h-text-muted); font-family: var(--h-font-mono); }
.tz-cnt.is-late { color: #fff; background: var(--h-error); padding: 0 5px; font-weight: var(--h-fw-sem); }
.tz-pw-m {
    flex-shrink: 0; width: 26px; height: 26px; border: none; background: none; color: var(--h-text-muted); cursor: pointer;
    display: none; align-items: center; justify-content: center; padding: 0; margin: -4px -4px -4px 0;
}
.tz-pw:hover .tz-pw-m, .tz-pw.is-active .tz-pw-m, .tz-pw-m:focus { display: inline-flex; }
.tz-pw-m:hover { color: var(--h-text); background: var(--h-surface); }
.tz-pw.is-closed .tz-pw-n { color: var(--h-text-muted); text-decoration: line-through; }
.tz-pw.is-sub { padding-left: var(--h-sp-3); font-size: var(--h-fs-12); }
.tz-pw-br { width: 10px; height: 10px; border-left: 1px solid var(--h-border-strong); border-bottom: 1px solid var(--h-border-strong); margin: -6px 2px 0 2px; flex-shrink: 0; }
.tz-pw-kol { width: 10px; height: 10px; flex-shrink: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.tz-side-new { margin-top: var(--h-sp-2); }
.tz-side-pusto { display: flex; flex-direction: column; align-items: flex-start; gap: var(--h-sp-2); font-size: var(--h-fs-13); color: var(--h-text-muted); }
.tz-side-pusto .h-btn { white-space: normal; text-align: left; line-height: 1.35; }

/* -- lista: sekcje terminów, wiersze -- */
.tz-content { min-width: 0; }
.tz-list > .tz-sec:first-child { padding-top: var(--h-sp-1); }
.tz-list > .tz-pusto:first-child { margin-top: 0; }
.tz-sec {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--h-sp-2); font-size: var(--h-fs-12); font-weight: var(--h-fw-sem);
    color: var(--h-graphite); text-transform: uppercase; letter-spacing: .4px; padding: var(--h-sp-4) var(--h-sp-1) var(--h-sp-2);
}
.tz-sec.is-late { color: var(--h-error); }
.tz-sec-k { font-family: var(--h-font-mono); font-weight: var(--h-fw-med); }
.tz-sec-h { font-size: var(--h-fs-12); text-transform: none; letter-spacing: 0; font-weight: var(--h-fw-reg); color: var(--h-text-muted); }
.tz-grp { background: var(--h-surface); border: 1px solid var(--h-border); }
.tz-row {
    display: flex; align-items: center; gap: var(--h-sp-2); padding: 8px var(--h-sp-3) 8px 4px; border-bottom: 1px solid var(--h-border);
    min-height: 46px; background: var(--h-surface);
}
.tz-row:last-child { border-bottom: none; }
.tz-row:hover { background: var(--h-bg); }
.tz-row.is-high { box-shadow: inset 3px 0 0 var(--h-error); }
.tz-row.is-done .tz-t { text-decoration: line-through; color: var(--h-text-muted); }
.tz-row.is-dragging { position: relative; z-index: 2; outline: 1px solid var(--h-accent); box-shadow: var(--h-shadow-md); background: var(--h-surface); }
body.tz-sorting, body.tz-sorting * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }
.tz-grip {
    flex-shrink: 0; width: 16px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--h-text-muted);
    cursor: grab; touch-action: none; opacity: 0;
}
.tz-grip.is-empty { cursor: default; }
.tz-row:hover .tz-grip:not(.is-empty) { opacity: 1; }
.tz-grip:hover { color: var(--h-text); }
.tz-cbw { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
.tz-cb { width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; accent-color: var(--h-accent); margin: 0; }
.tz-main { flex: 1; min-width: 0; cursor: pointer; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.tz-main:focus-visible, .tz-card:focus-visible { outline: 2px solid var(--h-accent); outline-offset: -2px; }
.tz-t { font-size: var(--h-fs-14); color: var(--h-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tz-m2 { font-size: var(--h-fs-12); color: var(--h-text-muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tz-meta { display: flex; align-items: center; gap: var(--h-sp-2); flex-shrink: 0; font-size: var(--h-fs-12); color: var(--h-text-muted); }
.tz-proj { border: 1px solid var(--h-border); background: var(--h-bg); padding: 0 6px; white-space: nowrap; max-width: 210px; overflow: hidden; text-overflow: ellipsis; color: var(--h-graphite); }
.tz-etap { font-size: var(--h-fs-11); font-weight: var(--h-fw-sem); padding: 1px 6px; white-space: nowrap; border: 1px solid var(--h-border-strong); color: var(--h-graphite); background: var(--h-bg); }
.tz-etap.is-doing { color: var(--h-accent); border-color: var(--h-accent); background: var(--h-accent-bg); }
.tz-ico { display: inline-flex; align-items: center; gap: 3px; font-family: var(--h-font-mono); font-size: var(--h-fs-11); color: var(--h-text-muted); }
.tz-prio { color: var(--h-error); font-weight: 700; font-size: var(--h-fs-16); line-height: 1; }
.tz-due {
    flex-shrink: 0; min-width: 86px; text-align: right; background: none; border: 1px solid transparent; padding: 3px 6px;
    font-size: var(--h-fs-12); color: var(--h-graphite); cursor: pointer; white-space: nowrap; min-height: 30px;
}
button.tz-due:hover, button.tz-due:focus-visible { border-color: var(--h-border-strong); background: var(--h-surface); }
.tz-due.is-empty { color: var(--h-text-muted); opacity: 0; }
.tz-row:hover .tz-due.is-empty, .tz-due.is-empty:focus { opacity: 1; }
.tz-due.is-late { color: var(--h-error); font-weight: var(--h-fw-sem); }
.tz-due.is-today { color: var(--h-accent); font-weight: var(--h-fw-sem); }
span.tz-due { cursor: default; }
.tz-pusto { padding: var(--h-sp-5) var(--h-sp-4); text-align: center; color: var(--h-text-muted); font-size: var(--h-fs-13); background: var(--h-surface); border: 1px dashed var(--h-border); margin-top: var(--h-sp-2); }
.tz-done-t {
    display: flex; align-items: center; gap: 6px; background: none; border: none; padding: var(--h-sp-4) var(--h-sp-1) var(--h-sp-2);
    font-size: var(--h-fs-12); font-weight: var(--h-fw-sem); text-transform: uppercase; letter-spacing: .4px; color: var(--h-text-muted); cursor: pointer; min-height: 44px;
}
.tz-done-t:hover { color: var(--h-text); }
/* kolor projektu: pasek i tło wiersza (podprojekt bez koloru = kolor nadrzędnego) */
.tz-row.ma-kolor { box-shadow: inset 4px 0 0 var(--tz-kolor); background: color-mix(in srgb, var(--tz-kolor) 9%, var(--h-surface)); }
.tz-row.ma-kolor:hover { background: color-mix(in srgb, var(--tz-kolor) 15%, var(--h-surface)); }
.tz-row.ma-kolor.is-high { box-shadow: inset 4px 0 0 var(--tz-kolor), inset 7px 0 0 var(--h-error); }

/* -- tablica etapów (Do zrobienia, W trakcie, Czeka, Zrobione) -- */
.tz-board { margin-top: var(--h-sp-1); display: grid; grid-template-columns: repeat(4, minmax(200px, 1fr)); gap: var(--h-sp-3); align-items: start; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: var(--h-sp-3); }
.tz-col { background: var(--h-bg); border: 1px solid var(--h-border); display: flex; flex-direction: column; max-height: calc(100dvh - 260px); min-height: 180px; }
.tz-col.is-over { border-color: var(--h-accent); box-shadow: inset 0 0 0 1px var(--h-accent); }
.tz-col-h {
    display: flex; align-items: center; gap: var(--h-sp-2); padding: 10px var(--h-sp-3); border-bottom: 1px solid var(--h-border);
    font-size: var(--h-fs-13); font-weight: var(--h-fw-sem); color: var(--h-text); background: var(--h-surface); box-shadow: inset 0 3px 0 var(--h-navy);
}
.tz-col[data-col="doing"] .tz-col-h { box-shadow: inset 0 3px 0 var(--h-accent); }
.tz-col[data-col="waiting"] .tz-col-h { box-shadow: inset 0 3px 0 var(--h-border-strong); }
.tz-col[data-col="done"] .tz-col-h { box-shadow: inset 0 3px 0 var(--h-graphite); }
.tz-col-k { font-family: var(--h-font-mono); font-size: var(--h-fs-11); color: var(--h-text-muted); border: 1px solid var(--h-border); padding: 0 6px; background: var(--h-bg); font-weight: var(--h-fw-reg); }
.tz-col-s { margin-left: auto; font-size: var(--h-fs-11); color: var(--h-text-muted); font-weight: var(--h-fw-reg); }
.tz-col-b { flex: 1; overflow-y: auto; padding: var(--h-sp-2); display: flex; flex-direction: column; gap: var(--h-sp-2); min-height: 70px; }
.tz-col-pusto { font-size: var(--h-fs-12); color: var(--h-text-muted); text-align: center; padding: var(--h-sp-4) var(--h-sp-2); border: 1px dashed var(--h-border); }
.tz-col-add { padding: var(--h-sp-2); border-top: 1px solid var(--h-border); }
.tz-col-add .h-input { font-size: var(--h-fs-13); background: var(--h-surface); width: 100%; }
.tz-card { background: var(--h-surface); border: 1px solid var(--h-border); padding: var(--h-sp-2) var(--h-sp-3); cursor: pointer; box-shadow: var(--h-shadow-sm); }
.tz-card[draggable="true"] { cursor: grab; }
.tz-card:hover { border-color: var(--h-border-strong); }
.tz-card.is-high { box-shadow: inset 3px 0 0 var(--h-error), var(--h-shadow-sm); }
.tz-card.is-done { opacity: .72; }
.tz-card.is-done .tz-card-t { text-decoration: line-through; color: var(--h-text-muted); }
.tz-card.is-dragging { opacity: .4; }
.tz-card-t { font-size: var(--h-fs-13); color: var(--h-text); line-height: 1.35; word-break: break-word; }
.tz-card-kto { font-size: var(--h-fs-12); color: var(--h-graphite); margin-top: 4px; }
.tz-card-f { display: flex; align-items: center; gap: var(--h-sp-2); margin-top: 6px; font-size: var(--h-fs-11); color: var(--h-text-muted); min-height: 22px; }
.tz-db { display: inline-flex; align-items: center; gap: 3px; padding: 1px 5px; border: 1px solid var(--h-border); background: var(--h-bg); }
.tz-db.is-late { background: var(--h-error-bg); color: var(--h-error); border-color: transparent; font-weight: var(--h-fw-sem); }
.tz-db.is-today { color: var(--h-accent); border-color: var(--h-accent); }
.tz-card.ma-kolor { border-top: 4px solid var(--tz-kolor); background: color-mix(in srgb, var(--tz-kolor) 9%, var(--h-surface)); }

/* -- małe menu przy elemencie (termin, projekt, kolor): Esc i Wstecz zamykają -- */
.tz-pop {
    position: fixed; z-index: 1050; min-width: 200px; background: var(--h-surface); border: 1px solid var(--h-border-strong);
    box-shadow: var(--h-shadow-lg); padding: 4px; display: flex; flex-direction: column;
}
.tz-pop button { font-size: var(--h-fs-13); text-align: left; background: none; border: none; padding: 10px 12px; color: var(--h-text); cursor: pointer; min-height: 40px; }
.tz-pop button:hover, .tz-pop button:focus-visible { background: var(--h-bg); outline: none; }
.tz-pop button.is-danger { color: var(--h-error); }
.tz-pop-data { display: flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: var(--h-fs-13); color: var(--h-text-muted); border-top: 1px solid var(--h-border); border-bottom: 1px solid var(--h-border); margin: 2px 0; }
.tz-pop-data .h-input { padding: 4px 6px; font-size: var(--h-fs-13); width: auto; }
.tz-pop-kol { padding: 10px; width: 260px; }
.tz-pop-t { font-size: var(--h-fs-12); color: var(--h-text-muted); margin-bottom: 8px; }
.tz-kolory { display: flex; flex-wrap: wrap; gap: 6px; }
.tz-kol {
    width: 28px; height: 28px; flex-shrink: 0; border: none; padding: 0; cursor: pointer; position: relative; display: inline-flex;
    align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
}
.tz-pop .tz-kolory .tz-kol { padding: 0; min-height: 0; }
.tz-kol:hover { box-shadow: inset 0 0 0 1px rgba(0,0,0,.15), 0 0 0 2px var(--h-border-strong); }
.tz-kol.is-on { box-shadow: 0 0 0 2px var(--h-surface), 0 0 0 4px var(--h-text); }
.tz-kol-inny { background: var(--h-surface); color: var(--h-text-muted); box-shadow: inset 0 0 0 1px var(--h-border-strong); }
.tz-kol-inny input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; border: 0; }
.tz-pop .tz-pop-b { margin-top: 8px; padding: 6px 0; color: var(--h-accent); min-height: 32px; }

/* -- okno zadania (.tkm): treść, podzadania, załączniki, komentarze z lewej, pola z prawej -- */
.tk-panel-overlay { position: fixed; inset: 0; background: rgba(35,39,46,.45); z-index: 900; }
.tkm {
    position: fixed; z-index: 901; top: 24px; bottom: 24px; left: 50%; transform: translateX(-50%); width: min(1080px, calc(100vw - 48px));
    background: var(--h-surface); border: 1px solid var(--h-border-strong); box-shadow: var(--h-shadow-lg); display: flex; flex-direction: column; overflow: hidden;
}
.tkm-top { display: flex; align-items: center; gap: var(--h-sp-2); padding: 10px var(--h-sp-4); border-bottom: 1px solid var(--h-border); flex-shrink: 0; background: var(--h-surface); }
.tz-sp { flex: 1; }
.tkm:focus { outline: none; }
.tk-saved { font-size: var(--h-fs-12); color: var(--h-text-muted); opacity: 0; transition: opacity .2s; white-space: nowrap; }
.tk-saved.is-on { opacity: 1; }
.tkm-done { display: inline-flex; align-items: center; gap: 6px; }
.tkm-done.is-on { background: var(--h-accent-bg); border-color: var(--h-accent); color: var(--h-accent); }
.tkm-body { flex: 1; display: flex; min-height: 0; }
.tkm-main { flex: 1; min-width: 0; overflow-y: auto; padding: var(--h-sp-4) var(--h-sp-5) var(--h-sp-5); }
.tkm-side { width: 300px; flex-shrink: 0; overflow-y: auto; background: var(--h-bg); border-left: 1px solid var(--h-border); padding: var(--h-sp-4); }
.tkm-parent {
    display: inline-block; font-size: var(--h-fs-13); color: var(--h-accent); margin-bottom: var(--h-sp-2); text-decoration: none;
    background: none; border: none; padding: 4px 0; cursor: pointer; text-align: left;
}
.tkm-parent:hover { text-decoration: underline; }
.tkm-num { font-size: var(--h-fs-12); color: var(--h-text-muted); font-family: var(--h-font-mono); }
.tkm-title {
    display: block; width: calc(100% + 14px); resize: none; overflow: hidden; border: 1px solid transparent; background: transparent;
    font-size: var(--h-fs-20); font-weight: var(--h-fw-sem); color: var(--h-text); padding: 4px 6px; margin: 2px 0 var(--h-sp-1) -7px; line-height: 1.3;
}
.tkm-title:hover { border-color: var(--h-border); }
.tkm-title:focus { outline: none; border-color: var(--h-accent); background: var(--h-surface); }
.tkm-lab { font-size: var(--h-fs-12); font-weight: var(--h-fw-sem); color: var(--h-graphite); text-transform: uppercase; letter-spacing: .4px; margin: var(--h-sp-4) 0 var(--h-sp-2); }
/* wysokość z treści (_tzFit po pokazaniu okna); gdyby nie objęła całości, tekst da się przewinąć */
.tkm-desc { min-height: 76px; width: 100%; resize: none; overflow-x: hidden; overflow-y: auto; }
/* opis z mikrofonem w prawym górnym rogu pola */
.tkm-pole { position: relative; }
.tkm-pole .tkm-desc { padding-right: 46px; }
.tkm-mic { position: absolute; top: 1px; right: 1px; width: 42px; height: 42px; min-height: 0; border-left: none; }
.tkm-mic2 { padding: 6px 10px; }
.tkm-mic2[aria-pressed="true"] { color: #fff; background: var(--h-accent); border-color: var(--h-accent); }
.tkm-sub { display: flex; align-items: center; gap: var(--h-sp-2); padding: 6px 0; border-bottom: 1px solid var(--h-border); font-size: var(--h-fs-13); }
.tkm-sub-cb { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
.tkm-sub input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--h-accent); cursor: pointer; margin: 0; flex-shrink: 0; }
.tkm-sub-t { flex: 1; min-width: 0; text-align: left; background: none; border: none; padding: 0; color: var(--h-text); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tkm-sub-t:hover { color: var(--h-accent); }
.tkm-sub.is-done .tkm-sub-t { text-decoration: line-through; color: var(--h-text-muted); }
.tkm-sub-m { font-size: var(--h-fs-12); color: var(--h-text-muted); white-space: nowrap; }
.tkm-sub-m.is-late { color: var(--h-error); font-weight: var(--h-fw-sem); }
.tkm-x { background: none; border: none; color: var(--h-text-muted); cursor: pointer; padding: 4px; display: inline-flex; margin-left: auto; }
.tkm-x:hover { color: var(--h-error); }
.tkm-sub-add { display: flex; align-items: center; gap: var(--h-sp-2); padding: 6px 0; color: var(--h-text-muted); }
.tkm-sub-in { flex: 1; min-width: 0; border: none; border-bottom: 1px solid transparent; background: transparent; font-size: var(--h-fs-13); padding: 4px 0; color: var(--h-text); outline: none; }
.tkm-sub-in:focus { border-bottom-color: var(--h-accent); }
.tkm-atts { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: var(--h-sp-2); }
.tkm-att { position: relative; border: 1px solid var(--h-border); background: var(--h-surface); }
.tkm-att:hover { border-color: var(--h-border-strong); }
.tkm-att a, .tkm-att button.tkm-att-o { display: flex; flex-direction: column; text-decoration: none; color: var(--h-text); width: 100%; background: none; border: none; padding: 0; cursor: pointer; text-align: left; }
.tkm-att img { width: 100%; height: 86px; object-fit: cover; display: block; background: var(--h-bg); }
.tkm-ext { height: 86px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: var(--h-bg); color: var(--h-graphite); }
.tkm-ext b { font-size: var(--h-fs-11); letter-spacing: .5px; }
.tkm-att-n { font-size: var(--h-fs-12); padding: 5px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-top: 1px solid var(--h-border); }
.tkm-att-x {
    position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(35,39,46,.72); color: #fff; border: none; cursor: pointer; opacity: 0;
}
.tkm-att:hover .tkm-att-x, .tkm-att-x:focus { opacity: 1; }
.tkm-drop {
    position: relative; min-height: 114px; border: 1px dashed var(--h-border-strong); display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; font-size: var(--h-fs-12); color: var(--h-text-muted); cursor: pointer; text-align: center; padding: var(--h-sp-2);
}
.tkm-drop:hover, .tkm-drop.is-over { border-color: var(--h-accent); color: var(--h-accent); background: var(--h-accent-bg); }
.tkm-drop.is-busy { cursor: progress; border-style: solid; }
.tkm-drop:focus-within { outline: 2px solid var(--h-accent); outline-offset: 1px; }
/* pole pliku pod etykietą: niewidoczne, ale nie display:none (Safari na starszych iPadach nie otwierało wtedy wyboru) */
.tkm-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
/* podgląd obrazu albo PDF nad oknem zadania */
.tkm-podglad { position: fixed; inset: 0; z-index: 1000; background: rgba(20,22,26,.92); display: flex; flex-direction: column; }
.tkm-podglad-top {
    display: flex; align-items: center; gap: var(--h-sp-2); color: #fff; font-size: var(--h-fs-14);
    padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
}
.tkm-podglad-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tkm-podglad .h-icon-btn { color: #fff; width: 40px; height: 40px; }
.tkm-podglad .h-icon-btn:hover { background: rgba(255,255,255,.12); }
.tkm-podglad-b { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 16px max(16px, env(safe-area-inset-bottom)); }
.tkm-podglad-b img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; }
.tkm-podglad-b iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.tkm-ftabs { display: flex; border-bottom: 1px solid var(--h-border); margin: var(--h-sp-5) 0 var(--h-sp-3); }
.tkm-ftabs button { background: none; border: none; font-size: var(--h-fs-13); font-weight: var(--h-fw-sem); color: var(--h-graphite); padding: 8px 12px; cursor: pointer; box-shadow: inset 0 -2px 0 transparent; min-height: 40px; }
.tkm-ftabs button:hover { color: var(--h-text); }
.tkm-ftabs button.is-on { color: var(--h-text); box-shadow: inset 0 -2px 0 var(--h-accent); }
.tkm-comp { display: flex; gap: var(--h-sp-2); align-items: flex-start; margin-bottom: var(--h-sp-3); }
.tkm-comp-in { flex: 1; min-width: 0; position: relative; }
.tkm-comp-in .h-textarea { width: 100%; }
.tkm-comp-b { display: flex; align-items: center; gap: var(--h-sp-2); margin-top: 6px; }
.tkm-comp-b .tkm-hint { flex: 1; margin-top: 0; }
.tkm-hint { font-size: var(--h-fs-12); color: var(--h-text-muted); line-height: 1.4; margin-top: 4px; }
.tkm-kom { display: flex; gap: var(--h-sp-2); padding: var(--h-sp-2) 0; border-top: 1px solid var(--h-border); }
.tkm-kom-b { flex: 1; min-width: 0; }
.tkm-kom-h { display: flex; align-items: center; gap: var(--h-sp-2); font-size: var(--h-fs-13); }
.tkm-kom-h span { font-size: var(--h-fs-12); color: var(--h-text-muted); }
.tkm-kom-h .tkm-x { padding: 2px; opacity: 0; }
.tkm-kom:hover .tkm-x, .tkm-kom .tkm-x:focus { opacity: 1; }
.tkm-kom-t { font-size: var(--h-fs-14); color: var(--h-text); line-height: 1.5; margin-top: 2px; overflow-wrap: anywhere; white-space: pre-wrap; }
.tkm-empty { font-size: var(--h-fs-13); color: var(--h-text-muted); padding: var(--h-sp-2) 0; }
.tkm-hist { display: flex; gap: var(--h-sp-2); align-items: baseline; padding: 6px 0; border-top: 1px solid var(--h-border); font-size: var(--h-fs-13); flex-wrap: wrap; }
.tkm-hist-t { color: var(--h-graphite); flex: 1; min-width: 0; }
.tkm-hist-w { font-size: var(--h-fs-12); color: var(--h-text-muted); white-space: nowrap; }
.tkm-f { margin-bottom: var(--h-sp-3); }
.tkm-f > label, .tkm-l { display: flex; align-items: center; gap: 6px; font-size: var(--h-fs-12); font-weight: var(--h-fw-sem); color: var(--h-graphite); margin-bottom: 4px; }
.tkm-v { font-size: var(--h-fs-13); color: var(--h-text); }
.tkm-f .h-select, .tkm-f .h-input { width: 100%; background: var(--h-surface); }
.tkm-row2 { display: flex; gap: 6px; }
.tkm-row2 .h-input[type=time] { width: 104px; flex-shrink: 0; }
.tkm-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tkm-chips button { font-size: var(--h-fs-12); padding: 3px 8px; border: 1px solid var(--h-border-strong); background: var(--h-surface); color: var(--h-graphite); cursor: pointer; min-height: 30px; }
.tkm-chips button:hover { border-color: var(--h-accent); color: var(--h-accent); }

/* -- dotyk: akcje wierszy widać zawsze, pola 16 px (Safari nie powiększa strony), większe cele -- */
@media (hover: none) {
    .tz-due.is-empty { opacity: 1; }
    .tz-grip:not(.is-empty) { opacity: 1; }
    .tkm-att-x { opacity: 1; }
    .tkm-kom-h .tkm-x { opacity: 1; }
    .tkm-hint-klaw { visibility: hidden; }
}
@media (hover: none) and (pointer: coarse) {
    /* pole daty w małym menu terminu miało 13 px (.tz-pop-data .h-input) i Safari powiększał przy nim stronę */
    input[type=text], input[type=search], input[type=date], input[type=time], select, textarea, .h-input, .h-select, .h-textarea, .tz-add-t,
    .tz-search input[type=search], .tz-pop-data .h-input { font-size: 16px; }
    .tz-cb { width: 22px; height: 22px; }
    /* odhaczenie: etykieta 48 x 48 px wokół pola; ujemne marginesy, więc wiersz nie rośnie, a cel nie wchodzi na sąsiadów */
    .tz-cbw { width: 48px; height: 48px; margin: -8px; }
    .tz-row { min-height: 52px; }
    .tz-pw { min-height: 44px; }
    .tz-pw-m { width: 36px; height: 36px; }
    .tz-due { min-height: 40px; }
    .tkm-sub { min-height: 48px; }
    .tkm-sub input[type=checkbox] { width: 22px; height: 22px; }
    .tkm-sub-cb { width: 48px; height: 48px; margin: -6px -8px -6px -13px; }
    .tkm-sub-t { align-self: stretch; margin: -6px 0; }
    .tkm-x { min-width: 40px; min-height: 40px; align-items: center; justify-content: center; }
    .tkm-chips button { min-height: 40px; min-width: 44px; padding: 4px 10px; }
    .tkm-top .h-icon-btn { width: 44px; height: 44px; }
    .tkm-att-x { width: 40px; height: 40px; top: 2px; right: 2px; }
    .tkm-ftabs button { min-height: 44px; }
    .tkm-done { min-height: 44px; }
    /* Cofnij w toaście jak w Notatniku od 0.8.3; małe przyciski (Wyślij, mikrofon, + Nowy projekt, X okna), dni i widok */
    .h-toast button { min-height: 48px; min-width: 48px; }
    .h-btn-sm { min-height: 44px; }
    .tkm-mic2 { min-width: 44px; }
    .h-icon-btn { width: 44px; height: 44px; }
    .tz-seg button { min-height: 44px; min-width: 44px; }
    .tz-mic { width: 44px; min-height: 44px; }
}

/* -- poniżej 900 px: nawigacja Zadania | Notatnik na dole, projekty jako pasek nad listą -- */
@media (max-width: 899px) {
    :root { --crm-dol: calc(56px + env(safe-area-inset-bottom)); }
    .layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: 48px minmax(0, 1fr) var(--crm-dol); }
    .topbar { grid-column: 1; grid-row: 1; padding: 0 16px; padding-left: max(16px, env(safe-area-inset-left)); }
    .content { grid-column: 1; grid-row: 2; padding: 16px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
    .sidebar {
        grid-column: 1; grid-row: 3; flex-direction: row; padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
        box-shadow: 0 -1px 0 rgba(0,0,0,.08);
    }
    .sidebar a {
        flex: 1 1 0; flex-direction: column; justify-content: center; gap: 2px; padding: 6px 4px; font-size: var(--h-fs-12);
        border-left: none; border-top: 3px solid transparent; position: relative; min-height: 56px;
    }
    .sidebar a.active { border-left-color: transparent; border-top-color: var(--h-nav-active-bar); }
    .sb-badge { position: absolute; top: 4px; left: calc(50% + 6px); margin: 0; min-width: 18px; line-height: 18px; padding: 0 5px; }

    .tz-layout { display: block; }
    .tz-side { display: flex; align-items: center; gap: var(--h-sp-1); overflow-x: auto; -webkit-overflow-scrolling: touch; padding: var(--h-sp-2); margin-bottom: var(--h-sp-3); }
    .tz-side-t { display: none; }
    .tz-projs { flex-direction: row; gap: var(--h-sp-1); }
    .tz-pw { flex: 0 0 auto; white-space: nowrap; border: 1px solid var(--h-border); padding: 6px var(--h-sp-3); }
    .tz-pw.is-active { box-shadow: none; border-color: var(--h-accent); color: var(--h-accent); }
    .tz-pw.is-sub { padding-left: var(--h-sp-3); }
    .tz-pw-br, .tz-pw-m { display: none !important; }
    .tz-pw.is-active .tz-pw-m { display: inline-flex !important; }
    .tz-side-new { flex: 0 0 auto; margin-top: 0; }
    /* bez projektów pasek pokazuje zdanie i przyciski w wierszach, nie w przewijanym rzędzie */
    .tz-side.is-pusto { flex-wrap: wrap; overflow-x: visible; }
    .tz-side.is-pusto .tz-side-pusto { flex-basis: 100%; }
}
@media (max-width: 759px) {
    .tz-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--h-sp-2); padding-bottom: var(--h-sp-3); min-width: 0; max-width: 100%; }
    .tz-bar1, .tz-bar2, .tz-bar1-r { display: contents; }
    .tz-tabs { order: 1; flex-basis: 100%; min-width: 0; max-width: 100%; border-bottom: 1px solid var(--h-border); }
    .tz-search, .tz-search:focus-within, .tz-search.is-filled { order: 2; flex: 1; width: auto; margin: 0 var(--h-sp-3); cursor: text; }
    .tz-head > .tz-bar1 .tz-seg { order: 3; margin-right: var(--h-sp-3); }
    .tz-add { order: 4; flex-basis: 100%; padding: 0 var(--h-sp-3); }
    .tz-sec-h { flex-basis: 100%; }
    .tz-tab { padding-right: 8px; }
    .tz-tab-b { padding: 12px 4px 10px 10px; font-size: var(--h-fs-14); gap: 6px; }
    .tz-add .tz-seg { flex: 1 1 100%; }
    .tz-add .tz-seg button { flex: 1 1 auto; justify-content: center; padding: 6px 6px; }
    .tz-add-time { width: 100px; padding-left: 8px; padding-right: 8px; }
    .tz-add .h-select { flex: 1 1 40%; max-width: none; min-width: 0; }
    /* pusty tytuł: tylko wiersz z polem (dzień, godzina i projekt z pierwszą literą, zadania.js _tzAddPusto) */
    .tz-add.is-pusto > .tz-seg, .tz-add.is-pusto > .tz-add-time, .tz-add.is-pusto > .h-select { display: none; }
    .tz-row { flex-wrap: wrap; row-gap: 4px; padding-left: var(--h-sp-3); }
    .tz-grip { display: none; }
    .tz-due { order: 1; min-width: 0; }
    .tz-meta { order: 2; flex-basis: 100%; flex-wrap: wrap; padding-left: 26px; }
    .tz-meta:empty { display: none; }
    .tz-board { grid-template-columns: repeat(4, minmax(250px, 84vw)); }
    .tkm { top: 0; bottom: 0; left: 0; transform: none; width: 100vw; border: none; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
    .tz-seg#tz-views button { padding: 6px 10px; }
    .tkm-top { padding: 8px var(--h-sp-3); flex-wrap: wrap; }
    .tkm-body { flex-direction: column; overflow-y: auto; }
    .tkm-main { display: contents; }
    .tkm-head { order: 1; padding: var(--h-sp-3) var(--h-sp-4) 0; }
    .tkm-side { order: 2; width: auto; overflow: visible; border-left: none; border-top: 1px solid var(--h-border); border-bottom: 1px solid var(--h-border); margin-top: var(--h-sp-3); }
    .tkm-rest { order: 3; padding: 0 var(--h-sp-4) var(--h-sp-5); }
}
@media (max-width: 759px) and (hover: none) and (pointer: coarse) {
    .tz-meta { padding-left: 40px; }   /* pod tytułem: wyżej etykieta odhaczenia jest szersza */
}