/* Modul Úkoly — vzhled aplikace (styl Monday / Trello): pastelové barvy, měkké stíny,
   aplikační shell se sidebarem (TasksLayout), tabule, seznam ve skupinách, kalendář,
   detail a postranní panel. Design tokeny sedí na .tsk (shell i widget mimo shell,
   popovery a modály, které tasks.js věší na body). Portál si může barvy stavů
   přepsat přes ThemeCssJson (--aav-tsk-*). */

.tsk {
    --tsk-font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
    --tsk-font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;

    --tsk-bg: #f5f4fb;
    --tsk-surface: #ffffff;
    --tsk-surface-2: #faf9fe;
    --tsk-surface-3: #f1effa;
    --tsk-border: #e9e7f3;
    --tsk-border-strong: #d8d5e8;
    --tsk-text: #2a2a3f;
    --tsk-muted: #7b7995;
    --tsk-muted-2: #a8a6bd;

    --tsk-accent: var(--aav-tsk-accent, #7a6ff0);
    --tsk-accent-ink: #5a4fd9;
    --tsk-accent-soft: #ece9ff;
    --tsk-accent-soft-2: #f4f2ff;

    --tsk-danger: #e5484d;
    --tsk-danger-ink: #b42b30;
    --tsk-danger-soft: #ffe9ea;
    --tsk-warn: #e9950f;
    --tsk-warn-ink: #9a5f00;
    --tsk-warn-soft: #fff1d6;
    --tsk-ok: #27ae75;
    --tsk-ok-soft: #e3f8ee;

    --tsk-backlog: var(--aav-tsk-backlog, #9aa3b5);
    --tsk-todo: var(--aav-tsk-todo, #6ea8fe);
    --tsk-progress: var(--aav-tsk-progress, #f7b84b);
    --tsk-blocked: var(--aav-tsk-blocked, #f4807f);
    --tsk-review: var(--aav-tsk-review, #a78bfa);
    --tsk-done: var(--aav-tsk-done, #5cc9a0);
    --tsk-cancelled: var(--aav-tsk-cancelled, #b9bcc8);

    --tsk-radius: 14px;
    --tsk-radius-sm: 9px;
    --tsk-radius-xs: 6px;
    --tsk-shadow: 0 1px 2px rgba(42, 36, 84, .05), 0 4px 14px rgba(42, 36, 84, .06);
    --tsk-shadow-md: 0 2px 6px rgba(42, 36, 84, .08), 0 10px 28px rgba(42, 36, 84, .1);
    --tsk-shadow-lg: 0 18px 50px rgba(42, 36, 84, .2);
    --tsk-ease: cubic-bezier(.2, .8, .2, 1);

    color: var(--tsk-text);
    font-family: var(--tsk-font);
}

.tsk a { color: inherit; }
.tsk a:hover { color: var(--tsk-accent-ink); }
.tsk .text-muted { color: var(--tsk-muted) !important; }

/* Bootstrap uvnitř aplikace: pole a tlačítka v pastelovém kabátě. */
.tsk .form-control,
.tsk .form-select {
    border-color: var(--tsk-border-strong);
    border-radius: var(--tsk-radius-sm);
    background-color: var(--tsk-surface);
    color: var(--tsk-text);
    font-family: inherit;
}

.tsk .form-control:focus,
.tsk .form-select:focus {
    border-color: var(--tsk-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tsk-accent) 18%, transparent);
}

.tsk .form-control::placeholder { color: var(--tsk-muted-2); }
.tsk .form-check-input:checked { background-color: var(--tsk-accent); border-color: var(--tsk-accent); }
.tsk .form-check-input:focus { border-color: var(--tsk-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tsk-accent) 18%, transparent); }
.tsk .form-label { font-weight: 600; font-size: .85rem; color: var(--tsk-muted); margin-bottom: .3rem; }
.tsk .form-text { color: var(--tsk-muted); }

.tsk .btn-primary {
    --bs-btn-bg: var(--tsk-accent);
    --bs-btn-border-color: var(--tsk-accent);
    --bs-btn-hover-bg: var(--tsk-accent-ink);
    --bs-btn-hover-border-color: var(--tsk-accent-ink);
    --bs-btn-active-bg: var(--tsk-accent-ink);
    --bs-btn-active-border-color: var(--tsk-accent-ink);
    --bs-btn-focus-shadow-rgb: 122, 111, 240;
    border-radius: var(--tsk-radius-sm);
}

/* ------------------------------------------------------------------ tlačítka */

.tsk-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .9rem;
    border: 1px solid var(--tsk-border-strong);
    border-radius: var(--tsk-radius-sm);
    background: var(--tsk-surface);
    color: var(--tsk-text);
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s, transform .1s, box-shadow .15s;
}

.tsk-btn:hover {
    background: var(--tsk-surface-3);
    border-color: var(--tsk-accent);
    color: var(--tsk-accent-ink);
}

.tsk-btn:active { transform: translateY(1px); }

.tsk-btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tsk-accent) 25%, transparent);
}

.tsk-btn.is-on {
    background: var(--tsk-accent-soft);
    border-color: transparent;
    color: var(--tsk-accent-ink);
}

.tsk-btn-primary {
    background: var(--tsk-accent);
    border-color: var(--tsk-accent);
    color: #fff;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--tsk-accent) 30%, transparent);
}

.tsk-btn-primary:hover {
    background: var(--tsk-accent-ink);
    border-color: var(--tsk-accent-ink);
    color: #fff;
}

.tsk-btn-success {
    background: var(--tsk-done);
    border-color: var(--tsk-done);
    color: #0f4d35;
}

.tsk-btn-success:hover {
    background: color-mix(in srgb, var(--tsk-done) 85%, #000);
    border-color: color-mix(in srgb, var(--tsk-done) 85%, #000);
    color: #fff;
}

.tsk-btn-ghost { border-color: transparent; background: transparent; color: var(--tsk-muted); }
.tsk-btn-ghost:hover { background: var(--tsk-surface-3); border-color: transparent; }
.tsk-btn-sm { padding: .3rem .65rem; font-size: .8rem; gap: .3rem; }

.tsk-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: var(--tsk-radius-sm);
    background: transparent;
    color: var(--tsk-muted);
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}

.tsk-icon-btn:hover { background: var(--tsk-surface-3); color: var(--tsk-accent-ink); }
.tsk-icon-btn.is-sm { width: 1.7rem; height: 1.7rem; border-radius: var(--tsk-radius-xs); }

/* ================================================================== shell */

.tsk-app {
    --tsk-side-w: 16.5rem;
    --tsk-side-min-w: 4.25rem;
    --tsk-top-h: 3.75rem;
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--tsk-bg);
    /* jemný „aurora“ gradient v pozadí aplikace */
    background-image:
        radial-gradient(60rem 30rem at 110% -10%, color-mix(in srgb, var(--tsk-accent) 10%, transparent), transparent 60%),
        radial-gradient(40rem 25rem at -10% 110%, color-mix(in srgb, var(--tsk-done) 10%, transparent), transparent 60%);
    background-attachment: fixed;
}

/* ---- sidebar */

.tsk-side {
    position: sticky;
    top: 0;
    align-self: flex-start;
    width: var(--tsk-side-w);
    height: 100vh;
    height: 100dvh;
    flex: none;
    display: flex;
    flex-direction: column;
    background: color-mix(in srgb, var(--tsk-surface) 85%, var(--tsk-bg));
    border-right: 1px solid var(--tsk-border);
    transition: width .2s var(--tsk-ease), transform .25s var(--tsk-ease);
    z-index: 30;
    overflow: hidden;
}

.tsk-side-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .9rem .9rem .6rem;
    min-height: var(--tsk-top-h);
}

.tsk-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    text-decoration: none;
    color: inherit;
    min-width: 0;
    flex: 1;
}

.tsk-brand-mark {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--tsk-accent), #b58cff);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--tsk-accent) 35%, transparent);
    flex: none;
}

