/* Timeline (2026-10-13) – plynulá osa přes roky, minimalisticky jako Timeline v Notionu.
   Barvy tasků přes --c-<barva>-bg/fg, zaoblení --radius (3px) jako zbytek appky. */
.tl-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tl-wrap[hidden] { display: none; }
.tl-loading, .tl-empty { padding: 30px; }
.tl-toolbar { display: flex; align-items: center; gap: 10px; padding: 10px 20px; border-bottom: 1px solid var(--border); background: var(--surface); flex-wrap: wrap; font-size: 13px; }
.tl-toolbar .spacer { flex: 1; }
.tl-scroll { flex: 1; min-height: 0; overflow: auto; position: relative; }
.tl-inner { position: relative; min-height: 100%; }
.tl-head { display: flex; position: sticky; top: 0; z-index: 5; background: var(--surface); border-bottom: 1px solid var(--border); }
.tl-corner { width: 210px; flex: 0 0 210px; position: sticky; left: 0; z-index: 6; background: var(--surface); border-right: 1px solid var(--border); }
.tl-head-cols { position: relative; height: 46px; }
.tl-months { position: relative; height: 24px; }
.tl-month { position: absolute; top: 0; height: 24px; border-left: 1px solid var(--border); font-size: 12px; font-weight: 700; color: var(--heading); overflow: hidden; }
.tl-month span { position: sticky; left: 218px; padding: 5px 8px; display: inline-block; white-space: nowrap; }
.tl-ticks { position: relative; height: 22px; }
.tl-tick { position: absolute; top: 0; height: 22px; font-size: 10.5px; color: var(--text-muted); text-align: center; line-height: 22px; }
.tl-tick.we { color: color-mix(in srgb, var(--text-muted) 70%, transparent); }
.tl-tick.today { color: #fff; background: var(--today); border-radius: var(--radius); font-weight: 700; }
.tl-tick.wk { text-align: left; padding-left: 3px; border-left: 1px solid var(--border); white-space: nowrap; }
.tl-mline { position: absolute; top: 46px; bottom: 0; width: 1px; background: var(--border); z-index: 1; pointer-events: none; }
.tl-today { position: absolute; top: 46px; bottom: 0; width: 2px; margin-left: -1px; background: var(--today); z-index: 3; pointer-events: none; opacity: 0.8; }
.tl-grow { display: flex; height: 26px; align-items: flex-end; }
.tl-glabel { position: sticky; left: 0; z-index: 4; width: 210px; padding: 0 14px 3px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); background: var(--surface); }
.tl-row { display: flex; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.tl-label { position: sticky; left: 0; z-index: 4; width: 210px; flex: 0 0 210px; display: flex; align-items: center; gap: 8px; padding: 0 14px; font-size: 12.5px; font-weight: 700; color: var(--heading); background: var(--surface); border-right: 1px solid var(--border); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tl-track { position: relative; cursor: copy; }
.tl-bar { position: absolute; height: 20px; border-radius: var(--radius); padding: 0 7px; display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; cursor: pointer; overflow: hidden; white-space: nowrap; z-index: 2; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); user-select: none; }
.tl-bar:hover { filter: brightness(1.06); z-index: 3; min-width: max-content; }
.tl-bar.copying { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.tl-bar-t { overflow: hidden; text-overflow: ellipsis; }
.tl-flags { font-size: 11px; flex: 0 0 auto; }
.tl-bar.c-blue { background: var(--c-blue-bg); color: var(--c-blue-fg); } .tl-bar.c-green { background: var(--c-green-bg); color: var(--c-green-fg); }
.tl-bar.c-yellow { background: var(--c-yellow-bg); color: var(--c-yellow-fg); } .tl-bar.c-orange { background: var(--c-orange-bg); color: var(--c-orange-fg); }
.tl-bar.c-red { background: var(--c-red-bg); color: var(--c-red-fg); } .tl-bar.c-pink { background: var(--c-pink-bg); color: var(--c-pink-fg); }
.tl-bar.c-purple { background: var(--c-purple-bg); color: var(--c-purple-fg); } .tl-bar.c-teal { background: var(--c-teal-bg); color: var(--c-teal-fg); }
.tl-bar.c-gray { background: var(--c-gray-bg); color: var(--c-gray-fg); } .tl-bar.c-brown { background: var(--c-brown-bg); color: var(--c-brown-fg); }
/* Přepínač Plánu (Nástěnka / Kalendář / Timeline) v liště každého rozložení. */
.plan-switch button { font-weight: 600; }
/* „Seznam“ (plan-list.js) jen do 1024 px – desktop má beze změny tři rozložení (2026-11-02). */
.plan-switch button.plan-touch-only { display: none; }
@media (max-width: 1024px) { .plan-switch button.plan-touch-only { display: inline-block; } }
@media (max-width: 640px) { .tl-toolbar { padding: 8px 10px; gap: 6px; } }
.tl-people { display: inline-flex; flex: 0 0 auto; }
.tl-av { width: 15px; height: 15px; border-radius: 50%; font-size: 7.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1px var(--surface); }
.tl-av + .tl-av { margin-left: -4px; }

/* ---- Seznam (plan-list.js, 2026-11-02) – mobilní rozložení Plánu: tasky po dnech začátku ---- */
.pl-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pl-wrap[hidden] { display: none; }
.pl-month-nav .year { color: var(--heading); min-width: 120px; font-size: 14px; }
.pl-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 20px 40px; display: flex; flex-direction: column; gap: 14px; max-width: 900px; width: 100%; }
.pl-day { display: flex; flex-direction: column; gap: 6px; }
.pl-day-h { font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); padding: 2px 2px; }
.pl-day.today .pl-day-h { color: var(--today); }
.pl-item { display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-left-width: 4px; border-radius: var(--radius); padding: 9px 11px; font: inherit; cursor: pointer; min-height: 44px; }
.pl-item-main { display: flex; align-items: flex-start; gap: 6px; font-weight: 700; font-size: 14px; line-height: 1.3; }
.pl-item-t { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.pl-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; opacity: 0.85; }
.pl-item-row { min-width: 0; overflow-wrap: anywhere; }
.pl-item .tl-people { margin-left: auto; }
.pl-item.c-blue { background: var(--c-blue-bg); color: var(--c-blue-fg); } .pl-item.c-green { background: var(--c-green-bg); color: var(--c-green-fg); }
.pl-item.c-yellow { background: var(--c-yellow-bg); color: var(--c-yellow-fg); } .pl-item.c-orange { background: var(--c-orange-bg); color: var(--c-orange-fg); }
.pl-item.c-red { background: var(--c-red-bg); color: var(--c-red-fg); } .pl-item.c-pink { background: var(--c-pink-bg); color: var(--c-pink-fg); }
.pl-item.c-purple { background: var(--c-purple-bg); color: var(--c-purple-fg); } .pl-item.c-teal { background: var(--c-teal-bg); color: var(--c-teal-fg); }
.pl-item.c-gray { background: var(--c-gray-bg); color: var(--c-gray-fg); } .pl-item.c-brown { background: var(--c-brown-bg); color: var(--c-brown-fg); }
@media (max-width: 640px) { .pl-scroll { padding: 10px 10px 40px; } .pl-month-nav .year { min-width: 104px; } }