/* Inter 4.1, official variable webfont. The 100–900 axis includes every weight
   used by Tisame (including 450) and the full Latin/Cyrillic character set. */
@font-face {
  font-family: "Inter";
  src: url("vendor/inter/InterVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* iOS WebView/PWA safe areas. They resolve to 0px in regular browsers. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --app-height: 100dvh;
  --viewport-offset-top: 0px;
  --viewport-offset-left: 0px;
  --paper: #f1f2f4;     /* soft cool neutral — white cards float on it (soft-depth) */
  --ink: #1b1f25;       /* near-black, faintly cool */
  --ink-soft: #5c636e;
  --ink-faint: #626b78;
  --line: #e7eaef;
  --line-strong: #d3d8e0;
  --accent: #2f6ae6;        /* single confident work-blue — one identity across the app */
  --accent-soft: #e6effd;   /* pale tint of the SAME blue */
  --accent-2: #2f9e69;      /* clean green — used ONLY for done states / second checkmark */
  --today-tint: #e7effd;    /* today wash — cool accent tint (no warm paper) */
  --today-ink: #2a5dcf;     /* today emphasis (dátum/počet) — deeper accent blue */
  --warn: #bd6c0e;          /* „po termíne" / overdue — jantárová výstraha (NIE modrá, NIE danger-červená) */
  --warn-soft: #fbeed6;     /* pale amber wash for overdue pill/markers */
  --card: #ffffff;      /* surface for inputs, checkboxes, panels — crisp white */
  --weekend: #f3e6c8;   /* víkend — teplé „svetlo zhora" (osobný čas / oddych); sýtejšie, nech je vidno */
  --someday: #ecedf1;   /* Niekedy — chladná stlmená „odložená" plocha, mimo časovej osi */
  /* soft-depth tiene — mäkké, rozptýlené, neutrálne (karty „plávajú", nemajú tvrdé rámiky) */
  --sh-1: 0 1px 2px rgba(40,44,52,.05), 0 4px 12px -4px rgba(40,44,52,.10);
  --sh-2: 0 2px 5px rgba(40,44,52,.06), 0 12px 26px -8px rgba(40,44,52,.15);
  --sh-today: 0 3px 7px rgba(42,93,207,.10), 0 16px 38px -12px rgba(42,93,207,.22);
  --danger: #d83a2c;    /* deštruktívne akcie (mazanie) — jasne odlíšené od accentu */
  /* Paleta štítkových farieb — 8 zreteľne odlíšených odtieňov (light) */
  --c-red: #d9533a; --c-amber: #d2902a; --c-green: #3f9e69; --c-teal: #1d9b91;
  --c-blue: #3b7fd6; --c-violet: #875fd0; --c-rose: #d35c84; --c-slate: #6b7686;
  --bar-neutral: #aeb6c2;   /* univerzálna sivá bodiek v prúžku (úlohy bez farby) — mimo palety */
  --fs: 1;              /* font-scale multiplier (S/M/L/XL z nastavení) */
  --row: calc(34px * var(--fs));  /* height of one ruled line — rastie s textom, drží rytmus */
  --rows: 4;            /* min ruled lines for weekdays */
  --rows-weekend: 2;    /* min ruled lines for Sat / Sun / Someday */
}

/* Veľkosť textu — len jeden multiplikátor, aby väčší text nerozbil layout.
   M (stred) = pôvodný vzhľad; ostatné stupne jemne hore/dole. */
:root[data-font-size="s"]  { --fs: 0.9; }
:root[data-font-size="l"]  { --fs: 1.15; }
:root[data-font-size="xl"] { --fs: 1.32; }

* { box-sizing: border-box; }

/* ---------- Icons: one coherent line family ---------- */
.icon { width: 1em; height: 1em; display: inline-block; vertical-align: middle; flex: none; pointer-events: none; }
/* icon-only buttons centre their glyph (none of these toggle [hidden]) */
.nav-btn, .focus-daynav, .menu-btn,
.focus-move, .focus-menu, .focus-note, .settings-btn {
  display: inline-flex; align-items: center; justify-content: center;
}
.nav-btn .icon { width: 19px; height: 19px; }
.focus-daynav .icon { width: 20px; height: 20px; }
.menu-btn .icon { width: 18px; height: 18px; }
.focus-note .icon, .focus-move .icon, .focus-menu .icon { width: 17px; height: 17px; }
.settings-btn .icon { width: 17px; height: 17px; }
.focus-grip .icon { width: 16px; height: 16px; }
.note-badge .icon, .recur-badge .icon { width: 15px; height: 15px; }
/* text + icon controls (kept inline so [hidden] still hides them) */
.sync-btn .icon { width: 15px; height: 15px; margin-right: 6px; }
.focus-back .icon { width: 16px; height: 16px; }

html, body { margin: 0; height: 100%; }
html { overflow-x: clip; }

body {
  background-color: var(--paper);
  /* jemný svetelný prechod (hore svetlejšie) → plocha „dýcha", nie je mŕtvo plochá */
  background-image: radial-gradient(120% 80% at 50% -8%,
    color-mix(in srgb, var(--card) 55%, var(--paper)) 0%,
    var(--paper) 55%,
    color-mix(in srgb, var(--ink) 5%, var(--paper)) 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  width: 100%; max-width: 100%; min-width: 0;
  height: var(--app-height); /* visualViewport drží obsah nad softvérovou klávesnicou */
  overflow-x: clip;        /* posuvný prechod týždňa sa čisto oreže (clip nerobí scroll-kontajner) */
  overflow-y: hidden;      /* žiaden scroll celej stránky; prebytok rieši interný scroll dosky (poistka) */
}

/* Trvalý verejný právny odkaz pre používateľov aj OAuth overenie. Je zámerne
   tichý a mimo pracovných ovládacích prvkov, no stále čitateľný a klikateľný. */
.privacy-link {
  position: fixed;
  z-index: 4;
  right: max(8px, var(--safe-right));
  bottom: max(4px, var(--safe-bottom));
  padding: 3px 6px;
  border-radius: 6px;
  color: var(--ink-faint);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  font-size: 10px;
  line-height: 1.2;
  text-decoration: none;
  opacity: .82;
}
.privacy-link:hover,
.privacy-link:focus-visible { color: var(--accent); text-decoration: underline; opacity: 1; }
.privacy-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Top bar ---------- */
.topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  width: 100%; max-width: 100%; min-width: 0;
  padding: calc(16px + var(--safe-top))
    max(clamp(18px, 4vw, 44px), var(--safe-right)) 12px
    max(clamp(18px, 4vw, 44px), var(--safe-left));
}

.title { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.month-heading { margin: 0; line-height: 1; }

#monthLabel {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;                   /* tučný, tesný masthead — nástroj, nie časopis */
  font-style: normal;
  font-size: clamp(30px, 4.4vw, 44px);
  letter-spacing: -0.022em;
  margin: 0;
  line-height: 0.95;
}

/* Mesiac otvára mesačný pohľad — pozvi ku kliknutiu nenápadným ▾ caretom
   (užívateľ inak netuší, že je titulok interaktívny), zvýrazní sa pri hoveri. */
.month-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; border: 0; padding: 0; border-radius: 8px;
  color: inherit; background: none; font: inherit;
  -webkit-tap-highlight-color: transparent;
}
.month-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* Caret ako jemný kruhový chip → číta sa ako tlačidlo aj bez hoveru (mobil). */
.month-caret {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  color: var(--ink-soft); background: var(--card);
  border: 1px solid var(--line-strong);
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.month-caret .icon { width: 16px; height: 16px; }
.month-trigger:hover .month-caret,
.month-trigger:focus-visible .month-caret { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.month-trigger:hover #monthLabel,
.month-trigger:focus-visible #monthLabel {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
  text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
}

.week-label {
  font-size: 11.5px;
  color: var(--ink-faint);
  letter-spacing: 0.14em;
  text-transform: uppercase;          /* small tracked caption, like a page header */
}

/* Počty úloh — tichý popisok v hlavičke (footer zrušený, všetko na jednej strane) */
.counts-label {
  font-size: 11.5px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  align-self: baseline;
}

/* „Po termíne · N" odznak — zjaví sa len keď niečo visí; teplý amber ako ⚠ na doske,
   aby na seba upozornil, no nekričal modrou. */
.overdue-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: 12px; font-weight: 600;
  color: var(--warn);
  background: var(--warn-soft);
  border: 1px solid color-mix(in srgb, var(--warn) 32%, transparent);
  border-radius: 999px; padding: 4px 11px 4px 9px;
  cursor: pointer; align-self: center;
  transition: background 0.12s ease, border-color 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.overdue-pill[hidden] { display: none; }
.overdue-pill:hover { background: color-mix(in srgb, var(--warn) 18%, var(--warn-soft)); border-color: var(--warn); }
.overdue-pill:focus-visible { outline: 2px solid var(--warn); outline-offset: 2px; }
.overdue-pill-icon { display: inline-flex; }
.overdue-pill-icon .icon { width: 15px; height: 15px; }

/* „Nové zdieľané" — tichý odznak (modrý accent), rovnaký tvar ako overdue,
   objaví sa LEN keď mi niekto zdieľal naozaj novú udalosť (nie pri každej zmene) */
.newshared-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: 12px; font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  border-radius: 999px; padding: 4px 11px 4px 9px;
  cursor: pointer; align-self: center;
  transition: background 0.12s ease, border-color 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.newshared-pill[hidden] { display: none; }
.newshared-pill:hover { background: color-mix(in srgb, var(--accent) 16%, var(--accent-soft)); border-color: var(--accent); }
.newshared-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.newshared-pill-icon { display: inline-flex; }
.newshared-pill-icon .icon { width: 15px; height: 15px; }

/* „Zálohuj si dáta" — tichá neutrálna pripomienka; zjaví sa LEN keď je sync vypnutý,
   úloh je veľa a JSON záloha je stará/žiadna (dáta žijú len v tomto prehliadači). */
.backup-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: 12px; font-weight: 600;
  color: var(--ink-soft);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 11px 4px 9px;
  cursor: pointer; align-self: center;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.backup-pill[hidden] { display: none; }
.backup-pill:hover { color: var(--accent); border-color: var(--accent); }
.backup-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.backup-pill-icon { display: inline-flex; }
.backup-pill-icon .icon { width: 15px; height: 15px; }

.weeknav { display: flex; align-items: center; gap: 8px; }
/* Jemný predel medzi navigáciou týždňa a Sync/⚙ presunutými hore z pätičky */
.weeknav-sep {
  width: 1px; height: 22px; flex: none;
  background: var(--line-strong);
  margin: 0 2px;
}

.today-btn {
  font-family: inherit;
  height: 38px;
  padding: 0 18px;
  margin-right: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  background: var(--card);
  border: none;
  box-shadow: var(--sh-1);
  border-radius: 999px;
  cursor: pointer;
  transition: box-shadow 0.15s ease, color 0.15s ease;
}
.today-btn:hover { color: var(--accent); box-shadow: var(--sh-2); }

.nav-btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  font-size: 19px;
  line-height: 1;
  color: var(--ink-soft);
  background: var(--card);
  border: none;
  box-shadow: var(--sh-1);
  border-radius: 12px;
  cursor: pointer;
  transition: box-shadow 0.15s ease, color 0.15s ease, transform 0.05s ease;
}
.nav-btn:hover { color: var(--accent); box-shadow: var(--sh-2); }
.nav-btn:active { transform: scale(0.94); }

/* ---------- Board: 4 × 2 grid ---------- */
.board {
  flex: 1;
  min-height: 0;               /* nech flex dieťa môže byť nižšie ako obsah → interný scroll, nie pretečenie stránky */
  overflow-y: auto;            /* poistka: ak by sa obsah nezmestil, scrolluje sa doska, nie celá stránka */
  overflow-x: clip;            /* posuvný prechod týždňa sa čisto oreže (žiaden vodorovný scrollbar) */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(14px, 1.6vw, 20px);
  row-gap: 18px;
  padding: 10px clamp(16px, 3.2vw, 34px) 26px;
  align-items: start;
}

/* ---------- "Pridať na plochu" — plávajúca install pilulka ----------
   Pôsobí ako prvok appky, nie informačná lišta. Pláva dole v strede; z-index 35
   = nad doskou, ale pod zoomom dňa (40) aj modálmi (55), aby nič nezacláňala.
   V standalone režime sa vôbec neukáže. */
.install-pill {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 35;
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: calc(100vw - 24px);
}
/* `display:flex` prebíja UA pravidlo [hidden]{display:none} (rovnaká
   špecificita) → bez tohto by atribút hidden pilulku NESKRYL. */
.install-pill[hidden] { display: none; }

.install-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: none;
  background: var(--c-red);            /* oxblood — ladí s ikonou appky */
  color: #fff;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  padding: 11px 20px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(32, 32, 29, 0.22);
  white-space: nowrap;
}
.install-pill-btn:hover { filter: brightness(1.06); }
.install-pill-btn:active { transform: translateY(1px); }
.install-pill-icon { display: inline-flex; flex: none; }
.install-pill-icon .icon { width: 18px; height: 18px; display: block; }
.install-pill-label { line-height: 1; }

.install-pill-x {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-soft);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(32, 32, 29, 0.16);
}
.install-pill-x:hover { color: var(--ink); }

/* iOS Share nápoveda — vyskakovací popover nad pilulkou, rozbalí sa klikom. */
.install-hint {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  max-width: min(300px, calc(100vw - 28px));
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(32, 32, 29, 0.18);
  font-size: 13px;
  line-height: 1.4;
}
.install-hint[hidden] { display: none; }
.install-hint .icon { width: 18px; height: 18px; flex: none; color: var(--c-red); }
.install-hint b { font-weight: 600; }

