/* Zadania -- osobisty instrument, nie produkt.
   Zasada koloru: kolor zawsze cos znaczy. Teal = "zrozumiane", ceglany = "po terminie".
   Nic wiecej nie dostaje barwy, wiec kazda plama koloru niesie informacje. */

:root {
  --ink:      #15202c;   /* granatowa czern -- naprawde niebieska, nie przygaszony #111 */
  --paper:    #eef1f4;
  --surface:  #ffffff;
  --muted:    #64748b;
  --faint:    #94a3b8;
  --line:     #d8dfe6;
  --line-soft:#e7ecf0;
  --rule-row:  #edf0f3;
  --parsed:   #0b6e63;
  --parsed-bg:#0b6e6314;
  --late:     #b3372a;
  --shift:    0 0 0 1px var(--line);

  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Szesc stopni, kazdy z osobnym zadaniem. Wczesniej bylo dziewiec rozmiarow
     bez systemu, a 13px robil naraz sekcje, etykiety, przyciski i meta --
     wszystko wazylo tyle samo, wiec nic nie prowadzilo oka. */
  --t-micro:   11px;   /* skroty dni, liczniki */
  --t-meta:    12px;   /* tagi, dzwonki, chipy */
  --t-small:   13px;   /* nazwy sekcji, etykiety, przyciski */
  --t-body:    15px;   /* tresc zadania -- to sie czyta */
  --t-lead:    18px;   /* nazwa miesiaca */
  --t-display: 30px;   /* data dnia */

  /* Wieksze stopnie ciasniej, mniejsze luzniej -- tak zachowuje sie pismo
     optycznie i tak sie je sklada od stu lat. */
  --track-display: -0.021em;
  --track-body:    -0.006em;
  --track-micro:    0.012em;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:      #e6ecf2;
    --paper:    #0e1620;
    --surface:  #16202b;
    --muted:    #8b9cb0;
    --faint:    #5f7186;
    --line:     #26333f;
    --line-soft:#1d2833;
    --rule-row:  #1a2330;
    --parsed:   #4fc7b6;
    --parsed-bg:#4fc7b61f;
    --late:     #f0796a;

    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--t-body)/1.5 var(--sans);
  letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
  /* Apka na iOS rysuje pod paskiem statusu i wycieciem -- w przegladarce to 0. */
  padding-top: env(safe-area-inset-top);
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--parsed-bg); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--parsed);
  outline-offset: 2px;
  border-radius: 3px;
}

.shell {
  max-width: 660px;
  margin: 0 auto;
  padding: 0 20px 96px;
}

/* --- naglowek ---------------------------------------------------------- */

.head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 0 20px;
}

.head-day {
  font-size: var(--t-meta);
  letter-spacing: var(--track-micro);
  color: var(--muted);
}

.head-date {
  font-size: var(--t-display);
  font-weight: 600;
  letter-spacing: var(--track-display);
  line-height: 1.1;
  margin-top: 2px;
}

.head-count {
  font-family: var(--mono);
  font-size: var(--t-small);
  color: var(--muted);
  white-space: nowrap;
}

.head-count b { color: var(--ink); font-weight: 500; }

/* --- pole wpisu: jedyne miejsce, gdzie ta apka podnosi glos ------------- */

.capture { position: relative; margin-bottom: 16px; }

.capture-box {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color .15s;
}

.capture-box:focus-within { border-color: var(--muted); }

.capture-ghost,
.capture-input {
  font: 400 16px/1.5 var(--mono);   /* mono: wejscie to mini-jezyk, a monospace
                                       daje idealne pokrycie podswietlen */
  letter-spacing: 0;
  padding: 14px 16px;
  border: 0;
  width: 100%;
  white-space: pre;
  overflow-x: auto;
  scrollbar-width: none;
}

.capture-ghost::-webkit-scrollbar,
.capture-input::-webkit-scrollbar { display: none; }