.tsk-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.tsk-brand-title { font-family: var(--tsk-font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
.tsk-brand-sub { font-size: .72rem; color: var(--tsk-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tsk-side-nav {
    flex: 1;
    overflow-y: auto;
    padding: .25rem .6rem;
    scrollbar-width: thin;
}

.tsk-side-foot {
    padding: .5rem .6rem .75rem;
    border-top: 1px solid var(--tsk-border);
}

.tsk-side-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .65rem;
    margin: .1rem 0;
    border-radius: var(--tsk-radius-sm);
    color: var(--tsk-text);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 500;
    min-width: 0;
    transition: background-color .15s, color .15s;
    padding-left: calc(.65rem + var(--depth, 0) * .9rem);
}

.tsk-side-item:hover { background: var(--tsk-surface-3); color: var(--tsk-text); }

.tsk-side-item.active {
    background: var(--tsk-accent-soft);
    color: var(--tsk-accent-ink);
    font-weight: 650;
}

.tsk-side-item.is-small { font-size: .82rem; padding: .4rem .65rem; color: var(--tsk-muted); }
.tsk-side-item.is-small:hover { color: var(--tsk-text); }

.tsk-side-icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: .55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    color: var(--tsk-muted);
    background: transparent;
}

.tsk-side-item.active .tsk-side-icon,
.tsk-side-icon.is-home { background: var(--tsk-accent-soft); color: var(--tsk-accent-ink); }
.tsk-side-icon.is-review { background: color-mix(in srgb, var(--tsk-review) 20%, transparent); color: color-mix(in srgb, var(--tsk-review) 70%, #000); }
.tsk-side-icon.is-cal { background: color-mix(in srgb, var(--tsk-progress) 22%, transparent); color: color-mix(in srgb, var(--tsk-progress) 60%, #000); }
.tsk-side-icon.is-all { background: color-mix(in srgb, var(--tsk-todo) 22%, transparent); color: color-mix(in srgb, var(--tsk-todo) 60%, #000); }
.tsk-side-item.is-small .tsk-side-icon { width: 1.5rem; height: 1.5rem; background: transparent !important; color: inherit !important; }

.tsk-side-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tsk-side-count {
    font-size: .7rem;
    font-weight: 700;
    color: var(--tsk-muted);
    background: var(--tsk-surface-3);
    border-radius: 999px;
    padding: .05rem .45rem;
    min-width: 1.4rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.tsk-side-item.active .tsk-side-count { background: #fff; color: var(--tsk-accent-ink); }
.tsk-side-count.is-accent { background: var(--tsk-review); color: #fff; }

.tsk-side-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1rem .4rem .3rem .65rem;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--tsk-muted);
}

.tsk-side-heading-btn {
    display: inline-flex;
    width: 1.4rem;
    height: 1.4rem;
    align-items: center;
    justify-content: center;
    border-radius: .4rem;
    color: var(--tsk-muted);
    text-decoration: none;
}

.tsk-side-heading-btn:hover { background: var(--tsk-accent-soft); color: var(--tsk-accent-ink); }

.tsk-side-dot {
    width: 1.75rem;
    height: 1.75rem;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--tsk-muted);
}

.tsk-side-dot::before {
    content: "";
    width: .7rem;
    height: .7rem;
    border-radius: .25rem;
    background: var(--c, var(--tsk-accent));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--tsk-accent)) 22%, transparent);
}

.tsk-side-project.is-personal .tsk-side-dot::before { display: none; }
.tsk-side-project.is-personal .tsk-side-dot {
    border-radius: .55rem;
    background: var(--tsk-surface-3);
}

.tsk-side-hint { font-size: .78rem; color: var(--tsk-muted); padding: .25rem .65rem; }

/* sbalený sidebar (desktop) */
@media (min-width: 992px) {
    html.tsk-side-min .tsk-side { width: var(--tsk-side-min-w); }
    html.tsk-side-min .tsk-brand-text,
    html.tsk-side-min .tsk-side-label,
    html.tsk-side-min .tsk-side-count,
    html.tsk-side-min .tsk-side-heading span,
    html.tsk-side-min .tsk-side-hint { display: none; }
    html.tsk-side-min .tsk-side-item { justify-content: center; padding-left: .5rem; padding-right: .5rem; }
    html.tsk-side-min .tsk-side-heading { justify-content: center; margin-left: 0; margin-right: 0; }
    html.tsk-side-min .tsk-side-brand { justify-content: center; padding-left: .5rem; padding-right: .5rem; }
}

/* mobil: off-canvas drawer */
@media (max-width: 991.98px) {
    .tsk-side {
        position: fixed;
        inset: 0 auto 0 0;
        transform: translateX(-105%);
        box-shadow: var(--tsk-shadow-lg);
        width: min(var(--tsk-side-w), 85vw);
    }
    html.tsk-side-open .tsk-side { transform: none; }
    .tsk-side-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(30, 24, 60, .35);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s;
        z-index: 29;
    }
    html.tsk-side-open .tsk-side-backdrop { opacity: 1; pointer-events: auto; }
    html.tsk-side-open { overflow: hidden; }
}

/* ---- topbar + obsah */

.tsk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.tsk-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: var(--tsk-top-h);
    padding: .5rem 1.25rem;
    background: color-mix(in srgb, var(--tsk-bg) 75%, transparent);
    backdrop-filter: blur(12px) saturate(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    border-bottom: 1px solid color-mix(in srgb, var(--tsk-border) 70%, transparent);
}

.tsk-topbar-spacer { flex: 1; }

.tsk-search {
    position: relative;
    display: flex;
    align-items: center;
    width: min(26rem, 100%);
    flex: 0 1 26rem;
}

.tsk-search-icon { position: absolute; left: .8rem; color: var(--tsk-muted); pointer-events: none; }

.tsk-search input {
    width: 100%;
    font: inherit;
    font-size: .875rem;
    padding: .5rem 2.4rem .5rem 2.3rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--tsk-surface);
    box-shadow: var(--tsk-shadow);
    outline: 0;
    transition: box-shadow .15s, border-color .15s;
}

.tsk-search input:focus { border-color: var(--tsk-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tsk-accent) 18%, transparent); }

.tsk-search-kbd {
    position: absolute;
    right: .7rem;
    font-family: inherit;
    font-size: .68rem;
    color: var(--tsk-muted);
    background: var(--tsk-surface-3);
    border: 1px solid var(--tsk-border);
    border-radius: .3rem;
    padding: 0 .35rem;
    pointer-events: none;
}

.tsk-btn-new { border-radius: 999px; padding-inline: 1rem; }

.tsk-user-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 0;
    background: transparent;
    padding: .25rem .4rem .25rem .25rem;
    border-radius: 999px;
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    color: var(--tsk-text);
    cursor: pointer;
}

.tsk-user-btn:hover { background: var(--tsk-surface); }
.tsk-user-caret { color: var(--tsk-muted); }

.tsk-dropdown {
    border: 1px solid var(--tsk-border);
    border-radius: var(--tsk-radius);
    box-shadow: var(--tsk-shadow-md);
    padding: .4rem;
    min-width: 15rem;
    font-size: .9rem;
}

.tsk-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    border-radius: var(--tsk-radius-xs);
    padding: .45rem .65rem;
    color: var(--tsk-text);
}

.tsk-dropdown .dropdown-item:hover,
.tsk-dropdown .dropdown-item.active { background: var(--tsk-accent-soft); color: var(--tsk-accent-ink); }
.tsk-dropdown .dropdown-item.text-danger:hover { background: var(--tsk-danger-soft); color: var(--tsk-danger-ink); }
.tsk-dropdown-user { display: flex; align-items: center; gap: .7rem; padding: .5rem .65rem; }

.tsk-content {
    flex: 1;
    padding: 1.25rem 1.5rem 3rem;
    min-width: 0;
}

@media (max-width: 767.98px) {
    .tsk-topbar { padding: .5rem .75rem; }
    .tsk-content { padding: 1rem .85rem 3rem; }
}

/* ================================================================== stránka */

.tsk-page { max-width: 1600px; margin: 0 auto; animation: tsk-page-in .25s var(--tsk-ease); }

@keyframes tsk-page-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

.tsk-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.25rem;
    margin-bottom: 1rem;
}

.tsk-page-title { display: flex; align-items: center; gap: .75rem; min-width: 0; margin-right: auto; }

.tsk-page-title h1 {
    margin: 0;
    font-family: var(--tsk-font-display);
    font-size: clamp(1.35rem, 1.1rem + .9vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
}

.tsk-page-dot {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: .35rem;
    background: var(--c, var(--tsk-accent));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--c, var(--tsk-accent)) 22%, transparent);
    flex: none;
}

.tsk-page-dot.is-personal {
    background: var(--tsk-surface-3);
    color: var(--tsk-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}

.tsk-sub { margin: .1rem 0 0; color: var(--tsk-muted); font-size: .875rem; }

.tsk-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

/* přepínač pohledů */
.tsk-views,
.tsk-filter-group {
    display: inline-flex;
    gap: .15rem;
    padding: .2rem;
    border-radius: 999px;
    background: var(--tsk-surface);
    box-shadow: var(--tsk-shadow);
    border: 1px solid var(--tsk-border);
}

.tsk-view,
.tsk-seg {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .85rem;
    border-radius: 999px;
    color: var(--tsk-muted);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s, color .15s;
}

.tsk-view:hover,
.tsk-seg:hover { color: var(--tsk-text); background: var(--tsk-surface-3); }

.tsk-view.active,
.tsk-seg.active {
    background: var(--tsk-accent);
    color: #fff;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--tsk-accent) 30%, transparent);
}

.tsk-seg { padding: .25rem .7rem; font-size: .8rem; }
.tsk-filter-group-label { font-size: .72rem; color: var(--tsk-muted); font-weight: 600; padding: 0 .35rem 0 .6rem; align-self: center; }

.tsk-flash {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .9rem;
    margin-bottom: .9rem;
    border-radius: var(--tsk-radius-sm);
    background: var(--tsk-ok-soft);
    color: #146a46;
    font-size: .875rem;
    font-weight: 500;
    border: 1px solid color-mix(in srgb, var(--tsk-ok) 25%, transparent);
}

.tsk-flash.is-err { background: var(--tsk-danger-soft); color: var(--tsk-danger-ink); border-color: color-mix(in srgb, var(--tsk-danger) 25%, transparent); }
html.tsk-js .tsk-flash { display: none; } /* s JS se hláška ukáže jako toast */

/* ------------------------------------------------------------------ filtry */

.tsk-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

.tsk-filters-spacer { flex: 1; }

.tsk-filter {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .55rem .3rem .7rem;
    border-radius: 999px;
    background: var(--tsk-surface);
    border: 1px solid var(--tsk-border);
    color: var(--tsk-muted);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    margin: 0;
}

.tsk-filter:hover { border-color: var(--tsk-accent); }
.tsk-filter:focus-within { border-color: var(--tsk-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tsk-accent) 15%, transparent); }