/* Deň = mäkká plávajúca karta (soft-depth) — biely povrch, zaoblené, jemný tieň */
.day {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: 18px;
  box-shadow: var(--sh-1);
  padding: 4px 6px 10px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.day:hover { box-shadow: var(--sh-2); }

/* Jemný wash karty podľa dominantnej (časom váženej) farby dňa. Veľmi tichý —
   identita ostáva chladná biela. Dnes/víkend/Niekedy nedostanú .has-dom (JS),
   nech si držia vlastný signál a nesplývajú s dominantným dňom. */
.day.has-dom { background: linear-gradient(180deg, color-mix(in srgb, var(--dom) 7%, var(--card)), var(--card) 60%); }
/* V tmavej téme treba o čosi vyšší podiel, nech je wash nad tmavou kartou vôbec cítiť. */
:root[data-theme="dark"] .day.has-dom { background: linear-gradient(180deg, color-mix(in srgb, var(--dom) 15%, var(--card)), var(--card) 62%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .day.has-dom { background: linear-gradient(180deg, color-mix(in srgb, var(--dom) 15%, var(--card)), var(--card) 62%); }
}

/* Day header */
.day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 12px 9px;
}

.day-name {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-soft);                /* názov dňa – čitateľnejší (bol prislabý) */
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.day-date {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  order: -1;          /* date on the left, name on the right */
}

/* Dnešok = jemne nadnesená karta (nie blok) — tichý modrý nádych + väčší tieň */
.day.is-today {
  background: linear-gradient(180deg, var(--today-tint), var(--card) 38%);
  box-shadow: var(--sh-today);
  transform: translateY(-2px);
}
.day.is-today .day-date { color: var(--today-ink); }
.day.is-today .day-name { color: var(--today-ink); }

/* Víkend = teplý odtieň povrchu (osobný čas) + dátum/názov v teplej (theme-aware) */
.day.weekend { background: linear-gradient(180deg, var(--weekend), var(--card) 78%); }
.day.weekend .day-date { color: color-mix(in srgb, var(--warn) 50%, var(--ink)); }
.day.weekend .day-name { color: color-mix(in srgb, var(--warn) 62%, var(--ink-faint)); }

/* Niekedy = chladná, stlmená, plochšia „odložená" plocha (mimo časovej osi) */
.day.someday { background: var(--someday); box-shadow: 0 1px 2px rgba(40,44,52,.04); }
.day.someday .day-date { color: var(--ink-soft); font-weight: 600; font-style: normal; }
.day.someday .day-name { color: var(--ink-faint); }

/* víkend, ktorý je zároveň dnešok → vyhráva dnešok (modrá karta), nie teplá víkendová */
.day.weekend.is-today {
  background: linear-gradient(180deg, var(--today-tint), var(--card) 38%);
  box-shadow: var(--sh-today);
}

/* ---------- Task area (soft-depth — mäkké riadky, bez linajok) ---------- */
.tasks {
  list-style: none;
  margin: 0;
  padding: 2px 4px 0;
  min-height: 30px;
  transition: min-height 0.15s ease;
}

/* víkend = jemne menší/ľahší dátum (iný typ dňa); ak je víkend dnešok, dátum ostáva modrý */
.day.weekend .day-date { font-size: 14.5px; }
.day.weekend.is-today .day-date { color: var(--today-ink); }

.task {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 11px;
  transition: background 0.15s ease;
}
.task:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
/* Hover nad bodkou/blokom v dennej čiarke zvýrazní jej riadok — tematicky farbou úlohy. */
.task.colorbar-linked { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.task.has-color.colorbar-linked { background: color-mix(in srgb, var(--task-color) 16%, transparent); }

.check { position: relative; display: inline-flex; cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }

.box {
  width: 17px;
  height: 17px;
  border: 1.5px solid var(--line-strong);
  border-radius: 6px;
  background: var(--card);
  display: inline-block;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.check:hover .box { border-color: var(--accent); }

.check input:checked + .box {
  background: var(--accent-2);          /* done = sage zelená (vyhradená pre splnené) */
  border-color: var(--accent-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2 4.8-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.task-text {
  flex: 1;
  font-size: calc(14px * var(--fs));
  line-height: 1.4;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  outline: none;
  cursor: text;
}
.task-text[contenteditable="true"] { white-space: normal; overflow: visible; }

.task.done .task-text {
  color: var(--ink-faint);
  text-decoration: line-through;
  text-decoration-color: var(--ink-faint);
}
/* Hotové úlohy = zmrštený stav (nižšie, tlmené). Rozbalí sa pri HOVERI (desktop)
   alebo ťuknutí (.expanded → mobil/touch). Bez .expanded nie sú na dotyku použiteľné. */
.task.done {
  padding-top: 3px; padding-bottom: 3px;
  transition: padding 0.15s ease;
}
.task.done .task-text { font-size: calc(12.5px * var(--fs)); transition: font-size 0.15s ease; }
.task.done.expanded { padding-top: 7px; padding-bottom: 7px; }
.task.done.expanded .task-text { font-size: calc(14px * var(--fs)); }
@media (hover: hover) {
  .task.done:hover { padding-top: 7px; padding-bottom: 7px; }
  .task.done:hover .task-text { font-size: calc(14px * var(--fs)); }
}

/* ---------- Add row (sits on a ruled line) ---------- */
.add-form { display: flex; }
.add-input {                   /* contenteditable <div>, nie <input> (iOS lišty) */
  width: 100%;
  line-height: 1.4;
  white-space: nowrap;         /* jednoriadkové */
  overflow: hidden;
  border: none;
  background: none;
  font-family: inherit;
  font-size: calc(14px * var(--fs));
  color: var(--ink);
  padding: 8px 8px 8px 36px;   /* zarovná text pod text úloh (za checkboxom) */
  border-radius: 10px;
  outline: none;
  cursor: text;
  transition: background 0.12s ease;
}
.add-input:empty::before {     /* placeholder pre contenteditable */
  content: attr(data-placeholder);
  color: color-mix(in srgb, var(--ink-soft) 55%, var(--ink-faint));
  pointer-events: none;
}
.add-input:focus { background: rgba(196, 99, 59, 0.06); }

/* ---- Smart capture: rýchle pridanie úlohy aj s dátumom v texte ---- */
.smart-add {
  display: flex; align-items: center; gap: 9px;
  margin: 0 clamp(16px, 3.2vw, 34px) 12px;
  padding: 9px 15px;
  background: var(--card);
  border: none;
  border-radius: 14px;
  box-shadow: var(--sh-1);
  transition: box-shadow 0.12s ease;
}
.smart-add:focus-within { box-shadow: var(--sh-1), 0 0 0 3px var(--accent-soft); }
.smart-add-icon { display: inline-flex; flex: none; color: var(--ink-faint); }
.smart-add:focus-within .smart-add-icon { color: var(--accent); }
.smart-add-icon .icon { width: 18px; height: 18px; }
.smart-add-input {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden;
  font-family: inherit; font-size: calc(14.5px * var(--fs, 1));
  color: var(--ink); line-height: 1.4; outline: none; cursor: text;
}
.smart-add-input:empty::before {
  content: attr(data-placeholder);
  color: color-mix(in srgb, var(--ink-soft) 55%, var(--ink-faint));
  pointer-events: none;
}
.smart-add-preview {
  flex: none;
  font-size: 12px; font-weight: 500;
  color: var(--accent); background: var(--accent-soft);
  border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.smart-add-preview[hidden] { display: none; }
.smart-add-preview .chip-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle;
}
.smart-add-preview .chip-repeat { display: inline-flex; align-items: center; gap: 3px; margin-left: 7px; }
.smart-add-preview .chip-repeat .icon { width: 13px; height: 13px; }
.smart-add-preview .chip-note { display: inline-flex; align-items: center; gap: 3px; margin-left: 7px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); }
.smart-add-preview .chip-note .icon { width: 13px; height: 13px; flex: none; }

/* Výber farby priamo v rýchlom pridaní: rad bodiek (klik = naviaže farbu na úlohu).
   Slash „/farba" v texte robí to isté pre klávesnicu. */
.smart-add-colors { display: flex; align-items: center; gap: 6px; flex: none; }
.smart-add-dot {
  width: 15px; height: 15px; flex: none; padding: 0;
  border-radius: 50%; cursor: pointer;
  background: var(--dot, var(--ink-faint));
  border: 2px solid var(--card);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent);
  transition: transform 0.1s ease, box-shadow 0.12s ease;
}
.smart-add-dot:hover { transform: scale(1.18); }
.smart-add-dot.active {
  box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--dot);
  transform: scale(1.12);
}
/* Naviazaná farba podfarbí vodiacu ikonu „+" */
.smart-add.has-color .smart-add-icon { color: var(--armed, var(--accent)); }

/* Tlačidlo farby (len mobil): swatch aktuálnej farby alebo ikona palety → otvorí rad */
.smart-add-colorbtn {
  display: none; flex: none;
  width: 30px; height: 30px; padding: 0;
  align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer;
  color: var(--ink-soft); background: transparent;
  border: 1px solid var(--line-strong);
}
.smart-add-colorbtn .icon { width: 17px; height: 17px; }
.smart-add-colorbtn.has-color { background: var(--swatch); border-color: var(--swatch); }

/* Úzke obrazovky: bodky nemajú miesto v riadku → schovaj tlačidlom; klik na paletu
   vyklopí celý rad bodiek pod vstup (druhý riadok lišty). */
@media (max-width: 560px) {
  .smart-add { flex-wrap: wrap; }
  .smart-add-colorbtn { display: inline-flex; }
  .smart-add-colors { display: none; width: 100%; order: 9; justify-content: space-between; padding: 4px 2px 2px; }
  .smart-add.show-colors .smart-add-colors { display: flex; }
  .smart-add-dot { width: 22px; height: 22px; }
}

/* ---------- Footer ---------- */
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px clamp(18px, 4vw, 44px);
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-faint);
}
#counts { color: var(--ink-soft); }

/* Tichá funkcia v pätičke — len ikona + slovo, žiadny vyplnený/orámovaný button */
.sync-btn {
  font-family: inherit;
  font-size: 12.5px;
  color: var(--ink-soft);
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 5px 8px;
  cursor: pointer;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.sync-btn:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }

/* Tichý prepínač zdieľaných udalostí — borderless ikonka, ladí so sync/⚙ */
.shared-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  color: var(--ink-soft);
  background: transparent; border: none; border-radius: 9px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.shared-toggle .icon { width: 18px; height: 18px; }
.shared-toggle:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.shared-toggle.is-hiding { color: var(--ink-faint); }   /* zdieľané skryté = stlmená ikonka */
.shared-toggle[hidden] { display: none; }

/* centrálny vstup na projektovú plochu (L3) — rovnaké chrome ako ostatné lišty */
.canvas-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  color: var(--ink-soft);
  background: transparent; border: none; border-radius: 9px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.canvas-btn .icon { width: 18px; height: 18px; }
.canvas-btn:hover { color: var(--accent); background: var(--accent-soft); }
.canvas-btn[hidden] { display: none; }