.capture-ghost {
  position: absolute;
  inset: 0;
  color: transparent;             /* widac tylko podkreslenia, tekst rysuje input */
  pointer-events: none;
  user-select: none;
}

.capture-ghost mark {
  background: var(--parsed-bg);
  color: transparent;
  box-shadow: inset 0 -2px 0 var(--parsed);
  border-radius: 2px;
}

.capture-input {
  position: relative;
  background: transparent;
  color: var(--ink);
  display: block;
}

.capture-input::placeholder { color: var(--faint); }
.capture-input:focus { outline: none; }

/* Kontener jest zawsze, z zarezerwowana wysokoscia: gdyby pojawial sie dopiero
   przy pisaniu, cala lista podskakiwalaby przy pierwszym znaku. */
.resolution {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  min-height: 19px;
  padding: 10px 4px 0;
  font-size: var(--t-small);
  color: var(--parsed);
}

/* Odstepy musza byc TUTAJ: rodzic ma jedno dziecko, wiec jego gap nic nie robi. */
.resolution-body {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  animation: settle .18s ease-out;
}

@keyframes settle {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}

.resolution-when { font-weight: 500; }
.resolution-note { color: var(--muted); }
.resolution-hint { color: var(--faint); }

/* To, co zadanie odziedziczy z kontekstu widoku (aktywny filtr, wybrany dzien).
   Pokazane wprost, zeby nie bylo magii przy zapisie. */
.resolution-inherit {
  color: var(--faint);
  border: 1px dashed var(--line);
  border-radius: 20px;
  padding: 1px 8px;
}

@media (prefers-reduced-motion: reduce) {
  .resolution-body { animation: none; }
}

/* --- sekcje ------------------------------------------------------------ */

.section { margin-top: 26px; }

.section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

.section-name {
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: var(--track-micro);
  color: var(--muted);
}
.section-name.late { color: var(--late); }

.section-count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: var(--t-meta);
  color: var(--faint);
}

/* --- wiersz zadania ---------------------------------------------------- */

.row {
  display: grid;
  align-items: baseline;
  gap: 10px;
  /* Bez linii miedzy wierszami. Strukture niosa wyrownane kolumny i reguly
     sekcji; kreska pod kazdym wierszem dokladala trzeciej warstwy szumu do
     czegos, co juz sie czyta. Wiersz siega 10px poza kolumne tresci, zeby
     podswietlenie obejmowalo margines, a nie ucinalo sie na literach. */
  padding: 12px 10px 12px 20px;
  margin: 0 -10px;
  border-radius: 8px;
  position: relative;
}

/* Kolumny sa STALE, nie `auto`. Kazdy wiersz to osobny kontener siatki, wiec
   kolumna dopasowana do tresci ma inna szerokosc w kazdym wierszu i nic nie
   ustawia sie w pionie. Stale szerokosci daja kolumny, ktore da sie skanowac. */
.row.by-day { grid-template-columns: 22px 52px minmax(0, 1fr) 56px 16px 92px 42px; }

/* Skrzynka: w lewej linijce godzina WRZUCENIA, a w kolumnie po niej termin --
   to jedyna informacja, ktorej po wierszu nie widac, a ktora decyduje o tym,
   czy zadanie wyszlo juz poza skrzynke. */
.row.by-inbox { grid-template-columns: 22px 46px minmax(0, 1fr) 84px 14px 68px 42px; }

.due {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--parsed);
}
/* Waskie kolumny meta, bo w tym widoku dzwonek i dodatkowe tagi sa rzadkie --
   szeroka rezerwa zjadalaby tytul (przy 112px tytul schodzil do 132px i sie lamal). */
.row.by-tag { grid-template-columns: 22px minmax(0, 1fr) 52px 100px 68px 84px 42px; }

/* W DOM termin idzie PO przyciskach (jest poza .row-meta), a wygladac ma
   odwrotnie. Sam numer kolumny nie wystarczy: grid pakuje "rzadko", wiec gdy
   kursor minie kolumne 7, powrot do 6 tworzy nowy rzad. Stad jawny grid-row. */