.tsk-filter select,
.tsk-filter input[type="search"] {
    border: 0;
    background: transparent;
    font: inherit;
    font-weight: 600;
    color: var(--tsk-text);
    outline: 0;
    padding: 0 .1rem;
    max-width: 12rem;
    cursor: pointer;
}

.tsk-filter select { appearance: auto; }
.tsk-filter input[type="search"] { cursor: text; width: 13rem; }
.tsk-filter input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.tsk-filter-check.is-on { background: var(--tsk-accent-soft); border-color: transparent; color: var(--tsk-accent-ink); }
.tsk-filter-btn { font: inherit; font-size: .82rem; font-weight: 600; }
.tsk-filter-clear { font-size: .8rem; color: var(--tsk-muted); text-decoration: none; padding: .3rem .4rem; }
.tsk-filter-clear:hover { color: var(--tsk-danger-ink); text-decoration: underline; }
.tsk-filter-hint { font-size: .78rem; color: var(--tsk-muted-2); }

/* ================================================================== dlaždice */

.tsk-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: .75rem;
    margin-bottom: 1rem;
}

.tsk-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .9rem 1rem;
    border-radius: var(--tsk-radius);
    background: var(--tsk-surface);
    box-shadow: var(--tsk-shadow);
    text-decoration: none;
    color: var(--tsk-text);
    overflow: hidden;
    border: 1px solid var(--tsk-border);
    transition: transform .15s var(--tsk-ease), box-shadow .15s;
}

.tsk-tile::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--t, var(--tsk-accent));
}

.tsk-tile:hover { transform: translateY(-2px); box-shadow: var(--tsk-shadow-md); color: var(--tsk-text); }
.tsk-tile-num { font-family: var(--tsk-font-display); font-size: 1.75rem; font-weight: 750; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tsk-tile-label { font-size: .8rem; color: var(--tsk-muted); font-weight: 500; }

.tsk-tile-icon {
    position: absolute;
    right: .8rem;
    top: .8rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--t, var(--tsk-accent)) 18%, transparent);
    color: color-mix(in srgb, var(--t, var(--tsk-accent)) 65%, #000);
}

.tsk-tile.is-late { --t: var(--tsk-danger); }
.tsk-tile.is-late.is-zero { --t: var(--tsk-cancelled); }
.tsk-tile.is-today { --t: var(--tsk-progress); }
.tsk-tile.is-week { --t: var(--tsk-todo); }
.tsk-tile.is-open { --t: var(--tsk-accent); }

/* velké rychlé přidání na úvodu */
.tsk-hero-add {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .5rem .4rem .75rem;
    margin-bottom: 1.25rem;
    border-radius: var(--tsk-radius);
    background: var(--tsk-surface);
    border: 1px solid var(--tsk-border);
    box-shadow: var(--tsk-shadow);
    transition: box-shadow .15s, border-color .15s;
}

.tsk-hero-add:focus-within { border-color: var(--tsk-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tsk-accent) 15%, transparent), var(--tsk-shadow-md); }
.tsk-hero-add-icon { color: var(--tsk-accent); display: inline-flex; flex: none; }
.tsk-hero-add input[type="text"] { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 1rem; padding: .5rem .25rem; outline: 0; }
.tsk-hero-add-project { width: auto; max-width: 12rem; border-color: transparent !important; background: var(--tsk-surface-3) !important; font-size: .85rem; }

@media (max-width: 575.98px) {
    .tsk-hero-add { flex-wrap: wrap; }
    .tsk-hero-add input[type="text"] { flex-basis: 100%; }
    .tsk-hero-add-project { flex: 1; max-width: none; }
}

/* ================================================================== skupiny + seznam */

.tsk-table { display: flex; flex-direction: column; gap: .25rem; }

.tsk-table-head,
.tsk-row {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) 7.25rem 5.5rem 6.75rem 6.5rem 2.5rem;
    align-items: center;
    gap: .5rem;
}

.tsk-table-head {
    padding: 0 .85rem 0 1.1rem;
    margin: 0 0 .25rem;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tsk-muted-2);
}

.tsk-th a { color: inherit; text-decoration: none; }
.tsk-th a:hover { color: var(--tsk-accent-ink); }
.tsk-th-main { padding-left: .1rem; }

.tsk-group { margin-bottom: 1.1rem; }
.tsk-group.is-inbox.is-empty { display: none; }

.tsk-group-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .25rem .45rem;
}

.tsk-group-head h2 {
    margin: 0;
    font-family: var(--tsk-font-display);
    font-size: 1rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--c, var(--tsk-accent)) 70%, #222);
    letter-spacing: -.01em;
}

.tsk-group-count {
    font-size: .72rem;
    font-weight: 700;
    color: var(--tsk-muted);
    background: var(--tsk-surface);
    border: 1px solid var(--tsk-border);
    border-radius: 999px;
    padding: 0 .5rem;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}

.tsk-group-hint { font-size: .78rem; color: var(--tsk-muted); }
.tsk-group.is-alarm .tsk-group-hint { color: var(--tsk-danger-ink); }
.tsk-group-actions { margin-left: auto; display: inline-flex; gap: .35rem; }

.tsk-group-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 0;
    border-radius: .4rem;
    background: transparent;
    color: var(--tsk-muted);
    cursor: pointer;
    transition: transform .2s var(--tsk-ease), background-color .15s;
}

.tsk-group-toggle:hover { background: var(--tsk-surface); }
.tsk-group.is-collapsed .tsk-group-toggle { transform: rotate(-90deg); }
.tsk-group.is-collapsed .tsk-group-body { display: none; }

.tsk-group-body {
    position: relative;
    border-radius: var(--tsk-radius);
    background: var(--tsk-surface);
    border: 1px solid var(--tsk-border);
    box-shadow: var(--tsk-shadow);
    overflow: hidden;
    padding-left: 5px;
}

.tsk-group-body::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--c, var(--tsk-accent));
}

.tsk-list { display: flex; flex-direction: column; }

.tsk-row {
    position: relative;
    padding: .5rem .85rem .5rem .25rem;
    border-top: 1px solid var(--tsk-border);
    transition: background-color .12s;
    cursor: default;
}

.tsk-row:first-child { border-top: 0; }
.tsk-row:hover { background: var(--tsk-surface-2); }
.tsk-row[data-tsk-open] { cursor: pointer; }
.tsk-row.is-late:not(.is-done) { background: color-mix(in srgb, var(--tsk-danger) 4%, transparent); }

.tsk-row-check { display: inline-flex; justify-content: center; margin: 0; }

.tsk-row-main { min-width: 0; }
.tsk-row-titleline { display: flex; align-items: center; gap: .35rem; min-width: 0; }

.tsk-row-title {
    display: block;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    font-size: .925rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tsk-row-title:hover { color: var(--tsk-accent-ink); }
.tsk-row.is-done .tsk-row-title { color: var(--tsk-muted); text-decoration: line-through; font-weight: 500; }

.tsk-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .45rem; margin-top: .15rem; min-height: 1.1rem; }
.tsk-row-cell { display: flex; align-items: center; justify-content: center; min-width: 0; }
.tsk-cell-comments { justify-content: flex-end; }

.tsk-list-empty { padding: .9rem 1rem; color: var(--tsk-muted); font-size: .85rem; }

/* kompaktní seznam (widget, vnořené podúkoly) */
.tsk-list.is-compact .tsk-row { grid-template-columns: 2rem minmax(0, 1fr) 0 auto auto 0 2.2rem; padding-right: .5rem; }
.tsk-list.is-compact .tsk-cell-state, .tsk-list.is-compact .tsk-cell-prio { display: none; }
.tsk-list.is-card { border: 1px solid var(--tsk-border); border-radius: var(--tsk-radius); background: var(--tsk-surface); box-shadow: var(--tsk-shadow); overflow: hidden; }
.tsk-list.is-nested { border: 1px solid var(--tsk-border); border-radius: var(--tsk-radius-sm); overflow: hidden; }

/* na mobilu buňky za sebou v jednom řádku pod názvem */
@media (max-width: 991.98px) {
    .tsk-table-head { display: none; }
    .tsk-row { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; padding-right: .6rem; }
    .tsk-row-check { order: 1; }
    .tsk-row-main { order: 2; flex: 1; min-width: 0; }
    .tsk-cell-comments { order: 3; }
    /* zalomení: buňky jdou pod název, odsazené pod zaškrtávátko */
    .tsk-row::before { content: ""; order: 4; flex-basis: 100%; height: 0; margin: -.35rem 0 0; }
    .tsk-cell-state, .tsk-cell-people, .tsk-cell-due, .tsk-cell-prio { order: 5; justify-content: flex-start; }
    .tsk-cell-state { margin-left: 2.5rem; }
    .tsk-cell-state:empty, .tsk-cell-due:empty, .tsk-cell-prio:empty { display: none; }
    .tsk-cell-state:empty + .tsk-cell-people { margin-left: 2.5rem; }
    .tsk-row-rename { opacity: 1; }
    .tsk-list.is-compact .tsk-row { display: flex; }
    .tsk-project { white-space: nowrap; }
}

/* ------------------------------------------------------------------ zaškrtnutí */

.tsk-check {
    position: relative;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    border: 2px solid var(--tsk-border-strong);
    background: transparent;
    color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex: none;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, transform .15s;
}