/* Bodka stavu synchronizácie v tlačidle */
.sync-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  background: var(--accent-2);          /* ok = zelená (sage) */
}
.sync-dot.offline { background: #cc9329; } /* offline = oranžová */
.sync-dot.error   { background: #b9532f; } /* chyba = červená */

/* ---------- Sync panel ---------- */
.overlay {
  position: fixed;
  inset: var(--viewport-offset-top) 0 auto;
  width: 100%; height: var(--app-height);
  background: rgba(33, 31, 28, 0.32);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  z-index: 50;
  padding: calc(20px + var(--safe-top))
    calc(20px + var(--safe-right))
    calc(20px + var(--safe-bottom))
    calc(20px + var(--safe-left));
}
.overlay[hidden] { display: none; }

.sync-panel {
  position: relative;
  width: min(440px, 100%);
  min-width: 0;                      /* grid-item nesmie narásť na min-content (inak panel pretečie obrazovku) */
  max-width: 100%;
  box-sizing: border-box;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  box-shadow: 0 16px 48px rgba(33, 31, 28, 0.22);
  padding: 26px 26px 28px;
}

.panel-close {
  position: absolute;
  top: 14px; right: 16px;
  border: none; background: none;
  font-size: 24px; line-height: 1;
  color: var(--ink-faint); cursor: pointer;
}
.panel-close:hover { color: var(--accent); }

.panel-title {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 22px;
  margin: 0 0 14px;
}

.sync-msg { font-size: 14px; color: var(--ink-soft); margin: 0 0 14px; line-height: 1.5; }
.sync-hint { font-size: 12.5px; color: var(--ink-faint); margin: 10px 0 0; line-height: 1.5; }

.sync-steps { font-size: 13.5px; color: var(--ink-soft); line-height: 1.7; padding-left: 20px; margin: 0; }
.sync-steps code, .sync-msg code { background: var(--accent-soft); padding: 1px 5px; border-radius: 5px; font-size: 12.5px; }

.code-box {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--card);
  border: 1.5px dashed var(--accent);
  border-radius: 12px;
  padding: 14px 16px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 20px;
  letter-spacing: 0.04em;
  color: var(--ink);
}

/* Per-person zdieľanie: správa osôb / import v sync paneli */
.share-box { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.share-title { font-size: 13px; font-weight: 600; color: var(--ink); margin-top: 6px; }
.share-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.share-list-row { display: flex; align-items: center; gap: 8px; }
.share-list-label { flex: 1; min-width: 0; font-size: 13px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-avatar {
  width: 24px; height: 24px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; color: #fff; background: var(--ink-soft);
}
/* Tiché meno-chips na karte (vlastníkov pohľad „zdieľané s…") */
.share-chips { display: inline-flex; gap: 2px; align-items: center; margin-left: 4px; vertical-align: middle; }
.share-chips[hidden] { display: none; }
.share-chip {
  width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 8.5px; font-weight: 700; color: #fff; background: var(--ink-faint); border: 1px solid var(--card);
}
.share-chip.more { background: transparent; color: var(--ink-faint); border: none; font-size: 9.5px; width: auto; }
/* Share-picker (⋯ menu → „Zdieľať s…") */
.menu-head { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); padding: 6px 10px 2px; }
.share-pick-hint { font-size: 11px; color: var(--ink-faint); padding: 0 10px 6px; line-height: 1.45; }
.share-pick { display: flex; align-items: center; gap: 8px; width: 100%; }
.share-pick-name { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-pick-mark { flex: none; width: 16px; text-align: center; font-weight: 700; color: var(--ink-faint); }
.share-pick.on .share-pick-name { color: var(--accent); }
.share-pick.on .share-pick-mark { color: var(--accent); }   /* ✓ = zdieľané (klik odoberie túto udalosť) */
/* READ-ONLY zdieľané udalosti (príjemca): jemný prerušovaný okraj + label cez .carry-badge */
.task.shared, .focus-task.shared { border-left: 2px dashed var(--ink-faint); }
.task.shared .check, .focus-task.shared input[type="checkbox"] { opacity: 0.5; pointer-events: none; }
.task.shared .carry-badge, .focus-task.shared .focus-carry { color: var(--accent); }
.focus-tl-ev.shared { border: 1px dashed var(--ink-faint); cursor: default; }   /* read-only blok na osi */

.primary-btn {
  width: 100%;
  font-family: inherit; font-size: 15px; font-weight: 500;
  color: #fff; background: var(--accent);
  border: none; border-radius: 12px;
  padding: 13px; cursor: pointer;
  transition: filter 0.15s ease;
}
.primary-btn:hover { filter: brightness(1.05); }

/* ---------- Sprievodca ovládaním (prvé spustenie / ⚙) ---------- */
.intro-panel { width: min(400px, 100%); }
.intro-sub { margin: -6px 0 20px; font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
.intro-actions { display: flex; flex-direction: column; gap: 8px; }
.intro-skip {
  border: none; background: none; font: inherit; font-size: 13px;
  color: var(--ink-faint); cursor: pointer; padding: 7px;
}
.intro-skip:hover { color: var(--ink); }

/* zvýrazňovací rám + bublina pri skutočnom prvku (prehliadka aj kontextové hinty) */
.coach-ring {
  position: fixed; z-index: 200; pointer-events: none;
  border: 2px solid var(--accent); border-radius: 12px;
  box-shadow: 0 0 0 4px var(--accent-soft);
  transition: left 0.25s ease, top 0.25s ease, width 0.25s ease, height 0.25s ease;
}
.coach-bubble {
  position: fixed; z-index: 201;
  width: min(320px, calc(100vw - 24px));
  background: var(--card, #fff); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 14px;
  box-shadow: 0 14px 40px rgba(33, 31, 28, 0.25);
  padding: 14px 16px;
  font-size: 13.5px; line-height: 1.5;
}
.coach-bubble.hint { pointer-events: none; }   /* ťuk kdekoľvek ju zavrie (listener na dokumente) */
.coach-text { margin: 0; color: var(--ink); }
.coach-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.coach-skip {
  border: none; background: none; font: inherit; font-size: 12.5px;
  color: var(--ink-faint); cursor: pointer; padding: 4px 0;
}
.coach-skip:hover { color: var(--ink); }
.coach-dots { flex: 1; display: flex; gap: 5px; justify-content: center; }
.coach-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.coach-dots i.on { background: var(--accent); }
.coach-next {
  border: none; border-radius: 9px; background: var(--accent); color: #fff;
  font: inherit; font-size: 13px; font-weight: 500;
  padding: 8px 16px; cursor: pointer;
  transition: filter 0.15s ease;
}
.coach-next:hover { filter: brightness(1.05); }

.mini-btn {
  font-family: inherit; font-size: 13px; font-weight: 500;
  color: var(--ink); background: var(--card, #fff);
  border: 1px solid var(--line-strong); border-radius: 9px;
  padding: 8px 14px; cursor: pointer; white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.mini-btn:hover { background: var(--accent-soft); border-color: var(--accent); }
.mini-btn.ghost { border-style: dashed; color: var(--ink-soft); }

/* ---- Export / záloha panel ---- */
.export-panel .menu-group-label { margin: 4px 0 8px; }
.export-panel hr { border: none; border-top: 1px solid var(--line); margin: 16px 0; }
.export-opts { display: flex; flex-wrap: wrap; gap: 7px; }
.export-opt {
  font-family: inherit; font-size: 13px; font-weight: 500;
  color: var(--ink-soft); background: var(--card, #fff);
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 7px 13px; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.export-opt:hover:not(:disabled) { border-color: var(--accent); }
.export-opt.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.export-opt:disabled { opacity: 0.4; cursor: default; }
.export-custom { display: flex; gap: 12px; margin-top: 10px; }
.export-date { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--ink-soft); }
.export-date input {
  font-family: inherit; font-size: 14px; color: var(--ink);
  background: var(--card, #fff); border: 1px solid var(--line-strong);
  border-radius: 9px; padding: 7px 9px;
}
.export-done-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px; font-size: 13.5px; color: var(--ink-soft); cursor: pointer;
}
.export-done-row input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.export-done-row:has(input:disabled) { opacity: 0.4; cursor: default; }

.export-download {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 16px; padding: 11px;
  color: #fff; background: var(--accent); border-color: var(--accent); font-size: 14px;
}
.export-download:hover { filter: brightness(1.05); background: var(--accent); border-color: var(--accent); }
.export-download .icon { width: 17px; height: 17px; }
.export-import { width: 100%; }

.or { text-align: center; font-size: 12.5px; color: var(--ink-faint); margin: 14px 0; }

.join { display: flex; gap: 8px; }
.join input {
  flex: 1;
  font-family: inherit; font-size: 14px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink); background: var(--card);
  border: 1px solid var(--line-strong); border-radius: 9px;
  padding: 9px 12px;
}
.join input:focus { outline: none; border-color: var(--accent); }
.join input::placeholder { letter-spacing: 0.04em; color: var(--ink-faint); }

.sync-actions { margin-top: 16px; display: flex; justify-content: flex-end; }

/* ---------- Day focus (zoom into a single day) ---------- */
.day-focus {
  position: fixed;
  inset: var(--viewport-offset-top) 0 auto;
  width: 100%; height: var(--app-height);
  z-index: 40;                 /* pod modálmi (overlay 50) a menu (60), aby sa nad zoomom dali otvoriť */
  background: var(--paper);
  overflow-x: hidden;          /* posuvný prechod dňa sa čisto oreže (žiadny vodorovný scroll) */
  overflow-y: auto;
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  animation: focus-in 0.18s ease;
}
.day-focus[hidden] { display: none; }
@keyframes focus-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.focus-stage {
  min-height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(14px, 2.5vw, 36px);
  padding: clamp(20px, 5vh, 46px) clamp(18px, 4vw, 44px) 48px;
}
.focus-panel {
  width: min(620px, 100%); flex: 0 1 620px;
  /* ľahko „vykrojený" deň z pozadia: svetlejší podklad + tenký rámik + mäkký tieň */
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--ink) 7%, transparent);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(32, 32, 29, 0.06);
  padding: 14px 20px 20px;
}

/* faint peek of the neighbouring days (left = previous, right = next) */
.focus-peek {
  flex: 1 1 0; max-width: 280px; min-width: 0; align-self: stretch;
  padding-top: 92px;                 /* sink the list below the big centre header */
  opacity: 0.4; cursor: pointer;
  transition: opacity 0.15s ease;
}
.focus-peek:hover { opacity: 0.66; }
.focus-peek[hidden] { display: none; }
@media (max-width: 1080px) { .focus-peek { display: none; } }

.peek-head {
  font-family: "Inter", system-ui, sans-serif; font-style: normal; font-weight: 600;
  font-size: 14px; color: var(--ink-soft); letter-spacing: 0.01em;
  padding-bottom: 9px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.peek-list { list-style: none; margin: 0; padding: 0; }
.peek-task { display: flex; align-items: center; gap: 9px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.peek-box { width: 14px; height: 14px; border: 1.5px solid var(--line-strong); border-radius: 5px; flex: none; }
.peek-task.done .peek-box { background: var(--accent-2); border-color: var(--accent-2); }
.peek-text { font-size: calc(13.5px * var(--fs)); color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.peek-task.done .peek-text { text-decoration: line-through; color: var(--ink-faint); }
.peek-empty { font-size: 13px; color: var(--ink-faint); font-style: italic; padding: 12px 2px; }

/* Mini os dňa v peeku (režim časovej osi) — komprimovaný tvar susedovho dňa */
.peek-strip { position: relative; margin: 6px 0 10px 32px; border-left: 1px solid var(--line-strong); }
.peek-hr { position: absolute; left: -32px; right: 0; border-top: 1px solid var(--line); pointer-events: none; }
.peek-hr i {
  position: absolute; top: -7px; left: 0; font-style: normal;
  font-size: 9px; color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.peek-ev {
  position: absolute; left: 5px; right: 0; overflow: hidden;
  --pk: var(--bar-neutral);
  background: color-mix(in srgb, var(--pk) 14%, var(--card));
  border: 1px solid color-mix(in srgb, var(--pk) 38%, transparent);
  border-radius: 6px; padding: 0 6px;
  font-size: calc(10.5px * var(--fs)); line-height: 1.35; color: var(--ink-soft);
  display: flex; gap: 5px; align-items: baseline; white-space: nowrap;
}
.peek-ev-time { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; font-size: calc(9.5px * var(--fs)); }
.peek-ev-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.peek-ev.done { opacity: 0.55; }
.peek-ev.done .peek-ev-text { text-decoration: line-through; color: var(--ink-faint); }

.focus-back {
  display: inline-flex; align-items: center; gap: 4px;
  border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 13px; color: var(--ink-soft);
  padding: 6px 0; margin-bottom: 14px; letter-spacing: 0.02em;
}
.focus-back:hover { color: var(--accent); }

.focus-head {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 14px; margin-bottom: 6px;
  border-bottom: 2px solid var(--ink);
}
.focus-title { flex: 1; text-align: center; }
.focus-dayname {
  display: block;
  font-size: 12px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint);
}
.focus-daydate {
  margin: 2px 0 0;
  font-family: "Inter", system-ui, sans-serif; font-weight: 700;
  font-size: clamp(26px, 6vw, 40px); letter-spacing: -0.022em;
}
/* Dnešok aj v zoom-e nesie rovnakú tónovanú farbu ako v týždni (--today-tint
   má svetlú aj tmavú variantu → korektné v oboch režimoch). */
.day-focus.is-today .focus-head {
  border-bottom-color: var(--today-ink);
  background: var(--today-tint);
  border-radius: 12px 12px 0 0;
  padding: 12px 16px 14px;
}
.day-focus.is-today .focus-daydate,
.day-focus.is-today .focus-dayname { color: var(--today-ink); }

.focus-daynav {
  flex: none;
  width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--card);
  color: var(--ink-soft); font-size: 20px; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.focus-daynav:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }

.focus-list { list-style: none; margin: 0; padding: 0; }

/* Prepínač Zoznam ↔ Časová os (rovnaký vzor ako mesiac: Kalendár/Agenda) */
.focus-modes { display: flex; justify-content: center; gap: 2px; margin: 0 0 12px; }
.focus-modes[hidden] { display: none; }
.focus-mode-btn {
  border: 1px solid var(--line); background: var(--card); cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
  padding: 5px 14px;
}
.focus-mode-btn:first-child { border-radius: 9px 0 0 9px; }
.focus-mode-btn:last-child { border-radius: 0 9px 9px 0; border-left: 0; }
.focus-mode-btn.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

/* Časová os: scrollovateľný kontajner s hodinovou mriežkou a blokmi udalostí */
.focus-timeline {
  position: relative;
  max-height: min(560px, calc(var(--app-height) - 180px));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.focus-timeline[hidden] { display: none; }
.focus-tl-lane { position: relative; margin-left: 52px; }
.focus-tl-hour { position: absolute; left: -52px; right: 0; border-top: 1px solid var(--line); pointer-events: none; }
.focus-tl-hour span {
  position: absolute; left: 0; top: -7px; width: 42px; text-align: right;
  font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.focus-tl-ev {
  position: absolute; left: 6px; right: 10px;
  display: flex; align-items: baseline; gap: 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: 11px;
  box-shadow: var(--sh-1); padding: 5px 12px; overflow: hidden;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  transition: box-shadow .12s ease, transform .12s ease;
}
.focus-tl-ev:hover { box-shadow: var(--sh-2); }
/* kolidujúce bloky vedľa seba (stĺpce) — tesnejší padding + menšia medzera */
.focus-tl-ev.multicol { padding: 4px 8px; gap: 5px; }
.focus-tl-ev.multicol .focus-tl-time { font-size: 11px; }
/* uchopený blok — jemne nadnesený (Apple-pocit) */
.focus-tl-ev.dragging {
  cursor: grabbing; z-index: 6; transform: scale(1.012);
  border-color: var(--accent);
  box-shadow: 0 8px 18px rgba(20,30,60,.16), 0 22px 44px -12px rgba(20,30,60,.42);
  transition: none;
}
/* blok ťahaný POD os = bude bez času (vizuálny náznak pred pustením) */
.focus-tl-ev.will-unsched { opacity: .4; }
/* plávajúci čas počas ťahania/resize */
.tl-pill {
  position: fixed; z-index: 70; pointer-events: none;
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 600;
  padding: 3px 8px; border-radius: 7px; box-shadow: var(--sh-2);
  font-variant-numeric: tabular-nums;
}
.tl-pill[hidden] { display: none; }
.focus-tl-ev.has-color::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 4px;
  border-radius: 3px; background: var(--task-color);
}
/* resize úchyty na okrajoch bloku (grip sa ukáže pri hoveri / počas ťahania) */
.focus-tl-rz { position: absolute; left: 0; right: 0; height: 7px; cursor: ns-resize; z-index: 2; touch-action: none; }
.focus-tl-rz.top { top: 0; } .focus-tl-rz.bot { bottom: 0; }
.focus-tl-rz::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  width: 26px; height: 3px; border-radius: 2px; background: var(--accent);
  opacity: 0; transition: opacity .12s ease;
}
.focus-tl-rz.top::after { top: 2px; } .focus-tl-rz.bot::after { bottom: 2px; }
.focus-tl-ev:hover .focus-tl-rz::after, .focus-tl-ev.dragging .focus-tl-rz::after { opacity: .65; }

.focus-tl-time { flex: none; font-size: calc(12px * var(--fs)); font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.focus-tl-name { flex: 1; min-width: 0; font-size: calc(14px * var(--fs)); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.focus-tl-ev.done { opacity: .6; }
.focus-tl-ev.done .focus-tl-name { text-decoration: line-through; }

.focus-tl-split { margin: 16px 0 2px; border-top: 1px dashed var(--line-strong); }
.focus-tl-split[hidden] { display: none; }
.focus-tl-below:empty { display: none; }
/* Dolné (nečasované) riadky sa ŤAHAJÚ CELÉ na os (text aj grip). touch-action:none →
   presun sa neperie so scrollom (rýchly ťah scrolluje overlay manuálne); grab kurzor;
   user-select:none nech sa pri ťahaní nevyberá text. Tlačidlá (✎/⋯/←/→) ostávajú klikateľné. */
#focusTlBelow .focus-task { touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
#focusTlBelow .focus-task.dragging { cursor: grabbing; }
#focusTlBelow .focus-grip { display: inline-flex; align-items: center; opacity: .6; }   /* viditeľný hint aj na dotyku */
/* Čiara pustenia na osi (kam úloha padne) */
.tl-drop-line {
  position: absolute; left: 0; right: 8px; height: 0;
  border-top: 2px dashed var(--accent); z-index: 4; pointer-events: none;
}
.tl-drop-line[hidden] { display: none; }
/* „Pilulka" ťahanej nečasovanej úlohy (jednoduchá, konzistentná na iOS) */
.tl-drag-ghost {
  position: fixed; z-index: 80; pointer-events: none; max-width: 240px;
  padding: 7px 13px; background: var(--card); border: 1px solid var(--accent);
  border-radius: 10px; box-shadow: 0 10px 26px rgba(0,0,0,.22);
  font-size: 13px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.focus-task {
  position: relative;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
  touch-action: pan-y;                 /* zvislý scroll áno; vodorovný swipe riešime sami */
}
.focus-task.has-color::before {        /* farebný prúžok – rovnako ako na week board */
  content: "";
  position: absolute;
  left: -8px; top: 10px; bottom: 10px;
  width: 4px; border-radius: 3px;
  background: var(--task-color, transparent);
}
.focus-task .check { margin-top: 2px; }
.focus-task-body { flex: 1; min-width: 0; }
.focus-task-text { display: block; font-size: calc(16px * var(--fs)); line-height: 1.35; color: var(--ink); word-break: break-word; }
.focus-task.done .focus-task-text {
  color: var(--ink-faint); text-decoration: line-through; text-decoration-color: var(--ink-faint);
}
/* Hotové úlohy v zoom-e: zmrštené (nižšie, tlmené); hover (desktop) / ťuknutie (.expanded) rozbalí. */
.focus-task.done {
  padding-top: 6px; padding-bottom: 6px;
  opacity: 0.58;
  transition: opacity 0.15s ease, padding 0.15s ease;
}
.focus-task.done .focus-task-text { font-size: calc(13.5px * var(--fs)); transition: font-size 0.15s ease; }
.focus-task.done .focus-task-note { display: none; }   /* poznámka skrytá v zmrštenom stave */
.focus-task.done.expanded { opacity: 1; padding-top: 14px; padding-bottom: 14px; }
.focus-task.done.expanded .focus-task-text { font-size: calc(16px * var(--fs)); }
.focus-task.done.expanded .focus-task-note:not([hidden]) { display: -webkit-box; }
@media (hover: hover) {
  .focus-task.done:hover { opacity: 1; padding-top: 14px; padding-bottom: 14px; }
  .focus-task.done:hover .focus-task-text { font-size: calc(16px * var(--fs)); }
  .focus-task.done:hover .focus-task-note:not([hidden]) { display: -webkit-box; }
}
.focus-task-note {
  margin-top: 4px;
  font-size: calc(13px * var(--fs)); line-height: 1.4; color: var(--ink-soft); white-space: pre-wrap;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.focus-task-note[hidden] { display: none; }

/* Klikateľný odkaz v texte/poznámke — ikona + názov stránky (namiesto surovej URL) */
.tlink {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--accent); text-decoration: none; font-weight: 500;
  border-radius: 5px; padding: 0 3px; margin: 0 -1px;
  vertical-align: baseline; max-width: 100%;
}
.tlink span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tlink .icon { width: 0.92em; height: 0.92em; flex: none; }
.tlink:hover { text-decoration: underline; background: var(--accent-soft); }

.focus-task-actions { flex: none; display: flex; align-items: center; gap: 2px; }
.focus-move, .focus-menu {
  border: none; background: none; cursor: pointer;
  color: var(--ink-faint); font-size: 16px; line-height: 1;
  padding: 6px; border-radius: 8px;
  transition: background .12s ease, color .12s ease;
}
.focus-move:hover, .focus-menu:hover { background: var(--accent-soft); color: var(--accent); }
.focus-move[disabled] { opacity: 0; pointer-events: none; }

/* the WHOLE row is the drag surface → grab/grabbing hand everywhere
   except the interactive controls (checkbox, note, move, menu). */
.focus-task[draggable="true"] { cursor: grab; }
.focus-task[draggable="true"].dragging { cursor: grabbing; }
.focus-task-body { user-select: none; }
.focus-task .check, .focus-note, .focus-move, .focus-menu { cursor: pointer; }
.focus-grip { color: var(--ink-faint); font-size: 15px; padding: 0 3px; opacity: 0.5; user-select: none; }
.focus-task:hover .focus-grip { opacity: 0.8; }
.focus-note {
  border: none; background: none; color: var(--ink-faint);
  font-size: 15px; line-height: 1; padding: 6px; border-radius: 8px;
  transition: background 0.12s ease, color 0.12s ease;
}
.focus-note:hover { background: var(--accent-soft); color: var(--accent); }
.focus-note.has-note { color: var(--accent); }

/* move-arrow tooltip names the target day ("→ Streda 24. jún") */
.focus-move { position: relative; }
.focus-move[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 7px); right: 0;
  white-space: nowrap;
  background: var(--ink); color: var(--paper);
  font-size: 12px; padding: 5px 9px; border-radius: 7px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  pointer-events: none; z-index: 3;
}

/* faint neighbour-day labels beside the nav arrows (peek of where things go) */
.focus-nav-side { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 66px; }
.focus-nav-label { font-size: 10.5px; line-height: 1.15; text-align: center; color: var(--ink-faint); }
.focus-nav-side:hover .focus-nav-label { color: var(--accent); }

/* note editor opened FROM the day-focus slides in from the right */
.overlay.from-focus { place-items: stretch; justify-items: end; padding: 0; }
.overlay.from-focus .detail-panel {
  width: min(460px, 100%); height: 100%;
  border-radius: 18px 0 0 18px;
  animation: slide-right 0.2s ease;
}
.overlay.from-focus .detail-note { flex: 1; min-height: 220px; }
@keyframes slide-right { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* bullet toolbar above the note */
.note-toolbar { display: flex; gap: 8px; }
.note-toolbar { display: flex; gap: 8px; }
.note-tool {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: 12.5px; color: var(--ink-soft);
  background: var(--card); border: 1px solid var(--line-strong); border-radius: 8px;
  padding: 4px 10px; cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.note-tool .icon { width: 15px; height: 15px; }
.note-tool:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }

.focus-add { margin-top: 12px; }
.focus-add-input {             /* contenteditable <div>, nie <input> */
  width: 100%; height: 46px; line-height: 46px;
  white-space: nowrap; overflow: hidden;
  border: none; border-bottom: 1px solid var(--line);
  background: none; font-family: inherit; font-size: calc(16px * var(--fs)); color: var(--ink);
  padding: 0 4px; outline: none; cursor: text;
}
.focus-add-input:empty::before { content: attr(data-placeholder); color: var(--ink-faint); pointer-events: none; }
.focus-add-input:focus { border-bottom-color: var(--accent); }

.focus-empty {
  text-align: center; color: var(--ink-faint);
  font-family: "Inter", system-ui, sans-serif; font-style: normal; font-size: 15px;
  padding: 38px 0 18px; margin: 0;
}
.focus-empty[hidden] { display: none; }

/* the whole day header invites zooming into that day */
.day-head { cursor: pointer; }
.day-head:hover .day-date,
.day-head:hover .day-name { color: var(--accent); }
/* Podčiarknutie dátumu pri hoveri — viditeľný náznak "klikni = zoom" aj na
   dnešnom dni, ktorý je už v accent farbe (inak by sa pri hoveri nezmenil). */
.day-head:hover .day-date {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.day.is-today .day-head:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
/* dnešok ostáva amber aj pri hoveri (nie modrý accent) */
.day.is-today .day-head:hover .day-date,
.day.is-today .day-head:hover .day-name { color: var(--today-ink); }

/* dragging a task to reorder it within the focused day */
.focus-task.dragging { opacity: 0.45; }
.focus-task.drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.focus-task.drop-after { box-shadow: inset 0 -2px 0 var(--accent); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
}

@media (max-width: 560px) {
  /* minmax(0,1fr) (nie holé 1fr) → karta sa nikdy neroztiahne nad šírku
     obrazovky kvôli dlhému názvu úlohy; text sa namiesto toho skráti „…". */
  .board { grid-template-columns: minmax(0, 1fr); row-gap: 13px; padding: 6px 14px 26px; }
  .topbar {
    padding: calc(16px + var(--safe-top)) calc(14px + var(--safe-right)) 10px calc(14px + var(--safe-left));
    gap: 10px;
  }
  .title { width: 100%; min-width: 0; gap: 8px 12px; }
  #monthLabel { font-size: clamp(28px, 10vw, 36px); }
  /* Hlavička je na mobile tesná → Sync len ikona+bodka, predel preč; ⚙ a šípky ostávajú */
  .weeknav { flex: 1 1 100%; width: auto; max-width: 100%; min-width: 0; gap: 4px; justify-content: space-between; }
  .weeknav-sep { display: none; }
  .weeknav .sync-label { display: none; }
  .weeknav .sync-btn { width: 32px; height: 34px; padding: 5px; justify-content: center; }
  .weeknav .sync-btn .icon { margin-right: 0; }
  .weeknav .today-btn { height: 36px; padding: 0 12px; margin-right: 0; font-size: 13px; }
  .weeknav .nav-btn, .weeknav .view-toggle { width: 36px; height: 36px; }
  .weeknav .canvas-btn, .weeknav .shared-toggle, .weeknav .settings-btn { width: 32px; height: 34px; }
  .counts-label { display: none; }
  .focus-menu { font-size: 18px; padding: 8px 7px; }

  /* Dni = naskladané mäkké karty (dnešok/víkend/Niekedy si nesú vzhľad zo základných pravidiel) */
  .day { padding: 4px 6px 8px; }
  .day.is-today { transform: none; }   /* na mobile bez nadvihnutia, nech karty držia rovný stĺpec */
}

/* 320–360 px: všetky vstupy (vrátane voliteľného filtra zdieľaných) ostanú
   dostupné v jednom riadku; zmenšuje sa chrome, nie text ani počet funkcií. */
@media (max-width: 360px) {
  .weeknav { gap: 2px; }
  .weeknav .today-btn { flex: 1 1 auto; min-width: 44px; max-width: 58px; padding: 0 8px; }
  .weeknav .nav-btn, .weeknav .view-toggle { width: 34px; height: 34px; flex: 0 0 34px; }
  .weeknav .canvas-btn, .weeknav .shared-toggle,
  .weeknav .sync-btn, .weeknav .settings-btn { width: 28px; height: 32px; flex: 0 0 28px; padding: 4px; }
}

/* ───────────────────────────────────────────────────────────
   Dark theme  — automaticky podľa systému (ak nie je zvolené
   "light"), alebo manuálne cez [data-theme="dark"].
   ─────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  --paper: #15171c;
  --ink: #e6e9ee;
  --ink-soft: #9aa1ac;
  --ink-faint: #929ba8;
  --line: #262a31;
  --line-strong: #3a4049;
  --accent: #5b8cf2;
  --accent-soft: #1d2741;
  --accent-2: #45b07b;
  --today-tint: #1b2740;
  --today-ink: #79a3f4;
  --warn: #e0a44a;
  --warn-soft: #2c2414;
  --danger: #e8634f;
  --c-red: #e07559; --c-amber: #dfa849; --c-green: #5fb583; --c-teal: #3fb3a7;
  --c-blue: #6ea2e3; --c-violet: #ad8ad8; --c-rose: #de83a6; --c-slate: #98a3b2;
  --bar-neutral: #5a6472;
  --card: #1d2026;
  --weekend: #2b2620; --someday: #181b21;
  --sh-1: 0 1px 2px rgba(0,0,0,.35), 0 6px 16px -6px rgba(0,0,0,.55);
  --sh-2: 0 2px 6px rgba(0,0,0,.4), 0 14px 30px -10px rgba(0,0,0,.65);
  --sh-today: 0 3px 10px rgba(40,80,180,.30), 0 18px 42px -12px rgba(0,0,0,.6);
}

/* Svetelný prechod podkladu aj v tmavej téme — svetlý gradient tela stavia na
   color-mix s --ink, ktorý je v dark palete SVETLÝ (dole by zosvetľoval namiesto
   stmavenia), preto explicitné tmavé hodnoty: hore jemné svetlo, dole tma. */
:root[data-theme="dark"] body {
  background-image: radial-gradient(120% 80% at 50% -8%, #1b1e25 0%, var(--paper) 55%, #101216 100%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --paper: #15171c;
    --ink: #e6e9ee;
    --ink-soft: #9aa1ac;
    --ink-faint: #929ba8;
    --line: #262a31;
    --line-strong: #3a4049;
    --accent: #5b8cf2;
    --accent-soft: #1d2741;
    --accent-2: #45b07b;
    --today-tint: #1b2740;
    --today-ink: #79a3f4;
    --warn: #e0a44a;
    --warn-soft: #2c2414;
    --danger: #e8634f;
    --c-red: #e07559; --c-amber: #dfa849; --c-green: #5fb583; --c-teal: #3fb3a7;
    --c-blue: #6ea2e3; --c-violet: #ad8ad8; --c-rose: #de83a6; --c-slate: #98a3b2;
    --bar-neutral: #5a6472;
    --card: #1d2026;
    --weekend: #2b2620; --someday: #181b21;
    --sh-1: 0 1px 2px rgba(0,0,0,.35), 0 6px 16px -6px rgba(0,0,0,.55);
    --sh-2: 0 2px 6px rgba(0,0,0,.4), 0 14px 30px -10px rgba(0,0,0,.65);
    --sh-today: 0 3px 10px rgba(40,80,180,.30), 0 18px 42px -12px rgba(0,0,0,.6);
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) body {
    background-image: radial-gradient(120% 80% at 50% -8%, #1b1e25 0%, var(--paper) 55%, #101216 100%);
  }
}

/* ───────────────────────────────────────────────────────────
   Per-column task count (deň v hlavičke)
   ─────────────────────────────────────────────────────────── */
.day-count {
  margin-left: auto;
  margin-right: 8px;
  min-width: 18px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-soft);                /* počet úloh – čitateľnejší */
  font-variant-numeric: tabular-nums;
}
.day-count:empty { display: none; }
.day.is-today .day-count { color: var(--today-ink); }

/* Per-day zoradenie — malé tlačidlo v hlavičke dňa (vpravo) */
.day-sort {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; cursor: pointer; padding: 0;
  align-self: center;
  color: var(--ink-faint); opacity: 0.4;
  transition: opacity 0.12s ease, color 0.12s ease;
}
.day-sort .icon { width: 15px; height: 15px; }
.day-head:hover .day-sort { opacity: 0.85; }
.day-sort:hover { color: var(--accent); opacity: 1; }
.day-sort.active { color: var(--accent); opacity: 1; }
.day.is-today .day-sort.active { color: var(--today-ink); }

/* Sort popover — užšie ako plné menu úlohy */
.task-menu.sort-menu { width: auto; min-width: 168px; }
.menu-item.active { color: var(--accent); font-weight: 600; }
.menu-item.active .icon { color: var(--accent); }

/* ───────────────────────────────────────────────────────────
   Task: farebný prúžok, badge opakovania, menu tlačidlo
   ─────────────────────────────────────────────────────────── */
.task { position: relative; }
.task.has-color::before {
  content: "";
  position: absolute;
  left: -8px; top: 4px; bottom: 4px;     /* vyšší prúžok → lepšie viditeľný */
  width: 4px; border-radius: 3px;        /* hrubší (3 → 4 px) */
  background: var(--task-color, transparent);
}

.recur-badge {
  font-size: 11px;
  color: var(--ink-faint);
  line-height: 1;
  flex: 0 0 auto;
  margin-left: -2px;
}
.task.done .recur-badge { opacity: 0.5; }

/* "prenesené z minulosti" — decentný amber popisok (samovysvetľujúci text) */
/* výraznejší, no nenápadný chip — viditeľný "bežným pohľadom", neprebije poznámku */
.carry-badge {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: lowercase;
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 16%, transparent);
  border-radius: 5px;
  padding: 1px 6px;
  white-space: nowrap;
}
.task.done .carry-badge { opacity: 0.5; }

/* ── Naplánovaná podúloha na ploche: tichý štítok „krok úlohy: <rodič>" ── */
.parent-badge {
  flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; color: var(--ink-faint);
}
.parent-badge[hidden] { display: none; }
/* 6c: klikateľný „↳ rodič" štítok = „nazrieť do podúlohy" (celý text/poznámka) */
.parent-badge.peekable, .focus-parent.peekable, .focus-tl-parent.peekable { cursor: pointer; }
.parent-badge.peekable:hover, .focus-parent.peekable:hover, .focus-tl-parent.peekable:hover { color: var(--accent); text-decoration: underline; }
.parent-badge .icon { width: 13px; height: 13px; flex: 0 0 auto; }
.parent-badge .parent-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 11em; }
.focus-parent {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--ink-faint); margin-top: 1px;
}
.focus-parent[hidden] { display: none; }
.focus-parent .icon { width: 14px; height: 14px; flex: 0 0 auto; }
.focus-parent .parent-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* krok je „normálna položka", len jemne odlíšená (štítok nesie význam) */
.task.subtask .task-text, .focus-task.subtask .focus-task-text { font-style: italic; }

/* tichá „väzba": krátke zvýraznenie spriaznených kariet po kliku */
@keyframes linkFlash {
  0%, 60% { box-shadow: 0 0 0 2px var(--accent), 0 0 0 6px var(--accent-soft); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.link-flash { animation: linkFlash 1.5s ease; border-radius: 8px; }

/* parent štítok v bloku na časovej osi */
.focus-tl-parent {
  display: flex; align-items: center; gap: 3px;
  font-size: 10px; color: var(--ink-faint); opacity: .85; margin-top: 1px; min-width: 0;
}
.focus-tl-parent .icon { width: 12px; height: 12px; flex: 0 0 auto; }
.focus-tl-parent span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.focus-tl-ev.subtask .focus-tl-name { font-style: italic; }

/* v zoom-e plný popisok "Presunuté z 20. jún" pod názvom úlohy */
.focus-carry {
  display: inline-block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 600;
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 16%, transparent);
  border-radius: 6px;
  padding: 1px 8px;
}
/* prázdny/neaktívny marker MUSÍ zmiznúť — `display:inline-block` inak prebije UA [hidden]
   (rovnaký gotcha ako pri .overlay[hidden]); bez toho presvital bledý chip pod časom */
.focus-carry[hidden] { display: none; }

/* ---------- „Po termíne" ⚠ marker (auto-presun zrušený → úloha ostáva na svojom dni) ---------- */
.overdue-badge, .focus-overdue {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  color: var(--warn);
}
.overdue-badge[hidden], .focus-overdue[hidden] { display: none; }
.overdue-badge .icon { width: 15px; height: 15px; }
.focus-overdue { margin-left: 6px; vertical-align: middle; }
.focus-overdue .icon { width: 16px; height: 16px; }
.task.is-overdue .task-time, .focus-task.is-overdue .focus-time { color: var(--warn); }
.task.done .overdue-badge, .focus-task.done .focus-overdue { display: none; }

/* Prekrytie blokov — tlmený neutrálny náznak (dva krúžky), zámerne NIE amber/červená
   a slabší než po-termíne, nech nie je rušivý. */
.overlap-badge, .focus-overlap {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  color: var(--ink-faint); opacity: .85;
}
.overlap-badge[hidden], .focus-overlap[hidden] { display: none; }
.overlap-badge .icon { width: 14px; height: 14px; }
.focus-overlap { margin-left: 6px; vertical-align: middle; }
.focus-overlap .icon { width: 15px; height: 15px; }
.task.done .overlap-badge, .focus-task.done .focus-overlap { display: none; }

/* Tichý marker „má kroky" — nenápadná zaškrtávacia ikonka + N/M (hotové/celkom).
   Neutrálny --ink-faint (nie alarm); skrytý, keď úloha kroky nemá. */
.steps-badge, .focus-steps {
  display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto;
  color: var(--ink-faint); cursor: pointer;
  font-size: 11px; font-variant-numeric: tabular-nums; line-height: 1;
}
.steps-badge[hidden], .focus-steps[hidden] { display: none; }
.steps-badge .icon, .focus-steps .icon { width: 14px; height: 14px; }
.focus-steps { margin-left: 6px; vertical-align: middle; }
.steps-badge.all-done, .focus-steps.all-done { color: var(--accent-2); }   /* všetko hotové → tlmená zelená */
.steps-count { font-weight: 600; }
.task.done .steps-badge, .focus-task.done .focus-steps { opacity: 0.5; }

/* ---------- Čas úlohy (voliteľný) ---------- */
.task-time {
  flex: 0 0 auto;
  font-size: calc(11.5px * var(--fs));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);   /* čas = metadáta, nie akcia — modrá ostáva dnešku a interakcii */
  white-space: nowrap;
}
.task.done .task-time { color: var(--ink-faint); }
.focus-task-headline { display: block; }
.focus-task-headline .focus-task-text { display: inline; }
.focus-recur { color: var(--ink-faint); margin-right: 6px; }
.focus-recur .icon { width: 15px; height: 15px; vertical-align: middle; }
.focus-task.done .focus-recur { opacity: 0.5; }
.focus-time {
  font-size: calc(14px * var(--fs));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);   /* rovnaká logika ako .task-time — tichá šedá */
  margin-right: 8px;
}
.focus-task.done .focus-time { color: var(--ink-faint); }

/* ---------- Pole na čas v detaile ---------- */
.detail-time-row { display: flex; align-items: center; gap: 8px; margin: 4px 0 2px; flex-wrap: wrap; }
.detail-time-icon { display: inline-flex; color: var(--ink-soft); }
.detail-time-icon .icon { width: 16px; height: 16px; }
.detail-lane-row { display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; }
.detail-lane-row[hidden] { display: none; }
/* Etapa 4 — sekcia „Súvislosti" (linky) v detaile */
.detail-links-wrap { margin: 10px 0 2px; }
.detail-links-wrap[hidden] { display: none; }
.detail-links-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); margin: 0 2px 4px; }
.detail-links { display: flex; flex-direction: column; }
.detail-link-row {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 8px; border: none; background: none; border-radius: 9px;
  font: inherit; text-align: left; color: var(--ink);
}
.detail-link-row:hover { background: var(--accent-soft); }
.detail-link-row .dl-open {
  display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0;
  padding: 0; border: none; background: none; color: inherit; font: inherit;
  text-align: left; cursor: pointer;
}
.detail-link-row .dl-dir { flex: 0 0 auto; color: var(--accent); font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.detail-link-row.is-required .dl-dir { font-weight: 900; text-shadow: 0 0 0.01px currentColor; }
.detail-link-row .dl-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.detail-link-row .dl-lane { flex: 0 0 auto; font-size: 11px; color: var(--ink-faint); }
/* tiché „×" spojenia — zjaví sa výraznejšie až pri hoveri riadku; červená = deštrukcia vzťahu */
.detail-link-row .dl-unlink {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; border: none; background: transparent;
  border-radius: 6px; color: var(--ink-faint); opacity: 0.55; cursor: pointer;
}
.detail-link-row .dl-unlink .icon { width: 13px; height: 13px; }
.detail-link-row:hover .dl-unlink { opacity: 1; }
.detail-link-row .dl-unlink:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.detail-lane { flex: 1; min-width: 0; }
.detail-time, .detail-date, .detail-lane {
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 5px 8px;
}
.detail-time:focus, .detail-date:focus { outline: none; border-color: var(--accent); }
.detail-time-clear {
  border: none; background: none; cursor: pointer;
  color: var(--ink-faint); font-size: 18px; line-height: 1; padding: 0 4px;
}
.detail-time-clear:hover { color: var(--accent); }
.detail-time-clear[hidden] { display: none; }

/* Voliteľné trvanie — pole sa ukáže, len keď je nastavené; inak nenápadné "+ trvanie". */
.detail-dur { display: inline-flex; align-items: center; gap: 4px; }
.detail-dur[hidden] { display: none; }
.detail-dur-input {
  width: 56px; font-family: inherit; font-size: 14px; color: var(--ink);
  background: var(--card); border: 1px solid var(--line-strong);
  border-radius: 8px; padding: 5px 8px;
}
.detail-dur-input:focus { outline: none; border-color: var(--accent); }
.detail-dur-unit { font-size: 13px; color: var(--ink-soft); }
.detail-adddur {
  border: none; background: none; cursor: pointer; font-family: inherit;
  font-size: 13px; color: var(--ink-faint); padding: 4px 6px; border-radius: 6px;
}
.detail-adddur:hover { color: var(--accent); background: var(--accent-soft); }
.detail-adddur[hidden] { display: none; }

.menu-btn {
  border: none;
  background: none;
  color: var(--ink-faint);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  border-radius: 6px;
  opacity: 0;
  transition: opacity 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.task:hover .menu-btn { opacity: 1; }
.menu-btn:hover { color: var(--accent); background: var(--accent-soft); }

.task.dragging { opacity: 0.45; }

/* touch drag (mobil): plávajúci klon ťahanej úlohy */
.touch-drag-clone {
  position: fixed; z-index: 80; pointer-events: none;
  margin: 0; padding: 0 10px; list-style: none;
  background: var(--card); border-radius: 9px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
  opacity: 0.94;
}
.task.touch-dragging { opacity: 0.35; }
/* "uchopené" po podržaní — náznak, že drag začal (ešte pred pohybom) */
.task.touch-armed {
  background: var(--accent-soft);
  border-radius: 8px;
  transition: background 0.12s ease;
}

/* ───────────────────────────────────────────────────────────
   Drag & drop: zvýraznenie cieľového stĺpca
   ─────────────────────────────────────────────────────────── */
.day.drag-over .tasks {
  background-color: var(--accent-soft);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1.5px var(--accent);
}

/* ───────────────────────────────────────────────────────────
   Per-task popover menu
   ─────────────────────────────────────────────────────────── */
.task-menu {
  position: fixed;
  z-index: 60;
  width: 200px;
  max-width: calc(100vw - 16px);
  /* Žiadne okno nesmie pretiecť tak, že sa k jeho obsahu nedá dostať: vždy sa
     vojde do viewportu (max-height) a ak je vysoké, scrolluje vnútri. */
  max-height: calc(var(--app-height) - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  animation: menuIn 0.1s ease;
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.task-menu hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 4px 2px;
}

.menu-item {
  font-family: inherit;
  font-size: 13.5px;
  text-align: left;
  color: var(--ink);
  background: none;
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}
.menu-item .icon { width: 16px; height: 16px; color: var(--ink-soft); }
.menu-item:hover { background: var(--accent-soft); }
/* Úroveň (vrstvy): dvojriadková položka — názov + tichý popis čo odomyká */
.level-item { align-items: flex-start; }
.level-item .icon { margin-top: 1px; flex: 0 0 auto; }
.level-body { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.level-name { font-weight: 500; }
.level-item.active .level-name { font-weight: 600; }
.level-desc { font-size: 11.5px; color: var(--ink-faint); }
.menu-hint { margin: 2px 4px 4px; font-size: 11px; color: var(--ink-faint); line-height: 1.3; }
.detail-meta { display: inline-flex; align-items: center; gap: 6px; }
.detail-meta .icon { width: 14px; height: 14px; }
/* mazanie — jasne deštruktívne (červená), nie accent; kôš sa pri hoveri zatrasie */
.menu-item.danger { color: var(--danger); font-weight: 500; }
.menu-item.danger .icon { color: var(--danger); }
.menu-item.danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.menu-item.danger:hover .icon { animation: trash-shake 0.4s ease; transform-origin: 50% 30%; }
.hard-block-menu { width: min(360px, calc(100vw - 16px)); }
.hard-block-note {
  margin: 3px 10px 7px; color: var(--ink-soft); font-size: 12.5px; line-height: 1.4;
}
.hard-block-menu .menu-item .icon { color: var(--warn); flex: 0 0 auto; }
@keyframes trash-shake {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-12deg); }
  45% { transform: rotate(10deg); }
  70% { transform: rotate(-6deg); }
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 8px 10px;
}
.swatch {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  cursor: pointer;
  padding: 0;
  transition: transform 0.08s ease, box-shadow 0.1s ease;
}
.swatch:hover { transform: scale(1.12); }
.swatch.active { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent); }
.swatch.none {
  background:
    linear-gradient(45deg, transparent 44%, var(--accent) 44%, var(--accent) 56%, transparent 56%),
    var(--card);
}

/* Pomenovanie farieb — rozbaľovací editor v ⋯ menu */
.color-name-toggle {
  display: block; width: 100%; text-align: left;
  font-family: inherit; font-size: 12px; color: var(--ink-soft);
  background: none; border: none; cursor: pointer;
  padding: 2px 12px 6px;
}
.color-name-toggle::before { content: "▸ "; font-size: 9px; }
.color-name-toggle.open::before { content: "▾ "; }
.color-name-toggle:hover { color: var(--accent); }
.color-names { padding: 2px 10px 8px; display: flex; flex-direction: column; gap: 5px; }
.color-names[hidden] { display: none; }
.color-name-row { display: flex; align-items: center; gap: 8px; }
.color-name-dot { width: 13px; height: 13px; border-radius: 50%; flex: none; }
.color-name-input {
  flex: 1; min-width: 0;
  font-family: inherit; font-size: 12.5px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line-strong);
  border-radius: 6px; padding: 3px 7px;
}
.color-name-input:focus { outline: none; border-color: var(--accent); }

/* Farebný prúžok dňa (pod hlavičkou): segmenty ∝ počtu farby */
.day-colorbar {
  display: flex;
  align-items: stretch;
  height: 5px;                 /* o čosi vyšší pruh (4 → 5 px) */
  margin: 7px 0 0;
  border-radius: 3px;
  overflow: hidden;
}
.day-colorbar[hidden] { display: none; }
/* Pri hoveri povolíme prvku „vyskočiť" z prúžku (inak by ho overflow:hidden orezal). */
.day-colorbar:hover { overflow: visible; }
/* Súvislé bloky: dĺžka ∝ trvaniu (min-width drží aj krátky blok viditeľný).
   cursor: pointer — bodka/blok je klikateľný (otvorí ⋯ menu úlohy).
   Hover ho jemne zväčší (Dock-style) — drobné prvky tak lepšie cítiť. */
.day-colorbar-seg { flex-basis: 0; flex-shrink: 1; min-width: 5px; height: 100%; cursor: pointer; transition: transform .12s ease; transform-origin: center; }
/* Tenká medzera medzi susednými blokmi → vidno, že dlhý segment je z VIACERÝCH
   udalostí (nie jedna dlhá), aj keď majú rovnakú farbu. */
.day-colorbar-seg + .day-colorbar-seg { margin-left: 1.5px; }
.day-colorbar-seg:hover { transform: scaleY(2); border-radius: 2px; }
/* Prerušované bodky (úlohy bez trvania) — pokračovanie čiary za blokmi.
   Bodka má širší (priehľadný) hover-terč; viditeľný 4px kruh kreslí ::before. */
.day-colorbar-dots { display: flex; align-items: center; flex: none; padding-left: 2px; }
.day-colorbar-dot { width: 9px; height: 100%; display: flex; align-items: center; justify-content: center; flex: none; cursor: pointer; }
.day-colorbar-dot::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--dotc, var(--bar-neutral)); transition: transform .12s ease; }
.day-colorbar-dot:hover::before { transform: scale(2.1); }

/* Vlastný okamžitý tooltip nad čiarkou (názov úlohy + čas). */
.bar-tip {
  position: fixed; z-index: 60; pointer-events: none;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 7px;
  padding: 4px 8px; font-size: 12px; font-weight: 500; white-space: nowrap;
  box-shadow: var(--sh-2);
}
.bar-tip[hidden] { display: none; }

/* Frekvencia opakovania — rad piluliek v ⋯ menu */
/* Opakovanie — vysúvacia paleta (ukáže aktuálnu, rozbalí zoznam) */
.repeat-row { padding: 2px 6px; }
.repeat-current {
  display: flex; align-items: center; gap: 8px; width: 100%;
  font-family: inherit; font-size: 13px; color: var(--ink);
  background: none; border: none; border-radius: 8px;
  padding: 7px 8px; cursor: pointer; text-align: left;
}
.repeat-current .icon { width: 16px; height: 16px; color: var(--ink-soft); }
.repeat-cur-label { flex: 1; min-width: 0; }
.repeat-cur-label b { font-weight: 600; }
.repeat-current:hover { background: var(--accent-soft); }
.repeat-caret { display: inline-flex; flex: none; color: var(--ink-faint); transition: transform 0.15s ease; }
.repeat-caret .icon { width: 15px; height: 15px; }
.repeat-current.open .repeat-caret { transform: rotate(90deg); }
.repeat-list { display: flex; flex-direction: column; padding: 2px 6px 4px 10px; }
.repeat-off { margin-top: 2px; }
.repeat-list[hidden] { display: none; }
.repeat-opt {
  font-family: inherit; font-size: 13px; text-align: left;
  color: var(--ink-soft); background: none; border: none;
  border-radius: 6px; padding: 5px 8px; cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease;
}
.repeat-opt:hover { background: var(--accent-soft); color: var(--ink); }
.repeat-opt.active { color: var(--accent); font-weight: 600; }
/* Vlastné opakovania: každých N … + výber dní v týždni */
.repeat-custom, .repeat-dows { display: flex; align-items: center; gap: 6px; padding: 5px 8px; flex-wrap: wrap; }
.rc-lab { font-size: 13px; color: var(--ink-soft); }
.repeat-custom.active .rc-lab { color: var(--accent); font-weight: 600; }
.rc-num {
  width: 44px; font-family: inherit; font-size: 13px; text-align: center;
  color: var(--ink); background: var(--card); border: 1px solid var(--line);
  border-radius: 6px; padding: 3px 4px;
}
.rc-unit {
  font-family: inherit; font-size: 13px; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 3px 4px; cursor: pointer;
}
.rc-dow-chips { display: flex; gap: 3px; flex-wrap: wrap; }
.rc-dow {
  font-family: inherit; font-size: 11px; min-width: 22px; text-align: center;
  color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line);
  border-radius: 6px; padding: 3px 4px; cursor: pointer; transition: background 0.1s ease, color 0.1s ease;
}
.rc-dow:hover { background: var(--accent-soft); }
.rc-dow.on { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }

/* ───────────────────────────────────────────────────────────
   Footer actions + theme toggle
   ─────────────────────────────────────────────────────────── */
.footer-actions { display: flex; align-items: center; gap: 10px; }

/* ⚙ — tiché tlačidlo nastavení (jazyk + téma za ním v popovere) */
.settings-btn {
  font-family: inherit;
  width: 30px; height: 30px;
  font-size: 15px;
  color: var(--ink-soft);
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.settings-btn:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }

/* Settings popover — skupiny (téma, jazyk) */
.settings-menu .menu-group-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 8px 10px 3px;
}
.settings-menu .menu-group-label:first-child { padding-top: 4px; }

/* Na dotykových zariadeniach nech sú ovládače vždy viditeľné */
@media (hover: none) {
  .menu-btn { opacity: 1; }
}

/* ───────────────────────────────────────────────────────────
   Poznámkový indikátor + detail úlohy
   ─────────────────────────────────────────────────────────── */
.note-badge {
  font-size: 11px;
  line-height: 1;
  flex: 0 0 auto;
  opacity: 0.75;
}
.task.done .note-badge { opacity: 0.4; }

.task-text { cursor: pointer; }   /* klik otvára detail */

.detail-panel {
  position: relative;
  width: min(520px, 100%);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  /* .overlay už odrátala svoje okraje aj safe areas; percento preto drží celý
     panel v jej skutočne viditeľnom riadku aj po otvorení iOS klávesnice. */
  max-height: 100%;
  overflow: hidden;            /* panel sa NEROLUJE; roluje len .detail-body */
}
/* Pevná hlavička: názov (+ breadcrumb) sa nikdy neroluje ani neoreže — aj pri
   udalosti s mnohými podúlohami a otvorenej klávesnici (iOS inak posunie panel
   hore a názov sa „useknе"). Roluje výhradne telo pod ňou. */
.detail-header {
  flex: 0 0 auto; padding: 28px 26px 12px; background: var(--paper);
  border-bottom: 1px solid var(--line); border-radius: 18px 18px 0 0;
}
.detail-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 16px 26px 22px;
  display: flex; flex-direction: column; gap: 14px;
}