.row.by-tag .row-when     { grid-area: 1 / 6; }
.row.by-tag .cell-actions { grid-area: 1 / 7; }

/* Opakowanie meta rozpuszcza sie w siatce wiersza, zeby jego dzieci byly
   komorkami tej siatki -- a na telefonie wraca jako zwykly flex w jednej komorce. */
.row-meta { display: contents; }

/* Do lewej, nie do prawej: to slowa, nie liczby. Wspolny lewy brzeg sprawia,
   ze "◷" i "#" tworza pionowa linie, po ktorej oko skanuje. */
.cell-bell    { text-align: left; }
.cell-series  { text-align: left; }
.cell-tags    { display: flex; gap: 8px; justify-content: flex-start; overflow: hidden; }
.cell-actions { display: flex; gap: 4px; justify-content: flex-end; }

.cell-tags .tag { white-space: nowrap; }

/* Pasek priorytetu tylko dla p1. Drugi poziom by go rozwodnil. */
.row.p1::before {
  content: "";
  position: absolute;
  left: 10px; top: 9px; bottom: 9px;
  width: 2px;
  background: var(--late);
  border-radius: 1px;
}

.check {
  position: relative;
  width: 17px; height: 17px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  padding: 0;
  align-self: center;
  transition: border-color .14s, background .14s;
}

/* Powiekszony cel dotkniecia bez powiekszania kolka: 17px to za maly cel dla
   kciuka, a wieksze kolko rozpychaloby wiersz. */
.check::before { content: ""; position: absolute; inset: -7px; }

.check:hover { border-color: var(--parsed); }

.check[aria-pressed="true"] {
  background: var(--parsed);
  border-color: var(--parsed);
}

/* Ptaszek z obroconego naroznika -- ostry w kazdej skali, bez pliku. */
.check[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  left: 4.5px; top: 1px;
  width: 4px; height: 8px;
  border: solid var(--surface);
  border-width: 0 1.7px 1.7px 0;
  transform: rotate(43deg);
}

/* Godziny jako pionowa linijka -- oko skanuje ksztalt dnia w jednej kolumnie. */
.row-time {
  font-family: var(--mono);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  text-align: right;
}

.row-time.none { color: var(--faint); }
.row.overdue .row-time { color: var(--late); }

.row-title {
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: left;
  padding: 0;
  font: inherit;
  color: inherit;
  border-radius: 3px;
}

button.row-title:hover { color: var(--parsed); }

.row-edit {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--parsed);
  border-radius: 4px;
  padding: 2px 6px;
  margin: -3px -7px;
}

.row-edit:focus { outline: none; }

.row:hover { background: var(--surface); }

/* Swiezo dodane zadanie mruga raz, bo moglo wpasc do sekcji daleko pod ekranem. */
.row.fresh { animation: greet 2s ease-out; }

@keyframes greet {
  0%, 55% { background: var(--parsed-bg); box-shadow: inset 2px 0 0 var(--parsed); }
  100%    { background: transparent; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .row.fresh { animation: none; background: var(--parsed-bg); }
}

.row.done .row-title { color: var(--faint); text-decoration: line-through; }

.row-meta > span {
  font-size: var(--t-meta);
  color: var(--muted);
  white-space: nowrap;
}

.bell {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--faint);
}

.tag {
  color: var(--muted);
  background: none;
  border: 0;
  padding: 5px 0;
  margin: -5px 0;
  font-size: var(--t-meta);
  letter-spacing: var(--track-micro);
}

.tag::before { content: "#"; color: var(--faint); }
.tag:hover { color: var(--parsed); }

.row-del {
  color: var(--faint);
  opacity: 0;
  font-size: var(--t-body);
  line-height: 1;
  padding: 5px;
  margin: -5px -2px;
  transition: opacity .12s;
}