.tsk-check:hover { border-color: var(--tsk-done); color: color-mix(in srgb, var(--tsk-done) 70%, transparent); transform: scale(1.08); }
.tsk-check.is-done { background: var(--tsk-done); border-color: var(--tsk-done); color: #fff; }
.tsk-check.is-big { width: 1.9rem; height: 1.9rem; }

.tsk-check.is-pop { animation: tsk-pop .5s cubic-bezier(.2, 1.6, .4, 1); }

.tsk-check.is-pop::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--tsk-done);
    animation: tsk-ring .6s ease-out forwards;
}

@keyframes tsk-pop {
    0% { transform: scale(.6); }
    60% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

@keyframes tsk-ring {
    0% { transform: scale(.8); opacity: .9; }
    100% { transform: scale(2.2); opacity: 0; }
}

/* ------------------------------------------------------------------ čipy */

.tsk-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: var(--tsk-surface-3);
    color: var(--tsk-muted);
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.tsk-chip.is-quiet { background: transparent; padding-inline: .15rem; font-weight: 500; }
.tsk-chip.is-overdue { background: var(--tsk-danger-soft); color: var(--tsk-danger-ink); }
.tsk-chip.is-today { background: var(--tsk-warn-soft); color: var(--tsk-warn-ink); }

.tsk-num { color: var(--tsk-muted-2); font-size: .74rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.tsk-label {
    display: inline-flex;
    align-items: center;
    padding: .1rem .55rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.5;
    background: color-mix(in srgb, var(--c, #5b7cfa) 22%, #fff);
    color: color-mix(in srgb, var(--c, #5b7cfa) 70%, #111);
    white-space: nowrap;
}

.tsk-label.is-more { background: var(--tsk-surface-3); color: var(--tsk-muted); }

.tsk-project {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .76rem;
    font-weight: 600;
    color: var(--tsk-muted);
    text-decoration: none;
    min-width: 0;
}

.tsk-project:hover { color: var(--tsk-accent-ink); }
.tsk-project-dot { width: .6rem; height: .6rem; border-radius: .2rem; background: var(--c, #5b7cfa); flex: none; }

.tsk-state {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .65rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--s, #94a3b8) 22%, #fff);
    color: color-mix(in srgb, var(--s, #94a3b8) 65%, #111);
    white-space: nowrap;
    line-height: 1.5;
}

.tsk-state::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--s, #94a3b8); }
.tsk-state.is-big { font-size: .85rem; padding: .3rem .85rem; }

.tsk-state-backlog { --s: var(--tsk-backlog); }
.tsk-state-todo { --s: var(--tsk-todo); }
.tsk-state-progress { --s: var(--tsk-progress); }
.tsk-state-blocked { --s: var(--tsk-blocked); }
.tsk-state-review { --s: var(--tsk-review); }
.tsk-state-done { --s: var(--tsk-done); }
.tsk-state-cancelled { --s: var(--tsk-cancelled); }

/* priorita: běžná tichá, vyšší svítí */
.tsk-prio.tsk-prio-low { color: var(--tsk-muted-2); }
.tsk-prio.tsk-prio-normal { color: var(--tsk-muted); }
.tsk-prio.tsk-prio-high { background: var(--tsk-warn-soft); color: var(--tsk-warn-ink); }
.tsk-prio.tsk-prio-urgent { background: var(--tsk-danger-soft); color: var(--tsk-danger-ink); }
.tsk-prio-flag { padding-inline: .3rem; background: transparent; }
.tsk-prio-flag.tsk-prio-low, .tsk-prio-flag.tsk-prio-normal { display: none; }
.tsk-prio-flag.tsk-prio-high { color: var(--tsk-warn); }
.tsk-prio-flag.tsk-prio-urgent { color: var(--tsk-danger); }

/* ------------------------------------------------------------- avataři */

.tsk-avatars { display: inline-flex; align-items: center; }

.tsk-avatar {
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .01em;
    color: #3a2f6b;
    background: var(--tsk-accent-soft);
    border: 2px solid var(--tsk-surface);
    margin-left: -.45rem;
    flex: none;
}

.tsk-avatar:first-child { margin-left: 0; }
.tsk-avatar.is-more { background: var(--tsk-surface-3); color: var(--tsk-muted); }
.tsk-avatar.is-lg { width: 2.1rem; height: 2.1rem; font-size: .78rem; }
.tsk-avatar.is-xl { width: 2.75rem; height: 2.75rem; font-size: .95rem; }

/* pastelový odstín podle jména, text v tmavší variantě stejného tónu */
.tsk-avatar[data-hue="0"] { background: #ffd1d1; color: #8a2d2d; }
.tsk-avatar[data-hue="1"] { background: #ffe1b8; color: #8a5200; }
.tsk-avatar[data-hue="2"] { background: #c9f2d9; color: #1f6b43; }
.tsk-avatar[data-hue="3"] { background: #c4efe9; color: #0f5f57; }
.tsk-avatar[data-hue="4"] { background: #c9e4ff; color: #1d4f8a; }
.tsk-avatar[data-hue="5"] { background: #d8d6ff; color: #3b35a0; }
.tsk-avatar[data-hue="6"] { background: #e7d4ff; color: #5a2d9a; }
.tsk-avatar[data-hue="7"] { background: #ffd3ea; color: #8a2d5e; }

/* ================================================================== tabule */

.tsk-board {
    display: flex;
    gap: .9rem;
    overflow-x: auto;
    padding: .25rem .25rem 1rem;
    margin: 0 -.25rem;
    align-items: flex-start;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
}

.tsk-col {
    flex: 0 0 18rem;
    width: 18rem;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 14rem);
    max-height: calc(100dvh - 14rem);
    border-radius: var(--tsk-radius);
    background: color-mix(in srgb, var(--s, var(--tsk-backlog)) 9%, var(--tsk-surface-2));
    border: 1px solid color-mix(in srgb, var(--s, var(--tsk-backlog)) 18%, var(--tsk-border));
    scroll-snap-align: start;
}

.tsk-col-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem .8rem .5rem;
    position: sticky;
    top: 0;
    z-index: 1;
}

.tsk-col-head h2 { margin: 0; font-size: .85rem; font-weight: 750; letter-spacing: .01em; color: color-mix(in srgb, var(--s, var(--tsk-backlog)) 60%, #111); }
.tsk-col-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--s, var(--tsk-backlog)); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--s, var(--tsk-backlog)) 25%, transparent); }

.tsk-col-count {
    font-size: .72rem;
    font-weight: 700;
    color: var(--tsk-muted);
    background: var(--tsk-surface);
    border-radius: 999px;
    padding: 0 .5rem;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}

.tsk-col-plus {
    margin-left: auto;
    width: 1.6rem;
    height: 1.6rem;
    border: 0;
    border-radius: .45rem;
    background: transparent;
    color: var(--tsk-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s, background-color .15s;
}

.tsk-col:hover .tsk-col-plus,
.tsk-col-plus:focus-visible { opacity: 1; }
.tsk-col-plus:hover { background: var(--tsk-surface); color: var(--tsk-accent-ink); }

.tsk-col-body {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: .15rem .6rem .6rem;
    overflow-y: auto;
    flex: 1;
    min-height: 3rem;
    scrollbar-width: thin;
    transition: background-color .15s;
    border-radius: 0 0 var(--tsk-radius) var(--tsk-radius);
}

.tsk-col-body.is-over { background: color-mix(in srgb, var(--s, var(--tsk-accent)) 10%, transparent); }
.tsk-col-empty { color: var(--tsk-muted-2); font-size: .8rem; text-align: center; padding: 1rem .5rem; margin: 0; border: 1px dashed color-mix(in srgb, var(--s, var(--tsk-backlog)) 35%, transparent); border-radius: var(--tsk-radius-sm); }

.tsk-col-foot { padding: 0 .6rem .6rem; }

.tsk-col-add {
    display: flex;
    align-items: center;
    gap: .35rem;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--tsk-muted);
    border-radius: var(--tsk-radius-sm);
    padding: .45rem .6rem;
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.tsk-col-add:hover { background: var(--tsk-surface); color: var(--tsk-accent-ink); }
.tsk-col.is-adding .tsk-col-add { display: none; }
.tsk-col.is-adding .tsk-col-form { display: flex; }

.tsk-col-form {
    display: none;
    flex-direction: column;
    gap: .4rem;
    padding: .5rem;
    background: var(--tsk-surface);
    border-radius: var(--tsk-radius-sm);
    box-shadow: var(--tsk-shadow-md);
    animation: tsk-pop-in .15s var(--tsk-ease);
}

.tsk-col-form textarea {
    width: 100%;
    border: 0;
    outline: 0;
    resize: none;
    font: inherit;
    font-size: .9rem;
    font-weight: 500;
    padding: .2rem .25rem;
    background: transparent;
}

.tsk-col-form-foot { display: flex; align-items: center; gap: .35rem; }

/* karta */
.tsk-card {
    position: relative;
    display: block;
    background: var(--tsk-surface);
    border-radius: var(--tsk-radius-sm);
    padding: .65rem .75rem .6rem;
    box-shadow: 0 1px 2px rgba(42, 36, 84, .06), 0 2px 6px rgba(42, 36, 84, .05);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .15s var(--tsk-ease), box-shadow .15s, border-color .15s;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.tsk-card:hover { transform: translateY(-1px); box-shadow: var(--tsk-shadow-md); border-color: var(--tsk-border); }
.tsk-card.is-done { opacity: .75; }
.tsk-card.is-done .tsk-card-title { text-decoration: line-through; color: var(--tsk-muted); }

/* barevný proužek projektu nahoře (jen na tabuli napříč projekty — .tsk-card-top existuje) */
.tsk-card-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .4rem; }
.tsk-card-top .tsk-project { font-size: .72rem; }

/* priorita: tenká linka vlevo */
.tsk-card.tsk-prio-high { box-shadow: inset 3px 0 0 var(--tsk-warn), 0 1px 2px rgba(42, 36, 84, .06), 0 2px 6px rgba(42, 36, 84, .05); }
.tsk-card.tsk-prio-urgent { box-shadow: inset 3px 0 0 var(--tsk-danger), 0 1px 2px rgba(42, 36, 84, .06), 0 2px 6px rgba(42, 36, 84, .05); }

.tsk-card-labels { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .35rem; }
.tsk-card-labels.is-empty { display: none; }
.tsk-card:hover .tsk-card-labels.is-empty,
.tsk-card-labels.is-empty:focus-visible { display: inline-flex; }

.tsk-card-title {
    display: block;
    color: inherit;
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.35;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.tsk-card-title:hover { color: var(--tsk-accent-ink); }

.tsk-card-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .55rem; }
.tsk-card-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; min-width: 0; }
.tsk-card .tsk-comments { width: 1.6rem; height: 1.5rem; }

/* podúkoly: tenký progress */
.tsk-progress {
    display: block;
    height: .3rem;
    margin-top: .5rem;
    border-radius: 999px;
    background: var(--tsk-surface-3);
    overflow: hidden;
}

.tsk-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--tsk-done); transition: width .3s var(--tsk-ease); }
.tsk-progress.is-wide { margin: 0 0 0 auto; width: 7rem; height: .4rem; align-self: center; }
.tsk-progress.is-over > span { background: var(--tsk-danger); }

/* přetahování */
.tsk-dragging, .tsk-dragging * { cursor: grabbing !important; }
.tsk-dragging { -webkit-user-select: none; user-select: none; }
.is-dragging { opacity: .35; }
.is-dragging.tsk-card, .is-dragging.tsk-row, .is-dragging.tsk-cal-item { outline: 2px dashed color-mix(in srgb, var(--tsk-accent) 50%, transparent); outline-offset: -2px; }

.tsk-ghost {
    position: fixed;
    z-index: 2000;
    pointer-events: none;
    box-shadow: var(--tsk-shadow-lg) !important;
    transform-origin: 0 0;
    opacity: .96;
    rotate: 2deg;
    transition: none !important;
    margin: 0 !important;
}

.tsk-ghost.tsk-row { background: var(--tsk-surface); border-radius: var(--tsk-radius-sm); border: 1px solid var(--tsk-border); }

/* ================================================================== kalendář */

.tsk-cal {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: var(--tsk-border);
    border: 1px solid var(--tsk-border);
    border-radius: var(--tsk-radius);
    overflow: hidden;
    box-shadow: var(--tsk-shadow);
}

.tsk-cal-dow {
    padding: .5rem .5rem;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tsk-muted);
    background: var(--tsk-surface-2);
    text-align: center;
}

.tsk-cal-day {
    min-height: 7.5rem;
    padding: .35rem .4rem .45rem;
    background: var(--tsk-surface);
    display: flex;
    flex-direction: column;
    gap: .25rem;
    transition: background-color .15s;
}

.tsk-cal-day.is-other { background: var(--tsk-surface-2); }
.tsk-cal-day.is-other .tsk-cal-num { color: var(--tsk-muted-2); }
.tsk-cal-day.is-weekend:not(.is-other) { background: color-mix(in srgb, var(--tsk-surface-3) 60%, var(--tsk-surface)); }
.tsk-cal-day.is-over { background: var(--tsk-accent-soft-2); box-shadow: inset 0 0 0 2px var(--tsk-accent); }

.tsk-cal-daybar { display: flex; align-items: center; justify-content: space-between; gap: .25rem; }
.tsk-cal-num { font-size: .76rem; font-weight: 700; color: var(--tsk-muted); padding: .1rem .35rem; border-radius: 999px; }
.tsk-cal-day.is-today .tsk-cal-num { background: var(--tsk-accent); color: #fff; box-shadow: 0 4px 10px color-mix(in srgb, var(--tsk-accent) 35%, transparent); }

.tsk-cal-add {
    width: 1.35rem;
    height: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .4rem;
    color: var(--tsk-muted);
    text-decoration: none;
    opacity: 0;
    transition: opacity .15s, background-color .15s;
}

.tsk-cal-day:hover .tsk-cal-add, .tsk-cal-add:focus-visible { opacity: 1; }
.tsk-cal-add:hover { background: var(--tsk-accent-soft); color: var(--tsk-accent-ink); }
.tsk-cal-items { display: flex; flex-direction: column; gap: .2rem; flex: 1; }

.tsk-cal-item {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.3;
    padding: .2rem .4rem;
    border-radius: .45rem;
    background: color-mix(in srgb, var(--c, var(--s, var(--tsk-todo))) 16%, #fff);
    color: color-mix(in srgb, var(--c, var(--s, var(--tsk-todo))) 65%, #111);
    text-decoration: none;
    min-width: 0;
    -webkit-user-select: none;
    user-select: none;
    transition: transform .1s, box-shadow .15s;
}

.tsk-cal-item:hover { transform: translateY(-1px); box-shadow: var(--tsk-shadow); color: color-mix(in srgb, var(--c, var(--s, var(--tsk-todo))) 65%, #111); }
.tsk-cal-item-dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--s, var(--tsk-todo)); flex: none; }
.tsk-cal-item-time { font-variant-numeric: tabular-nums; color: var(--tsk-muted); font-weight: 600; }
.tsk-cal-item-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsk-cal-item-who .tsk-avatar { width: 1.15rem; height: 1.15rem; font-size: .5rem; border-width: 1px; }
.tsk-cal-item.is-done { opacity: .55; text-decoration: line-through; }
.tsk-cal-item.is-overdue .tsk-cal-item-dot { background: var(--tsk-danger); box-shadow: 0 0 0 2px var(--tsk-danger-soft); }
.tsk-cal-more { font-size: .72rem; color: var(--tsk-muted); text-decoration: none; padding: .1rem .4rem; }
.tsk-cal-more:hover { color: var(--tsk-accent-ink); }
.tsk-monthnav { display: inline-flex; align-items: center; gap: .25rem; }

@media (max-width: 767.98px) {
    .tsk-cal-day { min-height: 4.5rem; padding: .25rem; }
    .tsk-cal-item { font-size: .66rem; padding: .15rem .3rem; }
    .tsk-cal-item-time, .tsk-cal-item-who { display: none; }
    .tsk-cal-add { opacity: 1; }
}

/* ================================================================== projekty */

.tsk-pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1rem; }

.tsk-pcard {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: 1rem 1.1rem 1rem;
    border-radius: var(--tsk-radius);
    background: var(--tsk-surface);
    border: 1px solid var(--tsk-border);
    box-shadow: var(--tsk-shadow);
    overflow: hidden;
    transition: transform .15s var(--tsk-ease), box-shadow .15s;
}

.tsk-pcard::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 6px;
    background: linear-gradient(90deg, var(--c, var(--tsk-accent)), color-mix(in srgb, var(--c, var(--tsk-accent)) 50%, #fff));
}

.tsk-pcard:hover { transform: translateY(-2px); box-shadow: var(--tsk-shadow-md); }
.tsk-pcard.is-archived { opacity: .7; }
.tsk-pcard.is-personal { --c: var(--tsk-backlog); }

.tsk-pcard-top { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .15rem; }
.tsk-pcard-top h2 { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; flex: 1; min-width: 0; }
.tsk-pcard-top h2 a { text-decoration: none; }

.tsk-pcard-dot {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: .5rem;
    background: var(--c, var(--tsk-accent));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex: none;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--c, var(--tsk-accent)) 35%, transparent);
}

.tsk-pcard.is-personal .tsk-pcard-dot { background: var(--tsk-surface-3); color: var(--tsk-muted); box-shadow: none; }
.tsk-pcard-desc { margin: 0; font-size: .85rem; color: var(--tsk-muted); }
.tsk-pcard-meta { display: flex; flex-wrap: wrap; gap: .25rem .75rem; font-size: .78rem; color: var(--tsk-muted); }
.tsk-pcard-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: auto; padding-top: .25rem; }

.tsk-stack { display: flex; height: .55rem; border-radius: 999px; overflow: hidden; background: var(--tsk-surface-3); }
.tsk-stack-seg { display: block; height: 100%; background: var(--s, var(--tsk-backlog)); transition: width .3s var(--tsk-ease); }
.tsk-stack-seg.is-none { background: var(--tsk-surface-3); }
.tsk-dotlabel { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; }
.tsk-dotlabel::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--s, var(--tsk-backlog)); }
.tsk-dotlabel.is-late { color: var(--tsk-danger-ink); }
.tsk-dotlabel.is-late::before { background: var(--tsk-danger); }

/* ================================================================== kontrola / koš */

.tsk-review-list { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.5rem; }

.tsk-review-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .75rem 1rem;
    padding: .8rem 1rem .8rem 1.1rem;
    border-radius: var(--tsk-radius);
    background: var(--tsk-surface);
    border: 1px solid var(--tsk-border);
    border-left: 5px solid var(--c, var(--tsk-review));
    box-shadow: var(--tsk-shadow);
    transition: transform .25s var(--tsk-ease), opacity .25s, box-shadow .15s;
}

.tsk-review-card[data-tsk-open] { cursor: pointer; }
.tsk-review-card:hover { box-shadow: var(--tsk-shadow-md); }
.tsk-review-card.is-leaving { opacity: 0; transform: translateX(2rem) scale(.98); }
.tsk-review-card.is-trash { border-left-color: var(--tsk-cancelled); }
.tsk-review-title { font-weight: 650; text-decoration: none; display: block; }
.tsk-review-who { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--tsk-muted); }
.tsk-review-actions { display: flex; gap: .4rem; }

@media (max-width: 767.98px) {
    .tsk-review-card { grid-template-columns: minmax(0, 1fr); }
    .tsk-review-names { display: none; }
}

/* ================================================================== detail */

.tsk-detail-head { margin-bottom: 1rem; }

.tsk-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .8rem; color: var(--tsk-muted); margin-bottom: .5rem; }
.tsk-crumbs a { color: var(--tsk-muted); text-decoration: none; }
.tsk-crumbs a:hover { color: var(--tsk-accent-ink); }
.tsk-crumbs-sep { color: var(--tsk-muted-2); }

.tsk-detail-titleline { display: flex; align-items: flex-start; gap: .75rem; }
.tsk-detail-check { margin: .25rem 0 0; display: inline-flex; }

.tsk-detail-title {
    margin: 0;
    font-family: var(--tsk-font-display);
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
    font-weight: 750;
    letter-spacing: -.02em;
    line-height: 1.25;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    min-width: 0;
}

.tsk-detail-title.is-done > span:first-child { text-decoration: line-through; color: var(--tsk-muted); }
.tsk-detail-title .tsk-row-rename { opacity: .35; }
.tsk-detail-title:hover .tsk-row-rename { opacity: 1; }
.tsk-detail-title .tsk-title-input { font-size: inherit; font-weight: inherit; font-family: inherit; }

.tsk-detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: .6rem; }
.tsk-detail-by { font-size: .8rem; color: var(--tsk-muted); }
.tsk-detail-actions { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

.tsk-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 1rem;
    align-items: start;
}

@media (max-width: 991.98px) {
    .tsk-detail-grid { grid-template-columns: minmax(0, 1fr); }
}

.tsk-panel {
    background: var(--tsk-surface);
    border: 1px solid var(--tsk-border);
    border-radius: var(--tsk-radius);
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    box-shadow: var(--tsk-shadow);
}

.tsk-panel h2 {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .8rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tsk-muted);
    margin: 0 0 .75rem;
}

.tsk-panel h2 .tsk-progress.is-wide { margin-left: auto; }
.tsk-panel-count { font-size: .72rem; background: var(--tsk-surface-3); border-radius: 999px; padding: 0 .5rem; color: var(--tsk-muted); font-weight: 700; }
.tsk-panel-link { margin-left: auto; font-size: .75rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--tsk-accent-ink); text-decoration: none; }
.tsk-panel-link:hover { text-decoration: underline; }

.tsk-facts { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .6rem .75rem; font-size: .875rem; align-items: center; margin: 0; }
.tsk-facts dt { color: var(--tsk-muted); font-weight: 600; font-size: .8rem; }
.tsk-facts dd { margin: 0; min-width: 0; }

.tsk-desc { line-height: 1.65; font-size: .95rem; }
.tsk-desc :last-child { margin-bottom: 0; }
.tsk-desc img { max-width: 100%; border-radius: var(--tsk-radius-sm); }

/* komentáře */
.tsk-comments-list { display: flex; flex-direction: column; }

.tsk-comment { display: flex; gap: .7rem; padding: .75rem 0; border-top: 1px solid var(--tsk-border); }
.tsk-comment:first-child { border-top: 0; padding-top: 0; }
.tsk-comment-body { min-width: 0; flex: 1; }
.tsk-comment-head { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .2rem; }
.tsk-comment-author { font-weight: 700; font-size: .875rem; }
.tsk-comment-time { color: var(--tsk-muted); font-size: .76rem; }

.tsk-comment-text {
    line-height: 1.55;
    font-size: .925rem;
    background: var(--tsk-surface-2);
    border-radius: 0 var(--tsk-radius-sm) var(--tsk-radius-sm) var(--tsk-radius-sm);
    padding: .5rem .75rem;
    display: inline-block;
    max-width: 100%;
}

.tsk-comment-text :last-child { margin-bottom: 0; }

.tsk-comment-del {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: var(--tsk-muted);
    font: inherit;
    font-size: .75rem;
    padding: 0;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s;
}

.tsk-comment:hover .tsk-comment-del, .tsk-comment-del:focus-visible { opacity: 1; }
.tsk-comment-del:hover { color: var(--tsk-danger-ink); text-decoration: underline; }

.tsk-composer { display: flex; gap: .7rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--tsk-border); }
.tsk-composer-body { flex: 1; min-width: 0; }
.tsk-composer textarea { width: 100%; font: inherit; font-size: .9rem; border: 1px solid var(--tsk-border-strong); border-radius: var(--tsk-radius-sm); padding: .55rem .7rem; resize: vertical; min-height: 4.5rem; background: var(--tsk-surface); }
.tsk-composer textarea:focus { outline: 0; border-color: var(--tsk-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tsk-accent) 15%, transparent); }
.tsk-composer-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .5rem; }

/* přílohy */
.tsk-files { list-style: none; margin: 0 0 .75rem; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.tsk-file { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border-radius: var(--tsk-radius-sm); background: var(--tsk-surface-2); font-size: .875rem; }
.tsk-file-icon { width: 2rem; height: 2rem; border-radius: .55rem; display: inline-flex; align-items: center; justify-content: center; background: var(--tsk-accent-soft); color: var(--tsk-accent-ink); flex: none; }
.tsk-file-name { font-weight: 600; text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsk-file-size { color: var(--tsk-muted); font-size: .78rem; white-space: nowrap; }

.tsk-upload { display: flex; align-items: center; gap: .5rem; }

.tsk-upload-drop {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .8rem;
    border: 1.5px dashed var(--tsk-border-strong);
    border-radius: var(--tsk-radius-sm);
    color: var(--tsk-muted);
    font-size: .82rem;
    cursor: pointer;
    margin: 0;
    transition: border-color .15s, background-color .15s;
}

.tsk-upload-drop:hover, .tsk-upload-drop.is-over { border-color: var(--tsk-accent); background: var(--tsk-accent-soft-2); color: var(--tsk-accent-ink); }
.tsk-upload-drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tsk-upload-drop.has-file { border-style: solid; color: var(--tsk-text); }

/* čas */
.tsk-time-form { display: grid; grid-template-columns: 1fr 1.3fr auto; gap: .4rem; }
.tsk-time-list { list-style: none; margin: .75rem 0 0; padding: 0; font-size: .82rem; }
.tsk-time-list li { display: flex; align-items: center; gap: .5rem; padding: .35rem 0; border-top: 1px dashed var(--tsk-border); }

/* historie */
.tsk-timeline { list-style: none; margin: 0; padding: 0 0 0 .9rem; border-left: 2px solid var(--tsk-border); font-size: .8rem; }
.tsk-timeline li { position: relative; padding: .15rem 0 .6rem; }
.tsk-timeline-dot { position: absolute; left: calc(-.9rem - 6px); top: .45rem; width: 10px; height: 10px; border-radius: 50%; background: var(--tsk-surface); border: 2px solid var(--tsk-accent); }
.tsk-timeline-text { color: var(--tsk-text); }
.tsk-timeline-by { color: var(--tsk-muted); font-size: .74rem; }
.tsk-timeline-by b { color: var(--tsk-text); font-weight: 600; }

/* formulář úpravy a nastavení */
.tsk-page-edit .tsk-panel h2 { margin-bottom: 1rem; }
.tsk-form-actions { display: flex; gap: .5rem; align-items: center; margin: .5rem 0 2rem; }
.tsk-settings { max-width: 36rem; }
.tsk-settings-hour { max-width: 12rem; margin-top: .5rem; }

.tsk-switch { display: flex; align-items: flex-start; gap: .8rem; padding: .6rem 0; cursor: pointer; margin: 0; }
.tsk-switch + .tsk-switch { border-top: 1px solid var(--tsk-border); }
.tsk-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tsk-switch-track { position: relative; width: 2.6rem; height: 1.5rem; border-radius: 999px; background: var(--tsk-border-strong); flex: none; margin-top: .1rem; transition: background-color .2s; }
.tsk-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: calc(1.5rem - 6px); height: calc(1.5rem - 6px); border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s var(--tsk-ease); }
.tsk-switch input:checked + .tsk-switch-track { background: var(--tsk-accent); }
.tsk-switch input:checked + .tsk-switch-track::after { transform: translateX(1.1rem); }
.tsk-switch input:focus-visible + .tsk-switch-track { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tsk-accent) 25%, transparent); }
.tsk-switch-text { display: flex; flex-direction: column; gap: .15rem; font-size: .9rem; }
.tsk-switch-text span { color: var(--tsk-muted); font-size: .82rem; }