.detail-title {
  font-family: "Inter", system-ui, sans-serif;
  font-size: calc(22px * var(--fs));
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--line);
  padding: 2px 2px 8px;
  outline: none;
  /* contenteditable (nie <input>/<textarea>) kvôli iOS lištám nad klávesnicou —
     rovnaký vzor ako .add-input; výška rastie prirodzene s obsahom. */
  display: block;
  width: 100%;
  box-sizing: border-box;
  line-height: 1.25;
  word-break: break-word;
}
.detail-title:focus { border-bottom-color: var(--accent); }
.detail-title:empty::before { content: attr(data-placeholder); color: var(--ink-faint); pointer-events: none; }
/* Názov žije v pevnej .detail-header (nad rolovacím .detail-body), takže sa nikdy
   nestratí ani neoreže — pozri .detail-header. Close (×) drž nad hlavičkou. */
.detail-panel .panel-close { z-index: 3; }

.detail-note {
  font-family: inherit;
  font-size: calc(14.5px * var(--fs));
  line-height: 1.6;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  min-height: 180px;
  resize: vertical;
  outline: none;
}
.detail-note:focus { border-color: var(--accent); }
.detail-note::placeholder { color: var(--ink-faint); }

.detail-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.detail-meta { font-size: 12.5px; color: var(--ink-faint); }
#detailCanvasBtn { display: inline-flex; align-items: center; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line-strong)); }
#detailCanvasBtn:hover { background: var(--accent-soft); border-color: var(--accent); }
#detailCanvasBtn .icon { width: 15px; height: 15px; margin-right: 5px; }
#detailCanvasBtn[hidden] { display: none; }