.row:hover .row-del,
.row-del:focus-visible { opacity: 1; }
.row-del:hover { color: var(--late); }

@media (hover: none) { .row-del { opacity: .5; } }

/* Ulozenie "po tagu": sekcja nazywa tag, wiec termin musi byc przy zadaniu.
   Same kolumny sa zdefiniowane wyzej, przy .row. */
.row-when {
  /* Szerokosc daje teraz kolumna siatki; wlasne min-width tylko by ja rozpychalo. */
  font-family: var(--mono);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}

.row.by-tag.overdue .row-when { color: var(--late); }

.series { color: var(--faint); font-size: var(--t-small); }

.row-time, .row-when { padding: 0; border: 0; }
.row-time:hover, .row-when:hover { color: var(--parsed); }

.row-more {
  color: var(--faint);
  font-size: var(--t-body);
  line-height: 1;
  padding: 5px;
  margin: -5px -2px;
  opacity: 0;
  transition: opacity .12s;
}

.row:hover .row-more,
.row-more:focus-visible,
.row-more.on { opacity: 1; }

.row-more.on { color: var(--parsed); }

@media (hover: none) { .row-more { opacity: .5; } }

/* --- panel szczegolow --------------------------------------------------- */

.editor {
  /* Zapas pod pasek zakladek, zeby scrollIntoView nie zatrzymal sie pod nim. */
  scroll-margin-bottom: 84px;
  padding: 12px 0 14px 32px;
  border-bottom: 1px solid var(--line-soft);
  animation: settle .16s ease-out;
}

.editor-row {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 10px;
  align-items: start;
  padding: 4px 0;
}

.editor-label { font-size: var(--t-meta); color: var(--muted); padding-top: 6px; }

.editor-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.editor-note { font-size: var(--t-meta); color: var(--faint); }

.chip {
  font-size: var(--t-meta);
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--muted);
  white-space: nowrap;
}

.chip:hover { border-color: var(--muted); color: var(--ink); }

.chip.on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.field {
  font: inherit;
  font-size: var(--t-small);
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
}

.field:disabled { opacity: .45; }

.field.time {
  width: 74px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.field.bad { border-color: var(--late); color: var(--late); }

/* --- wybierak daty ------------------------------------------------------ */
/* Na tej samej siatce co zakladka "kalendarz". Natywny <input type=date>
   wnosil wlasny jezyk wizualny przegladarki -- niebieskie zaznaczenia i
   systemowe zaokraglenia zderzaly sie z reszta apki. */

.picker { position: relative; }

.picker-trigger {
  text-align: left;
  min-width: 122px;
  cursor: pointer;
}

.picker-trigger.is-blank { color: var(--faint); }
.picker-trigger:hover { border-color: var(--muted); }
.picker-trigger[aria-expanded="true"] { border-color: var(--parsed); color: var(--ink); }

.picker-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  width: 252px;
  max-width: calc(100vw - 24px);
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  /* Jedyny cien w apce: warstwa unoszaca sie nad trescia musi sie odkleic. */
  box-shadow: 0 8px 24px -8px rgb(0 0 0 / 22%);
  animation: settle .12s ease-out;
}

.picker-pop .cal-head { padding: 0 0 8px; }
.picker-pop .cal-month { font-size: var(--t-small); }
.picker-pop .cal-nav { padding: 2px 8px; }
.picker-pop .cal-dow { font-size: var(--t-micro); padding-bottom: 4px; }

.picker-pop .cal-day {
  height: 30px;
  font-size: var(--t-meta);
  border-radius: 6px;
  gap: 0;
}

@media (prefers-reduced-motion: reduce) { .picker-pop { animation: none; } }
.field.grow { flex: 1; min-width: 150px; }
textarea.field { resize: vertical; line-height: 1.45; }

.editor-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}