/* ================================================================== prázdno */

.tsk-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--tsk-muted);
    border: 1.5px dashed var(--tsk-border-strong);
    border-radius: var(--tsk-radius);
    background: color-mix(in srgb, var(--tsk-surface) 60%, transparent);
}

.tsk-empty.is-tall { padding: 4rem 1rem; }
.tsk-empty.is-celebrate { border-style: solid; border-color: color-mix(in srgb, var(--tsk-done) 40%, transparent); background: var(--tsk-ok-soft); }
.tsk-empty.is-celebrate .tsk-empty-icon { background: #fff; color: var(--tsk-ok); }

.tsk-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1rem;
    background: var(--tsk-accent-soft);
    color: var(--tsk-accent-ink);
    margin-bottom: .75rem;
}

/* widget na stránce portálu */
.tsk-widget-foot { display: flex; align-items: center; gap: .6rem; margin-top: .6rem; }

/* ================================================================== inline editace
   Buňky s data-tsk-edit jsou <button>, které vypadají jako čipy; popover (.tsk-pop)
   k nim staví tasks.js. Bez JS se buňky chovají jako čipy ke čtení. */

html:not(.tsk-js) .tsk-js-only { display: none !important; }
html.tsk-js .tsk-nojs-only { display: none !important; }

.tsk-row-rename {
    display: inline-flex;
    flex: none;
    border: 0;
    background: transparent;
    color: var(--tsk-muted);
    padding: .15rem;
    border-radius: .3rem;
    opacity: 0;
    cursor: pointer;
    transition: opacity .12s;
}

.tsk-row:hover .tsk-row-rename, .tsk-row-rename:focus-visible { opacity: 1; }
.tsk-row-rename:hover { color: var(--tsk-accent-ink); background: var(--tsk-accent-soft); }

.tsk-title-input {
    flex: 1;
    min-width: 0;
    font: inherit;
    font-weight: 600;
    padding: .1rem .45rem;
    border: 1px solid var(--tsk-accent);
    border-radius: .35rem;
    outline: 0;
    background: var(--tsk-surface);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tsk-accent) 18%, transparent);
}

button.tsk-cell, button.tsk-labels, button.tsk-people, button.tsk-comments {
    font: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.tsk-cell { border: 1px solid transparent; transition: border-color .12s, background-color .12s, opacity .12s, transform .1s; }
button.tsk-cell:hover, button.tsk-cell:focus-visible { border-color: color-mix(in srgb, currentColor 30%, transparent); outline: 0; transform: translateY(-1px); }
.tsk-state.tsk-cell { min-width: 6.4rem; justify-content: center; }
.tsk-due.tsk-cell { min-width: 5rem; }
.tsk-prio.tsk-cell { min-width: 5.4rem; }

/* prázdná hodnota: místo se drží, ukáže se až při hoveru */
.tsk-cell.is-empty { background: transparent; color: var(--tsk-muted-2); border: 1px dashed var(--tsk-border-strong); font-weight: 500; opacity: 0; }
.tsk-cell.is-empty.is-visible, .tsk-row:hover .tsk-cell.is-empty, .tsk-card:hover .tsk-cell.is-empty, .tsk-cell.is-empty:focus-visible { opacity: 1; }
@media (hover: none) { .tsk-cell.is-empty { opacity: .8; } }

.tsk-labels { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem; border: 0; background: transparent; padding: 0; border-radius: .35rem; }

.tsk-placeholder {
    display: none;
    font-size: .7rem;
    font-weight: 600;
    color: var(--tsk-muted-2);
    border: 1px dashed var(--tsk-border-strong);
    border-radius: 999px;
    padding: 0 .5rem;
    line-height: 1.5;
    white-space: nowrap;
}

.tsk-labels.is-empty .tsk-placeholder { display: inline-flex; opacity: 0; transition: opacity .12s; }
.tsk-labels.is-wide.is-empty .tsk-placeholder, .tsk-row:hover .tsk-labels.is-empty .tsk-placeholder, .tsk-card:hover .tsk-labels.is-empty .tsk-placeholder, .tsk-labels:focus-visible .tsk-placeholder { opacity: 1; }
button.tsk-labels:hover .tsk-placeholder { color: var(--tsk-accent-ink); border-color: var(--tsk-accent); }

.tsk-people { display: inline-flex; align-items: center; gap: .4rem; border: 0; background: transparent; padding: 0; min-width: 1.6rem; border-radius: 999px; }
.tsk-people-empty { display: none; width: 1.65rem; height: 1.65rem; border-radius: 50%; border: 1.5px dashed var(--tsk-border-strong); color: var(--tsk-muted-2); align-items: center; justify-content: center; flex: none; }
.tsk-people.is-empty .tsk-people-empty { display: inline-flex; }
button.tsk-people:hover .tsk-people-empty, button.tsk-people:focus-visible .tsk-people-empty { border-color: var(--tsk-accent); color: var(--tsk-accent-ink); }
button.tsk-people:hover .tsk-avatar { filter: brightness(1.04); }
.tsk-people-names { font-size: .85rem; text-align: left; }
.tsk-people.is-wide { flex-wrap: wrap; }

.tsk-comments {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.7rem;
    flex: none;
    border: 0;
    background: transparent;
    color: var(--tsk-muted);
    border-radius: .45rem;
    transition: color .12s, background-color .12s;
}

.tsk-comments:hover, .tsk-comments:focus-visible { color: var(--tsk-accent-ink); background: var(--tsk-accent-soft); outline: 0; }

.tsk-comments-count {
    position: absolute;
    top: -.2rem;
    right: -.15rem;
    min-width: 1rem;
    height: 1rem;
    padding: 0 .28rem;
    border-radius: 999px;
    background: var(--tsk-accent);
    color: #fff;
    font-size: .6rem;
    font-weight: 800;
    line-height: 1rem;
    text-align: center;
}

.tsk-comments.is-empty .tsk-comments-count { display: none; }
.tsk-comments.is-empty { opacity: .55; }
.tsk-row:hover .tsk-comments.is-empty, .tsk-card:hover .tsk-comments.is-empty { opacity: 1; }

.tsk-grip {
    position: absolute;
    left: -.1rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    color: var(--tsk-border-strong);
    cursor: grab;
    padding: .2rem .05rem;
    border-radius: .25rem;
    opacity: 0;
    transition: opacity .12s, color .12s;
    touch-action: none;
}

.tsk-row:hover .tsk-grip { opacity: 1; color: var(--tsk-muted); }
.tsk-grip:active { cursor: grabbing; }
.tsk-list.is-over { outline: 2px dashed color-mix(in srgb, var(--tsk-accent) 50%, transparent); outline-offset: -2px; }

.is-saving { opacity: .55; pointer-events: none; animation: tsk-pulse 1s ease-in-out infinite; }
@keyframes tsk-pulse { 50% { opacity: .35; } }

.tsk-row.is-new, .tsk-card.is-new { animation: tsk-flash 1.6s ease-out; }
@keyframes tsk-flash {
    0% { background: color-mix(in srgb, var(--tsk-done) 28%, transparent); }
    100% { background: transparent; }
}

.tsk-card.is-new { animation: tsk-flash 1.6s ease-out, tsk-pop-in .25s var(--tsk-ease); }

.tsk-row-add { padding: .3rem .85rem .3rem .45rem; background: var(--tsk-surface-2); display: flex; align-items: center; }
.tsk-row-add:hover { background: var(--tsk-surface-2); }
.tsk-add-form { display: flex; align-items: center; gap: .5rem; width: 100%; }
.tsk-add-plus { display: inline-flex; color: var(--tsk-muted-2); flex: none; width: 1.3rem; justify-content: center; }

.tsk-add-form input[name="title"] {
    flex: 1;
    min-width: 8rem;
    border: 1px solid transparent;
    background: transparent;
    font: inherit;
    font-size: .9rem;
    padding: .3rem .45rem;
    border-radius: var(--tsk-radius-xs);
    outline: 0;
}

.tsk-add-form input[name="title"]:focus { background: var(--tsk-surface); border-color: var(--tsk-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tsk-accent) 15%, transparent); }
.tsk-add-project { width: auto; max-width: 11rem; font-size: .8rem !important; border-color: transparent !important; background: var(--tsk-surface-3) !important; }
.tsk-add-btn { opacity: 0; transition: opacity .12s; }
.tsk-add-form:focus-within .tsk-add-btn, .tsk-add-form:hover .tsk-add-btn { opacity: 1; }

/* ================================================================== popover */

.tsk-pop {
    position: absolute;
    z-index: 1060;
    min-width: 13rem;
    max-width: min(24rem, calc(100vw - 1rem));
    background: var(--tsk-surface);
    border: 1px solid var(--tsk-border);
    border-radius: var(--tsk-radius);
    box-shadow: var(--tsk-shadow-lg);
    padding: .35rem;
    font-size: .875rem;
    animation: tsk-pop-in .15s var(--tsk-ease);
    color: var(--tsk-text);
}

.tsk-pop.is-comments { width: 24rem; }

@keyframes tsk-pop-in {
    0% { opacity: 0; transform: translateY(-4px) scale(.98); }
    100% { opacity: 1; transform: none; }
}

.tsk-pop-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .35rem .6rem .4rem; font-size: .7rem; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; color: var(--tsk-muted); }
.tsk-pop-close { border: 0; background: transparent; color: var(--tsk-muted); font-size: 1.1rem; line-height: 1; padding: 0 .3rem; cursor: pointer; border-radius: .3rem; }
.tsk-pop-close:hover { color: var(--tsk-text); background: var(--tsk-surface-3); }
.tsk-pop-list { display: flex; flex-direction: column; gap: 1px; }
.tsk-pop-scroll { max-height: 16rem; overflow-y: auto; scrollbar-width: thin; }

.tsk-pop-opt {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: .4rem .6rem;
    border-radius: var(--tsk-radius-xs);
    font: inherit;
    cursor: pointer;
    color: inherit;
}

.tsk-pop-opt:hover, .tsk-pop-opt:focus-visible { background: var(--tsk-accent-soft-2); outline: 0; }
.tsk-pop-opt.is-muted { color: var(--tsk-muted); }
.tsk-pop-opt.is-current::after { content: "\2713"; margin-left: auto; color: var(--tsk-accent-ink); font-weight: 700; }
.tsk-pop-sub { color: var(--tsk-muted); font-size: .76rem; margin-left: auto; }

.tsk-pop-check { display: flex; align-items: center; gap: .5rem; padding: .35rem .6rem; border-radius: var(--tsk-radius-xs); cursor: pointer; margin: 0; }
.tsk-pop-check:hover { background: var(--tsk-accent-soft-2); }
.tsk-pop-check input { margin: 0; flex: none; accent-color: var(--tsk-accent); }
.tsk-pop-check .tsk-avatar { margin-left: 0; border: 0; width: 1.5rem; height: 1.5rem; }
.tsk-pop-sep { border-top: 1px solid var(--tsk-border); margin: .3rem 0; }
.tsk-pop-date { display: flex; gap: .4rem; padding: .25rem .5rem .35rem; }
.tsk-pop-date input { flex: 1; }
.tsk-pop-empty { color: var(--tsk-muted); font-size: .82rem; padding: .5rem .6rem; }
.tsk-pop-comments { max-height: 19rem; overflow-y: auto; padding: 0 .5rem; scrollbar-width: thin; }
.tsk-pop .tsk-comment { padding: .55rem 0; gap: .55rem; }
.tsk-pop .tsk-comment:first-child { border-top: 0; }
.tsk-pop .tsk-comment .tsk-avatar { margin-left: 0; border: 0; }
.tsk-pop .tsk-comment-text { font-size: .85rem; }
.tsk-pop-form { padding: .4rem .5rem .2rem; border-top: 1px solid var(--tsk-border); margin-top: .25rem; }
.tsk-pop textarea { width: 100%; font: inherit; font-size: .875rem; border: 1px solid var(--tsk-border-strong); border-radius: var(--tsk-radius-sm); padding: .45rem .55rem; resize: vertical; min-height: 3.8rem; background: var(--tsk-surface); color: inherit; }
.tsk-pop textarea:focus { outline: 0; border-color: var(--tsk-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tsk-accent) 15%, transparent); }
.tsk-pop-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .4rem 0 .15rem; }
.tsk-pop-hint { font-size: .72rem; color: var(--tsk-muted); }

/* ================================================================== postranní panel (detail) */

.tsk-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(30, 24, 60, .32);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .2s;
}

.tsk-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1045;
    width: min(60rem, 100vw);
    background: var(--tsk-bg);
    box-shadow: var(--tsk-shadow-lg);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .28s var(--tsk-ease);
}

.tsk-drawer-host.is-open .tsk-drawer { transform: none; }
.tsk-drawer-host.is-open .tsk-drawer-backdrop { opacity: 1; }
body.tsk-drawer-open { overflow: hidden; }

.tsk-drawer-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1rem;
    border-bottom: 1px solid var(--tsk-border);
    background: var(--tsk-surface);
    flex: none;
}

.tsk-drawer-bar-title { font-size: .8rem; font-weight: 700; color: var(--tsk-muted); text-transform: uppercase; letter-spacing: .06em; }
.tsk-drawer-body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem 2rem; scrollbar-width: thin; }
.tsk-drawer-body .tsk-detail-head { margin-top: 0; }
.tsk-drawer-body .tsk-detail-grid { grid-template-columns: minmax(0, 1fr) 18rem; }
.tsk-drawer-loading { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: 4rem 1rem; color: var(--tsk-muted); font-size: .9rem; }
.tsk-spinner { width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 3px solid var(--tsk-border); border-top-color: var(--tsk-accent); animation: tsk-spin .8s linear infinite; }
@keyframes tsk-spin { to { transform: rotate(360deg); } }

@media (max-width: 991.98px) {
    .tsk-drawer-body .tsk-detail-grid { grid-template-columns: minmax(0, 1fr); }
    .tsk-drawer-body { padding: .85rem .85rem 2rem; }
}

/* ================================================================== modál „Nový úkol“ */

.tsk-modal-host { position: fixed; inset: 0; z-index: 1050; display: flex; align-items: flex-start; justify-content: center; padding: 8vh 1rem 1rem; }
.tsk-modal-backdrop { position: absolute; inset: 0; background: rgba(30, 24, 60, .35); backdrop-filter: blur(2px); animation: tsk-fade-in .15s; }
@keyframes tsk-fade-in { from { opacity: 0; } to { opacity: 1; } }

.tsk-modal {
    position: relative;
    width: min(34rem, 100%);
    background: var(--tsk-surface);
    border-radius: 18px;
    box-shadow: var(--tsk-shadow-lg);
    padding: 1.1rem 1.25rem 1rem;
    animation: tsk-modal-in .22s var(--tsk-ease);
    max-height: 90vh;
    overflow-y: auto;
}

@keyframes tsk-modal-in {
    from { opacity: 0; transform: translateY(-10px) scale(.98); }
    to { opacity: 1; transform: none; }
}

.tsk-modal-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; }
.tsk-modal-head h2 { margin: 0; font-family: var(--tsk-font-display); font-size: 1.1rem; font-weight: 750; letter-spacing: -.01em; flex: 1; }
.tsk-modal-title { width: 100%; border: 0; border-bottom: 2px solid var(--tsk-border); font: inherit; font-size: 1.2rem; font-weight: 650; padding: .45rem .1rem; outline: 0; background: transparent; transition: border-color .15s; }
.tsk-modal-title:focus { border-color: var(--tsk-accent); }
.tsk-modal-desc { width: 100%; margin-top: .6rem; border: 1px solid var(--tsk-border); border-radius: var(--tsk-radius-sm); font: inherit; font-size: .9rem; padding: .5rem .65rem; resize: vertical; min-height: 3.5rem; outline: 0; }
.tsk-modal-desc:focus { border-color: var(--tsk-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tsk-accent) 15%, transparent); }
.tsk-modal-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .75rem; }
.tsk-modal-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tsk-muted); width: 100%; margin-top: .5rem; }
.tsk-modal-foot { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; }
.tsk-modal-foot .tsk-pop-hint { margin-right: auto; }

.tsk-choice { display: inline-flex; gap: .25rem; flex-wrap: wrap; }
.tsk-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tsk-choice label { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--tsk-border); font-size: .8rem; font-weight: 600; color: var(--tsk-muted); cursor: pointer; transition: all .12s; margin: 0; }
.tsk-choice label:hover { border-color: var(--tsk-accent); color: var(--tsk-text); }
.tsk-choice input:checked + label { background: var(--tsk-accent-soft); border-color: transparent; color: var(--tsk-accent-ink); }
.tsk-choice input:focus-visible + label { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tsk-accent) 25%, transparent); }
.tsk-choice.is-prio input:checked + label.tsk-prio-high { background: var(--tsk-warn-soft); color: var(--tsk-warn-ink); }
.tsk-choice.is-prio input:checked + label.tsk-prio-urgent { background: var(--tsk-danger-soft); color: var(--tsk-danger-ink); }
.tsk-modal .tsk-pop-date { padding: 0; }
.tsk-modal-select { max-width: 14rem; font-size: .85rem !important; }

/* ================================================================== toasty */

.tsk-toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 1080; display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; pointer-events: none; }

.tsk-toast {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: #2b2742;
    color: #fff;
    padding: .55rem .9rem;
    border-radius: var(--tsk-radius-sm);
    font-size: .85rem;
    font-weight: 500;
    box-shadow: 0 10px 28px rgba(20, 15, 50, .3);
    animation: tsk-toast-in .2s var(--tsk-ease);
    transition: opacity .25s, transform .25s;
    max-width: min(24rem, calc(100vw - 2rem));
    pointer-events: auto;
}

.tsk-toast a { color: #cbc3ff; font-weight: 700; text-decoration: none; }
.tsk-toast a:hover { color: #fff; text-decoration: underline; }
.tsk-toast.err { background: var(--tsk-danger-ink); }
.tsk-toast.ok { background: #1f7a52; }
.tsk-toast.is-hide { opacity: 0; transform: translateY(6px); }

@keyframes tsk-toast-in {
    0% { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: none; }
}

/* ================================================================== klávesové zkratky */

.tsk-kbd-help { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 1070; background: #2b2742; color: #fff; border-radius: var(--tsk-radius); padding: .8rem 1.1rem; font-size: .82rem; box-shadow: var(--tsk-shadow-lg); display: grid; grid-template-columns: auto auto; gap: .35rem 1rem; animation: tsk-toast-in .2s var(--tsk-ease); }
.tsk-kbd-help kbd { font-family: inherit; background: rgba(255, 255, 255, .15); border-radius: .3rem; padding: 0 .4rem; font-weight: 700; }

/* omezení pohybu pro ty, kdo o to požádají */
@media (prefers-reduced-motion: reduce) {
    .tsk *, .tsk *::before, .tsk *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}