/* breadcrumb editovaného kroku (úloha › krok › …) */
.detail-crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin: 0 26px 0 0; font-size: 12px; }
.detail-crumb[hidden] { display: none; }
.crumb-link {
  border: none; background: none; cursor: pointer; padding: 2px 4px; border-radius: 6px;
  color: var(--accent); font: inherit; font-size: 12px; max-width: 160px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crumb-link:hover { background: var(--accent-soft); }
.crumb-cur { color: var(--ink-faint); padding: 2px 2px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumb-sep { display: inline-flex; color: var(--ink-faint); }
.crumb-sep .icon { width: 12px; height: 12px; }

/* vnorenie do kroku (jeho podúlohy = ďalšia úroveň) */
.step-drill {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; justify-content: center;
  min-width: 28px; height: 28px; padding: 0 5px; border: none; background: none; cursor: pointer;
  color: var(--ink-faint); border-radius: 8px;
}
.step-drill .icon { width: 16px; height: 16px; }
.step-drill:hover { color: var(--accent); background: var(--accent-soft); }
.step-drill-n { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* krok-mód detailu: farba + opakovanie sa netýkajú kroku (dedí ich od úlohy) */
.overlay.step-mode .detail-color-row { display: none; }
/* "Zmazať úlohu" — deštruktívne, červené */
#detailDelete { display: inline-flex; align-items: center; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--line-strong)); }
#detailDelete:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); border-color: var(--danger); color: var(--danger); }
#detailDelete .icon { width: 15px; height: 15px; margin-right: 5px; }
#detailDelete:hover .icon { animation: trash-shake 0.4s ease; transform-origin: 50% 30%; }

/* ───────────────────────────────────────────────────────────
   Farba priamo v editore poznámky (paleta = rovnaké .swatch ako v ⋯ menu)
   ─────────────────────────────────────────────────────────── */
.detail-color-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.detail-color-label { font-size: 12.5px; color: var(--ink-soft); flex: none; }
.detail-swatches { display: flex; flex-wrap: wrap; gap: 8px; }

/* ───────────────────────────────────────────────────────────
   Kroky (podúlohy) v editore — jedna úroveň, voliteľná poznámka na krok.
   Tiché: keď úloha kroky nemá, ostáva len decentné „+ Pridať krok".
   ─────────────────────────────────────────────────────────── */
.detail-steps-wrap { display: flex; flex-direction: column; gap: 2px; }
.detail-steps-wrap[hidden] { display: none; }   /* L1: skryté (čistý diár bez podúloh) */
.detail-steps { display: flex; flex-direction: column; }
.detail-steps:empty { display: none; }
.step-row { border-bottom: 1px solid var(--line); }
.step-row:first-child { border-top: 1px solid var(--line); }
.step-head { display: flex; align-items: center; gap: 8px; padding: 6px 2px; }
.step-check { flex: 0 0 auto; }
.step-text {
  flex: 1; min-width: 0; outline: none;
  font-family: inherit; font-size: calc(14px * var(--fs)); color: var(--ink);
  line-height: 1.35; padding: 2px 0; white-space: pre-wrap; word-break: break-word;
}
.step-text:empty::before { content: attr(data-placeholder); color: var(--ink-faint); }
.step-row.done .step-text { color: var(--ink-faint); text-decoration: line-through; }
.step-note-btn, .step-del, .step-sched-btn, .step-promote-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: none; background: none; cursor: pointer;
  color: var(--ink-faint); border-radius: 8px;
}
.step-note-btn .icon, .step-del .icon, .step-sched-btn .icon, .step-promote-btn .icon { width: 16px; height: 16px; }
.step-note-btn:hover, .step-sched-btn:hover, .step-promote-btn:hover { color: var(--accent); background: var(--accent-soft); }
.step-note-btn.has-note, .step-sched-btn.has-sched { color: var(--accent); }
.step-note-btn.active { color: var(--accent); background: var(--accent-soft); }
.step-del:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.step-del:hover .icon { animation: trash-shake 0.4s ease; transform-origin: 50% 30%; }
/* riadok plánovania kroku: dátum + čas + zrušiť */
.step-sched {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 8px 30px;
}
.step-sched[hidden] { display: none; }
.step-date, .step-time {
  font-family: inherit; font-size: calc(13px * var(--fs)); color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; outline: none;
}
.step-date:focus, .step-time:focus { border-color: var(--accent); }
.step-sched-clear {
  border: none; background: none; cursor: pointer; color: var(--ink-faint);
  font-size: 18px; line-height: 1; padding: 2px 6px; border-radius: 6px;
}
.step-sched-clear:hover { color: var(--danger); }
.step-note {
  width: calc(100% - 30px); box-sizing: border-box; margin: 0 0 8px 30px;
  font-family: inherit; font-size: calc(13px * var(--fs)); line-height: 1.5; color: var(--ink-soft);
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 7px 10px; resize: vertical; outline: none;
}
.step-note:focus { border-color: var(--accent); }
.step-note[hidden] { display: none; }
.detail-addstep {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 5px;
  margin-top: 4px; padding: 5px 4px;
  font-family: inherit; font-size: 13px; color: var(--ink-soft);
  background: none; border: none; cursor: pointer; border-radius: 8px;
}
.detail-addstep .icon { width: 15px; height: 15px; }
.detail-addstep:hover { color: var(--accent); }

/* ───────────────────────────────────────────────────────────
   Prepínač deň/týždeň — len na dotykových / úzkych obrazovkách
   ─────────────────────────────────────────────────────────── */
.view-toggle {
  display: none;                 /* na desktope skryté; zobrazí sa na mobile nižšie */
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.view-toggle .icon { width: 19px; height: 19px; }
.view-toggle:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
@media (hover: none), (max-width: 700px) {
  .view-toggle { display: inline-flex; }
}

/* ───────────────────────────────────────────────────────────
   Živý indikátor pri dotykovom swipe úlohy v zoom-e (kam to ide)
   ─────────────────────────────────────────────────────────── */
.focus-swipe-ind {
  position: fixed;
  z-index: 45;
  display: flex; align-items: center; gap: 9px;
  transform: translateY(-50%);
  padding: 9px 13px;
  border-radius: 999px;
  background: var(--card);
  border: 1.5px solid color-mix(in srgb, var(--accent) 40%, var(--line-strong));
  color: var(--accent);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
  pointer-events: none; white-space: nowrap;
  transition: transform 0.1s ease, background 0.1s ease, border-color 0.1s ease;
}
.focus-swipe-ind[hidden] { display: none; }
.focus-swipe-ind.next { right: 18px; }
.focus-swipe-ind.prev { left: 18px; }
.focus-swipe-ind.ready {
  background: var(--accent-soft);
  border-color: var(--accent);
  transform: translateY(-50%) scale(1.06);
}
.focus-swipe-ind .icon { width: 19px; height: 19px; }
.swipe-day { display: flex; flex-direction: column; line-height: 1.1; }
.swipe-dayname { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.8; }
.swipe-daydate { font-size: 14px; font-weight: 600; }

/* „uchopená" úloha po podržaní prsta (potom ju swipneš na susedný deň) */
.focus-task.focus-armed {
  background: var(--accent-soft);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

/* ───────────────────────────────────────────────────────────
   Undo toast — krátky pruh dole po presune úlohy swipom
   ─────────────────────────────────────────────────────────── */
.undo-toast {
  position: fixed;
  left: 50%; bottom: calc(22px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(14px);
  z-index: 70;
  display: flex; align-items: center; gap: 14px;
  background: var(--ink); color: var(--paper);
  padding: 10px 10px 10px 16px;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
  font-size: 13.5px;
  max-width: calc(100vw - 32px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.undo-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.undo-msg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.undo-btn {
  flex: none;
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--paper);
  background: color-mix(in srgb, var(--paper) 18%, transparent);
  border: none; border-radius: 8px;
  padding: 7px 14px; cursor: pointer; white-space: nowrap;
  transition: background 0.12s ease;
}
.undo-btn:hover { background: color-mix(in srgb, var(--paper) 30%, transparent); }

/* Na dotyku rieši presun medzi dňami swipe → skry šípky ±deň (a úchyt na drag).
   Menu (⋯) aj poznámka (✎) ostávajú. */
@media (hover: none) {
  .focus-move { display: none; }
  .focus-grip { display: none; }
}

/* ───────────────────────────────────────────────────────────
   Veľkosť textu — rad „A" rastúcej veľkosti v nastaveniach
   ─────────────────────────────────────────────────────────── */
.fontsize-row { display: flex; gap: 6px; padding: 4px 10px 8px; }
.fontsize-opt {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; color: var(--ink-soft);
  background: var(--card); border: 1px solid var(--line-strong);
  border-radius: 8px; padding: 7px 0; cursor: pointer; line-height: 1;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.fontsize-opt.fs-s  { font-size: 12px; }
.fontsize-opt.fs-m  { font-size: 15px; }
.fontsize-opt.fs-l  { font-size: 18px; }
.fontsize-opt.fs-xl { font-size: 22px; }
.fontsize-opt:hover { border-color: var(--accent); color: var(--ink); }
.fontsize-opt.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); font-weight: 600; }

/* ───────────────────────────────────────────────────────────
   Nastavenia ako spodný panel (bottom sheet) na mobile
   ─────────────────────────────────────────────────────────── */
.menu-backdrop {
  position: fixed; inset: var(--viewport-offset-top) 0 auto; z-index: 55;
  width: 100%; height: var(--app-height);
  background: rgba(33, 31, 28, 0.42);
  backdrop-filter: blur(2px);
  animation: menuIn 0.12s ease;
}
.task-menu.as-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0; top: auto;
  width: 100%; max-width: 100%;
  border-radius: 18px 18px 0 0;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
  max-height: calc(var(--app-height) - var(--safe-top)); overflow-y: auto;
  animation: sheet-up 0.2s ease;
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
.task-menu.as-sheet::before {
  content: ""; display: block;
  width: 38px; height: 4px; border-radius: 2px;
  background: var(--line-strong);
  margin: 4px auto 10px;
}
.task-menu.as-sheet .menu-item { padding: 12px 12px; font-size: 15px; }
.task-menu.as-sheet .menu-group-label { padding: 12px 12px 4px; }
.task-menu.as-sheet .fontsize-row { padding: 6px 12px 10px; }

/* ───────────────────────────────────────────────────────────
   Klávesnicový výber udalosti (šípky) + drop ciele v zoom-e
   ─────────────────────────────────────────────────────────── */
.task.selected {
  box-shadow: 0 0 0 2px var(--accent);
  border-radius: 7px;
  background: var(--accent-soft);
}
.focus-task.selected {
  box-shadow: inset 0 0 0 2px var(--accent);
  border-radius: 10px;
}
/* horná lišta dňa v zoom-e ako fokusovateľná zóna (Tab / šípka hore) */
.focus-head.selected {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 32%, transparent);
  border-radius: 12px;
}
/* myš-drag v zoom-e: úchopový kurzor + zvýraznený peek ako drop cieľ */
.focus-task.mouse-drag { cursor: grab; }
.focus-task.mouse-drag.dragging { cursor: grabbing; }
.focus-peek.peek-drop {
  opacity: 1;
  box-shadow: inset 0 0 0 2px var(--accent);
  border-radius: 12px;
}


/* ---------- Mesačný pohľad (tretia "nadmorská výška": orientácia) ---------- */
.month-view {
  position: fixed; inset: var(--viewport-offset-top) 0 auto; z-index: 42;
  width: 100%; height: var(--app-height);
  background: var(--paper);
  animation: focus-in 0.18s ease;
}
.month-view[hidden] { display: none; }
.month-panel {
  display: flex; flex-direction: column;
  width: 100%; height: 100%;
  max-width: 1100px; margin: 0 auto;
  padding: calc(14px + var(--safe-top))
    max(clamp(10px, 3vw, 28px), var(--safe-right))
    calc(18px + var(--safe-bottom))
    max(clamp(10px, 3vw, 28px), var(--safe-left));
  box-sizing: border-box;
}
.month-head {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  gap: 14px; padding: 6px 0 12px;
}
.month-title {
  font-family: "Inter", system-ui, sans-serif; font-weight: 700; font-size: clamp(20px, 5vw, 28px);
  letter-spacing: -0.02em; margin: 0; text-align: center; min-width: 7em;
}
.month-nav {
  flex: none; width: 36px; height: 36px;
  border: 1px solid var(--line-strong); background: var(--card);
  border-radius: 50%; font-size: 20px; line-height: 1;
  color: var(--ink-soft); cursor: pointer;
}
.month-nav:hover { border-color: var(--accent); color: var(--accent); }
.month-view .panel-close { top: 10px; right: 6px; }

.month-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
  padding-bottom: 6px;
}
.month-wd {
  text-align: center; font-size: 12px; font-weight: 600;
  color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.03em;
}
.month-wd.weekend { color: var(--ink-faint); }

.month-grid {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(var(--month-rows, 6), minmax(0, 1fr));
  gap: 6px;
}
.month-cell {
  display: flex; flex-direction: column; gap: 3px;
  text-align: left; align-items: stretch;
  background: var(--card);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 5px 6px; overflow: hidden; cursor: pointer;
  font: inherit; color: inherit;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.month-cell:hover { border-color: var(--accent); }
.month-cell.other-month { opacity: 0.42; }
.month-cell.weekend { background: color-mix(in srgb, var(--card) 65%, var(--paper)); }
.month-cell.in-week { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 38%, transparent); }
.month-cell.is-today {
  background: var(--today-tint);
  border-color: color-mix(in srgb, var(--today-ink) 30%, transparent);
}
.month-cell-num { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.month-cell.is-today .month-cell-num { color: var(--today-ink); }
.month-cell.weekend .month-cell-num { color: var(--ink-faint); }

.month-chips { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.month-chip {
  position: relative; padding-left: 9px;
  font-size: calc(11px * var(--fs)); line-height: 1.3; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.month-chip::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--chip, var(--ink-faint));
}
.month-chip.done { color: var(--ink-faint); text-decoration: line-through; }
.month-more { padding-left: 9px; font-size: 10.5px; color: var(--ink-faint); }

.month-dots { display: none; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.month-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); }
.month-dot.done { opacity: 0.4; }

/* Úzke obrazovky (mobil): namiesto názvov ukáž len farebné bodky */
@media (max-width: 560px) {
  .month-chips { display: none; }
  .month-dots { display: flex; }
  .month-cell { padding: 4px; border-radius: 8px; }
}

/* Klikateľný názov mesiaca v hlavičke → otvorí mesačný pohľad */
.tappable { cursor: pointer; }
.tappable:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---- Prepínač Kalendár / Nadchádzajúce v mesačnom pohľade ---- */
.month-mode {
  display: flex; gap: 4px; align-self: center;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border-radius: 999px; padding: 3px; margin-bottom: 12px;
}
.month-mode-btn {
  font-family: inherit; font-size: 13px; font-weight: 500;
  color: var(--ink-soft); background: transparent;
  border: none; border-radius: 999px; padding: 6px 16px; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.month-mode-btn.active { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }

/* ---- Agenda / Nadchádzajúce (zoznam budúcich úloh, klik = skok) ---- */
.month-agenda { display: none; flex: 1; min-height: 0; overflow-y: auto; padding: 0 2px; }
.month-view.mode-agenda .month-agenda { display: block; }
.month-view.mode-agenda .month-weekdays,
.month-view.mode-agenda .month-grid { display: none; }
.month-view.mode-agenda .month-nav { visibility: hidden; }

.agenda-month {
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-faint); margin: 18px 0 6px; padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.agenda-month:first-child { margin-top: 4px; }
.agenda-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  font-family: inherit; font-size: calc(15px * var(--fs, 1)); text-align: left;
  color: var(--ink); background: transparent; border: none;
  padding: 10px 8px; border-radius: 8px; cursor: pointer;
  transition: background 0.12s ease;
}
.agenda-row:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.agenda-date { flex: none; width: 5.2em; font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: 13.5px; }
.agenda-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.agenda-dot.nocolor { box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.agenda-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-row.done .agenda-text { color: var(--ink-faint); text-decoration: line-through; }
.agenda-empty { color: var(--ink-faint); text-align: center; margin-top: 40px; font-size: 14px; }

/* Sekcia „Po termíne" + rýchle preloženie na dnes */
.agenda-month.overdue { color: var(--warn); }
.agenda-move {
  flex: none; margin-left: 8px;
  font-size: 12px; font-weight: 500; white-space: nowrap;
  color: var(--accent); background: var(--accent-soft);
  border-radius: 999px; padding: 4px 10px; cursor: pointer;
  transition: background 0.12s ease;
}
.agenda-move:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* ---- Panel „Po termíne" (rozhodovací zoznam: kam to posunúť) ---- */
.overdue-panel { width: min(480px, 100%); }
.overdue-panel .panel-title { color: var(--warn); }
#overdueBody {
  max-height: min(620px, calc(var(--app-height) - 180px));
  overflow-y: auto; margin: -4px -6px 0; padding: 0 6px;
}
/* mesačné hlavičky → poriadok v backlogu rozhádzanom po mesiacoch */
.overdue-group {
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-faint); margin: 16px 0 2px; padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.overdue-group:first-child { margin-top: 2px; }
.overdue-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 6px; border-bottom: 1px solid var(--line);
}
.overdue-row:last-child { border-bottom: none; }
/* dnešné po čase — jemný teplý podklad, „ešte stíhaš dnes" odlíšené od starého backlogu */
.overdue-row.is-today { background: color-mix(in srgb, var(--today-tint) 45%, transparent); border-radius: 8px; border-bottom-color: transparent; }
.overdue-main {
  display: flex; align-items: center; gap: 10px; flex: 1 1 12em; min-width: 0;
  font-family: inherit; font-size: calc(15px * var(--fs, 1)); text-align: left;
  color: var(--ink); background: transparent; border: none;
  padding: 2px 0; cursor: pointer; border-radius: 6px;
}
.overdue-main:hover .overdue-text { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.overdue-date { flex: none; width: 4.6em; font-variant-numeric: tabular-nums; color: var(--warn); font-size: 13px; font-weight: 600; }
.overdue-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.overdue-dot.nocolor { box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.overdue-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* krok v prehľade „Po termíne": tichý štítok rodiča (+ „prekondícia") na vlastnom riadku */
.overdue-parent { flex-basis: 100%; min-width: 0; display: flex; align-items: center; gap: 4px; margin: 1px 0 0 4.6em; font-size: 11px; color: var(--ink-faint); }
.overdue-parent .icon { width: 12px; height: 12px; flex: 0 0 auto; }
.overdue-parent > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overdue-actions { display: flex; align-items: center; gap: 6px; flex: none; min-width: 0; flex-wrap: wrap; }
.overdue-chip {
  position: relative;
  font-family: inherit; font-size: 12px; font-weight: 500; white-space: nowrap;
  color: var(--accent); background: var(--accent-soft);
  border: none; border-radius: 999px; padding: 5px 11px; cursor: pointer;
  transition: background 0.12s ease;
}
.overdue-chip:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.overdue-chip.icon-chip { padding: 5px 8px; display: inline-flex; align-items: center; }
.overdue-chip.icon-chip .icon { width: 16px; height: 16px; }
/* Zmazať — deštruktívne (červená), odlíšené od presúvacích chipov */
.overdue-chip.danger-chip { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.overdue-chip.danger-chip:hover { background: color-mix(in srgb, var(--danger) 20%, transparent); }
.overdue-chip.danger-chip:hover .icon { animation: trash-shake 0.4s ease; transform-origin: 50% 30%; }
/* natívny date input je len skrytý spúšťač pod ikonou kalendára */
.overdue-datepick {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; border: none; padding: 0; margin: 0; cursor: pointer;
}
.overdue-empty { color: var(--ink-faint); text-align: center; margin: 30px 0 10px; font-size: 14px; }

/* Mobil: panel „Po termíne" sa musí zmestiť do šírky telefónu.
   Menej okolitého paddingu + chipy (Dnes/Zajtra/Niekedy/📅/🗑) dostanú vlastný
   plnošírkový riadok a samé sa zalomia — inak (flex:none) presahovali vpravo. */
@media (max-width: 560px) {
  .overlay {
    padding: calc(12px + var(--safe-top)) calc(12px + var(--safe-right))
      calc(12px + var(--safe-bottom)) calc(12px + var(--safe-left));
  }
  .sync-panel { padding: 22px 18px 24px; }
  .overdue-panel { width: 100%; }
  .overdue-main { min-width: 0; }
  .overdue-actions { flex: 1 1 100%; min-width: 0; justify-content: flex-start; }
}

/* ───────────────────────────────────────────────────────────────────────────
   Projektová plocha (úroveň 3) — 2D plátno: vodorovne dni, zvisle čas dňa.
   Biele plátno (--card), jemné modré dátumové linky, uzly ako časové bloky
   s farebným prúžkom; hlavná úloha akcentovaná. Ladí so zvyškom appky.
   ─────────────────────────────────────────────────────────────────────────── */
.project-view {
  position: fixed; inset: var(--viewport-offset-top) 0 auto; z-index: 40;
  width: 100%; height: var(--app-height);
  background: var(--paper);
  display: flex; flex-direction: column;
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  animation: focus-in 0.18s ease;
}
.project-view[hidden] { display: none; }
.project-panel { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.project-head {
  flex: 0 0 auto;
  position: relative; z-index: 8;
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--paper);
  padding: clamp(14px, 2.4vh, 22px) clamp(16px, 3vw, 32px) 12px;
}
.project-head .focus-back { flex: 0 0 auto; margin-top: 2px; }
.project-titlewrap { min-width: 0; }
.project-eyebrow {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--accent);
}
.project-title {
  margin: 1px 0 2px; font-size: clamp(18px, 2.4vw, 24px); font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: min(70vw, 720px);
}
.project-hint { margin: 0; font-size: 12px; color: var(--ink-faint); line-height: 1.4; }
.project-hint .project-rule { display: block; color: var(--warn); }
.project-actions { flex: 0 0 auto; margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
/* kompaktné akčné tlačidlá plochy (ikona + text) + aktívny stav prepínača */
.project-actions .mini-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; font-size: 12.5px;
}
.project-actions .mini-btn .icon { width: 15px; height: 15px; flex: 0 0 auto; }
.project-actions .mini-btn.active {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent); border-style: solid;
}

/* selektor projektov — čipy „Všetky" + projekt */
.project-chips {
  display: flex; flex-wrap: wrap; gap: 7px;
  padding: 0 clamp(16px, 3vw, 32px) 12px; overflow-x: auto;
}
.project-chips[hidden] { display: none; }
.project-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink-soft); font-size: 12.5px; font-weight: 500;
  cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; max-width: 200px;
}
.project-chip > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-chip .chip-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.project-chip-repeat { display: inline-flex; flex: 0 0 auto; color: var(--accent); }
.project-chip-repeat .icon { width: 13px; height: 13px; }
.project-chip:hover { border-color: var(--accent); }
.project-chip.active {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent);
}
/* chip so zmazaním (6b): výberová časť (dot + názov) + „×" priamo v zozname */
.project-chip.has-del { padding: 0; overflow: hidden; }
.chip-sel {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 4px 5px 11px; background: none; border: none; color: inherit;
  font: inherit; cursor: pointer; max-width: 168px; min-width: 0;
}
.chip-sel > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-del {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 5px 9px 5px 4px; background: none; border: none; cursor: pointer; color: var(--ink-faint);
}
.chip-del .icon { width: 13px; height: 13px; }
.chip-del:hover { color: var(--danger); }