.editor-del { margin-right: auto; font-size: var(--t-small); color: var(--late); }
.editor-del:hover { text-decoration: underline; text-underline-offset: 3px; }
.editor-cancel { font-size: var(--t-small); color: var(--muted); padding: 6px 10px; }

.editor-save {
  font-size: var(--t-small);
  font-weight: 500;
  background: var(--ink);
  color: var(--paper);
  padding: 6px 18px;
  border-radius: 7px;
}

.series-chip {
  font-size: var(--t-meta);
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  padding: 0;
  white-space: nowrap;
}

.series-chip:hover { color: var(--parsed); }
.series-chip[aria-expanded="true"] { color: var(--parsed); }

/* Rozwiniete powtorzenia sa podrzedne wobec wiersza, ktory je otworzyl. */
.row.nested { padding-left: 30px; border-bottom-color: transparent; }
.row.nested .row-title { color: var(--muted); }
.row.nested + .row:not(.nested) { border-top: 1px solid var(--line-soft); }

.editor-del.is-series { margin-right: 0; }
.editor-del.is-armed { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* --- pusty stan: zaproszenie, nie przeprosiny -------------------------- */

.empty {
  padding: 44px 0 8px;
  color: var(--muted);
  font-size: var(--t-body);
  max-width: 40ch;
}

.empty code {
  font-family: var(--mono);
  font-size: var(--t-small);
  color: var(--parsed);
  background: var(--parsed-bg);
  padding: 1px 5px;
  border-radius: 3px;
}

/* --- kalendarz --------------------------------------------------------- */

.cal-head {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 0 14px;
}

.cal-month {
  font-size: var(--t-lead);
  font-weight: 600;
  margin-right: auto;
  letter-spacing: -0.01em;
}

.cal-nav {
  padding: 6px 10px;
  color: var(--muted);
  border-radius: 6px;
  line-height: 1;
}

.cal-nav:hover { background: var(--surface); color: var(--ink); }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}

.cal-dow {
  font-size: var(--t-micro);
  color: var(--faint);
  text-align: center;
  padding-bottom: 8px;
}

.cal-day {
  /* Kwadratowe na telefonie, splaszczone na desktopie -- inaczej siatka
     zjada 660px i spycha liste dnia pod krawedz ekranu. */
  height: clamp(46px, 11vw, 62px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 8px;
  font-family: var(--mono);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  transition: background .12s;
}

.cal-day:hover { background: var(--surface); }
.cal-day.outside { color: var(--faint); }

/* Zaznaczenie na samej liczbie, nie na calej komorce. Wypelniona komorka byla
   najciezszym elementem ekranu i przygniatala reszte; krazek trzyma sie tego
   samego jezyka co kolka przy zadaniach. */
.cal-day > span:first-child {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
}

.cal-day.today > span:first-child {
  font-weight: 500;
  box-shadow: inset 0 0 0 1px var(--line);
}

.cal-day.picked > span:first-child {
  background: var(--ink);
  color: var(--paper);
  box-shadow: none;
}

.dots { display: flex; gap: 3px; height: 4px; }

.dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--faint);
}

.dot.urgent { background: var(--late); }

/* --- pasek tagow i zakladki -------------------------------------------- */

.tagbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tagbar button {
  font-size: var(--t-meta);
  color: var(--muted);
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 20px;
}

.tagbar button:hover { border-color: var(--muted); }

.tagbar button.on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.tabs {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: center;
  gap: 2px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line-soft);
}

.tabs button {
  font-size: var(--t-small);
  color: var(--muted);
  padding: 7px 20px;
  border-radius: 8px;
}

.tabs button.on { color: var(--ink); background: var(--surface); box-shadow: var(--shift); }

/* --- stopka / ustawienia ---------------------------------------------- */

.footer {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: var(--t-small);
  color: var(--faint);
}

.footer button { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.footer button:hover { color: var(--parsed); }

.toast-action {
  /* Kolor wlasny toasta -- teal na jasnym tle toasta w ciemnym motywie
     mialby za slaby kontrast. */
  color: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.toast-action:hover { text-decoration-thickness: 2px; }

.toast {
  display: flex;
  align-items: center;
  gap: 16px;
  position: fixed;
  left: 50%; bottom: 76px;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--t-small);
  padding: 9px 16px;
  border-radius: 8px;
  z-index: 10;
  animation: settle .18s ease-out;
}

@media (max-width: 480px) {
  .shell { padding: 0 16px 96px; }
  .head-date { font-size: 24px; }

  /* Kazde dziecko dostaje jawne miejsce. Mieszanie jawnego grid-row z
     automatycznym umieszczaniem przerzucalo termin i tytul na zle kolumny. */
  .row { row-gap: 2px; }

  /* Stale kolumny nie mieszcza sie na 390px. Meta zjezdza pod tytul jako jeden
     pasek, wiec wraca z display:contents do zwyklego flexa w jednej komorce. */
  .row-meta {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
  }

  .cell-bell, .cell-series { text-align: left; }
  .cell-tags    { flex: 1; justify-content: flex-start; }
  .cell-actions { margin-left: auto; }

  .row.by-day, .row.by-inbox { grid-template-columns: 22px 48px 1fr; }
  :is(.row.by-day, .row.by-inbox) .check     { grid-area: 1 / 1 / 2 / 2; }
  :is(.row.by-day, .row.by-inbox) .row-time  { grid-area: 1 / 2 / 2 / 3; }
  :is(.row.by-day, .row.by-inbox) .row-title { grid-area: 1 / 3 / 2 / 4; }
  :is(.row.by-day, .row.by-inbox) .row-meta  { grid-area: 2 / 2 / 3 / 4; }

  /* Sama meta w drugiej linii to przyciski akcji -- wtedy wracaja do linii
     pierwszej, a wiersz jest tej samej wysokosci co pozostale. */
  :is(.row.by-day, .row.by-inbox).no-meta { grid-template-columns: 22px 48px minmax(0, 1fr) auto; }
  :is(.row.by-day, .row.by-inbox).no-meta .row-meta { grid-area: 1 / 4 / 2 / 5; }

  .row.by-tag { grid-template-columns: 22px 1fr auto; }
  .row.by-tag.no-meta { grid-template-columns: 22px minmax(0, 1fr) auto auto; }
  .row.by-tag.no-meta .row-when { grid-area: 1 / 3 / 2 / 4; }
  .row.by-tag.no-meta .row-meta { grid-area: 1 / 4 / 2 / 5; }
  .row.by-tag .check     { grid-area: 1 / 1 / 2 / 2; }
  .row.by-tag .row-title { grid-area: 1 / 2 / 2 / 3; }
  .row.by-tag .row-when  { grid-area: 1 / 3 / 2 / 4; min-width: 0; }
  .row.by-tag .row-meta  { grid-area: 2 / 2 / 3 / 4; }

  .row.nested { padding-left: 22px; }

  /* Etykiety nad kontrolkami: 84px kolumny nie zmiesci sie na 390px. */
  .editor { padding-left: 22px; }
  .editor-row { grid-template-columns: 1fr; gap: 4px; }
  .editor-label { padding-top: 6px; }
  .toast { left: 16px; right: 16px; transform: none; justify-content: space-between; }
}

/* Plan jednego dnia: wjezdza z tej strony, w ktora przesunieto palec, zeby
   bylo widac, ze to kartkowanie dni, a nie inny ekran. */
.day-nav { justify-content: space-between; }
.day-nav .cal-nav { white-space: nowrap; }
.day-view { animation: day-in 180ms ease-out; }
.day-view.from-left { --from: -24px; }
.day-view.from-right { --from: 24px; }
@keyframes day-in { from { opacity: 0; transform: translateX(var(--from)); } }
@media (prefers-reduced-motion: reduce) { .day-view { animation: none; } }