.project-main { flex: 1; min-height: 0; display: flex; position: relative; }
/* hodinová lišta vľavo — mimo horizontálneho scrollu, vertikálne synchronizovaná */
.project-gutter {
  flex: 0 0 auto; width: 96px; position: relative; overflow: hidden;
  border-right: 1px solid var(--line); background: var(--paper);
}
.project-gutter-inner { position: absolute; top: 0; left: 0; right: 0; will-change: transform; }
.project-hourlabel {
  position: absolute; right: 7px; transform: translateY(-50%);
  font-size: 10.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
/* Etapa 3 — názvy pruhov (procesov) vľavo + oddeľovače pruhov */
.project-lanelabel {
  right: auto; left: 9px; max-width: 80px; text-align: left;
  font-size: 11px; font-weight: 600; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.project-laneline { background: var(--line-strong); opacity: 0.55; }

.project-scroll {
  flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; position: relative; background: var(--card);
  -webkit-overflow-scrolling: touch;        /* mobil: zotrvačný (momentum) horizontálny scroll */
  overscroll-behavior: contain;
  /* plocha nie je text — nikdy neoznačuj (mobil: ťah = modré označenie pozadia) */
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.project-canvas { position: relative; }

/* hlavička dní — čísla dní (tenké linky, žiadne stĺpce); pozície nastaví JS */
.project-datehead {
  position: absolute; top: 0; left: 0; z-index: 5; height: 30px;
}
.pd-num {
  position: absolute; top: 8px; transform: translateX(-50%);
  font-size: 11px; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums;
  pointer-events: none; white-space: nowrap;
}
.pd-num[hidden] { display: none; }
.pd-num.is-today { color: var(--today-ink, var(--accent)); }
/* pruh mesiacov hore (orientácia pri vzdialených udalostiach) */
.pd-month {
  position: absolute; top: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-faint); white-space: nowrap; pointer-events: none;
}

/* mriežka: tenké zvislé dňové linky + vodorovné hodinové linky (stála výška) */
.project-lines { position: absolute; top: 0; left: 0; pointer-events: none; }
.project-vline { position: absolute; top: 28px; bottom: 0; width: 1px; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.project-vline.is-today { background: color-mix(in srgb, var(--accent) 45%, transparent); width: 1.5px; }
.project-hline { position: absolute; left: 0; right: 0; height: 1px; background: var(--line); opacity: 0.7; }

/* „sticky day" pás počas ťahu — zvýraznený deň, v ktorom sa dá pohodlne cestovať
   hore/dole; deň drží (hysteréza), kým prst neodíde do strany. */
.project-dayband {
  position: absolute; z-index: 1; pointer-events: none;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}
.project-dayband[hidden] { display: none; }

.project-arrows { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 2; overflow: visible; }
.project-link.is-cross-project {
  stroke-dasharray: 7 5;
  stroke-opacity: 0.9;
  filter: drop-shadow(0 0 2px color-mix(in srgb, var(--accent) 28%, transparent));
}
.cross-project-menu {
  max-height: min(520px, calc(var(--app-height) - 16px));
  overflow-y: auto;
}
.detail-link-row.is-cross-project .dl-dir { text-decoration: underline dashed; text-underline-offset: 3px; }
/* vrstva uzlov je „priehľadná" na pointer — prázdne miesta prepustia hover na
   spojnice (šípky) pod ňou (inak by sa „+" na spojnici nikdy neobjavil); samotné
   uzly pointer-events chytajú. */
.project-nodes { position: absolute; top: 0; left: 0; z-index: 3; pointer-events: none; }
.project-node { pointer-events: auto; }

/* Kolízny náhľad — jemné „duchovia" diárových udalostí v cieľový deň počas
   ťahania (len časový režim). Pod uzlami/šípkami, nerušivo priehľadné. */
.project-ghosts { position: absolute; top: 0; left: 0; z-index: 1; pointer-events: none; }
.project-ghost {
  position: absolute; box-sizing: border-box;
  min-height: 26px; padding: 4px 7px 4px 10px;
  background: var(--card); border: 1.5px dashed var(--line-strong); border-radius: 9px;
  box-shadow: 0 3px 10px rgba(20,20,18,0.16);
  opacity: 0.88; display: flex; flex-direction: column; gap: 1px; overflow: hidden;
}
.project-ghost::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3.5px; border-radius: 3px;
  background: var(--node-color, var(--ink-faint));
}
.project-ghost .project-node-time { color: var(--ink-faint); }
.project-ghost .project-node-text {
  font-size: 12.5px; color: var(--ink-soft); line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* uzol = malý KRÚŽOK (redizajn 2026-07); meno je POD krúžkom; hover krúžok zväčší.
   Kotva = stred krúžku (geometriu drží projPlaceNode cez PROJ_DOT). Box je len
   krúžok; menovka je absolútne pod ním (mimo toku → nemení kotvu). */
.project-node {
  position: absolute; box-sizing: border-box;
  width: 22px; height: 22px;
  background: none; border: none; box-shadow: none;
  cursor: grab; touch-action: none; user-select: none;
  overflow: visible; transform-origin: center center;
}
/* samotný krúžok (nesie farbu + stav) */
.project-node-dot {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--node-color, var(--ink-faint));
  box-shadow: 0 1px 4px rgba(20,20,18,0.14);
  transition: transform 0.1s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.project-node.is-main .project-node-dot {
  border-color: var(--node-color, var(--accent));
  background: var(--node-color, var(--accent));            /* hlavná úloha = plný cieľový bod */
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent);
}
/* Projektové roly sú nezávislé od poradia hrán: ústredná udalosť má dvojitý
   prstenec, výsledková hranatejší cieľ a malý lokalizovaný odznak. */
.project-node.is-central-event .project-node-dot { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--accent); }
.project-node.is-result-event .project-node-dot { border-radius: 6px; }
.project-node.is-central-event.is-result-event .project-node-dot { border-radius: 6px; }
.project-node-role {
  position: absolute; left: 50%; top: -34px; z-index: 3;
  transform: translateX(-50%);
  width: max-content; min-width: 17px; min-height: 17px; max-width: 160px;
  padding: 3px 6px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card); border: 1px solid var(--accent); color: var(--accent);
  font-size: 9px; line-height: 1.15; font-weight: 700; text-align: center;
  box-shadow: var(--sh-1); pointer-events: none;
}
/* menovka POD krúžkom (čas + názov) — centrovaná, nezachytáva pointer */
.project-node-label {
  position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  width: 108px; display: flex; flex-direction: column; align-items: center;
  pointer-events: none; text-align: center;
}
.project-node-time { font-size: calc(10px * var(--fs)); font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1.15; }
.project-node-text {
  font-size: calc(11.5px * var(--fs)); color: var(--ink); line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.project-node.is-main .project-node-text { font-weight: 600; }
/* hover / ťah: krúžok narastie (meno ostáva čitateľné pod ním) */
.project-node:hover { z-index: 5; }
.project-node:hover .project-node-dot { transform: scale(1.4); box-shadow: 0 5px 14px rgba(20,20,18,0.2); }
.project-node.dragging { cursor: grabbing; z-index: 8; }
.project-node.dragging .project-node-dot { transform: scale(1.4); box-shadow: 0 8px 20px rgba(20,20,18,0.24); }
/* nenaplánovaná podúloha = prerušovaný priehľadný krúžok */
.project-node.is-ghost .project-node-dot { border-style: dashed; background: transparent; box-shadow: none; opacity: 0.6; }
.project-node.is-ghost .project-node-text { color: var(--ink-soft); }

/* splnená udalosť na ploche = jemné znevýraznenie + zelená fajka (bez preškrtnutia —
   v malých kartách/menovkách nečitateľné). Konzistentné s diárom (done = stlmené). */
.project-node.is-done { opacity: 0.5; }
.project-node.is-done:hover { opacity: 0.85; }                 /* na hover zvýrazni, nech sa dá vždy chytiť */
.project-node.is-done .project-node-dot {
  background: var(--accent-2); border-color: var(--accent-2); box-shadow: none;
}
.project-node-check {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 2;
}
.project-node-check .icon { width: 14px; height: 14px; color: #fff; stroke-width: 2.4; }
.project-node-repeat {
  position: absolute; z-index: 4; right: -8px; top: -8px;
  width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;
  color: var(--accent); background: var(--card); border: 1px solid var(--line-strong);
  border-radius: 50%; box-shadow: 0 1px 4px rgba(20,20,18,0.14); pointer-events: none;
}
.project-node-repeat .icon { width: 11px; height: 11px; stroke-width: 2.2; }
.project-node-blocked {
  position: absolute; z-index: 5; left: -8px; top: -8px;
  width: 17px; height: 17px; display: flex; align-items: center; justify-content: center;
  color: #fff; background: var(--warn); border: 2px solid var(--card);
  border-radius: 50%; box-shadow: 0 1px 4px rgba(20,20,18,0.18); pointer-events: none;
}
.project-node-blocked .icon { width: 11px; height: 11px; stroke-width: 2.2; }

/* cieľ pripojenia (voľná bodka aj reparent-ťah) — podsvietený krúžok */
.project-node.drop-target .project-node-dot {
  box-shadow: 0 0 0 4px var(--accent-soft), 0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent);
  transform: scale(1.45);
}
/* drag-linkovanie (bez času): ťahaný uzol priehľadnejší + náhľadová čiara k cieľu */
.project-node.linking { z-index: 9; }
.project-node.linking .project-node-dot { opacity: 0.55; }
.project-node.linking .project-node-label { opacity: 0.55; }
.project-link-preview { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 4; opacity: 0.85; pointer-events: none; }

/* ── Bod 3: zhluk prekrytých udalostí na časovej osi ── */
/* zbalený zhluk: bodky nakopené (jemný stack), menovky skryté, počet v badge */
.project-node.in-cluster .project-node-label { display: none; }
.project-node.in-cluster .project-node-dot { box-shadow: 0 1px 4px rgba(20,20,18,0.22); }
.cluster-badge {
  position: absolute; z-index: 15; pointer-events: none;
  min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; border: 1.5px solid var(--card);
  border-radius: 9px; font-size: 10px; font-weight: 700; line-height: 1;
  box-shadow: 0 1px 4px rgba(20,20,18,0.25);
}
.cluster-hit { position: absolute; z-index: 20; pointer-events: auto; background: transparent; }
/* rozbalený vejár: bodka plná, menovka ako PEVNÝ objekt PO STRANE (nie pod ňou) */
.project-node.fanned { }
.project-node.fanned .project-node-dot { transform: scale(1.15); box-shadow: 0 3px 10px rgba(20,20,18,0.28); }
.project-node.fanned .project-node-label {
  display: flex; position: absolute; top: 50%; left: calc(100% + 10px); transform: translateY(-50%);
  width: auto; max-width: 160px; flex-direction: row; align-items: center; gap: 6px; text-align: left;
  background: var(--card); padding: 3px 9px; border-radius: 9px; border: 1px solid var(--line-strong);
  box-shadow: 0 3px 10px rgba(20,20,18,0.16); white-space: nowrap;
}
.project-node.fanned.fan-left .project-node-label { left: auto; right: calc(100% + 10px); flex-direction: row-reverse; text-align: right; }
.project-node.fanned .project-node-text { -webkit-line-clamp: 1; line-clamp: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.project-node.fanned .project-node-time { display: inline; }

/* voľná bodka („+" nová udalosť) — výrazná, prerušovaná, čaká na pripojenie */
.project-node.is-loose { z-index: 6; }
.project-node.is-loose .project-node-dot {
  border: 2px dashed var(--accent); background: var(--accent-soft);
  box-shadow: 0 3px 12px color-mix(in srgb, var(--accent) 24%, transparent);
}
.project-node.is-loose .project-node-text { color: var(--accent); font-weight: 600; }

/* Návrh novej udalosti pri uzle (redizajn): PRIEHĽADNEJŠIA bodka + „+", spojená
   s krúžkom priehľadnejšou čiarou. Vľavo = podudalosť, vpravo = nadudalosť —
   rovnaká estetika. Potvrdí sa kliknutím na „+". Desktop: odhalí sa hoverom uzla;
   dotyk: stabilne viditeľné (hover neexistuje). */
.project-add-side {
  position: absolute; top: 50%; transform: translateY(-50%);
  /* HIT-PLOCHA je široká a SIAHA AŽ KU KRÚŽKU (žiadna mŕtva medzera) — keď sa
     vyberieš k „+", hover neprepadne, aj keď ideš pomaly. Viditeľná bodka + čiara
     sú pseudoprvky vnútri; samotný box je priehľadný. */
  width: 40px; height: 26px; padding: 0; border: none; background: none; box-shadow: none;
  color: var(--accent); cursor: pointer;
  opacity: 0; pointer-events: none; z-index: 6;
  transition: opacity 0.12s ease;
}
.project-add-side .icon { position: absolute; top: 50%; width: 13px; height: 13px; z-index: 2; }
/* viditeľná priehľadná bodka návrhu (na vonkajšom konci hit-plochy) */
.project-add-side::before {
  content: ""; position: absolute; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px dashed var(--accent); background: var(--accent-soft);
  transition: background 0.1s ease, border-color 0.1s ease;
}
/* priehľadná spojovacia čiara bodka↔krúžok */
.project-add-side::after {
  content: ""; position: absolute; top: 50%; height: 1.5px; background: var(--accent); opacity: 0.4;
}
/* vľavo = podudalosť: pravý okraj hit-plochy = ľavý okraj krúžku (touching, bez medzery) */
.project-add-child { right: 100%; }
.project-add-child::before { left: 0; }
.project-add-child .icon { left: 11px; transform: translate(-50%, -50%); }   /* stred krúžku (dot 0–22 → stred 11) */
.project-add-child::after { left: 22px; right: 0; }
/* vpravo = nadudalosť: zrkadlovo */
.project-add-parent { left: 100%; }
.project-add-parent::before { right: 0; }
.project-add-parent .icon { right: 11px; transform: translate(50%, -50%); }   /* stred krúžku na pravej strane */
.project-add-parent::after { right: 22px; left: 0; }
@media (hover: hover) and (pointer: fine) {
  /* self-sustaining: raz odhalené hoverom krúžku, hover NA SAMOTNOM „+" ho drží
     (a hit-plocha siaha ku krúžku, takže prechod je spojitý) */
  .project-node:hover .project-add-side,
  .project-add-side:hover { opacity: 1; pointer-events: auto; }
  .project-add-side:hover::before { background: var(--accent); border-style: solid; }
  .project-add-side:hover .icon { color: #fff; }
}
/* Dotyk (bez hoveru): „+" v pokoji SKRYTÉ (boli príliš výrazné). 1. tap na uzol
   ich odhalí (.adds-open, uzol sa zvýrazní), 2. tap na uzol otvorí detail, tap
   inam ich schová. Plný akcent, keď odhalené. */
@media (hover: none), (pointer: coarse) {
  .project-add-side { opacity: 0; pointer-events: none; }
  .project-node.adds-open .project-add-side { opacity: 0.95; pointer-events: auto; }
  .project-node.adds-open .project-add-side::before { background: var(--accent); border-style: solid; }
  .project-node.adds-open .project-add-side .icon { color: #fff; width: 15px; height: 15px; }
  .project-add-side:active::before { filter: brightness(0.9); }
  /* uzol v „režime možností" zvýraznený (rovnaká reč ako hover na desktope) */
  .project-node.adds-open { z-index: 7; }
  .project-node.adds-open .project-node-dot { transform: scale(1.3); box-shadow: 0 5px 14px rgba(20,20,18,0.22); }
}

/* režim „bez času" (štruktúra): skry časovú mriežku, dni, mesiace, hodinovú lištu
   aj časy v uzloch — rieši sa len nadväznosť. Uzly nie sú „ghost" (nič nechýba,
   čas je len vypnutý) a kurzor signalizuje, že sa neťahajú. */
.project-view.time-off .project-datehead,
.project-view.time-off .project-lines,
.project-view.time-off .project-gutter { display: none; }
.project-view.time-off .project-node-time { display: none; }
.project-view.time-off .project-node { cursor: pointer; }
/* bez času nič „nechýba" (čas je len vypnutý) → ghost krúžok je plný, nie prerušovaný */
.project-view.time-off .project-node.is-ghost .project-node-dot { opacity: 1; border-style: solid; background: var(--card); box-shadow: 0 1px 3px rgba(20,20,18,0.07); }

/* BEZ ČASU: uzol = KARTA (jazyk flowchart exportu a diára) — plná karta
   s farebným pásikom a názvom VNÚTRI; bodky ostávajú časovému režimu (na dňovej
   linke musia byť uzly drobné). Voľná bodka (.is-loose) ostáva bodkou aj tu. */
.project-view.time-off .project-node:not(.is-loose) {
  width: 172px; height: auto; min-height: 38px;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: 11px;
  box-shadow: var(--sh-1);
  padding: 9px 12px 9px 16px;
}
.project-view.time-off .project-node:not(.is-loose)::before {   /* farebný pásik = farba udalosti */
  content: ""; position: absolute; left: 5px; top: 7px; bottom: 7px; width: 3.5px;
  border-radius: 2px; background: var(--node-color, var(--ink-faint));
}
.project-view.time-off .project-node:not(.is-loose) .project-node-dot { display: none; }
.project-view.time-off .project-node:not(.is-loose) .project-node-label {
  position: static; transform: none; width: auto; align-items: flex-start; text-align: left;
}
.project-view.time-off .project-node:not(.is-loose) .project-node-text {
  font-size: calc(12.5px * var(--fs)); line-height: 1.3; color: var(--ink); font-weight: 500;
}
.project-view.time-off .project-node:not(.is-loose) .project-node-role {
  left: 50%; right: auto; top: calc(100% + 4px);
  transform: translateX(-50%);
  max-width: 160px;
}
/* zvýraznený je len CIEĽ štruktúry (sink, hĺbka 0) — v link modeli je „is-main"
   každá udalosť, takže tá trieda tu nič nerozlišuje; .is-goal nastavuje layout */
.project-view.time-off .project-node.is-goal { border: 1.6px solid var(--accent); }
.project-view.time-off .project-node.is-goal .project-node-text { font-weight: 700; }
.project-view.time-off .project-node:not(.is-loose):hover { box-shadow: var(--sh-2); }
/* splnená karta (štruktúra): fajka = zelený odznak v pravom hornom rohu (bodka je skrytá) */
.project-view.time-off .project-node.is-done .project-node-check {
  inset: auto; top: -6px; right: -6px; width: 17px; height: 17px;
  background: var(--accent-2); border-radius: 50%; box-shadow: var(--sh-1);
}
.project-view.time-off .project-node.is-done .project-node-check .icon { width: 11px; height: 11px; }
.project-view.time-off .project-node-repeat { right: 7px; top: 7px; }
.project-view.time-off .project-node-blocked { left: auto; top: auto; right: -7px; bottom: -7px; }
.project-view.time-off .project-node:not(.is-loose).dragging,
.project-view.time-off .project-node:not(.is-loose).linking { opacity: 0.6; box-shadow: var(--sh-2); }
.project-view.time-off .project-node:not(.is-loose).drop-target {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft), 0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent);
}
/* dotyk: uzol v „režime možností" (1. tap) — kartová obdoba zväčšenej bodky */
.project-view.time-off .project-node:not(.is-loose).adds-open { border-color: var(--accent); box-shadow: var(--sh-2); }
/* bočné „+" NA HRANE karty (ako na starých štvorčekoch): plný akcentový krúžok,
   presahujúci hranu do polovice; odhalenie ostáva hover (desktop) / 1. tap (dotyk) */
.project-view.time-off .project-add-side { width: 28px; height: 28px; }
.project-view.time-off .project-add-child { right: calc(100% - 14px); }
.project-view.time-off .project-add-parent { left: calc(100% - 14px); }
.project-view.time-off .project-add-side::before {
  left: 50%; right: auto; top: 50%; transform: translate(-50%, -50%);
  width: 24px; height: 24px; border: none; border-style: solid; background: var(--accent);
  box-shadow: 0 2px 8px rgba(20,20,18,0.3);
}
.project-view.time-off .project-add-side::after { display: none; }
.project-view.time-off .project-add-side .icon {
  left: 50%; right: auto; top: 50%; transform: translate(-50%, -50%);
  color: #fff; width: 14px; height: 14px;
}

/* Orientačný kompas (len štruktúra) — „kde je sever": predpoklady vľavo → cieľ
   vpravo. Jemná os so šípkou hore + veľmi jemný gradient pozadia smerom k cieľu.
   Nezachytáva pointer, nepanuje/nezoomuje (je to fixný rám zorného poľa). */
.project-compass { display: none; }
.project-view.time-off .project-compass {
  position: absolute; top: 10px; left: 22px; right: 22px; height: 18px; z-index: 1;
  display: flex; align-items: center; gap: 12px; pointer-events: none; opacity: 0.55;
}
.pc-end { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
.pc-to { color: var(--accent); }
.pc-axis { flex: 1; height: 0; border-top: 1.5px solid var(--line-strong); position: relative; }
.pc-axis::after {   /* šípka doprava = k cieľu */
  content: ""; position: absolute; right: -1px; top: 50%; transform: translateY(-50%);
  border-left: 7px solid var(--line-strong); border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}
/* veľmi jemný gradient k cieľu (vpravo) — pozadie, nie aktívna vrstva */
.project-view.time-off .project-canvas::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, transparent 52%, color-mix(in srgb, var(--accent) 6%, transparent) 100%);
}

/* Počas ťahania uzla (časový režim): mriežka + dni + hodiny ZJEMNIA/ZPRIEHĽADNIA,
   aby vynikla plávajúca pilulka s dátumom/časom. Po pustení sa vráti (transition). */
.project-lines, .project-datehead, .project-gutter { transition: opacity 0.15s ease; }
.project-view.proj-dragging .project-lines,
.project-view.proj-dragging .project-datehead,
.project-view.proj-dragging .project-gutter { opacity: 0.22; }

/* zoom/pan ovládanie (len štruktúrny režim) — nad FAB-om vpravo dole */
.project-zoom {
  position: absolute; right: 18px; bottom: 76px; z-index: 10;
  display: flex; flex-direction: column; gap: 6px;
}
.project-zoom[hidden] { display: none; }
.project-zoom-btn {
  width: 36px; height: 36px; border-radius: 50%; padding: 0;
  border: 1px solid var(--line-strong); background: var(--card); color: var(--ink-soft);
  font-size: 19px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(20,20,18,0.12); transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.project-zoom-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
/* štruktúra: pan/zoom cez transform → žiadny natívny scroll (klip), ruka */
.project-view.time-off .project-scroll { overflow: hidden; cursor: grab; touch-action: none; }
.project-view.time-off .project-scroll:active { cursor: grabbing; }

/* ── Vtáčia perspektíva (zoom-out z časovej roviny): karty všetkých projektov ── */
.project-overview-layer { position: absolute; inset: 0; z-index: 6; overflow-y: auto; overflow-x: hidden; }
.project-overview-layer[hidden] { display: none; }
.proj-overview #projectCanvas > :not(.project-overview-layer) { display: none; }
.proj-overview .project-gutter, .proj-overview .project-fab,
.proj-overview .project-chips, .proj-overview .project-actions { display: none; }
.proj-ov-month, .proj-ov-nodate {
  position: absolute; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-faint); pointer-events: none; white-space: nowrap;
}
.proj-ov-today { position: absolute; width: 2px; border-radius: 2px; background: var(--today-ink, var(--accent)); opacity: 0.3; pointer-events: none; }
.proj-ov-empty { position: absolute; left: 0; right: 0; top: 42%; margin: 0; text-align: center; color: var(--ink-faint); font-size: 13.5px; }
.proj-ov-card {
  position: absolute; display: flex; flex-direction: column; gap: 3px; box-sizing: border-box;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 12px; text-align: left;
  background: var(--card); color: inherit; font: inherit; cursor: pointer;
  box-shadow: 0 1px 4px rgba(20,20,18,0.07);
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}
.proj-ov-card:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(20,20,18,0.12); transform: translateY(-1px); }
/* uzavretý projekt (všetky úlohy splnené) = stlmená karta + zelený odznak fajky (bod 5b) */
.proj-ov-card.is-done { opacity: 0.62; }
.proj-ov-card.is-done:hover { opacity: 1; }
.proj-ov-check {
  position: absolute; top: -6px; right: -6px; width: 17px; height: 17px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-2); border-radius: 50%; box-shadow: 0 1px 4px rgba(20,20,18,0.14); z-index: 2;
}
.proj-ov-check .icon { width: 11px; height: 11px; color: #fff; stroke-width: 2.4; }
.proj-ov-name { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: calc(12.5px * var(--fs)); font-weight: 600; color: var(--ink); }
.proj-ov-name > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-ov-range { font-size: calc(10.5px * var(--fs)); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.proj-ov-map { width: 100%; height: 40px; flex: 0 0 auto; }
.proj-ov-map line { stroke: var(--line-strong); stroke-width: 1.2; }
/* Prechod rovina↔perspektíva — dvojfázový (plynulý): najprv sa odchádzajúca vrstva
   stiahne/vytratí (fáza A, transition), potom nabehne nová (fáza B, keyframes).
   Triedy nasadzuje projEnterOverview/projExitOverview len na čas prechodu. */
.proj-away .project-main {          /* fáza A do perspektívy: rovina sa stiahne */
  transform: scale(0.86); opacity: 0.12; transform-origin: 50% 45%;
  transition: transform 0.15s ease-in, opacity 0.15s ease-in;
}
.proj-ov-leave .project-overview-layer {   /* fáza A z perspektívy: vzdiali sa */
  transform: scale(1.12); opacity: 0;
  transition: transform 0.17s ease-in, opacity 0.17s ease-in;
}
.proj-ov-dive .project-overview-layer {    /* „ponor" do kliknutej karty (origin nastaví JS) */
  transform: scale(1.7); opacity: 0;
  transition: transform 0.19s ease-in, opacity 0.19s ease-in;
}
.proj-anim-in .project-main { animation: projOvZoomIn 0.24s ease-out; transform-origin: 50% 42%; }
@keyframes projOvZoomIn { from { transform: scale(0.7); opacity: 0.25; } to { transform: none; opacity: 1; } }
.proj-anim-away .project-overview-layer { animation: projOvZoomOut 0.24s ease-out; }
@keyframes projOvZoomOut { from { transform: scale(1.16); opacity: 0.2; } to { transform: none; opacity: 1; } }

/* voľná poznámka na premýšľanie — obyčajná poznámka (nie hub) */
.project-note-panel {
  position: absolute; left: 16px; bottom: 16px; z-index: 11;
  width: min(340px, calc(100% - 32px)); max-height: min(60%, 360px);
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(20,20,18,0.18);
}
.project-note-panel[hidden] { display: none; }
.project-note-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-bottom: 1px solid var(--line);
  font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
}
.project-note-close {
  border: none; background: none; cursor: pointer; font-size: 20px; line-height: 1;
  color: var(--ink-faint); padding: 0 2px;
}
.project-note-close:hover { color: var(--ink); }
.project-note-text {
  flex: 1; min-height: 120px; resize: none; border: none; outline: none;
  padding: 12px; font-family: inherit; font-size: 13.5px; line-height: 1.5;
  color: var(--ink); background: none; border-radius: 0 0 14px 14px;
}

/* spojnice: viditeľná krivka + neviditeľná široká hit-cesta na klik (vlož krok medzi) */
.project-arrow-hit { pointer-events: stroke; cursor: pointer; }
.project-arrow-hit:focus-visible { stroke: color-mix(in srgb, var(--accent) 22%, transparent); }
.project-link.is-required {
  stroke-width: 2.8;
  stroke-opacity: 0.95;
  stroke-dasharray: none;
}
.project-link.is-cross-project.is-required {
  stroke-dasharray: 7 5; /* cross hranica ostáva čitateľná aj pri hard vlajke */
}
.project-required-badge { pointer-events: none; color: var(--accent); }
.project-required-badge circle {
  fill: var(--card); stroke: var(--accent); stroke-width: 1.6;
}
.project-required-badge path {
  fill: none; stroke: var(--accent); stroke-width: 1.45;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Na dotyku (bez hoveru) sa plávajúce „+" na spojnici neobjaví — preto je na
   strede každej spojnice STABILNÉ „+", ktoré vloží krok medzi. Renderuje sa len
   na dotykových zariadeniach (JS gate cez PROJ_HOVER). */
.project-arrow-add { pointer-events: auto; cursor: pointer; }
.project-arrow-add circle { transition: r 0.1s ease; }
.project-arrow-add:active circle { r: 13; }

/* „+" na spojnici (desktop hover) — vloží krok medzi uzol a rodiča */
.project-insert {
  position: absolute; z-index: 7; transform: translate(-50%, -50%);
  width: 24px; height: 24px; border-radius: 50%; border: none; padding: 0;
  background: var(--accent); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 55%, transparent);
  animation: focus-in 0.12s ease;
}
.project-insert[hidden] { display: none; }
.project-insert:hover { transform: translate(-50%, -50%) scale(1.12); }
.project-insert .icon { width: 15px; height: 15px; }

/* FAB „+" — nová udalosť */
.project-fab {
  position: absolute; right: 18px; bottom: 18px; z-index: 10;
  width: 48px; height: 48px; border-radius: 50%; border: none;
  background: var(--accent); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 45%, transparent);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.project-fab:hover { transform: scale(1.07); box-shadow: 0 6px 22px color-mix(in srgb, var(--accent) 55%, transparent); }
.project-fab:active { transform: scale(0.96); }
.project-fab .icon { width: 24px; height: 24px; }

@media (max-width: 560px) {
  .project-gutter { width: 40px; }
  /* Hlavička: tituk + podnadpis na vlastnom riadku, akcie celou šírkou pod tým.
     Predtým akcie (4 tlačidlá) stláčali ľavý stĺpec na ~30px → podnadpis sa lámal
     po jednom slove na riadok („No / time / laid / out…"). */
  .project-head { flex-wrap: wrap; gap: 8px 10px; padding: 12px 14px 8px; }
  .project-titlewrap { flex: 1 1 0; }
  .project-title { max-width: 100%; }
  .project-actions {
    flex: 1 1 100%; min-width: 0; margin-left: 0; justify-content: flex-start; gap: 6px;
    flex-wrap: wrap; overflow: visible;
    padding: 1px 0 3px;
  }
  .project-actions .mini-btn { flex: 0 0 auto; }
  .project-actions .mini-btn { padding: 6px 9px; font-size: 12px; }
  .project-fab { right: 14px; bottom: 14px; width: 44px; height: 44px; }
}

/* Jednotný, dobre viditeľný stav klávesnicového fokusu. Je zámerne na konci
   súboru, aby ho lokálne input štýly s outline:none nevedeli prebiť. */
:where(button, a, input, textarea, select, [role="button"], [contenteditable="true"]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.check input:focus-visible + .box {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
.auth-overlay { z-index: 310; }
.auth-panel { width: min(430px, calc(100vw - 28px)); text-align: center; padding: 30px 24px 22px; }
.auth-mark { width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 16px; display: grid; place-items: center; background: #111827; color: #fff; font-size: 25px; font-weight: 760; }
.auth-lead { margin: 5px auto 22px; max-width: 330px; color: var(--muted, #667085); line-height: 1.45; }
.auth-choices { display: grid; gap: 10px; }
.auth-choice { min-height: 50px; width: 100%; border: 1px solid rgba(17,24,39,.14); border-radius: 13px; padding: 10px 15px; background: var(--panel, #fff); color: var(--text, #111827); font: inherit; font-weight: 650; display: grid; grid-template-columns: 28px 1fr 28px; align-items: center; text-align: center; cursor: pointer; }
.auth-choice::after { content: "›"; font-size: 22px; font-weight: 400; opacity: .55; }
.auth-choice.apple { background: #111; color: #fff; border-color: #111; }
.auth-brand { display: block; width: 21px; height: 21px; margin: auto; object-fit: contain; }
.auth-choice.apple .auth-brand { width: 18px; height: 22px; }
.auth-choice.code { margin-top: 4px; }
.auth-choice:disabled { opacity: .58; cursor: wait; }
.auth-continue { width: 100%; margin-top: 8px; }
.auth-status { margin: 17px 0 0; font-size: 14px; color: var(--muted, #667085); line-height: 1.4; }
.auth-status.error { color: #b42318; }
.auth-privacy { margin: 20px 0 0; font-size: 12px; color: var(--muted, #667085); line-height: 1.45; }
.auth-privacy a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }