/* =====================================================================================
   Wykonywajka - design layer v2 (Oct 2026)
   A calm, modern dark skin over the existing layout: one neutral surface scale, quieter lines,
   softer event blocks with a colored edge, one radius system (blocks 8 · inputs 12 · cards 16 ·
   buttons/pills full), short eased transitions, reduced-motion respected.
   Loaded after styles.css; overrides only looks, never layout logic. Remove the <link> to roll back.
   ===================================================================================== */

:root {
  --bg: #0c0c10;
  --s1: #121217;          /* cards, grid */
  --s2: #18181f;          /* raised: dialogs, popovers */
  --s3: #20202a;          /* inputs, hovers */
  --line: rgba(255, 255, 255, 0.06);
  --line-2: rgba(255, 255, 255, 0.1);
  --text: #ececf1;
  --text-muted: #8d8d9a;
  --accent: #6d72f6;
  --accent-soft: rgba(109, 114, 246, 0.14);
  --card: var(--s1);
  --card-elevated: var(--s2);
  --border: var(--line-2);
  --border-strong: rgba(255, 255, 255, 0.12);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --shadow-pop: 0 24px 64px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.3);
}

html, body { background: var(--bg); }
body {
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: rgba(109, 114, 246, 0.35); }

/* thin, quiet scrollbars */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.14) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* keyboard focus always visible, never on mouse click */
:where(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- header: frosted bar ---------- */
header.topbar {
  background: rgba(12, 12, 16, 0.78);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
header.topbar h1 { letter-spacing: -0.02em; }
.hdr-nav-btn { border-color: var(--line-2); transition: background 0.16s var(--ease), border-color 0.16s var(--ease), transform 0.1s; }
.hdr-nav-btn:active, .care-seg:active, .span-seg:active { transform: scale(0.97); }
.hw-arrow { border-radius: 10px; transition: background 0.15s; }
.hw-arrow:hover { background: rgba(255, 255, 255, 0.07); }
.hw-week { background: rgba(255, 255, 255, 0.06); color: var(--text-muted); border-radius: 999px; }

/* ---------- buttons & inputs ---------- */
.btn { border-radius: 999px; font-weight: 600; transition: filter 0.15s, transform 0.1s, background 0.15s; }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(0.97); }
.btn.secondary { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line-2); color: var(--text); }
.btn.secondary:hover { background: rgba(255, 255, 255, 0.1); filter: none; }
input[type="text"], input[type="password"], input[type="date"], input[type="number"], input[type="search"], textarea, select {
  background: var(--s3);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input[type="text"]:focus, input[type="number"]:focus, input[type="search"]:focus, textarea:focus, select:focus {
  outline: none; border-color: rgba(109, 114, 246, 0.7); box-shadow: 0 0 0 3px rgba(109, 114, 246, 0.18);
}

/* ---------- cards (sidebar on PC, panels) ---------- */
.card, .mini-cal, .water-mini-panel, .minutowka-clock {
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.water-mini-panel {
  background: radial-gradient(120% 90% at 0% 0%, rgba(56, 189, 248, 0.11), transparent 60%), var(--s1);
  border-color: rgba(56, 189, 248, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.mc-nav-btn { border-radius: 8px; }

/* ---------- the week grid ---------- */
.week-grid-wrap {
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.wg-day-head { background: var(--s1); color: var(--text-muted); font-size: 11.5px; letter-spacing: 0.02em; text-transform: capitalize; }
.week-grid-day-num { font-size: 17px; font-weight: 650; letter-spacing: -0.02em; }
.wg-day-head.today .week-grid-day-num {
  display: grid; place-items: center; width: 26px; height: 26px; margin: 0 auto; border-radius: 999px; font-size: 15px;
  background: var(--accent); color: #fff; box-shadow: 0 4px 12px rgba(109, 114, 246, 0.4);
}
.wg-allday-col, .wg-gutter-allday, .wg-gutter-header { background: var(--s1); }
.wg-hour-label { color: #6f6f7c; font-size: 11px; }
.week-grid-day-col { border-left-color: var(--line) !important; }
.week-grid-day-col.today { background-color: rgba(109, 114, 246, 0.045); }

/* events: calmer fill (the event color under a dark veil), a colored left edge, no heavy outline */
.grid-event {
  border-radius: 8px;
  background-image: linear-gradient(rgba(14, 14, 20, 0.4), rgba(14, 14, 20, 0.4)) !important;
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.14s var(--ease), box-shadow 0.14s var(--ease), filter 0.14s, opacity 0.2s;
}
.grid-event:hover { filter: brightness(1.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 18px rgba(0, 0, 0, 0.35); z-index: 5; }
.grid-event-title { color: #f6f6f9; font-weight: 600; letter-spacing: -0.005em; }
.grid-event-time { color: rgba(246, 246, 249, 0.68); }
/* tasks: same calm fill, a fine dashed outline instead of a loud one */
.grid-event.task-linked {
  border-top-color: rgba(255, 255, 255, 0.16) !important;
  border-right-color: rgba(255, 255, 255, 0.16) !important;
  border-bottom-color: rgba(255, 255, 255, 0.16) !important;
}
.grid-event.done { opacity: 0.55; }
/* background context (Praca zdalna): a faint wash, not a grey slab */
.grid-bg { opacity: 0.6; border-radius: 6px; }
.grid-bg-title { font-size: 9.5px; letter-spacing: 0.05em; }

/* multi-day bars (trips): a touch calmer, same color */
.week-grid-chip.multi-day-bar { filter: saturate(0.8) brightness(0.92); text-shadow: none; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.week-grid-chip.multi-day-bar:hover { filter: saturate(0.9) brightness(1); }
.week-grid-chip { border-radius: 6px; }
.pending-chip { border-radius: 8px !important; }

/* ---------- dialogs & popovers ---------- */
.modal-overlay { background: rgba(6, 6, 10, 0.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.modal-overlay.popover-mode { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.modal {
  background: var(--s2);
  border: 1px solid var(--line-2);
  border-radius: 18px;
  box-shadow: var(--shadow-pop);
}
.notif-panel, .pending-pop, .done-sheet, .task-hover, .mn-add-row:not([hidden]), .custom-ml-row:not([hidden]) {
  border-color: var(--line-2) !important;
  box-shadow: var(--shadow-pop) !important;
}
.done-sheet, .notif-panel { background: var(--s2); }
.toast { border-radius: 999px; }

/* ---------- Minutówka rows ---------- */
.minutowka-clock .task-row, .minutowka-panel .task-row { border-top-color: var(--line) !important; }
.task-row .task-title { letter-spacing: -0.005em; }

/* ---------- phone ---------- */
@media (max-width: 859px) {
  header.topbar h1#page-title { font-size: 17px; padding: 6px 14px; }
  .date-nav .btn.icon { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); color: var(--text); }
  .date-nav .btn.icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .date-nav .label { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
  .span-switch, .care-filter { background: var(--s1); border-color: var(--line); }
  .span-seg.active { box-shadow: 0 2px 10px rgba(109, 114, 246, 0.3); }
  .mobile-fab { box-shadow: 0 10px 30px rgba(79, 70, 229, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
  .mobile-month { background: var(--s1); border-color: var(--line); }
  .mm-cell { border-color: var(--line) !important; }
}

/* ---------- motion: respect the system setting ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Glow up / Health filter: two small icon toggles (PC: the grid's top-left corner; phone: next to Dzień / 3 dni / Miesiąc) */
.care-filter { display: inline-flex; gap: 3px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); }
.care-seg { width: 26px; height: 26px; padding: 0; display: grid; place-items: center; border-radius: 999px; }
.care-seg svg { width: 13px; height: 13px; }
.care-seg span { display: none; }
.wg-gutter-header { display: grid; place-items: center; }
.wg-gutter-header .care-filter { flex-direction: column; gap: 2px; padding: 2px; }
.wg-gutter-header .care-seg { width: 20px; height: 18px; }
.wg-gutter-header .care-seg svg { width: 11px; height: 11px; }
.span-row { display: flex; align-items: center; gap: 8px; margin: -4px 0 12px; }
.span-row .span-switch { flex: 1; margin: 0; }
.span-row .care-filter { flex-shrink: 0; margin: 0 !important; }
#view-container .span-row .care-filter .care-seg { flex: none; width: 32px; height: 32px; }
#view-container .span-row .care-filter .care-seg svg { width: 14px; height: 14px; }
.wg-gutter-header .care-filter { padding: 3px; gap: 3px; }
.wg-gutter-header .care-seg { width: 24px; height: 18px; }
.wg-gutter-header .care-seg svg { width: 13px; height: 13px; }
.care-seg-glow svg { fill: #f9a8d4 !important; }
.care-seg-health svg { fill: #6ee7b7 !important; }

/* "now" line across today's column */
.now-line { position: absolute; left: -1px; right: 0; height: 2px; margin-top: -1px; background: #ef4444; z-index: 7; pointer-events: none; box-shadow: 0 0 6px rgba(239, 68, 68, 0.45); }
.now-line::before { content: ''; position: absolute; left: -5px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 2px var(--s1); }

/* ===== Tasks in the calendar: a real round checkbox + their own calmer look ===== */
.task-icon {
  display: inline-block; flex-shrink: 0; width: 12px; height: 12px; margin-right: 5px; vertical-align: -1.5px;
  border-radius: 50%; border: 1.6px solid rgba(255, 255, 255, 0.85); box-sizing: border-box;
  font-size: 0 !important; line-height: 0 !important; color: transparent !important; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
.task-icon::after { content: none !important; }
.task-icon:hover { transform: scale(1.15); border-color: #fff; background: rgba(255, 255, 255, 0.18); }
.task-icon[aria-checked="true"] {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.92)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 9px no-repeat;
}
.grid-event.tiny .task-icon { width: 10px; height: 10px; border-width: 1.4px; vertical-align: -1px; }
.grid-event.tiny .task-icon[aria-checked="true"] { background-size: 8px; }
.grid-event-title:has(> .task-icon) { display: inline-flex; align-items: center; min-width: 0; }
.grid-event-row .grid-event-title:has(> .task-icon) { overflow: hidden; }

/* task blocks: lighter, see-through fill + thin outline, so they read as "to do" next to solid events */
.grid-event.task-linked {
  border-style: solid !important;
  background-image: linear-gradient(rgba(14, 14, 20, 0.55), rgba(14, 14, 20, 0.55)) !important;
  border-top-color: rgba(255, 255, 255, 0.1) !important;
  border-right-color: rgba(255, 255, 255, 0.1) !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}
/* done: faded, title quietly crossed out, the tick stays crisp */
.grid-event.task-linked.done { opacity: 0.5; filter: saturate(0.4); }
.grid-event.task-linked.done .grid-event-title { text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.45); text-decoration-thickness: 1px; }
.grid-event.task-linked.done:hover { opacity: 0.8; }
.event-row .task-icon { width: 14px; height: 14px; }

/* a block with a description: the title stays on one line (…) so the description lines below are whole */
.grid-event.has-desc .grid-event-title { white-space: nowrap; overflow: hidden; min-width: 0; }
.grid-event.has-desc .grid-event-title .ge-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.grid-event.has-desc .grid-event-row { flex-wrap: nowrap; }
.grid-event-desc { color: rgba(246, 246, 249, 0.62); font-size: 10.5px; line-height: 11.4px; margin-top: 1px; }

/* ===== Glow up / Health filter v2: two round tinted toggles, no capsule ===== */
.care-filter { background: none !important; border: none !important; padding: 0 !important; gap: 5px !important; flex-direction: row !important; }
.care-seg {
  --cc: 249, 168, 212;
  width: 22px !important; height: 22px !important; border-radius: 50% !important; border: none; cursor: pointer;
  background: rgba(var(--cc), 0.08) !important; box-shadow: inset 0 0 0 1px rgba(var(--cc), 0.22);
  transition: background 0.18s var(--ease), box-shadow 0.18s var(--ease), transform 0.12s;
}
.care-seg-health { --cc: 110, 231, 183; }
.care-seg svg { width: 12px !important; height: 12px !important; fill: rgb(var(--cc)) !important; opacity: 0.7; transition: opacity 0.18s; }
.care-seg:hover { background: rgba(var(--cc), 0.16) !important; box-shadow: inset 0 0 0 1px rgba(var(--cc), 0.45); }
.care-seg:hover svg { opacity: 1; }
.care-seg.active { background: rgba(var(--cc), 0.26) !important; box-shadow: inset 0 0 0 1.5px rgb(var(--cc)), 0 0 12px rgba(var(--cc), 0.35); }
.care-seg.active svg { opacity: 1; }
.wg-gutter-header .care-filter { flex-direction: row !important; }
.wg-gutter-header .care-seg { width: 20px !important; height: 20px !important; }
.wg-gutter-header .care-seg svg { width: 11px !important; height: 11px !important; }
#view-container .span-row .care-filter .care-seg { width: 34px !important; height: 34px !important; }
#view-container .span-row .care-filter .care-seg svg { width: 15px !important; height: 15px !important; }

/* ---------- Wodzianka (PC sidebar), compact: smaller orb + drinks, so Minutówka gets the room ---------- */
#water-mini-panel .mini-water-card { gap: 7px; }
#water-mini-panel .mw-head { margin-bottom: 0; }
#water-mini-panel .mini-water-top { gap: 10px; }
#water-mini-panel .water-orb { width: 50px; height: 50px; border-width: 1.5px; }
#water-mini-panel .water-big { font-size: 15px; }
#water-mini-panel .water-of { display: none; }
#water-mini-panel .water-wave { width: 130px; height: 130px; margin-left: -65px; top: -5px; }
#water-mini-panel .mini-water-side { gap: 1px; }
#water-mini-panel .mini-water-side .water-status { font-size: 11.5px; -webkit-line-clamp: 1; }
#water-mini-panel .water-undo-last { font-size: 10.5px; padding: 1px 7px; }
#water-mini-panel .mini-drink-row { gap: 4px; }
#water-mini-panel .mini-drink-row .drink-tile .drink-add { padding: 5px 0 4px; border-radius: 10px; gap: 2px; }
#water-mini-panel .mini-drink-row .drink-icon { width: 18px; height: 18px; }
#water-mini-panel .mini-drink-ml { font-size: 9px; }

/* ---------- Custom day range ---------- */
/* PC header: "8 dni ✕" instead of "Tydzień 41" */
#hw-week.is-range { display: inline-flex; align-items: center; gap: 6px; padding-right: 4px; background: rgba(109, 114, 246, 0.16); color: #c7caff; }
.hw-range-x { width: 18px; height: 18px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: inherit; font-size: 10px; line-height: 18px; padding: 0; cursor: pointer; }
.hw-range-x:hover { background: rgba(255, 255, 255, 0.18); }
/* mini calendar: the range shown, and the one being dragged out */
.mc-day.in-range, .mc-day.selecting { background: rgba(109, 114, 246, 0.2); border-radius: 0; color: #e0e1ff; }
.mc-day.range-start, .mc-day.sel-start { border-radius: 999px 0 0 999px; }
.mc-day.range-end, .mc-day.sel-end { border-radius: 0 999px 999px 0; }
.mc-day.range-start.range-end { border-radius: 999px; }
.mini-cal.mc-selecting .mc-day.in-range:not(.selecting) { background: none; color: inherit; }
.mini-cal.mc-selecting { cursor: col-resize; user-select: none; }
.mini-cal .mc-day { user-select: none; }
/* many days on PC: narrower columns - keep titles readable */
.week-grid-wrap.wide-range .grid-event-title { font-size: 11px; }
.week-grid-wrap.wide-range .wg-day-head { font-size: 11px; }

/* phone: a long range scrolls sideways inside its own window, hours pinned on the left */
.range-scroll.scrolls { overflow: auto; overscroll-behavior: contain; scroll-snap-type: x proximity; scroll-padding-left: 44px; -webkit-overflow-scrolling: touch; }
.range-scroll.scrolls .week-grid-wrap { max-height: none; overflow: visible; }
.range-scroll.scrolls .wg-day-head { scroll-snap-align: start; }
.range-scroll.scrolls .wg-hour-label, .range-scroll.scrolls .wg-gutter-header, .range-scroll.scrolls .wg-gutter-allday { position: sticky; left: 0; z-index: 6; background: var(--bg); }
.range-scroll.scrolls .wg-gutter-header { z-index: 8; }
.range-scroll.scrolls .wg-day-head { position: sticky; top: 0; z-index: 5; background: var(--bg); }
.span-row .span-switch { display: flex; flex-wrap: nowrap; min-width: 0; }
.span-row .span-seg { flex: 1 1 0; min-width: 0; padding-left: 4px; padding-right: 4px; font-size: 12.5px; white-space: nowrap; }

/* phone range picker */
.range-sheet { width: min(380px, calc(100vw - 24px)); }
.rg-presets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.rg-head { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 6px; font-weight: 650; font-size: 14px; }
.rg-nav { width: 32px; height: 32px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.05); color: var(--text); font-size: 18px; cursor: pointer; }
.rg-weekdays, .rg-grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.rg-weekdays span { font-size: 11px; color: var(--text-muted); padding: 4px 0; }
.rg-grid { row-gap: 3px; }
.rg-day { height: 40px; border: none; background: none; color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.rg-day.other { color: var(--text-muted); opacity: 0.55; }
.rg-day.today { font-weight: 800; color: #a5a8ff; }
.rg-day.in { background: rgba(109, 114, 246, 0.22); color: #fff; }
.rg-day.start { border-radius: 999px 0 0 999px; background: var(--accent); }
.rg-day.end { border-radius: 0 999px 999px 0; background: var(--accent); }
.rg-day.start.end { border-radius: 999px; }
.rg-hint { margin: 10px 0 2px; font-size: 13px; color: var(--text-muted); text-align: center; }
.rg-hint.ok { color: #c7caff; font-weight: 600; }
.rg-show:disabled { opacity: 0.4; cursor: default; }

/* Minutówka section heads: the count sits on the text's middle line */
.mn-sec-head { line-height: 16px; }
.mn-sec-n { display: inline-flex; align-items: center; justify-content: center; height: 16px; min-width: 16px; box-sizing: border-box; line-height: 1; padding: 0 5px; }
.mn-sec-wyjazd .mn-sec-head { color: #fbbf24; }
.mn-sec-wyjazd .mn-sec-n { background: rgba(251, 191, 36, 0.15); }
.mn-sec-wyjazd .task-row { box-shadow: inset 2px 0 0 rgba(251, 191, 36, 0.65); }
.mn-sec-chip-wyjazd.selected { background: rgba(251, 191, 36, 0.16); border-color: rgba(251, 191, 36, 0.5); color: #fde68a; }
.mn-sec-pozniej .mn-sec-rows { opacity: 1; }
/* Wodzianka counter circle: smaller still */
#water-mini-panel .water-orb { width: 40px; height: 40px; }
#water-mini-panel .water-big { font-size: 12.5px; }
#water-mini-panel .water-wave { width: 110px; height: 110px; margin-left: -55px; top: -4px; }
#water-mini-panel .water-big { font-size: 11px; letter-spacing: -0.02em; }
/* section chips look the same in "Nowe zadanie" and in the edit dialog */
.mn-add-sections { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mn-add-sections .mn-sec-chip { justify-content: center; width: auto; min-width: 0; padding: 5px 6px; white-space: nowrap; overflow: visible; }
.mn-sec-chip-pozniej.selected { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.32); color: var(--text); box-shadow: none; }
.mn-sec-chip-pilne.selected, .mn-sec-chip-wyjazd.selected { box-shadow: none; }

/* =====================================================================================
   Brighter (Oct 2026): the same skin a few steps lighter - surfaces, lines, muted text and
   the veil over event colors - so everything reads more easily.
   ===================================================================================== */
:root {
  --bg: #16171e;
  --s1: #1c1d25;
  --s2: #24252f;
  --s3: #2c2d39;
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.15);
  --text: #f3f3f7;
  --text-muted: #a6a6b4;
  --border-strong: rgba(255, 255, 255, 0.18);
}
header.topbar { background: rgba(22, 23, 30, 0.82); }
.wg-hour-label { color: #9696a4; }
.grid-event { background-image: linear-gradient(rgba(14, 14, 20, 0.2), rgba(14, 14, 20, 0.2)) !important; }
.grid-event.task-linked { background-image: linear-gradient(rgba(14, 14, 20, 0.36), rgba(14, 14, 20, 0.36)) !important; }
.grid-event-time { color: rgba(250, 250, 252, 0.8); }
.week-grid-day-col.today { background-color: rgba(109, 114, 246, 0.07); }

/* undo toast after moving something in the grid */
.undo-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 2000;
  display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 16px; max-width: calc(100vw - 32px);
  border-radius: 14px; background: var(--s3); border: 1px solid var(--line-2); box-shadow: var(--shadow-pop);
  font-size: 13px; color: var(--text); animation: undo-in 0.2s var(--ease);
}
.undo-toast span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.undo-toast-btn { flex: none; border: none; border-radius: 999px; padding: 6px 14px; background: var(--accent); color: #fff; font: inherit; font-weight: 650; cursor: pointer; }
@keyframes undo-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-width: 700px) { .undo-toast { bottom: 96px; } }

/* Minutówka: every section header folds its section */
.mn-sec-head { width: 100%; border: none; background: none; font-family: inherit; text-align: left; cursor: pointer; border-radius: 7px; }
.mn-sec-head:hover { background: rgba(255, 255, 255, 0.04); }
.mn-sec-head .mn-sec-chev { width: 14px; height: 14px; margin-left: auto; stroke-width: 2.2; opacity: 0.7; transition: transform 0.18s var(--ease); }
.mn-section.folded .mn-sec-chev { transform: rotate(-90deg); }
.mn-section.folded .mn-sec-rows { display: none; }
.mn-section.empty .mn-sec-chev { display: none; }
.mn-section.empty .mn-sec-head { cursor: default; }

/* "Zobacz ukończone": a slim bar at the very bottom */
.mn-done-link {
  margin-top: 4px; padding: 4px 8px; min-height: 0; height: 26px; border-radius: 8px;
  font-size: 11.5px; background: rgba(255, 255, 255, 0.03); border-top: 1px solid var(--line);
  border-top-left-radius: 0; border-top-right-radius: 0;
}
.mn-done-link svg { width: 13px; height: 13px; }
.mn-done-count { padding: 0 6px; font-size: 10px; line-height: 15px; }

/* ---------- Organizatorka ---------- */
.org-talk { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.org-msg { display: flex; flex-direction: column; gap: 3px; padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.45; max-width: 92%; }
.org-msg ul { margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; }
.org-organizatorka { align-self: flex-start; background: rgba(109, 114, 246, 0.12); border-bottom-left-radius: 4px; }
.org-kosmetolozka { align-self: flex-end; background: rgba(236, 72, 153, 0.1); border-bottom-right-radius: 4px; }
.org-who { font-size: 11px; font-weight: 700; color: var(--text-muted); }
.org-ok { margin-left: 4px; color: #86efac; font-weight: 700; }
.org-days { display: flex; flex-direction: column; gap: 8px; }
.org-day { padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 12px; }
.org-day-head { font-size: 11.5px; font-weight: 700; text-transform: capitalize; color: var(--text-muted); margin-bottom: 4px; }
.org-item { display: grid; grid-template-columns: 44px 1fr; column-gap: 8px; align-items: baseline; padding: 3px 0; font-size: 13px; }
.org-time { font-variant-numeric: tabular-nums; font-weight: 650; color: #c7caff; }
.org-title small { margin-left: 6px; font-size: 11px; color: var(--text-muted); }
.org-item.spa .org-title { color: #fbcfe8; font-weight: 650; }
.org-why { grid-column: 2; font-size: 11.5px; color: #fbbf24; line-height: 1.4; }
.org-note { margin-top: 10px; font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.org-note.warn { color: #fbbf24; }

/* Descriptions keep their line breaks (Enter) everywhere: calendar blocks, Minutówka, hover cards */
.grid-event-desc, .grid-event-desc.clamp { white-space: pre-line; overflow-wrap: anywhere; }
.task-row .task-notes { white-space: pre-line; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: clip; line-height: 1.35; }

/* Glow up / Health mark v3: no corner triangle (it covered the time) - a second thin stripe in the
   care color right inside the calendar-colored left edge; nothing in the block moves. */
.grid-event.care::after { display: none !important; }
.grid-event.care:not(.grid-bg) { box-shadow: inset 3px 0 0 var(--care), 0 1px 2px rgba(0, 0, 0, 0.25) !important; padding-left: 8px; }

/* =====================================================================================
   Calendar blocks - ONE type scale (Oct 2026). Earlier layers set title / time / description
   to 9-12px depending on screen and block size, which read as uneven. Now: everything 11px on a
   13px line, the title only bolder, the time and description only dimmer; the same padding and
   left inset on every block (with or without the Glow up / Health stripe).
   ===================================================================================== */
.week-grid-wrap .grid-event { padding: 3px 6px 2px 8px; font-size: 11px; }
.week-grid-wrap .grid-event .grid-event-title,
.week-grid-wrap .grid-event .grid-event-row .grid-event-title { font-size: 11px; line-height: 13px; font-weight: 650; letter-spacing: 0; }
.week-grid-wrap .grid-event .grid-event-time,
.week-grid-wrap .grid-event .grid-event-row .grid-event-time { font-size: 11px; line-height: 13px; font-weight: 500; letter-spacing: 0; color: rgba(250, 250, 252, 0.72); opacity: 1; }
.week-grid-wrap .grid-event .grid-event-desc { font-size: 11px; line-height: 13px; margin-top: 0; font-weight: 400; color: rgba(250, 250, 252, 0.6); }
.week-grid-wrap .grid-event .grid-event-row { align-items: baseline; gap: 6px; }
.week-grid-wrap .grid-event .task-icon { width: 11px; height: 11px; margin-right: 5px; flex: none; }
.week-grid-wrap .grid-event.tiny { padding: 0 6px 0 8px; }
.week-grid-wrap .grid-event.tiny .grid-event-title,
.week-grid-wrap .grid-event.tiny .grid-event-time { font-size: 10.5px; line-height: 1; }
.week-grid-wrap .grid-event.tiny .task-icon { width: 10px; height: 10px; }
.week-grid-wrap .grid-event.care:not(.grid-bg) { padding-left: 8px; }

/* Minutówka sections: a plain colored dot (no icons) - same in the list, "Nowe zadanie" and the edit dialog */
.mn-sec-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--sec, #8d8d9a); }
.mn-sec-pilne, .mn-sec-chip-pilne { --sec: #fb7185; }
.mn-sec-wyjazd, .mn-sec-chip-wyjazd { --sec: #fbbf24; }
.mn-sec-pozniej, .mn-sec-chip-pozniej { --sec: #a5a8b8; }
.mn-sec-head { gap: 7px; }
.mn-sec-chip { gap: 6px; }
.mn-sec-pilne .mn-sec-head, .mn-sec-wyjazd .mn-sec-head { color: var(--text-muted); }
.mn-sec-pilne .mn-sec-n, .mn-sec-wyjazd .mn-sec-n, .mn-sec-pozniej .mn-sec-n { background: rgba(255, 255, 255, 0.07); color: var(--text-muted); }
.mn-sec-pilne .task-row, .mn-sec-wyjazd .task-row { box-shadow: none; }
.mn-sec-chip.selected { background: color-mix(in srgb, var(--sec) 18%, transparent) !important; border-color: color-mix(in srgb, var(--sec) 55%, transparent) !important; color: var(--text) !important; }

/* Glow up / Health mark v4: a small colored glyph before the title, nothing else */
.week-grid-wrap .grid-event.care:not(.grid-bg) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.25) !important; }
.ge-care { flex: none; margin-right: 4px; font-size: 10px; line-height: 1; font-weight: 700; }
.ge-care-glow { color: #f9a8d4; }
.ge-care-health { color: #6ee7b7; }
.grid-event.tiny .ge-care { font-size: 9px; }

/* Glow up / Health mark v5 (her pick): a small label at the start of the line under the title */
.ge-care { margin: 0; font-size: inherit; line-height: inherit; font-weight: 650; }
.ge-care-glow { color: #f9a8d4; }
.ge-care-health { color: #6ee7b7; }
.ge-care-sep { color: rgba(250, 250, 252, 0.45); }

/* Minutówka: category chips (Brak / Glow up / Health) - "Nowe zadanie" and the edit dialog */
.mn-add-care { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mn-add-care .mn-care-chip { justify-content: center; width: auto; min-width: 0; padding: 5px 6px; }
.mn-care-chip.selected { background: rgba(255, 255, 255, 0.12) !important; border-color: rgba(255, 255, 255, 0.32) !important; color: var(--text) !important; box-shadow: none !important; }
.mn-care-chip-glow.selected { background: rgba(244, 114, 182, 0.18) !important; border-color: rgba(244, 114, 182, 0.55) !important; }
.mn-care-chip-health.selected { background: rgba(52, 211, 153, 0.16) !important; border-color: rgba(52, 211, 153, 0.5) !important; }
.ge-care-line { white-space: nowrap; overflow: hidden; }
/* in a task block the label and description start where the title text starts (past the checkbox) */
.week-grid-wrap .grid-event:has(.task-icon) .grid-event-desc { padding-left: 16px; }
.week-grid-wrap .grid-event.tiny:has(.task-icon) .grid-event-desc { padding-left: 15px; }
/* task blocks: the time line under the title lines up with the title text too (past the checkbox) */
.week-grid-wrap .grid-event:has(.task-icon) > .grid-event-time { padding-left: 16px; }
/* one look for every block, short or long: same 11px, proportional digits (the fixed-width ones made
   "11:15–12:00" look spaced out next to the title), same checkbox */
.week-grid-wrap .grid-event .grid-event-time { font-variant-numeric: normal; font-feature-settings: normal; }
.week-grid-wrap .grid-event.tiny .grid-event-title,
.week-grid-wrap .grid-event.tiny .grid-event-time { font-size: 11px; line-height: 13px; }
.week-grid-wrap .grid-event.tiny .task-icon { width: 11px; height: 11px; }

/* "Stan" all-day events (Madeira): a calm label like the background events, not a loud bar */
.week-grid-chip.stan-bar { border-left: 3px solid var(--bar); border-radius: 0 6px 6px 0 !important; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; box-shadow: none; filter: none; }
/* colored backdrops (Baniocha, Stan: Fashion house...) - the label must read on its own tint:
   no fading of the whole backdrop, the label a light version of the color */
.grid-bg.accent { opacity: 1; }
.grid-bg.accent .grid-bg-title { color: color-mix(in srgb, var(--bg-accent) 45%, #ffffff) !important; opacity: 1 !important; font-weight: 700; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }
.week-grid-chip.stan-bar { color: color-mix(in srgb, var(--bar) 45%, #ffffff) !important; }

/* event dialog: first day [time] - [time] last day, and the "Cały dzień" switch */
#edit-event-modal .datetime-row { row-gap: 8px; }
.allday-toggle { display: inline-flex; align-items: center; gap: 8px; margin-left: 4px; font-size: 13px; color: var(--text-muted); cursor: pointer; user-select: none; }
.allday-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.allday-toggle:has(input:checked) { color: var(--text); }
.time-picker-wrap[hidden] { display: none !important; }
#edit-event-modal .datetime-row .date-picker-wrap { flex: 1 1 118px; min-width: 0; }
#edit-event-modal .datetime-row .time-picker-wrap { flex: 0 0 76px; }
#edit-event-modal .allday-toggle { flex-basis: 100%; margin: 2px 0 0 2px; }

.multi-day-bar .bar-time { margin-right: 6px; font-weight: 600; opacity: 0.85; text-transform: none; letter-spacing: 0; }

.org-item.habit .org-title { color: #c7caff; }

/* agents in Claude Code mode: a queued request */
.cc-queued { padding: 12px 14px; border-radius: 12px; background: rgba(48, 209, 88, 0.08); border: 1px solid rgba(48, 209, 88, 0.25); font-size: 13px; line-height: 1.5; }
.cc-queued b { color: #86efac; }
.cc-queued p { margin: 6px 0 0; }
.cc-queued code, .cc-pending code { padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); font-size: 12px; }
.cc-pending { margin-top: 12px; padding: 8px 12px; border-radius: 10px; background: rgba(251, 191, 36, 0.08); color: #fde68a; font-size: 12.5px; }

/* Phones: fields under 16px make iOS zoom in on focus and stay zoomed */
@media (max-width: 700px) {
  input[type="text"], input[type="search"], input[type="number"], input[type="password"], input:not([type]), textarea, select { font-size: 16px !important; }
}

/* AI row: only "Zaplanuj miesiąc" left (the prompt helper is gone) - full width; nothing to show in "create" */
.ai-run-row { grid-template-columns: 1fr; }
.ai-run-row:has(.ai-run-right[hidden]) { display: none; }

/* ---------- Header: 1 / 3 / 7 / 14 days ---------- */
.hw-week { background: none; padding: 0; display: inline-flex; align-items: center; gap: 8px; }
.hw-spans { display: inline-flex; background: rgba(255, 255, 255, 0.06); border-radius: 999px; padding: 2px; }
.hw-span {
  min-width: 30px; height: 24px; padding: 0 8px; border: 0; border-radius: 999px; background: none;
  color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.hw-span:hover { color: var(--text); }
.hw-span.active { background: rgba(139, 146, 255, 0.28); color: #fff; }
.hw-custom { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-muted); }

/* ---------- Daily routines: little icons at the top of each day ---------- */
.routine-strip { display: flex; flex-wrap: wrap; gap: 3px; margin: 1px 0 3px; }
.routine-dot {
  width: 24px; height: 22px; padding: 0; border-radius: 7px; cursor: pointer; font-size: 13px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); filter: grayscale(0.15);
}
.routine-dot:hover { background: rgba(255, 255, 255, 0.12); }
.routine-dot.done { opacity: 0.38; filter: grayscale(1); border-style: dashed; }

/* ---------- No more care filter / care marks in the grid ---------- */
.care-filter, .care-badge, .ge-care-line { display: none !important; }

/* ---------- Notatki next to Minutówka ---------- */
.minutowka-clock-heading .mn-notes {
  order: 1; margin-left: auto; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; color: #3daa78;
  background: rgba(61, 170, 120, 0.12);
}
.minutowka-clock-heading .mn-notes:hover { background: rgba(61, 170, 120, 0.24); }
.minutowka-clock-heading .mn-notes svg { width: 15px; height: 15px; }
.minutowka-clock-heading .mn-notes + .mn-add { margin-left: 6px; }

/* ---------- PC: the left column folds away ---------- */
.side-toggle { display: none; }
@media (min-width: 860px) {
  .side-toggle {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 34px; height: 34px; margin-right: 6px; border: 0; border-radius: 50%; background: none;
    color: var(--text-muted); cursor: pointer;
  }
  .side-toggle:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); }
  .side-toggle svg { width: 20px; height: 20px; }
  body.side-collapsed .mini-cal,
  body.side-collapsed .water-mini-panel,
  body.side-collapsed .minutowka-clock,
  body.side-collapsed nav.tabbar { display: none !important; }
  body.side-collapsed main#view-container.calendar-view { padding-left: 72px; }
}

/* ---------- Hover card on calendar blocks (stays while hovered, text can be copied) ---------- */
.ge-hover-card {
  position: fixed; z-index: 3000; width: 280px; max-height: 60vh; overflow: auto; padding: 10px 12px;
  border-radius: 12px; background: #262734; border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55); user-select: text; cursor: text;
}
.ghc-title { font-size: 13.5px; font-weight: 650; color: var(--text); }
.ghc-time { margin-top: 2px; font-size: 12px; color: var(--text-muted); }
.ghc-notes { margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: var(--text); white-space: pre-line; }

/* ---------- Poranek: a backdrop like the others (grid-bg accent) with the morning checklist in it ---------- */
.grid-bg.poranek { display: flex; flex-direction: column; gap: 1px; }
.grid-bg.poranek .grid-bg-title { align-self: flex-start; margin-bottom: 1px; }
.grid-bg.poranek.all-done { opacity: 0.6; }
/* a step = one plain line; the whole line ticks it off (✓ shows on hover), ✎ edits it */
.poranek .poranek-step {
  display: flex; align-items: center; gap: 4px; width: auto; height: 17px; min-width: 0; padding: 0 4px 0 5px; margin-left: -5px;
  border: 0; border-radius: 5px; background: none; filter: none; cursor: pointer; font-size: 11px; color: var(--text);
  transition: background 0.12s, opacity 0.3s 0.12s, transform 0.3s 0.12s;
}
.poranek .poranek-step:hover { background: color-mix(in srgb, var(--bg-accent) 22%, transparent); }
.poranek .ps-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poranek .ps-edit, .poranek .ps-done { flex: none; font-size: 10.5px; line-height: 1; opacity: 0; transition: opacity 0.12s; }
.poranek .ps-edit { color: var(--text-muted); padding: 2px 3px; border-radius: 4px; }
.poranek .ps-edit:hover { color: var(--text); background: rgba(255, 255, 255, 0.12); }
.poranek .ps-done { color: color-mix(in srgb, var(--bg-accent) 55%, #ffffff); font-weight: 800; }
.poranek .poranek-step:hover .ps-edit, .poranek .poranek-step:hover .ps-done { opacity: 1; }
.poranek .poranek-step.done { opacity: 1; filter: none; border-style: none; }
.poranek .poranek-step.done .ps-done { opacity: 1; }
.poranek .poranek-step.done .ps-t { text-decoration: line-through; opacity: 0.6; }
.poranek .poranek-step.leaving { opacity: 0; transform: translateX(8px); }
/* Poranek a touch stronger than other backdrops, so its colour reads as itself, not muddy */
.grid-bg.accent.poranek { background: color-mix(in srgb, var(--bg-accent) 20%, transparent) !important; }

/* Backdrops (Poranek, Praca zdalna, a Stan): a soft tint + their name, no stripe - the stripe sat
   right against the events' own stripes and made everything look out of line */
.grid-bg.accent { border-left: 0 !important; border-radius: 6px; left: 2px; right: 2px; }

/* ---------- "Ukończono zadanie · Cofnij ✕" ---------- */
.undo-toast .undo-toast-x {
  border: 0; background: none; color: var(--text-muted); font-size: 15px; line-height: 1; cursor: pointer;
  padding: 4px 6px; margin-left: 2px; border-radius: 6px;
}
.undo-toast .undo-toast-x:hover { color: var(--text); background: rgba(255, 255, 255, 0.08); }

/* Poranek steps stand out as small pills in Poranek's colour (no emoji): time + name */
.grid-bg.poranek { gap: 2px; }
.poranek .poranek-step {
  margin-left: 0; height: 17px; padding: 0 6px; border-radius: 6px;
  background: color-mix(in srgb, var(--bg-accent) 28%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg-accent) 30%, transparent);
}
.poranek .poranek-step:hover { background: color-mix(in srgb, var(--bg-accent) 42%, transparent); }
.poranek .ps-time { flex: none; font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--bg-accent) 50%, #ffffff); margin-right: 2px; }
.poranek .ps-t { font-weight: 550; }
.poranek .poranek-step { height: 18px; line-height: 18px; }
.poranek .ps-t, .poranek .ps-time { line-height: 18px; }

/* Poranek steps: each in its own colour; a click edits it, ✓ at the end ticks it off */
.poranek .poranek-step {
  background: color-mix(in srgb, var(--step) 30%, transparent);
  box-shadow: inset 3px 0 0 var(--step);
  padding: 0 2px 0 7px; border-radius: 5px;
}
.poranek .poranek-step:hover { background: color-mix(in srgb, var(--step) 44%, transparent); }
.poranek .ps-time { color: color-mix(in srgb, var(--step) 45%, #ffffff); }
.poranek .ps-done {
  flex: none; width: 16px; height: 14px; padding: 0; margin: 0; opacity: 0.55; filter: none;
  border: 0; border-radius: 4px; background: none; cursor: pointer;
  font-size: 10.5px; font-weight: 800; line-height: 14px; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.poranek .poranek-step:hover .ps-done { opacity: 0.85; }
.poranek .ps-done:hover { opacity: 1 !important; background: color-mix(in srgb, var(--step) 75%, transparent); }
.poranek .ps-done.done { opacity: 1; filter: none; border-style: none; background: var(--step); color: #1c1d25; }

/* Poranek steps as wide as their text */
.poranek .poranek-step { align-self: flex-start; max-width: 100%; box-sizing: border-box; }
.poranek .ps-t { flex: 0 1 auto; }
.poranek .ps-done { margin-left: 4px; }

/* Poranek steps: soft, fully rounded pills (no stripe hooking round the corner); the colour is mixed
   with a dark base instead of see-through, so the green backdrop doesn't muddy it (orange went brown) */
.poranek .poranek-step {
  box-shadow: none; border-radius: 999px; padding: 0 3px 0 8px;
  background: color-mix(in srgb, var(--step) 42%, #1c1d25);
}
.poranek .poranek-step:hover { background: color-mix(in srgb, var(--step) 58%, #1c1d25); }
.poranek .ps-time { color: color-mix(in srgb, var(--step) 30%, #ffffff); }
.poranek .ps-done { border-radius: 999px; width: 15px; }
.poranek .poranek-step { background: color-mix(in srgb, var(--step) 56%, #1c1d25); }
.poranek .poranek-step:hover { background: color-mix(in srgb, var(--step) 70%, #1c1d25); }
.poranek .ps-time { color: #fff; opacity: 0.75; }
.poranek .ps-t { color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); }
/* a bit more compact, so the last step doesn't touch the block below */
.grid-bg.poranek { gap: 2px; padding-top: 2px; padding-bottom: 4px; }
.grid-bg.poranek .grid-bg-title { margin-bottom: 0; line-height: 13px; }
.poranek .poranek-step { height: 16px; line-height: 16px; }
.poranek .ps-t, .poranek .ps-time { line-height: 16px; }
.poranek .ps-t { font-size: 10.5px; }
.poranek .ps-done { height: 13px; line-height: 13px; }

/* the earlier shape back (gently rounded, no stripe on the left); a thin light edge keeps every
   pill - the brown one too - apart from the green backdrop */
.poranek .poranek-step {
  border-radius: 5px; padding: 0 3px 0 7px;
  background: color-mix(in srgb, var(--step) 62%, #2a2b33);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 1px 2px rgba(0, 0, 0, 0.35);
}
.poranek .poranek-step:hover { background: color-mix(in srgb, var(--step) 76%, #2a2b33); }
.poranek .ps-done { border-radius: 4px; }

/* ---------- Date + times like Google Calendar: plain text you click (and times you can type) ---------- */
.datetime-row { gap: 2px; align-items: center; flex-wrap: wrap; }
.date-picker-btn, .time-picker-btn {
  background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 8px;
  padding: 7px 8px; font-size: 15px; font-weight: 500; color: var(--text); height: auto; min-height: 0;
  font-family: inherit; text-align: left;
}
.date-picker-btn:hover, .time-picker-btn:hover { background: rgba(255, 255, 255, 0.08) !important; }
.date-picker-btn:focus-visible, .time-picker-btn:focus { outline: none; background: rgba(255, 255, 255, 0.1) !important; box-shadow: inset 0 -2px 0 var(--accent) !important; }
.date-picker-wrap { flex: 0 1 auto; }
.time-picker-wrap { flex: 0 0 auto; }
input.time-picker-btn { width: 64px; text-align: center; cursor: text; }
input.time-picker-btn::placeholder { color: var(--text-muted); }
.datetime-row .time-dash { color: var(--text-muted); padding: 0 2px; }
.time-option.hover { background: rgba(255, 255, 255, 0.1); }

/* today in the day header: a smaller, calmer, truly round dot (no glow, no letter-spacing pulling the
   digit off-centre) - same colour as today in the mini calendar */
.wg-day-head.today .week-grid-day-num {
  width: 24px; height: 24px; margin: 2px auto 0; font-size: 13px; font-weight: 700; line-height: 1;
  letter-spacing: 0; font-variant-numeric: tabular-nums; background: #6f76d9; box-shadow: none;
}

/* Poranek steps: light and minimal - a soft tint, a small rounded colour mark inside on the left
   (not an edge stripe), ✓ only on hover */
.poranek .poranek-step {
  position: relative; height: 16px; padding: 0 3px 0 10px; border-radius: 4px; box-shadow: none !important;
  background: color-mix(in srgb, var(--step) 20%, transparent) !important;
}
.poranek .poranek-step::before {
  content: ''; position: absolute; left: 3px; top: 3px; bottom: 3px; width: 3px; border-radius: 2px; background: var(--step);
}
.poranek .poranek-step:hover { background: color-mix(in srgb, var(--step) 32%, transparent) !important; }
.poranek .ps-t { font-weight: 500; font-size: 10.5px; text-shadow: none; color: var(--text); }
.poranek .ps-time { font-weight: 500; opacity: 0.6; color: var(--text); font-size: 10px; }
.poranek .ps-done { opacity: 0 !important; background: none !important; color: var(--text); width: 14px; }
.poranek .poranek-step:hover .ps-done { opacity: 0.7 !important; }
.poranek .poranek-step .ps-done:hover { opacity: 1 !important; background: rgba(255, 255, 255, 0.14) !important; }

/* the date + times in the dialogs a notch smaller */
.date-picker-btn, .time-picker-btn { font-size: 13.5px; padding: 6px 7px; }
input.time-picker-btn { width: 56px; }
input.time-picker-btn { width: 64px; padding-left: 4px; padding-right: 4px; }

/* a ticked task in the calendar: a smaller, centred tick (the old one filled the dot and sat off-centre) */
.task-icon[aria-checked="true"],
.week-grid-wrap .grid-event .task-icon[aria-checked="true"] {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.85)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1d25' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") 50% 55% / 7px 7px no-repeat;
}
.grid-event.tiny .task-icon[aria-checked="true"] { background-size: 6px 6px; }

/* ---------- Right-click menu (same look as Notatki's) ---------- */
.ctx-menu {
  position: fixed; z-index: 4000; min-width: 210px; max-width: 280px; padding: 6px; border-radius: 14px;
  background: #232327; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  animation: ctx-pop 0.14s ease-out; font-size: 13.5px;
}
@keyframes ctx-pop { from { opacity: 0; transform: scale(0.97) translateY(-4px); } to { opacity: 1; transform: none; } }
.ctx-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: none; border-radius: 9px;
  background: transparent; color: var(--text); text-align: left; cursor: pointer; font: inherit;
}
.ctx-item:hover { background: rgba(255, 255, 255, 0.07); }
.ctx-item.danger { color: #f87171; }
.ctx-ico { width: 18px; display: grid; place-items: center; color: var(--text-muted); flex: none; }
.ctx-item.danger .ctx-ico { color: #f87171; }
.ctx-ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ctx-check { margin-left: auto; color: #8b92ff; font-weight: 700; }
.ctx-sep { height: 1px; margin: 5px 6px; background: rgba(255, 255, 255, 0.08); }
.ctx-label { padding: 5px 10px 3px; font-size: 11px; font-weight: 650; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ctx-colors { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; padding: 4px 8px 6px; }
.ctx-swatch { width: 18px; height: 18px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; transition: transform 0.1s; }
.ctx-swatch:hover { transform: scale(1.18); }
.ctx-swatch.sel { box-shadow: 0 0 0 2px #232327, 0 0 0 3.5px #fff; }

/* ---------- PC: the create / edit dialogs smaller and calmer overall ----------
   (phones keep 16px fields - smaller makes iOS zoom in) */
@media (min-width: 860px), (pointer: fine) {
  #create-modal, #edit-task-modal, #edit-event-modal { width: min(380px, 100%); padding: 14px 16px 16px; gap: 9px; font-size: 13px; }
  #create-modal.has-close, #edit-task-modal.has-close, #edit-event-modal.has-close { padding-top: 40px; }
  #create-modal .modal-close, #edit-task-modal .modal-close, #edit-event-modal .modal-close { width: 28px; height: 28px; font-size: 15px; top: 8px; right: 8px; }
  #create-title, #edit-event-title, #edit-task-title { font-size: 16.5px; padding: 6px 2px; }
  #create-modal .field, #edit-task-modal .field, #edit-event-modal .field { gap: 11px; }
  #create-modal .field-icon, #edit-task-modal .field-icon, #edit-event-modal .field-icon { width: 17px; height: 17px; }
  #create-modal :is(input[type="text"]:not(.time-picker-btn), textarea, select),
  #edit-task-modal :is(input[type="text"]:not(.time-picker-btn), textarea, select),
  #edit-event-modal :is(input[type="text"]:not(.time-picker-btn), textarea, select) { font-size: 13px; padding: 7px 10px; }
  #create-modal :is(#create-title), #edit-task-modal #edit-task-title, #edit-event-modal #edit-event-title { font-size: 16.5px; padding: 6px 2px; }
  #create-modal .date-picker-btn, #create-modal .time-picker-btn,
  #edit-task-modal .date-picker-btn, #edit-task-modal .time-picker-btn,
  #edit-event-modal .date-picker-btn, #edit-event-modal .time-picker-btn { font-size: 13px; padding: 5px 6px; }
  #create-modal input.time-picker-btn, #edit-task-modal input.time-picker-btn, #edit-event-modal input.time-picker-btn { width: 54px; }
  #create-modal .repeat-btn, #edit-task-modal .repeat-btn, #edit-event-modal .repeat-btn { font-size: 13px; padding: 7px 10px; min-height: 0; }
  #create-modal .select-wrap select, #edit-task-modal .select-wrap select, #edit-event-modal .select-wrap select { height: 34px; padding-left: 28px; }
  #create-modal .dur-chips, #edit-task-modal .dur-chips, #edit-event-modal .dur-chips { gap: 5px; }
  #create-modal .mn-dur, #edit-task-modal .mn-dur, #edit-task-modal .dur-chip, #create-modal .dur-label, #edit-task-modal .dur-label { font-size: 11.5px; }
  #create-modal .mn-dur, #edit-task-modal .mn-dur { padding: 3px 9px; }
  #create-modal .ai-toggle, #edit-task-modal .ai-toggle, #edit-event-modal .ai-toggle { font-size: 13px; }
  #create-modal .color-swatch, #edit-task-modal .color-swatch, #edit-event-modal .color-swatch { width: 17px; height: 17px; }
  #create-modal .color-swatches, #edit-task-modal .color-swatches, #edit-event-modal .color-swatches { gap: 6px; }
  #create-modal .modal-actions .btn, #edit-task-modal .modal-actions .btn, #edit-event-modal .modal-actions .btn {
    font-size: 13.5px; padding: 8px 18px; min-width: 92px; min-height: 0;
  }
  #create-modal .create-type-toggle { transform: scale(0.9); transform-origin: left center; }
  #edit-task-modal .checkbox-label, #edit-event-modal .checkbox-label { font-size: 12.5px; }
}
@media (min-width: 860px), (pointer: fine) { :is(#create-modal, #edit-task-modal, #edit-event-modal) .select-wrap select { padding-left: 30px !important; } }
@media (min-width: 860px), (pointer: fine) { :is(#create-modal, #edit-task-modal, #edit-event-modal) .select-wrap select { font-size: 13px !important; } }
/* the colour dots in the dialogs: smaller */
@media (min-width: 860px), (pointer: fine) {
  :is(#create-modal, #edit-task-modal, #edit-event-modal) .color-swatches { grid-template-columns: repeat(13, 13px); gap: 7px 7px; padding-top: 4px; }
  :is(#create-modal, #edit-task-modal, #edit-event-modal) .color-swatch { width: 13px; height: 13px; }
  :is(#create-modal, #edit-task-modal, #edit-event-modal) .color-swatch svg { width: 8px; height: 8px; }
  :is(#create-modal, #edit-task-modal, #edit-event-modal) .color-swatch.selected { box-shadow: 0 0 0 1.5px var(--card), 0 0 0 3px rgba(255, 255, 255, 0.85); }
}
/* date + both times stay on one line (the time boxes kept an old 84px width and pushed the end time down) */
@media (min-width: 860px), (pointer: fine) {
  :is(#create-modal, #edit-task-modal, #edit-event-modal) .datetime-row { flex-wrap: nowrap; }
  :is(#create-modal, #edit-task-modal, #edit-event-modal) .time-picker-wrap { width: auto; min-width: 0; flex: 0 0 auto; }
  :is(#create-modal, #edit-task-modal, #edit-event-modal) .date-picker-wrap { min-width: 0; flex: 0 1 auto; }
  :is(#create-modal, #edit-task-modal, #edit-event-modal) .date-picker-btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
}

/* ---------- The colour palette folded to one dot until clicked ---------- */
.color-fold {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 8px 5px 6px; margin-left: -6px;
  border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 13px; cursor: pointer;
}
.color-fold:hover { background: rgba(255, 255, 255, 0.06); }
.color-fold .cf-dot { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.color-fold .cf-chev { width: 14px; height: 14px; fill: none; stroke: var(--text-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s; }
.color-fold.open .cf-chev { transform: rotate(180deg); }
.color-swatches.foldable.folded { display: none !important; }
.mn-add-colors.foldable:not(.folded) { margin-top: 4px; }

/* ---------- PC: lighter dialogs - flat fields like Google's, a soft tint only on hover / while typing ---------- */
@media (min-width: 860px), (pointer: fine) {
  :is(#create-modal, #edit-task-modal, #edit-event-modal) :is(input[type="text"]:not(.time-picker-btn), textarea, select, .repeat-btn) {
    background: transparent !important; border: 0 !important; border-radius: 8px; box-shadow: none !important;
    transition: background 0.12s, box-shadow 0.12s;
  }
  :is(#create-modal, #edit-task-modal, #edit-event-modal) :is(input[type="text"]:not(.time-picker-btn), textarea, select, .repeat-btn):hover {
    background: rgba(255, 255, 255, 0.045) !important;
  }
  :is(#create-modal, #edit-task-modal, #edit-event-modal) :is(input[type="text"]:not(.time-picker-btn), textarea, select):focus {
    background: rgba(255, 255, 255, 0.05) !important; box-shadow: inset 0 -1.5px 0 var(--accent) !important; border-radius: 8px 8px 2px 2px;
  }
  /* the title: a thin line under it, not a thick bar */
  :is(#create-title, #edit-task-title, #edit-event-title) {
    border-radius: 0 !important; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12) !important; padding-left: 0 !important;
  }
  :is(#create-title, #edit-task-title, #edit-event-title):hover { background: transparent !important; }
  :is(#create-title, #edit-task-title, #edit-event-title):focus { background: transparent !important; box-shadow: inset 0 -1.5px 0 var(--accent) !important; }
  :is(#create-modal, #edit-task-modal, #edit-event-modal) textarea { min-height: 0; padding-top: 6px !important; padding-bottom: 6px !important; }
  :is(#create-modal, #edit-task-modal, #edit-event-modal) textarea::placeholder,
  :is(#create-modal, #edit-task-modal, #edit-event-modal) input::placeholder { color: var(--text-muted); opacity: 0.8; }
  :is(#create-modal, #edit-task-modal, #edit-event-modal) .select-wrap select { padding-left: 26px !important; }
  :is(#create-modal, #edit-task-modal, #edit-event-modal) .select-wrap .select-dot { left: 9px; }
  /* the whole dialog: a touch lighter panel, softer edge */
  #create-modal, #edit-task-modal, #edit-event-modal { border: 1px solid rgba(255, 255, 255, 0.07); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45); }
}
@media (min-width: 860px), (pointer: fine) {
  :is(#create-modal, #edit-task-modal, #edit-event-modal) .select-wrap { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 8px; }
  :is(#create-modal, #edit-task-modal, #edit-event-modal) .select-wrap:hover { background: rgba(255, 255, 255, 0.045) !important; }
  #create-modal #create-title, #edit-task-modal #edit-task-title, #edit-event-modal #edit-event-title { background: transparent !important; }
  #create-modal #create-title:focus, #edit-task-modal #edit-task-title:focus, #edit-event-modal #edit-event-title:focus {
    background: transparent !important; box-shadow: inset 0 -1.5px 0 var(--accent) !important; border-radius: 0 !important;
  }
}

/* "Zaplanuj miesiąc": a small button on the right, not a full-width bar */
.ai-run-row { display: flex !important; justify-content: flex-end; align-items: center; gap: 8px; }
.ai-run-row .ai-run-right { display: flex !important; align-items: center; gap: 8px; }
.ai-run-row .ai-plan-btn {
  width: auto !important; height: 28px !important; padding: 0 12px !important; gap: 6px !important;
  font-size: 12.5px !important; font-weight: 600 !important; border-radius: 999px !important;
  background: rgba(139, 92, 246, 0.14) !important; border: 1px solid rgba(167, 139, 250, 0.35) !important; box-shadow: none !important;
}
.ai-run-row .ai-plan-btn:hover:not(:disabled) { background: rgba(139, 92, 246, 0.26) !important; }
.ai-run-row .ai-plan-btn .ai-btn-ico { font-size: 12px; }

/* AI section: (i) right after the switch's label; "Zaplanuj miesiąc" next to "Jak opisać…" */
.ai-head { display: flex; align-items: center; gap: 6px; }
.ai-head .ai-info-wrap { position: relative !important; top: auto !important; right: auto !important; display: inline-flex; }
.ai-head .ai-info-wrap[hidden] { display: none !important; }
.ai-head .ai-info { width: 18px; height: 18px; font-size: 11px; }
.ai-head .ai-info-wrap .ai-last { left: 0; right: auto; top: calc(100% + 6px); }
.ai-help-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ai-help-row .ai-help { flex: 1; min-width: 0; }
.ai-help-row .ai-run-row { flex: none; margin-top: 0 !important; }

/* ---------- Date + time in one line (Google-like), unfolded by a click ---------- */
.dt-summary {
  display: none; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; padding: 5px 8px; margin-left: -8px;
  border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.dt-summary:hover { background: rgba(255, 255, 255, 0.05); }
.dts-main { font-size: 13.5px; font-weight: 550; white-space: pre; }
.dts-sub { font-size: 11.5px; color: var(--text-muted); }
.modal.dt-collapsed .dt-summary { display: flex; }
.modal.dt-collapsed .dt-extra { display: none !important; }
.modal.dt-collapsed .field:has(> .dt-summary) { align-items: flex-start; }

/* ---------- The colour box next to the calendar / list picker; the palette pops out under it ---------- */
.has-cal-color { display: flex !important; align-items: center; gap: 6px; flex-wrap: wrap; }
.has-cal-color > .select-wrap { flex: 1; min-width: 0; }
.cal-color { position: relative; flex: none; }
.cal-color .color-fold { margin: 0; padding: 7px 7px; gap: 4px; border-radius: 8px; }
.cal-color .color-fold .cf-label { display: none; }
.cal-color .color-swatches {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: max-content;
  display: grid !important; grid-template-columns: repeat(9, 14px) !important; gap: 7px !important;
  padding: 10px !important; border-radius: 12px; background: #26262e; border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
.cal-color .color-swatches.folded { display: none !important; }
.cal-color .color-swatch { width: 14px !important; height: 14px !important; }
/* the help link on one line */
.ai-help-row .ai-help > summary { white-space: nowrap; font-size: 12px; }
.dts-main { white-space: pre-wrap; }
#edit-event-calendar { font-size: 13px; }

/* Rossmann offers under the bell: a small photo, the name, the price */
.nc-prod { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-radius: 8px; text-decoration: none; color: inherit; }
.nc-prod:hover { background: rgba(255, 255, 255, 0.05); }
.nc-prod img, .nc-prod-ph { width: 40px; height: 40px; flex: none; border-radius: 8px; object-fit: contain; background: #fff; }
.nc-prod-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nc-prod-name { font-size: 12.5px; color: var(--text); line-height: 1.3; }
.nc-prod-name small { color: var(--text-muted); font-size: 11px; }
.nc-prod-price { font-size: 12px; color: #f9a8d4; font-weight: 600; }

/* the date line opening: the fields glide in one after another */
@keyframes dt-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.modal.dt-opening .dt-extra { animation: dt-in 0.26s cubic-bezier(.2, .8, .2, 1) both; }
.modal.dt-opening .field.dt-extra { animation-delay: 0.06s; }
.dt-summary { transition: background 0.12s; }

/* AI: a small "Zaplanuj miesiąc" (no emoji), the help link shrinks instead of running under it */
.ai-run-row .ai-plan-btn {
  height: 22px !important; padding: 0 9px !important; font-size: 11.5px !important; font-weight: 600 !important; gap: 0 !important;
}
.ai-run-row .ai-plan-btn .ai-btn-ico { display: none !important; }
.ai-help-row { align-items: center; }
.ai-help-row .ai-help { overflow: hidden; }
.ai-help-row .ai-help > summary { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; }
.ai-help-row .ai-help[open] > summary { white-space: normal; }
/* the (i): a drawn icon, centred */
.ai-head .ai-info {
  display: inline-grid !important; place-items: center; width: 17px !important; height: 17px !important; padding: 0 !important;
  border: 0 !important; background: none !important; color: var(--text-muted); font-size: 0 !important; cursor: pointer;
}
.ai-head .ai-info:hover { color: var(--text); }
.ai-head .ai-info svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

/* ---------- Ticking a task in the calendar: calm, nothing grows past the block's edge ---------- */
.task-icon,
.week-grid-wrap .grid-event .task-icon { transform: none !important; transition: background-color 0.18s, border-color 0.18s, box-shadow 0.18s; }
/* hover: no growing - a soft fill and a faint tick, a preview of "done" */
.task-icon:hover,
.week-grid-wrap .grid-event .task-icon:hover {
  transform: none !important; border-color: #fff;
  background: rgba(255, 255, 255, 0.16)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.75' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") 50% 55% / 7px 7px no-repeat;
}
.task-icon[aria-checked="true"]:hover { background-color: rgba(255, 255, 255, 0.7); }
/* done: the block fades back gently and the title is struck through smoothly */
.week-grid-wrap .grid-event { transition: opacity 0.3s ease, filter 0.15s, box-shadow 0.15s; }
.week-grid-wrap .grid-event .ge-t {
  background: linear-gradient(currentColor, currentColor) 0 55% / 0 1px no-repeat; transition: background-size 0.3s ease;
}
.week-grid-wrap .grid-event.done .ge-t { background-size: 100% 1px; }
.week-grid-wrap .grid-event.done .grid-event-title { text-decoration: none !important; }
/* a task block on hover: lighter, without jumping above its neighbours' edges */
.week-grid-wrap .grid-event.task-linked:hover { filter: brightness(1.08); }
/* "Zaplanuj miesiąc": a quiet text button, small type (the label inside had its own bigger size) */
.ai-run-row .ai-plan-btn {
  height: 22px !important; padding: 0 8px !important; border: 0 !important; border-radius: 6px !important;
  background: none !important; color: #b4a6ff !important; font-weight: 600 !important; letter-spacing: 0.01em;
}
.ai-run-row .ai-plan-btn, .ai-run-row .ai-plan-btn * { font-size: 11px !important; line-height: 22px !important; }
.ai-run-row .ai-plan-btn:hover:not(:disabled) { background: rgba(139, 92, 246, 0.14) !important; color: #d4ccff !important; }

/* a done task stays faded under the mouse too (it used to light back up while hovered, so the
   "fade" only happened once the mouse left - it looked like it jumped) */
.week-grid-wrap .grid-event.task-linked.done, .week-grid-wrap .grid-event.task-linked.done:hover { opacity: 0.5; filter: none; }
.week-grid-wrap .grid-event.task-linked.done:hover { box-shadow: none; }

/* ---------- The hover card (a block's title, time and description): smaller, calmer, eased in ---------- */
.ge-hover-card {
  width: 230px !important; padding: 9px 11px 10px !important; border-radius: 10px !important;
  background: rgba(36, 37, 46, 0.97) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: ghc-in-right 0.16s cubic-bezier(.2, .8, .2, 1) both;
}
.ge-hover-card[data-side="left"] { animation-name: ghc-in-left; }
.ge-hover-card.leaving { animation: ghc-out 0.12s ease-in both; }
@keyframes ghc-in-right { from { opacity: 0; transform: translateX(-6px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes ghc-in-left { from { opacity: 0; transform: translateX(6px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes ghc-out { to { opacity: 0; transform: scale(0.98); } }
.ghc-head { display: flex; align-items: baseline; gap: 7px; }
.ghc-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--ghc-c); transform: translateY(-1px); }
.ghc-title { font-size: 12.5px !important; font-weight: 600 !important; line-height: 1.3; color: var(--text); }
.ghc-time { margin: 2px 0 0 14px !important; font-size: 11px !important; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ghc-notes {
  margin: 7px 0 0 !important; padding-top: 7px; border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 11.5px !important; line-height: 1.5 !important; color: #c8c8d2 !important; white-space: pre-line;
}

/* ---------- Task circle like Google's: right at the block's left edge, a clear tick inside on hover ---------- */
.week-grid-wrap .grid-event.task-linked { padding-left: 4px; }
.week-grid-wrap .grid-event .task-icon {
  width: 13px !important; height: 13px !important; margin-right: 5px !important; border-width: 1.5px !important;
  border-color: rgba(255, 255, 255, 0.75) !important;
}
.week-grid-wrap .grid-event.tiny .task-icon { width: 12px !important; height: 12px !important; }
/* the description / time lines start where the title text starts */
.week-grid-wrap .grid-event.task-linked:has(.task-icon) .grid-event-desc,
.week-grid-wrap .grid-event.task-linked:has(.task-icon) > .grid-event-time { padding-left: 18px !important; }
/* hover: the tick shows inside the circle (white, clearly) */
.week-grid-wrap .grid-event .task-icon:not([aria-checked="true"]):hover {
  border-color: #fff !important;
  background: rgba(255, 255, 255, 0.12)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") 50% 55% / 8px 8px no-repeat !important;
}
.week-grid-wrap .grid-event .task-icon[aria-checked="true"] { background-size: 8px 8px !important; }

/* every task block: the circle equally close to the left edge (Glow up / Health ones had a bigger gap) */
.week-grid-wrap .grid-event.task-linked, .week-grid-wrap .grid-event.task-linked.care:not(.grid-bg) { padding-left: 4px !important; }

/* a done task's circle like Google's: a thin outline with a thin tick inside, in the text's colour (not a filled white disc) */
.task-icon[aria-checked="true"],
.week-grid-wrap .grid-event .task-icon[aria-checked="true"],
.week-grid-wrap .grid-event .task-icon[aria-checked="true"]:hover {
  border: 1.3px solid rgba(255, 255, 255, 0.7) !important;
  background: transparent
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 12.5l3.2 3.2L17 8.8'/%3E%3C/svg%3E") 50% 52% / 9px 9px no-repeat !important;
}
.week-grid-wrap .grid-event .task-icon[aria-checked="true"]:hover { border-color: #fff !important; }

/* ---------- A done task's card (Google-like) ---------- */
.done-card { width: min(340px, 100%) !important; padding: 10px 16px 14px !important; gap: 6px !important; font-size: 13px; }
.dc-actions { display: flex; justify-content: flex-end; gap: 2px; margin: 0 -8px 2px 0; }
.dc-btn {
  width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none;
  color: var(--text-muted); cursor: pointer;
}
.dc-btn:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); }
.dc-btn svg, .dc-row svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dc-head { display: flex; align-items: center; gap: 12px; }
.dc-square { width: 13px; height: 13px; border-radius: 4px; flex: none; }
.dc-title { font-size: 18px; font-weight: 500; text-decoration: line-through; text-decoration-thickness: 1.5px; color: var(--text); }
.dc-when, .dc-repeat { margin-left: 25px; }
.dc-when { font-size: 13px; color: var(--text); }
.dc-repeat { font-size: 12.5px; color: var(--text-muted); }
.dc-row { display: flex; align-items: flex-start; gap: 12px; margin-top: 4px; color: var(--text); font-size: 13px; }
.dc-row svg { flex: none; color: var(--text-muted); margin-top: 1px; }
.dc-notes-row span { white-space: pre-line; color: #c8c8d2; font-size: 12.5px; line-height: 1.45; }
.dc-foot { display: flex; justify-content: flex-end; margin-top: 10px; }
.dc-undone {
  border: 0; border-radius: 999px; padding: 8px 16px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  background: #2e3a6e; color: #dbe2ff;
}
.dc-undone:hover { background: #38478a; }

/* ---------- Dialogs: no big gap on top, every row's text starts on the same line ---------- */
@media (min-width: 860px), (pointer: fine) {
  /* the create dialog has its ✕ in the Wydarzenie / Zadanie row - nothing to leave room for above it */
  #create-modal.has-close { padding-top: 12px !important; }
  /* the edit dialogs: the ✕ floats top-right, the title starts right at the top, beside it */
  #edit-task-modal.has-close, #edit-event-modal.has-close { padding-top: 12px !important; }
  #edit-task-title, #edit-event-title { margin-right: 34px !important; width: auto !important; }
  /* text in every row starts at the same x (the date line, the fields, the pickers) */
  :is(#create-modal, #edit-task-modal, #edit-event-modal) .field-body > :is(input[type="text"]:not(.time-picker-btn), textarea) {
    margin-left: -8px !important; padding-left: 8px !important; width: calc(100% + 8px) !important; box-sizing: border-box;
  }
  :is(#create-modal, #edit-task-modal, #edit-event-modal) .select-wrap { margin-left: -8px; }
  :is(#create-modal, #edit-task-modal, #edit-event-modal) .select-wrap .select-dot { left: 8px !important; }
  :is(#create-modal, #edit-task-modal, #edit-event-modal) .select-wrap select { padding-left: 24px !important; }
  :is(#create-modal, #edit-task-modal, #edit-event-modal) .repeat-btn { margin-left: -8px; padding-left: 8px !important; }
  :is(#create-modal, #edit-task-modal, #edit-event-modal) .field { gap: 12px !important; }
}

/* done task card: the icons float top-right, the title starts at the very top; every row has its icon on the left */
.done-card { position: relative; padding-top: 14px !important; }
.done-card .dc-actions { position: absolute; top: 8px; right: 10px; margin: 0; }
.done-card .dc-head { padding-right: 100px; min-height: 30px; gap: 14px; margin-left: 2px; }
.done-card .dc-square { margin-left: 1px; }
.done-card .dc-when, .done-card .dc-repeat { margin-left: 0; }
.done-card .dc-row { gap: 12px; margin-top: 6px; }
.done-card .dc-time-row > div { display: flex; flex-direction: column; gap: 2px; }
/* the title in the dialogs a bit bolder; the dash between the times sits on the times' middle */
#create-title, #edit-task-title, #edit-event-title { font-weight: 600 !important; }
.datetime-row { align-items: center !important; }
.datetime-row .time-dash { align-self: center; line-height: 1; padding: 0 2px !important; margin: 0 !important; transform: translateY(1px); }
/* the event's expanded date row: dates never cut to "C…" - start date, times on line 1; end date + "Cały dzień" on line 2 */
#edit-event-modal .datetime-row { flex-wrap: wrap !important; row-gap: 4px; }
#edit-event-modal .datetime-row .date-picker-wrap { flex: none !important; }
#edit-event-modal .datetime-row .date-picker-btn { overflow: visible; text-overflow: clip; }
#edit-event-modal .datetime-row .allday-toggle { margin-left: 8px; font-size: 12.5px; white-space: nowrap; }
#edit-event-modal .datetime-row > .time-dash { display: none !important; }
#edit-event-modal .datetime-row > .date-picker-wrap ~ .date-picker-wrap { display: inline-flex; align-items: center; }
#edit-event-modal .datetime-row > .date-picker-wrap ~ .date-picker-wrap::before { content: '–'; color: var(--text-muted); margin-right: 4px; }
#edit-event-modal .datetime-row .allday-toggle { flex-basis: 100%; margin-left: 0; }

/* the block being created ("(Bez tytułu)" until it has a title) */
.create-ghost {
  position: absolute; left: 2px; right: 2px; z-index: 6; overflow: hidden; pointer-events: none;
  padding: 3px 7px; border-radius: 6px; box-sizing: border-box;
  background: color-mix(in srgb, var(--gc) 78%, #1c1d25); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  color: #fff; font-size: 11px; line-height: 1.3; animation: ghost-in 0.15s ease-out;
}
@keyframes ghost-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
.create-ghost .cg-title { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.create-ghost .cg-time { opacity: 0.85; }

.create-ghost {
  background: var(--gc) !important; color: var(--gt, #fff) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.35) !important;
}

/* ---------- Blocks: the time looks the same in every block (title's line, right, small) ---------- */
.week-grid-wrap .grid-event .grid-event-row { align-items: center !important; }
.week-grid-wrap .grid-event .grid-event-row .grid-event-time,
.week-grid-wrap .grid-event.tiny .grid-event-time {
  font-size: 10.5px !important; line-height: 13px !important; font-weight: 500 !important; color: rgba(250, 250, 252, 0.62) !important;
  padding-left: 0 !important; margin-left: auto;
}
/* the task circle centred on the title's line (it sat a little high in short blocks) */
.week-grid-wrap .grid-event .grid-event-title:has(> .task-icon) { display: inline-flex; align-items: center; }
.week-grid-wrap .grid-event .task-icon { vertical-align: middle !important; margin-top: 0 !important; position: relative; top: 0; }

/* the time list in the dialogs: wide enough that its scrollbar doesn't cover the minutes */
.time-picker-dropdown { right: auto !important; width: 96px !important; min-width: 96px; }
.time-option { padding-right: 18px !important; }

/* the block being created: clearly visible, in the colour picked in the dialog (the calendar's /
   list's colour until one is picked) */
.create-ghost {
  background: var(--gc, #6f76d9) !important; color: var(--gt, #fff) !important; opacity: 1 !important; z-index: 20 !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.28) !important;
}

/* a place's description shown on its backdrop, small and calm */
.grid-bg .grid-bg-desc {
  margin-top: 2px; font-size: 10.5px; line-height: 1.35; color: rgba(250, 250, 252, 0.72); white-space: pre-line;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
}

/* "Usunięte zadania" */
.bin-item { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.bin-text { flex: 1; min-width: 0; }
.bin-title { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bin-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.bin-restore {
  flex: none; border: 0; border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  background: rgba(139, 146, 255, 0.16); color: #c7cbff;
}
.bin-restore:hover:not(:disabled) { background: rgba(139, 146, 255, 0.28); }

/* Poranek with more steps (Hair wash too): the pills flow side by side when there's room, a touch lower,
   so none gets cut off at the bottom of the block */
.grid-bg.poranek { flex-flow: row wrap !important; align-content: flex-start; column-gap: 4px; row-gap: 2px !important; }
.grid-bg.poranek > .grid-bg-title { flex-basis: 100%; }
.poranek .poranek-step { height: 15px !important; line-height: 15px !important; }
.poranek .ps-t, .poranek .ps-time { line-height: 15px !important; font-size: 10px !important; }
.poranek .ps-done { height: 12px !important; line-height: 12px !important; }
/* in a narrow column (the week view) the pills stack - a hair smaller, so five still fit */
.grid-bg.poranek { container-type: inline-size; }
@container (max-width: 230px) {
  .poranek .poranek-step { height: 13px !important; line-height: 13px !important; }
  .poranek .ps-t, .poranek .ps-time { line-height: 13px !important; font-size: 9.5px !important; }
  .grid-bg.poranek > .grid-bg-title { line-height: 12px !important; font-size: 9px !important; }
}
.grid-bg.poranek { row-gap: 1px !important; padding-top: 2px !important; padding-bottom: 2px !important; }
/* Poranek pills: easier to read - brighter, a little bolder text on a slightly stronger tint */
.poranek .poranek-step { background: color-mix(in srgb, var(--step) 30%, rgba(20, 22, 28, 0.55)) !important; }
.poranek .ps-t { color: #fff !important; font-weight: 600 !important; font-size: 10.5px !important; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35); }
.poranek .ps-time { color: #fff !important; opacity: 0.78 !important; font-weight: 600 !important; font-size: 10px !important; }
@container (max-width: 230px) {
  .poranek .ps-t { font-size: 10px !important; }
  .poranek .ps-time { font-size: 9.5px !important; }
}

/* a special treatment in Poranek (Scalp peel, Anti-oil wash) stands out from the everyday steps */
.poranek .poranek-step.special {
  background: color-mix(in srgb, var(--step) 72%, #1c1d25) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--step) 85%, #fff), 0 0 10px color-mix(in srgb, var(--step) 55%, transparent) !important;
}
.poranek .poranek-step.special::before { display: none; }
.poranek .poranek-step.special { padding-left: 6px !important; }
.poranek .poranek-step.special .ps-t { font-weight: 750 !important; letter-spacing: 0.01em; }
.poranek .poranek-step.special .ps-time { opacity: 0.9 !important; }
.poranek .ps-star { margin-right: 3px; font-size: 9px; color: #fff; }

/* a quiet add-on next to a step (e.g. "+ woda lamelarna" with Scalp peel) */
.poranek .ps-extra { flex: none; margin-left: 4px; font-size: 9.5px; font-weight: 500; color: rgba(255, 255, 255, 0.62); white-space: nowrap; }
@container (max-width: 230px) { .poranek .ps-extra { display: none; } }

/* "Wstałam później" in Poranek's corner and its little picker */
.grid-bg.poranek { position: absolute; }
.poranek-shift {
  position: absolute; top: 3px; right: 4px; z-index: 2; border: 0; border-radius: 6px; padding: 1px 6px;
  font: inherit; font-size: 9.5px; font-weight: 600; cursor: pointer;
  background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.75); opacity: 0; transition: opacity 0.15s, background 0.15s;
}
.grid-bg.poranek:hover .poranek-shift { opacity: 1; }
.poranek-shift:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }
@media (hover: none) { .poranek-shift { opacity: 0.85; } }
.poranek-pop {
  position: fixed; z-index: 3000; width: 220px; padding: 11px 12px; border-radius: 12px; background: #262734;
  border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); font-size: 12.5px;
  animation: ghc-in-right 0.14s ease-out both;
}
.poranek-pop .pp-head { font-weight: 650; font-size: 13px; color: var(--text); }
.poranek-pop .pp-sub { margin: 2px 0 8px; color: var(--text-muted); font-size: 11.5px; }
.poranek-pop .pp-times { display: flex; flex-wrap: wrap; gap: 5px; }
.poranek-pop .pp-time {
  border: 0; border-radius: 999px; padding: 4px 9px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  background: rgba(139, 146, 255, 0.16); color: #d4d7ff;
}
.poranek-pop .pp-time:hover { background: rgba(139, 146, 255, 0.3); }
.poranek-pop .pp-own { display: flex; align-items: center; gap: 6px; margin-top: 9px; color: var(--text-muted); font-size: 11.5px; }
.poranek-pop .pp-input {
  width: 64px; padding: 4px 7px; border-radius: 7px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.05);
  color: var(--text); font: inherit; font-size: 12px;
}

/* Narrow columns (the phone's 3 days): the time goes under the title instead of squeezing it to "K…",
   and the Poranek pills drop their times so the step names stay readable */
.week-grid-wrap .grid-event { container-type: inline-size; }
@container (max-width: 125px) {
  .week-grid-wrap .grid-event .grid-event-row { flex-wrap: wrap !important; row-gap: 0; }
  .week-grid-wrap .grid-event .grid-event-row .grid-event-title { flex: 1 1 100% !important; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .week-grid-wrap .grid-event .grid-event-row .grid-event-time { flex: 1 1 100% !important; margin: 0 !important; text-align: left !important; font-size: 10px !important; }
  .week-grid-wrap .grid-event.tiny .grid-event-row .grid-event-time { display: none !important; }
}
@container (max-width: 125px) {
  .poranek .ps-time, .poranek .ps-extra { display: none !important; }
  .poranek .poranek-step { max-width: 100% !important; }
  .poranek .ps-t { font-size: 9.5px !important; }
  .poranek .ps-done { display: none !important; }
}

/* Poranek: the steps in one column, in time order (top to bottom) - a second column only if they
   don't fit; no "Wstałam później" button any more (the 8:00 notification asks instead) */
.grid-bg.poranek { flex-flow: column wrap !important; align-content: flex-start; }
.grid-bg.poranek > .grid-bg-title { flex-basis: auto !important; }
.poranek-shift { display: none !important; }
.poranek-pop .pp-input { width: 78px !important; }

/* The card every task / event opens with (the pencil edits): struck through only when the task is done */
.done-card .dc-title { text-decoration: none !important; overflow-wrap: anywhere; }
.done-card.is-done .dc-title { text-decoration: line-through !important; }
.done-card .dc-foot[hidden], .done-card .dc-row[hidden], .done-card .dc-btn[hidden] { display: none !important; }

/* Poranek: always one column (nothing jumps to the top right) - the pills a touch smaller so all fit */
.grid-bg.poranek { flex-flow: column nowrap !important; overflow: visible !important; }
.poranek .poranek-step { height: 14px !important; line-height: 14px !important; flex: none; }
.poranek .ps-t, .poranek .ps-time { line-height: 14px !important; }

/* the bell's list on the phone: pinned to the screen's edges (it used to stick out on the left) */
@media (max-width: 860px) {
  .notif-panel { position: fixed !important; left: 10px !important; right: 10px !important; width: auto !important; top: calc(env(safe-area-inset-top) + 58px) !important; max-height: calc(100dvh - 90px) !important; }
}

/* phone: the task / event card floats a bit above the bottom edge instead of sitting on it */
@media (max-width: 859px) {
  .modal.done-card { margin-bottom: calc(14px + env(safe-area-inset-bottom)) !important; border-radius: 18px !important; width: calc(100% - 20px) !important; }
}

/* hour lines: the day columns' lines start at the column's very top (under its border), so they sit
   exactly level with the hour labels' lines on the left (they were 1px lower), and the same shade */
.week-grid-day-col { background-origin: border-box !important; }
.wg-hour-label { border-top-color: rgba(255, 255, 255, 0.1) !important; }

/* Phone top bar: the view switch next to "Dzisiaj"; the bell and the menu dots on one line */
.top-span { display: none; }
#menu-btn svg { width: 20px; height: 20px; display: block; }
.top-actions { align-items: center; }
.notif-btn, #menu-btn { display: inline-grid !important; place-items: center; width: 38px !important; height: 38px !important; padding: 0 !important; line-height: 1 !important; vertical-align: middle; }
.notif-btn svg { width: 20px; height: 20px; display: block; }
@media (max-width: 859px) {
  header.topbar { align-items: center !important; gap: 8px; }
  .top-span:not(:empty) { display: flex; flex: 1; min-width: 0; justify-content: center; }
  .top-span .span-switch { display: flex; gap: 2px; padding: 2px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.07); }
  .top-span .span-seg {
    min-width: 28px; height: 26px; padding: 0 7px; border: 0; border-radius: 999px; background: none;
    font: inherit; font-size: 12px; font-weight: 600; color: var(--text-muted); cursor: pointer;
  }
  .top-span .span-seg.active { background: #6d72f6; color: #fff; }
  header.topbar h1#page-title { flex: none; }
  .top-actions { gap: 2px !important; }
  .date-nav.no-arrows { justify-content: center; padding-top: 6px; padding-bottom: 6px; }
  .date-nav.no-arrows .label { flex: none; }
}
@media (max-width: 859px) { .mobile-day-grid.wide-range .wg-hour-label, .mobile-day-grid .wg-hour-label { padding-right: 4px; } }
/* a very narrow day: "PORANEK" / "PRACA ZDALNA" stay inside their own column */
.grid-bg > .grid-bg-title { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: clip; box-sizing: border-box; }

/* 14 days: titles wrap onto as many lines as the day has room for (--lines, 2-4) */
.mobile-month.two-weeks .mm-chip .mm-t, .mobile-month.two-weeks .mm-chip.mm-allday .mm-t { -webkit-line-clamp: var(--lines, 2) !important; }
.mobile-month.two-weeks .mm-chip { font-size: 10px; line-height: 1.22; }
.mobile-month.two-weeks .mm-chip + .mm-chip { margin-top: 2px; }

/* phone top bar: everything on the "Dzisiaj" button's middle line */
@media (max-width: 859px) {
  .top-span:not(:empty) { align-self: center; align-items: center; }
  .top-span .span-switch { margin: 0 !important; }
  .top-actions, .notif-wrap, .menu-wrap { display: flex !important; align-items: center !important; align-self: center; margin: 0 !important; }
  .notif-btn, #menu-btn { margin: 0 !important; transform: none !important; }
}

/* ---------- Phone top bar like Google Calendar: ☰ + month on the left, today's date icon on the right;
   lower, and no "Dzisiaj" button in the calendar ---------- */
@media (max-width: 859px) {
  header.topbar { padding: calc(6px + env(safe-area-inset-top)) 10px 6px !important; min-height: 0 !important; }
  header.topbar:has(.top-span:not(:empty)) #page-title { display: none !important; }
  .top-span:not(:empty) { display: flex !important; align-items: center; gap: 4px; flex: 1; justify-content: flex-start !important; position: relative; }
  .tb-btn {
    width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none;
    color: var(--text); cursor: pointer; position: relative; padding: 0;
  }
  .tb-btn:active { background: rgba(255, 255, 255, 0.08); }
  .tb-btn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .tb-month {
    display: inline-flex; align-items: center; gap: 2px; border: 0; background: none; color: var(--text); cursor: pointer;
    font: inherit; font-size: 17px; font-weight: 500; padding: 4px 4px 4px 2px; letter-spacing: -0.01em;
  }
  .tb-month svg { width: 20px; height: 20px; }
  .tb-today { margin-left: auto; }
  .tb-today span { position: absolute; inset: 0; display: grid; place-items: center; padding-top: 2px; font-size: 10px; font-weight: 700; }
  .tb-views, .tb-jump {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; background: var(--s2, #23242e);
    border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
  }
  .tb-views { display: flex; flex-direction: column; padding: 6px; min-width: 170px; }
  .tb-views[hidden], .tb-jump[hidden] { display: none !important; }
  .tb-views .tb-view {
    border: 0; background: none; text-align: left; padding: 9px 12px; border-radius: 9px; font: inherit; font-size: 14px;
    color: var(--text); cursor: pointer; height: auto; min-width: 0;
  }
  .tb-views .tb-view.active { background: rgba(109, 114, 246, 0.2); color: #d4d7ff; font-weight: 600; box-shadow: none; }
  .tb-jump { left: 30px; width: 280px; padding: 10px 12px 12px; }
  .top-span .span-switch { display: none !important; }
  .date-nav.no-arrows { display: none !important; }
}
/* 1 day: its weekday and date top left, like Google ("PT." over a 9 in a circle when it's today) */
.day1-head { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0 6px; }
.day1-head span { font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-muted); }
.day1-head b { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; font-size: 17px; font-weight: 550; color: var(--text); }
.day1-head.today span { color: #a5b4fc; }
.day1-head.today b { background: #6d72f6; color: #fff; }
.mobile-day-grid .day1-head-cell { min-height: 56px; }

/* phone: the "now" line white and thinner, like Google's (PC keeps the red one) */
@media (max-width: 859px) {
  .now-line { height: 1px !important; margin-top: 0 !important; background: #fff !important; box-shadow: none !important; }
  .now-line::before { width: 9px !important; height: 9px !important; left: -4px !important; margin-top: -4.5px !important; background: #fff !important; box-shadow: none !important; }
}

/* phone: the "Cofnij" toast sits at the very bottom, left of the round button (like Google's snackbar) */
@keyframes undo-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 859px) {
  .undo-toast {
    left: 12px !important; right: 84px !important; bottom: calc(18px + env(safe-area-inset-bottom)) !important;
    transform: none !important; max-width: none !important; animation: undo-up 0.2s ease-out !important;
  }
  .undo-toast span { white-space: normal !important; flex: 1; min-width: 0; line-height: 1.35; }
}

/* today's date icon: a rounded square with the number dead centre; a tap bounces it with a soft ripple */
@media (max-width: 859px) {
  .tb-today-box {
    width: 19px; height: 19px; box-sizing: border-box; border: 1.8px solid currentColor; border-radius: 5px;
    display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; line-height: 1;
    font-variant-numeric: tabular-nums; letter-spacing: 0; padding: 0; text-indent: 0;
  }
  .tb-today::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.16); opacity: 0; transform: scale(0.4); pointer-events: none; }
  .tb-today.tapped .tb-today-box { animation: tb-bounce 0.38s cubic-bezier(.3, 1.6, .5, 1); }
  .tb-today.tapped::after { animation: tb-ripple 0.45s ease-out; }
}
@keyframes tb-bounce { 0% { transform: scale(1); } 35% { transform: scale(0.8); } 100% { transform: scale(1); } }
@keyframes tb-ripple { 0% { opacity: 1; transform: scale(0.4); } 100% { opacity: 0; transform: scale(1.15); } }
@media (max-width: 859px) { .tb-today .tb-today-box { position: static !important; inset: auto !important; padding: 0 !important; } }

/* narrow columns (phone 3 days): the time and the description both start where the title text starts
   (after the circle), and a long title ends with "…" instead of being chopped */
@container (max-width: 125px) {
  .week-grid-wrap .grid-event.task-linked:has(.task-icon) .grid-event-row .grid-event-time { padding-left: 18px !important; }
  .week-grid-wrap .grid-event .grid-event-title { display: flex !important; align-items: center; min-width: 0; }
  .week-grid-wrap .grid-event .grid-event-title .ge-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Minutówka quick add: title + "Dodaj" in one line, the rest folded under "Więcej opcji" */
.mn-add-row .mn-add-quick { display: flex; gap: 6px; align-items: center; }
.mn-add-row .mn-add-quick .mn-add-input { flex: 1; min-width: 0; }
.mn-add-row .mn-add-quick .pop-primary { flex: none; box-shadow: none; }
.mn-add-row .mn-add-more {
  align-self: flex-start; border: none; background: none; padding: 2px 0; margin: 0;
  font: inherit; font-size: 11.5px; color: var(--text-muted); cursor: pointer;
}
.mn-add-row .mn-add-more::after { content: ' ▾'; font-size: 10px; }
.mn-add-row .mn-add-more.open::after { content: ' ▴'; }
.mn-add-row .mn-add-more:hover { color: var(--text); }
.mn-add-row .mn-add-extra:not([hidden]) { display: flex; flex-direction: column; gap: 5px; }
.task-row.mn-pending { opacity: 0.55; pointer-events: none; }

/* ---------- Phone: the create / edit dialogs flat and even, like Google Calendar ----------
   (inputs keep 16px - smaller makes iOS zoom in) */
@media (max-width: 859px) and (pointer: coarse) {
  :is(#create-modal, #edit-task-modal, #edit-event-modal) { gap: 2px !important; }
  :is(#create-modal, #edit-task-modal, #edit-event-modal) .field { min-height: 44px; align-items: center; gap: 14px; margin: 0 !important; }
  :is(#create-modal, #edit-task-modal, #edit-event-modal) .field-icon { width: 19px; height: 19px; flex: none; }
  /* title: no box, just a thin line under it (accent while typing) */
  :is(#create-title, #edit-task-title, #edit-event-title) {
    background: transparent !important; border: 0 !important; border-radius: 0 !important; outline: none !important;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12) !important; padding: 8px 0 !important; margin-bottom: 6px !important; font-size: 19px !important;
  }
  :is(#create-title, #edit-task-title, #edit-event-title):focus { box-shadow: inset 0 -2px 0 var(--accent) !important; }
  /* the other fields: flat, a soft tint only while touched / typing */
  :is(#create-modal, #edit-task-modal, #edit-event-modal) :is(input[type="text"]:not(.time-picker-btn):not(#create-title):not(#edit-task-title):not(#edit-event-title), textarea, select, .repeat-btn, .select-wrap) {
    background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 10px !important; outline: none !important;
  }
  :is(#create-modal, #edit-task-modal, #edit-event-modal) :is(textarea, input[type="text"]:not(.time-picker-btn)):focus { background: rgba(255, 255, 255, 0.05) !important; }
  :is(#create-modal, #edit-task-modal, #edit-event-modal) .repeat-btn { padding: 8px 0 !important; min-height: 0 !important; font-size: 15px !important; }
  :is(#create-modal, #edit-task-modal, #edit-event-modal) textarea { min-height: 0 !important; height: auto; padding: 10px 0 !important; resize: none; }
  :is(#create-modal, #edit-task-modal, #edit-event-modal) .select-wrap select { height: 40px; padding-left: 22px !important; font-size: 16px; }
  :is(#create-modal, #edit-task-modal, #edit-event-modal) .select-wrap .select-dot { left: 2px; }
  /* date + both times on one line: the date shrinks (short "pon., 26 paź"), the times never wrap */
  :is(#create-modal, #edit-task-modal, #edit-event-modal) .datetime-row { flex-wrap: nowrap !important; gap: 2px; min-width: 0; }
  :is(#create-modal, #edit-task-modal, #edit-event-modal) .datetime-row .date-picker-wrap { flex: 1 1 auto; min-width: 0; }
  :is(#create-modal, #edit-task-modal, #edit-event-modal) .datetime-row .time-picker-wrap { flex: 0 0 auto; width: auto; min-width: 0; }
  :is(#create-modal, #edit-task-modal, #edit-event-modal) .date-picker-btn {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
    background: transparent !important; border: 0 !important; border-radius: 8px !important; box-shadow: none !important; padding: 8px 4px 8px 0 !important; font-size: 15px;
  }
  :is(#create-modal, #edit-task-modal, #edit-event-modal) input.time-picker-btn {
    width: 54px; padding: 8px 2px !important; font-size: 16px; text-align: center;
    background: transparent !important; border: 0 !important; border-radius: 8px !important; box-shadow: none !important;
  }
  :is(#create-modal, #edit-task-modal, #edit-event-modal) :is(.date-picker-btn, input.time-picker-btn):focus { background: rgba(255, 255, 255, 0.07) !important; }
  :is(#create-modal, #edit-task-modal, #edit-event-modal) .datetime-row .time-dash { padding: 0; }
  :is(#create-modal, #edit-task-modal, #edit-event-modal) .dt-summary { padding: 8px 0; margin-left: 0; }
  :is(#create-modal, #edit-task-modal, #edit-event-modal) .dts-main { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  :is(#create-modal, #edit-task-modal, #edit-event-modal) .dts-sub { font-size: 12.5px; }
  :is(#create-modal, #edit-task-modal, #edit-event-modal) .modal-actions { margin-top: 10px; }
  :is(#create-modal, #edit-task-modal, #edit-event-modal) .modal-actions .btn { min-height: 44px; border-radius: 999px; font-size: 15px; }
}
@media (max-width: 859px) and (pointer: coarse) {
  #create-modal #create-title, #edit-task-modal #edit-task-title, #edit-event-modal #edit-event-title,
  #create-modal #create-title:focus, #edit-task-modal #edit-task-title:focus, #edit-event-modal #edit-event-title:focus { background: transparent !important; border-radius: 0 !important; }
  :is(#create-modal, #edit-task-modal, #edit-event-modal) .dts-main { white-space: pre; }
  :is(#create-modal, #edit-task-modal, #edit-event-modal) textarea { font-size: 16px !important; height: 40px; line-height: 1.3; }
  :is(#create-modal, #edit-task-modal, #edit-event-modal) textarea:focus { height: 84px; padding: 10px 8px !important; }
}
@media (max-width: 859px) and (pointer: coarse) { :is(#create-modal, #edit-task-modal, #edit-event-modal) :is(textarea, input)::placeholder { font-size: inherit !important; } }
@media (max-width: 859px) and (pointer: coarse) {
  :is(#create-modal, #edit-task-modal, #edit-event-modal) input[type="text"]:not(.time-picker-btn):not(#create-title):not(#edit-task-title):not(#edit-event-title) { padding: 10px 0 !important; font-size: 16px; }
  :is(#create-modal, #edit-task-modal, #edit-event-modal) input[type="text"]:not(.time-picker-btn):focus { padding: 10px 8px !important; }
  #edit-event-modal #edit-event-calendar { font-size: 16px; }
}

/* Phone: the round button (and its fan) always on top of the calendar, the header and the small
   panels - only real sheets / dialogs (z-index 44+) cover it */
@media (max-width: 859px) {
  .fab-menu .fab-scrim { z-index: 34; }
  .fab-item { z-index: 35; }
  .fab-menu .mobile-fab { z-index: 36; }
}

/* "Offline" - the calendar is showing the last saved data */
.offline-pill {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60;
  padding: 5px 12px; border-radius: 999px; background: #2a2b33; border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted); font-size: 12px; white-space: nowrap; pointer-events: none;
}
.offline-pill[hidden] { display: none; }

/* Phone: "+" in Minutówka opens its own small window near the top (clear of the iPhone keyboard),
   with the rest of the screen dimmed - not a form squeezed in above the tasks */
@media (max-width: 859px) {
  .minutowka-panel .mn-add-row:not([hidden]) {
    position: fixed; left: 12px; right: 12px; top: calc(env(safe-area-inset-top, 0px) + 64px); z-index: 80;
    margin: 0; padding: 14px 14px 12px; border-radius: 16px; gap: 8px;
    background: #23242c; border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 0 100vmax rgba(0, 0, 0, 0.55) !important;
    max-height: calc(100dvh - 90px); overflow-y: auto; animation: pop-in 0.16s ease-out;
  }
  .minutowka-panel .mn-add-row .pop-head { font-size: 15px; font-weight: 600; }
  .minutowka-panel .mn-add-row .mn-add-input { font-size: 16px; padding: 10px 12px; }
  .minutowka-panel .mn-add-row .mn-add-notes { font-size: 16px; }
  .minutowka-panel .mn-add-row .pop-primary { padding: 9px 18px; font-size: 15px; }
}

/* Phone: swipe a task left - the red "Usuń" slides in from the right edge */
.task-row.swipeable { position: relative; overflow: hidden; }
.task-row.swipeable > :not(.swipe-del) { position: relative; z-index: 1; }
.task-row > .swipe-del {
  position: absolute; top: 0; right: 0; bottom: 0; width: 0; z-index: 2; overflow: hidden;
  border: 0; border-radius: 10px; padding: 0; margin: 0; background: #e5484d; color: #fff;
  font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.task-row > .swipe-del svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; display: block; margin: 0 auto; }
.task-row > .swipe-del { display: flex; align-items: center; justify-content: center; }

/* Minutówka "+": a drawn plus, exactly centred in its circle (the "+" character sat off-centre) */
.minutowka-clock-heading .mn-add { display: inline-grid !important; place-items: center; padding: 0 !important; line-height: 0 !important; font-size: 0 !important; }
.minutowka-clock-heading .mn-add svg { width: 62%; height: 62%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

/* Phone: the create / edit dialogs (the ones with hours) come down from the top, so the hour list
   and the number keyboard (at the bottom) both fit on screen */
@keyframes sheet-down-in { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes sheet-up-out { to { transform: translateY(-100%); } }
@media (max-width: 859px) {
  .modal-overlay:has(> #create-modal:not([hidden]), > #edit-event-modal:not([hidden]), > #edit-task-modal:not([hidden])) { align-items: flex-start; }
  :is(#create-modal, #edit-event-modal, #edit-task-modal) {
    border-radius: 0 0 20px 20px !important;
    padding-top: calc(14px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 14px !important;
    max-height: 88dvh;
  }
  :is(#create-modal, #edit-event-modal, #edit-task-modal).has-close { padding-top: calc(46px + env(safe-area-inset-top, 0px)) !important; }
  :is(#create-modal, #edit-event-modal, #edit-task-modal)::before { top: auto; bottom: 6px; }
  :is(#create-modal, #edit-event-modal, #edit-task-modal) .modal-close { top: calc(8px + env(safe-area-inset-top, 0px)) !important; }
  :is(#create-modal, #edit-event-modal, #edit-task-modal):not([hidden]) { animation: sheet-down-in 0.26s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .modal-overlay.closing :is(#create-modal, #edit-event-modal, #edit-task-modal) { animation: sheet-up-out 0.18s ease-in forwards; }
}
/* Notatki + "+" next to Minutówka's name: two equal circles */
.minutowka-clock-heading .mn-notes, .minutowka-clock-heading .mn-add { width: 24px !important; height: 24px !important; flex: none; }
.minutowka-clock-heading .mn-notes svg { width: 15px; height: 15px; }

/* Dragging a Minutówka task onto the calendar: a ghost block shows the day + hour it will get */
.mn-cal-ghost {
  position: absolute; left: 2px; right: 2px; z-index: 6; pointer-events: none; overflow: hidden;
  display: flex; flex-direction: column; gap: 1px; padding: 3px 6px; border-radius: 6px;
  background: rgba(124, 108, 245, 0.35); border: 1.5px dashed rgba(167, 155, 255, 0.9); color: #fff; font-size: 11.5px; line-height: 1.25;
}
.mn-cal-ghost b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mn-cal-ghost span { opacity: 0.85; font-size: 10.5px; }
.task-row.mn-over-cal { opacity: 0.75; width: 220px !important; border-radius: 10px; background: #2a2b36 !important; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5); }

/* Phone: the task carried from Minutówka to the calendar (hold, then drag) */
.mn-touch-chip {
  position: fixed; left: 0; top: 0; z-index: 400; pointer-events: none; max-width: 200px;
  padding: 8px 12px; border-radius: 12px; background: #6f76d9; color: #fff; font-size: 14px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
}
body.mn-touch-dragging { -webkit-user-select: none; user-select: none; }
/* the ghost on one line - title, then the hours - so a short (15-30 min) slot never cuts the title off */
.mn-cal-ghost { flex-direction: row !important; align-items: center; gap: 6px !important; padding: 0 7px !important; min-height: 22px; }
.mn-cal-ghost b { flex: 1; min-width: 0; }
.mn-cal-ghost span { flex: none; }
.task-row.mn-over-cal { align-items: center; padding: 8px 10px !important; height: auto !important; max-height: none !important; overflow: visible; }
.task-row.mn-over-cal .task-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* A calendar task carried back to Minutówka: the panel (PC) / the round button (phone) lights up */
.minutowka-clock.mn-drop-target { box-shadow: 0 0 0 2px #7c6cf5, 0 0 24px rgba(124, 108, 245, 0.35) !important; }
.mobile-fab.mn-drop-target { transform: scale(1.18); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35), 0 8px 26px rgba(124, 108, 245, 0.7) !important; }

/* Rossmann: paste the "Ulubione" page */
.ross-sheet { display: flex; flex-direction: column; gap: 10px; }
.ross-steps { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.ross-steps a { color: var(--accent); }
.ross-paste {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 110px; padding: 9px 11px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); color: var(--text); font: inherit; font-size: 13px;
}
.ross-paste:focus { outline: none; border-color: var(--accent); }
.ross-msg { font-size: 12.5px; line-height: 1.5; color: var(--text); }
@media (pointer: coarse) { .ross-paste { font-size: 16px; } }

/* The bell: ✕ per note, "Wyczyść wszystko" in the header */
.notif-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.notif-clear { border: 0; background: none; padding: 3px 6px; border-radius: 6px; color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; }
.notif-clear:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.notif-del {
  margin-left: auto; width: 22px; height: 22px; display: inline-grid; place-items: center; flex: none;
  border: 0; border-radius: 50%; background: none; color: var(--text-muted); font-size: 11px; cursor: pointer; opacity: 0.7;
}
.notif-del:hover { opacity: 1; background: rgba(255, 255, 255, 0.08); color: var(--text); }
@media (pointer: coarse) { .notif-del { width: 30px; height: 30px; font-size: 13px; } .notif-clear { padding: 6px 8px; font-size: 13px; } }
.notif-action {
  display: inline-flex; align-items: center; margin-top: 8px; padding: 5px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(167, 139, 250, 0.35); background: rgba(139, 92, 246, 0.14); color: var(--text); font: inherit; font-size: 12px; font-weight: 600;
}
.notif-action:hover { background: rgba(139, 92, 246, 0.26); }
/* the bell's header: a small basket (Rossmann: paste the favourites) next to "Wyczyść wszystko" */
.notif-head-actions { display: inline-flex; align-items: center; gap: 2px; }
.notif-icon-btn { width: 26px; height: 26px; display: inline-grid; place-items: center; border: 0; border-radius: 7px; background: none; color: var(--text-muted); cursor: pointer; }
.notif-icon-btn:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.notif-icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (pointer: coarse) { .notif-icon-btn { width: 32px; height: 32px; } .notif-icon-btn svg { width: 18px; height: 18px; } }
/* the Rossmann button in the bell's header: their own round sign, in their red */
.notif-icon-btn .ross-logo { width: 18px; height: 18px; fill: #c8102e; stroke: none; }
.notif-icon-btn:hover .ross-logo { fill: #e0173a; }
@media (pointer: coarse) { .notif-icon-btn .ross-logo { width: 20px; height: 20px; } }

/* Event / task card: ✎ 🗑 ✕ on their own row on top, the title below them across the whole width
   (a long title was squeezed into a narrow column next to the buttons), the colour square next to
   its first line */
.done-card .dc-actions { position: static !important; margin: -6px -8px 2px 0 !important; }
.done-card .dc-head { padding-right: 0 !important; align-items: flex-start !important; min-height: 0 !important; }
.done-card .dc-title { line-height: 1.3; font-size: 17px; }
.done-card .dc-square { margin-top: 6px; }

/* a task's circle (and the time) stay on the title's FIRST line - a title wrapping onto two lines had
   the circle sitting halfway between them */
.week-grid-wrap .grid-event .grid-event-title:has(> .task-icon) { align-items: flex-start !important; }
.week-grid-wrap .grid-event.task-linked .grid-event-row { align-items: flex-start !important; }
.week-grid-wrap .grid-event .grid-event-title > .task-icon { flex: none; }

/* =====================================================================================================
   CALM REDESIGN (2026-10-21) - fewer boxes, one accent, one header style, Google-like top bar.
   Everything below overrides the older rules above (later rules win).
   ===================================================================================================== */

/* (8) one set of greys, shared with Notatki (notatki/notes.css uses the same values) */
:root {
  --bg: #131317;
  --s1: #18181d;
  --s2: #202026;
  --s3: #29292f;
  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.11);
  --text: #ececf0;
  --text-muted: #9a9aa4;
  --border-strong: rgba(255, 255, 255, 0.13);
}
body, #app, main#view-container { background: var(--bg) !important; }
header.topbar { background: var(--bg) !important; border-bottom: 1px solid var(--line) !important; box-shadow: none !important; }

/* (3) PC top bar like Google Calendar: [menu] [Dziś] [< >] Październik 2026 ........ [1 3 7 14] [bell] [more] */
@media (min-width: 860px) {
  header.topbar { gap: 10px !important; }
  header.topbar h1#page-title {
    order: 1; flex: none; height: 32px; padding: 0 14px !important; margin: 0 !important; border-radius: 999px !important;
    border: 1px solid var(--line-2) !important; background: transparent !important; box-shadow: none !important;
    font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0 !important; color: var(--text) !important;
    display: inline-flex !important; align-items: center; cursor: pointer;
  }
  header.topbar h1#page-title::before { display: none !important; }
  header.topbar h1#page-title:hover, header.topbar h1#page-title.is-today:hover { background: rgba(255, 255, 255, 0.05) !important; }
  header.topbar h1#page-title.is-today { cursor: default; }
  .header-week-nav { order: 2; flex: 1; display: flex !important; align-items: center; gap: 2px !important; min-width: 0; margin: 0 !important; }
  .header-week-nav .hw-arrow {
    width: 32px !important; height: 32px !important; border-radius: 50% !important; border: 0 !important; background: none !important;
    color: var(--text-muted) !important; font-size: 20px !important; line-height: 1 !important; padding: 0 0 2px !important; display: grid; place-items: center;
  }
  .header-week-nav .hw-arrow:hover { background: rgba(255, 255, 255, 0.06) !important; color: var(--text) !important; }
  .header-week-nav .hw-month { margin-left: 8px !important; font-size: 18px !important; font-weight: 500 !important; letter-spacing: 0 !important; color: var(--text) !important; }
  .header-week-nav .hw-week { margin-left: auto !important; }
  .top-actions { order: 3; }
  .hdr-nav { display: none !important; } /* Glow up / Sprzątajka moved to the left column */
}

/* (2) one accent: the bell's badge, today's dot etc. use it; the rest is grey */
.notif-badge { background: var(--accent) !important; color: #fff !important; }

/* (1) PC left column: no cards - plain sections on the page background, divided by a hairline */
@media (min-width: 860px) {
  .mini-cal, .water-mini-panel, .minutowka-clock, nav.tabbar {
    background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .water-mini-panel, .minutowka-clock { border-top: 1px solid var(--line) !important; padding-top: 12px !important; }
  /* the calendar itself: no frame around it */
  .calendar-view .week-grid-wrap { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; }
  .calendar-view .week-grid-wrap { border-left: 1px solid var(--line) !important; }

  /* Glow up / Sprzątajka: two quiet rows in the left column (the old tab bar, under Wodzianka) */
  nav.tabbar { display: none !important; } /* Glow up / Sprzątajka are in the ⋮ menu on PC */
  nav.tabbar button[data-view="day"] { display: none !important; }
  nav.tabbar button {
    display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important; height: 34px !important;
    padding: 0 8px !important; margin: 0 !important; border: 0 !important; border-radius: 8px !important; background: transparent !important;
    box-shadow: none !important; transform: none !important; color: var(--text) !important; font-size: 13px !important; font-weight: 500 !important;
    flex-direction: row !important; justify-content: flex-start !important;
  }
  nav.tabbar button::after { display: none !important; }
  nav.tabbar button .emoji { width: auto !important; height: auto !important; background: none !important; font-size: 14px !important; margin: 0 !important; padding: 0 !important; }
  nav.tabbar button:hover { background: rgba(255, 255, 255, 0.05) !important; }
  nav.tabbar button.active { background: var(--accent-soft) !important; color: var(--text) !important; }

  /* mini calendar: no week-number column */
  .mc-wk { display: none !important; }
  .mc-weekdays, .mc-row { grid-template-columns: repeat(7, 1fr) !important; }
  .mc-weekdays > span:nth-child(-n + 2) { display: none !important; }
  .mc-row > .mc-day:nth-of-type(1) { grid-column: 1 !important; }
  .mc-row > .mc-day:nth-of-type(2) { grid-column: 2 !important; }
  .mc-row > .mc-day:nth-of-type(3) { grid-column: 3 !important; }
  .mc-row > .mc-day:nth-of-type(4) { grid-column: 4 !important; }
  .mc-row > .mc-day:nth-of-type(5) { grid-column: 5 !important; }
  .mc-row > .mc-day:nth-of-type(6) { grid-column: 6 !important; }
  .mc-row > .mc-day:nth-of-type(7) { grid-column: 7 !important; }
  .mc-row.current::before { grid-column: 1 / -1 !important; background: var(--accent-soft) !important; box-shadow: none !important; }
  .mc-row > .mc-day.in-range { width: 100% !important; }
}

/* (4) one style for every section header: a small bold name; its actions as grey icons on the right */
.mc-title, .minutowka-clock-heading {
  font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--text) !important;
}
.minutowka-clock-heading { display: flex !important; align-items: center !important; gap: 6px !important; }
.minutowka-clock-heading::before, .minutowka-clock-heading::after { display: none !important; } /* the dot and the line */
.minutowka-clock-heading .mn-notes, .minutowka-clock-heading .mn-add {
  background: transparent !important; color: var(--text-muted) !important; box-shadow: none !important; border: 0 !important;
}
.minutowka-clock-heading .mn-notes { margin-left: auto !important; }
.minutowka-clock-heading .mn-notes:hover, .minutowka-clock-heading .mn-add:hover { background: rgba(255, 255, 255, 0.07) !important; color: var(--text) !important; }
.minutowka-clock-heading .mn-add.open { background: var(--accent-soft) !important; color: var(--text) !important; }
/* the sections inside Minutówka (Pilne / Wyjazd / Później): calm small grey labels */
.mn-sec-head { text-transform: none !important; letter-spacing: 0 !important; font-size: 12px !important; font-weight: 600 !important; color: var(--text-muted) !important; }
/* phone: the sheet already says "Minutówka" - the heading inside keeps only its buttons */
.minutowka-panel .minutowka-clock-heading { font-size: 0 !important; justify-content: flex-end; min-height: 0; margin-bottom: 4px; }
.minutowka-panel .minutowka-clock-heading .mn-notes { margin-left: 0 !important; }

/* (5) events: normal letters everywhere; backdrop events (work, places) simply paler, no pencil */
.grid-bg .grid-bg-title {
  text-transform: none !important; letter-spacing: 0 !important; font-size: 11.5px !important; font-weight: 600 !important; opacity: 0.85;
}
.grid-bg .grid-bg-title svg { display: none !important; }
.week-grid-wrap .grid-event .ge-t, .week-grid-wrap .grid-event .grid-event-title { text-transform: none !important; letter-spacing: 0 !important; }

/* phone: the calendar edge to edge, no frame and no side margins */
@media (max-width: 859px) {
  .mobile-day-grid, .week-grid-wrap.mobile-day-grid, .mobile-month {
    margin-left: 0 !important; margin-right: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important;
  }
  #view-container { padding-left: 0 !important; padding-right: 0 !important; }
}

/* (6) the round button: flat, one colour, no glow; the fan: flat dark bubbles (the emoji carries the colour) */
@media (max-width: 859px) {
  .fab-menu .mobile-fab, .mobile-fab {
    background: var(--accent) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important; border: 0 !important;
  }
  .fab-menu.open .mobile-fab { background: var(--s3) !important; }
  .fab-item {
    background: var(--s2) !important; border: 1px solid var(--line-2) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
  }
  .fab-item:active { background: var(--s3) !important; filter: none !important; }
  .fab-item-emoji { font-size: 22px !important; filter: none !important; }
}

/* (4) Wodzianka: the same header as the others; the percentage and the drink buttons in grey */
.water-mini-panel .mw-title, .mini-water-card .mw-title {
  font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--text) !important;
}
.water-mini-panel .mw-title::before, .mini-water-card .mw-title::before { display: none !important; }
.water-mini-panel .mw-pct { background: transparent !important; color: var(--text-muted) !important; font-weight: 500 !important; font-size: 12px !important; padding: 0 !important; }
.water-mini-panel .mini-drink-row .drink-add {
  background: transparent !important; border: 1px solid var(--line-2) !important; box-shadow: none !important; color: var(--text) !important;
}
.water-mini-panel .mini-drink-row .drink-add:hover { background: rgba(255, 255, 255, 0.05) !important; }
.water-mini-panel .water-undo-last { background: transparent !important; color: var(--text-muted) !important; border: 0 !important; padding-left: 0 !important; }
/* top bar icons in grey (the accent stays for what is selected / new) */
header.topbar .notif-btn, header.topbar #menu-btn { color: var(--text-muted) !important; }
header.topbar .notif-btn:hover, header.topbar #menu-btn:hover { color: var(--text) !important; }
#side-panel-close { color: var(--text-muted) !important; }

/* Glow up / Sprzątajka in the ⋮ menu: PC only (the phone has them in the round button's fan) */
@media (max-width: 859px) { #menu-dropdown .menu-view { display: none !important; } }

/* Dragging a Minutówka task over the calendar: the ghost IS the future block - the task's colour,
   the day's full width, the same look as the blocks around it; the row being carried hides meanwhile */
.mn-cal-ghost {
  background: color-mix(in srgb, var(--gc, #a78bfa) 50%, transparent) !important;
  border: 0 !important; border-left: 3px solid var(--gc, #a78bfa) !important; border-radius: 6px !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important; left: 1px !important; right: 1px !important;
  color: #fff !important; font-size: 11px !important;
}
.task-row.mn-over-cal, body.mn-touch-dragging .mn-touch-chip.over-cal { opacity: 0 !important; }
#menu-dropdown { min-width: 220px !important; } #menu-dropdown button { white-space: nowrap !important; }

/* no all-day events / pending tasks on any shown day: the all-day strip above 7:00 folds away */
.week-grid-wrap.no-allday .wg-allday-col, .week-grid-wrap.no-allday .wg-gutter-allday {
  min-height: 0 !important; height: 0 !important; padding: 0 !important; border-bottom: 0 !important; overflow: hidden !important;
}

/* description / AI boxes in the dialogs grow with the text (height set in JS) - no inner scrollbar */
:is(#create-description, #edit-event-description, #edit-task-notes, #create-ai-instructions, #edit-event-ai-instructions, #edit-task-ai-instructions) {
  overflow: hidden !important; resize: none !important; max-height: none !important; min-height: 38px;
}
@media (max-width: 859px) and (pointer: coarse) {
  :is(#create-modal, #edit-task-modal, #edit-event-modal) textarea:focus { padding: 10px 8px !important; }
}

/* "Zdalna | Stacjonarna" under a work event's title - a small quiet segmented switch */
.work-mode {
  display: inline-flex; align-self: flex-start; gap: 2px; padding: 2px; margin: -2px 0 2px;
  border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line);
}
.work-mode[hidden] { display: none !important; }
.work-mode button {
  border: 0; background: none; color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 500;
  padding: 4px 12px; border-radius: 999px; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.work-mode button:hover { color: var(--text); }
.work-mode button[aria-checked="true"][data-mode="zdalna"] { background: rgba(246, 191, 38, 0.22); color: #f6d36b; }
.work-mode button[aria-checked="true"][data-mode="stacjonarna"] { background: rgba(11, 128, 67, 0.4); color: #8fdcb0; }
@media (pointer: coarse) { .work-mode button { font-size: 14px; padding: 7px 16px; } }

/* a done task's title: struck through on EVERY line (the drawn line sat at 55% of the whole title -
   with a title on two lines it ran between them) */
.week-grid-wrap .grid-event.done .ge-t {
  background: none !important; text-decoration: line-through !important; text-decoration-thickness: 1px !important;
}

/* short (under 30 min) blocks: one tight line - title ends with "…" when it doesn't fit, time on the right */
.week-grid-wrap .grid-event.tiny { min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; overflow: hidden; }
.week-grid-wrap .grid-event.tiny .grid-event-row { align-items: center !important; height: 100%; min-width: 0; }
.week-grid-wrap .grid-event.tiny .grid-event-title { flex: 1; min-width: 0; overflow: hidden; align-items: center !important; }
.week-grid-wrap .grid-event.tiny .ge-t { flex: 1; min-width: 0; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; line-height: 14px !important; font-size: 11px !important; }
.week-grid-wrap .grid-event.tiny .grid-event-time { flex: none; line-height: 14px !important; padding-left: 6px !important; }
.week-grid-wrap .grid-event.tiny .task-icon { width: 11px !important; height: 11px !important; margin-right: 4px !important; }
/* the time sits on the same line as the title (same baseline) and its digits are all one width, so
   13:00 / 13:15 line up exactly one under the other */
.week-grid-wrap .grid-event .grid-event-time { font-variant-numeric: tabular-nums !important; font-feature-settings: 'tnum' 1 !important; }
.week-grid-wrap .grid-event.tiny .grid-event-row { align-items: baseline !important; }
.week-grid-wrap .grid-event.tiny .grid-event-title { align-items: baseline !important; align-self: center; }
.week-grid-wrap .grid-event.tiny .ge-t, .week-grid-wrap .grid-event.tiny .grid-event-time { line-height: 14px !important; }
.week-grid-wrap .grid-event.tiny .task-icon { align-self: center; }

/* ---------- CALM REDESIGN, part 2 (2026-10-21): the Wodzianka / Sprzątajka / Glow up panels ----------
   No boxes inside the panel (sections are plain lists divided by hairlines), small grey section names,
   13px rows, quiet grey actions - the same language as the rest. */
#side-panel { background: var(--s1) !important; border-left: 1px solid var(--line) !important; box-shadow: -12px 0 40px rgba(0, 0, 0, 0.35) !important; }
#side-panel .side-panel-header { border-bottom: 1px solid var(--line) !important; }
#side-panel #side-panel-title { font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0 !important; }

/* cards -> plain lists */
#side-panel-content .card, #side-panel-content .gu-card {
  background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  padding: 0 !important; margin: 0 0 6px !important;
}
#side-panel-content .week-day-heading, #side-panel-content .glowup-section-heading {
  font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important;
  color: var(--text-muted) !important; margin: 18px 0 4px !important; padding: 0 !important;
}
#side-panel-content > .week-day-heading:first-child, #side-panel-content > .glowup-section-heading:first-child { margin-top: 4px !important; }
#side-panel-content .habit-row { padding: 8px 0 !important; font-size: 13px !important; border-top: 1px solid var(--line) !important; gap: 10px !important; }
#side-panel-content .card > .habit-row:first-child { border-top: 0 !important; }
#side-panel-content .habit-row input[type="checkbox"] { width: 16px !important; height: 16px !important; }
#side-panel-content .empty-state, #side-panel-content .gu-empty {
  padding: 6px 0 !important; text-align: left !important; font-size: 12.5px !important; color: var(--text-muted) !important;
  background: none !important; border: 0 !important;
}
/* "Usuń" -> a small grey ✕, only on hover on a PC */
#side-panel-content .delete-habit-btn {
  font-size: 0 !important; width: 24px !important; height: 24px !important; padding: 0 !important; margin-left: auto !important;
  border: 0 !important; border-radius: 50% !important; background: none !important; color: var(--text-muted) !important; display: inline-grid; place-items: center;
}
#side-panel-content .delete-habit-btn::before { content: '✕'; font-size: 11px; }
#side-panel-content .delete-habit-btn:hover { background: rgba(255, 255, 255, 0.07) !important; color: var(--text) !important; }
@media (hover: hover) {
  #side-panel-content .delete-habit-btn { opacity: 0; transition: opacity 0.15s; }
  #side-panel-content .habit-row:hover .delete-habit-btn { opacity: 1; }
}

/* Glow up: the three agents as quiet grey pills (no pink / orange) */
#side-panel-content .gu-routine-btn {
  background: transparent !important; border: 1px solid var(--line-2) !important; color: var(--text) !important; box-shadow: none !important;
  font-size: 12px !important; font-weight: 500 !important; height: 26px !important; padding: 0 10px !important; border-radius: 999px !important;
}
#side-panel-content .gu-routine-btn:hover { background: rgba(255, 255, 255, 0.05) !important; }

/* Wodzianka panel: no frame, small header, grey actions */
#side-panel-content .water-card { padding: 4px 0 0 !important; }
#side-panel-content .water-title { font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; }
#side-panel-content .water-settings-toggle { color: var(--text-muted) !important; }
#side-panel-content .water-undo-last { background: transparent !important; border: 0 !important; color: var(--text-muted) !important; }
#side-panel-content .water-orb { box-shadow: none !important; }
#side-panel-content .drink-tile .drink-add, #side-panel-content .drink-grid .drink-add {
  background: transparent !important; border: 1px solid var(--line-2) !important; box-shadow: none !important;
}
#side-panel-content .drink-tile .drink-add:hover { background: rgba(255, 255, 255, 0.05) !important; }
#side-panel-content .water-week, #side-panel-content .water-history { border-top: 1px solid var(--line) !important; }
#side-panel-content .wh-title { text-transform: none !important; letter-spacing: 0 !important; font-size: 12px !important; font-weight: 600 !important; }

/* the PC left column's "Sprzątajka — dziś" and its rows: the same size as Minutówka's */
.minutowka-clock .habit-row { font-size: 13px !important; }
/* Sprzątajka's "new cleaning task" form: small and flat like the dialogs */
@media (min-width: 860px), (pointer: fine) {
  #side-panel-content input[type="text"] { font-size: 13px !important; padding: 7px 10px !important; border-radius: 8px !important; height: auto !important; }
  #side-panel-content .day-picker { gap: 4px !important; }
  #side-panel-content .day-picker label, #side-panel-content .day-picker .checkbox-label {
    font-size: 12px !important; padding: 3px 9px !important; border-radius: 999px !important; min-height: 0 !important; background: transparent !important; border: 1px solid var(--line-2) !important;
  }
  #side-panel-content .checkbox-label { font-size: 12.5px !important; }
  #side-panel-content > .btn, #side-panel-content form .btn, #side-panel-content .btn:not(.icon) {
    font-size: 12.5px !important; padding: 6px 16px !important; min-height: 0 !important; height: auto !important; box-shadow: none !important;
  }
}

/* the bell: a neutral grey panel like the other pop-outs; unread notes only a faint tint */
.notif-panel { background: var(--s2) !important; border: 1px solid var(--line-2) !important; }
.notif-head { border-bottom: 1px solid var(--line) !important; }
.notif-item { background: transparent !important; border-color: var(--line) !important; }
.notif-item.unread { background: rgba(255, 255, 255, 0.025) !important; }
.notif-item .nc-prod, .notif-item .nc { border-left: 0 !important; background: rgba(255, 255, 255, 0.03) !important; }
.notif-how { background: rgba(255, 255, 255, 0.06) !important; color: var(--text-muted) !important; }
/* a task's card: no empty clock row when the task has no hour */
.done-card .dc-time-row:has(.dc-when:empty):has(.dc-repeat:empty) { display: none !important; }

/* ---------- Poranek screen (2026-10-21): one step at a time, full screen, calm ---------- */
#poranek-screen {
  position: fixed; inset: 0; z-index: 3000; background: var(--bg); color: var(--text);
  display: flex; flex-direction: column;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 20px calc(env(safe-area-inset-bottom, 0px) + 18px);
  animation: pr-in 0.22s var(--ease);
}
#poranek-screen.pr-out { opacity: 0; transition: opacity 0.2s; }
@keyframes pr-in { from { opacity: 0; transform: translateY(8px); } }
#poranek-screen .pr-top { display: flex; align-items: center; justify-content: space-between; min-height: 36px; }
#poranek-screen .pr-count { font-size: 13px; color: var(--text-muted); }
#poranek-screen .pr-x {
  width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--text-muted); font-size: 15px; cursor: pointer;
}
#poranek-screen .pr-x:hover { background: var(--s3); color: var(--text); }
#poranek-screen .pr-main {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px;
  max-width: 360px; width: 100%; margin: 0 auto;
}
#poranek-screen .pr-dots { display: flex; gap: 6px; margin-bottom: 18px; }
#poranek-screen .pr-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); }
#poranek-screen .pr-dots i.on { background: var(--text-muted); }
#poranek-screen .pr-dots i.cur { background: var(--text); width: 16px; border-radius: 3px; }
#poranek-screen .pr-icon { font-size: 44px; line-height: 1; margin-bottom: 4px; }
#poranek-screen .pr-title { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
#poranek-screen .pr-sub { font-size: 13px; color: var(--text-muted); }
#poranek-screen .pr-done {
  margin-top: 26px; width: 100%; height: 50px; border: 0; border-radius: 14px; cursor: pointer;
  background: var(--text); color: var(--bg); font-size: 16px; font-weight: 600; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
#poranek-screen .pr-done:active { transform: scale(0.98); }
#poranek-screen .pr-row { display: flex; justify-content: space-between; width: 100%; min-height: 36px; }
#poranek-screen .pr-link {
  border: 0; background: none; color: var(--text-muted); font-size: 13px; padding: 8px 6px; cursor: pointer; font-family: inherit;
}
#poranek-screen .pr-link:hover { color: var(--text); }
#poranek-screen .pr-bottom { text-align: center; font-size: 12.5px; color: var(--text-muted); min-height: 20px; }

/* Edit event: "Niedz., 25 paź  17:00 – 18:00" on one line when it ends the same day (the second date
   pushed the end time off a phone's screen); over several days the end date + time wrap to a line of
   their own instead of running off. */
#edit-event-modal .field-body.datetime-row { flex-wrap: wrap !important; row-gap: 4px; }
#edit-event-modal .field-body.datetime-row.same-day > .date-picker-wrap ~ .date-picker-wrap { display: none !important; }
#edit-event-modal .field-body.datetime-row.same-day > .time-dash { display: inline !important; }
#edit-event-modal .field-body.datetime-row > .date-picker-wrap:first-child { flex: 0 1 auto !important; min-width: 0; }
#edit-event-modal .field-body.datetime-row > .time-picker-wrap,
#edit-event-modal .field-body.datetime-row > .time-dash { flex: none !important; width: auto !important; }
#edit-event-modal .field-body.datetime-row > .allday-toggle { flex-basis: 100% !important; }

/* Phone (2026-10-25): the create / edit dialogs float as a card with a gap on every side instead of
   running edge to edge - it felt too wide on her iPhone 17 */
@media (max-width: 859px) {
  :is(#create-modal, #edit-event-modal, #edit-task-modal) {
    width: calc(100% - 28px) !important; max-width: 420px !important;
    margin: calc(env(safe-area-inset-top, 0px) + 8px) auto 0 !important;
    border-radius: 20px !important;
    padding: 14px 16px 14px !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55) !important;
  }
  :is(#create-modal, #edit-event-modal, #edit-task-modal).has-close { padding-top: 46px !important; }
  #create-modal.has-close { padding-top: 14px !important; } /* its ✕ sits in the Wydarzenie / Zadanie row */
  :is(#create-modal, #edit-event-modal, #edit-task-modal) .modal-close { top: 8px !important; right: 8px !important; }
  :is(#create-modal, #edit-event-modal, #edit-task-modal)::before { display: none !important; }
  @keyframes card-down-in { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
  @keyframes card-up-out { to { opacity: 0; transform: translateY(-16px); } }
  :is(#create-modal, #edit-event-modal, #edit-task-modal):not([hidden]) { animation: card-down-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) !important; }
  .modal-overlay.closing :is(#create-modal, #edit-event-modal, #edit-task-modal) { animation: card-up-out 0.16s ease-in forwards !important; }
}

/* ---------- Dialog grid (2026-10-25): every row of the create / edit dialogs on one exact grid ----------
   Icon column 20px + 14px gap, so every row's text (and the title) starts on the same line; each row's
   first line is 24px tall and its icon sits centred on that first line (not on the whole row); rows are
   8px apart. Measured after the change (measure.js) - phone and PC. */
.modal:is(#create-modal, #edit-event-modal, #edit-task-modal) { --dlg-icon: 20px; --dlg-gap: 14px; --dlg-line: 24px; }
.modal:is(#create-modal, #edit-event-modal, #edit-task-modal) .field:not([hidden]) {
  display: flex !important; align-items: flex-start !important; gap: var(--dlg-gap) !important;
  padding: 8px 0 !important; margin: 0 !important; min-height: 0 !important;
}
.modal:is(#create-modal, #edit-event-modal, #edit-task-modal) .field > .field-icon {
  width: var(--dlg-icon) !important; height: var(--dlg-icon) !important; flex: none !important;
  margin: calc((var(--dlg-line) - var(--dlg-icon)) / 2) 0 0 !important; align-self: flex-start !important; position: static !important;
}
.modal:is(#create-modal, #edit-event-modal, #edit-task-modal) .field > :is(.field-body, .dt-summary) { flex: 1 1 auto !important; min-width: 0; margin: 0 !important; }
/* the title starts where the rows' text starts */
.modal:is(#create-modal, #edit-event-modal, #edit-task-modal) :is(#create-title, #edit-event-title, #edit-task-title) {
  margin-left: calc(var(--dlg-icon) + var(--dlg-gap)) !important; width: calc(100% - var(--dlg-icon) - var(--dlg-gap)) !important;
  padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box;
}
/* date + time line */
.modal:is(#create-modal, #edit-event-modal, #edit-task-modal) .dt-summary { padding: 0 !important; margin: 0 !important; border-radius: 6px; }
.modal:is(#create-modal, #edit-event-modal, #edit-task-modal) .dts-main { line-height: var(--dlg-line) !important; }
.modal:is(#create-modal, #edit-event-modal, #edit-task-modal) .dts-sub { line-height: 18px !important; }
/* calendar / list picker: dot, name, one chevron - like the colour box next to it */
.modal:is(#create-modal, #edit-event-modal, #edit-task-modal) .select-wrap {
  position: relative !important; display: flex !important; align-items: center !important; min-height: var(--dlg-line) !important;
  margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important;
}
.modal:is(#create-modal, #edit-event-modal, #edit-task-modal) .select-wrap .select-dot {
  position: absolute !important; left: 0 !important; top: 50% !important; transform: translateY(-50%); margin: 0 !important; width: 12px; height: 12px;
}
.modal:is(#create-modal, #edit-event-modal, #edit-task-modal) .select-wrap select {
  height: var(--dlg-line) !important; line-height: var(--dlg-line) !important; padding: 0 22px 0 22px !important; margin: 0 !important; width: 100%;
}
.modal:is(#create-modal, #edit-event-modal, #edit-task-modal) .select-wrap.static { padding: 0 0 0 22px !important; line-height: var(--dlg-line) !important; }
.modal:is(#create-modal, #edit-event-modal, #edit-task-modal) .select-wrap::after {
  content: '' !important; position: absolute; right: 4px; top: 50%; width: 6px; height: 6px; margin-top: -5px;
  border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted); transform: rotate(45deg);
}
.modal:is(#create-modal, #edit-event-modal, #edit-task-modal) .select-wrap.static::after { content: none !important; }
.modal:is(#create-modal, #edit-event-modal, #edit-task-modal) .has-cal-color { align-items: flex-start !important; }
.modal:is(#create-modal, #edit-event-modal, #edit-task-modal) .cal-color .color-fold { margin: 0 !important; height: var(--dlg-line); padding: 0 4px !important; display: inline-flex; align-items: center; }
/* description / location: plain text lines, one line tall until they hold more */
.modal:is(#create-modal, #edit-event-modal, #edit-task-modal) :is(#create-description, #edit-event-description, #edit-task-notes, #edit-event-location) {
  padding: 0 !important; margin: 0 !important; line-height: var(--dlg-line) !important; min-height: var(--dlg-line) !important;
  border: 0 !important; background: none !important; box-shadow: none !important; display: block; width: 100%;
}
.modal:is(#create-modal, #edit-event-modal, #edit-task-modal) :is(#create-description, #edit-event-description, #edit-task-notes) { height: var(--dlg-line); resize: none; overflow: hidden; }
/* the AI switch row */
.modal:is(#create-modal, #edit-event-modal, #edit-task-modal) .ai-field .ai-toggle { min-height: var(--dlg-line) !important; margin: 0 !important; align-items: center !important; }
.modal:is(#create-modal, #edit-event-modal, #edit-task-modal) .field[hidden],
.modal:is(#create-modal, #edit-event-modal, #edit-task-modal).dt-collapsed .field.dt-extra { display: none !important; }
.modal:is(#create-modal, #edit-event-modal, #edit-task-modal) #edit-event-location { height: var(--dlg-line) !important; }
/* the unfolded date / time line: each part a small pill only as wide as its text, the text itself on the
   rows' text line (the pill's padding hangs out to the left), the line centred on the icon */
.modal:is(#create-modal, #edit-event-modal, #edit-task-modal) .field-body.datetime-row { margin: -6px 0 -6px -8px !important; gap: 2px !important; }
.modal:is(#create-modal, #edit-event-modal, #edit-task-modal) .datetime-row .date-picker-wrap { flex: 0 1 auto !important; min-width: 0; width: auto !important; }
.modal:is(#create-modal, #edit-event-modal, #edit-task-modal) .datetime-row .date-picker-btn {
  width: auto !important; max-width: 100%; padding: 0 8px !important; height: 36px; border-radius: 8px !important;
  background: transparent !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.modal:is(#create-modal, #edit-event-modal, #edit-task-modal) .datetime-row :is(.date-picker-btn, .time-picker-btn):focus,
.modal:is(#create-modal, #edit-event-modal, #edit-task-modal) .datetime-row :is(.date-picker-btn, .time-picker-btn):hover { background: rgba(255, 255, 255, 0.07) !important; box-shadow: none !important; }
.modal:is(#create-modal, #edit-event-modal, #edit-task-modal) .datetime-row .time-picker-btn { height: 36px; padding: 0 6px !important; border-radius: 8px !important; background: transparent !important; }
.modal:is(#create-modal, #edit-event-modal, #edit-task-modal) .field > .field-body.repeat-wrap { margin: -6px 0 -6px -8px !important; }
.modal:is(#create-modal, #edit-event-modal, #edit-task-modal) .repeat-btn { height: 36px !important; padding: 0 8px !important; line-height: 36px !important; width: auto !important; background: transparent !important; border: 0 !important; }
/* the calendar name opens its list itself; one chevron (the colour's) is enough */
.modal:is(#create-modal, #edit-event-modal, #edit-task-modal) .select-wrap::after { content: none !important; }
.modal:is(#create-modal, #edit-event-modal, #edit-task-modal) .select-wrap select { padding-right: 0 !important; }
.modal:is(#create-modal, #edit-event-modal, #edit-task-modal) .datetime-row input.time-picker-btn { width: 62px !important; text-align: center; }
.modal:is(#create-modal, #edit-event-modal, #edit-task-modal) .field-body.datetime-row > .allday-toggle { margin-left: 8px !important; }
.modal:is(#create-modal, #edit-event-modal, #edit-task-modal) .field-body.repeat-wrap > .repeat-btn { margin: 0 !important; }
/* chip rows (Czas trwania / Sekcja): the label and every chip on one text line each, chips wrap as a whole */
.modal:is(#create-modal, #edit-event-modal, #edit-task-modal) .dur-chips { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px !important; margin: 0 !important; min-height: var(--dlg-line); }
.modal:is(#create-modal, #edit-event-modal, #edit-task-modal) .dur-chips .dur-label { white-space: nowrap !important; margin: 0 4px 0 0 !important; line-height: var(--dlg-line) !important; font-size: 13px !important; color: var(--text-muted) !important; }
.modal:is(#create-modal, #edit-event-modal, #edit-task-modal) .dur-chips :is(.mn-dur, .dur-chip) {
  white-space: nowrap !important; height: 26px !important; padding: 0 10px !important; margin: -1px 0 !important; border-radius: 999px !important;
  font-size: 13px !important; line-height: 24px !important; display: inline-flex !important; align-items: center; gap: 6px; width: auto !important; min-width: 0 !important;
}
/* "Zapamiętaj godzinę ...": the box on the first text line, the text next to it */
.modal:is(#create-modal, #edit-event-modal, #edit-task-modal) .field-body.checkbox-label {
  display: flex !important; align-items: flex-start !important; gap: 8px !important; margin: 0 !important; padding: 0 !important;
  font-size: 13px !important; line-height: 20px !important; color: var(--text-muted);
}
.modal:is(#create-modal, #edit-event-modal, #edit-task-modal) .field-body.checkbox-label input { width: 16px !important; height: 16px !important; margin: 4px 0 0 !important; flex: none; }
.modal:is(#create-modal, #edit-event-modal, #edit-task-modal) .field:has(> .checkbox-label) > .field-icon { margin-top: 2px !important; }
/* the Zdalna / Stacjonarna switch starts on the text line, like the title above it */
.modal:is(#create-modal, #edit-event-modal, #edit-task-modal) .work-mode { margin: 10px 0 6px calc(var(--dlg-icon) + var(--dlg-gap)) !important; }

/* Event / task card (2026-10-26): the title sits in the first line, next to ✎ 🗑 ✕ (they had a row of their
   own with an empty gap on the left); a long title wraps under itself, never under the icons */
.done-card .dc-actions { position: absolute !important; top: 13px !important; right: 10px !important; margin: 0 !important; }
.done-card .dc-head { padding-right: 104px !important; min-height: 32px !important; align-items: flex-start !important; }
.done-card .dc-head .dc-square { margin-top: 7px; flex: none; }
.done-card .dc-title { padding-top: 3px; }

/* mini calendar, dragging out a range: one continuous band like the finished range (each day used to be
   its own little square with gaps between), and the current week's pill steps aside meanwhile */
.mc-row > .mc-day.selecting { width: 100% !important; justify-self: stretch !important; }
.mini-cal.mc-selecting .mc-row.current::before { opacity: 0 !important; }

/* Phone Minutówka sheet (2026-11-02): Minutówka's tasks right under the sheet's title (there was an empty
   strip - the hidden "Sprzątajka — dziś" name - and a row with just two icons); the notes / + icons sit in
   the header next to ✕; today's Sprzątajka follows below, with its name back */
.minutowka-panel { display: flex !important; flex-direction: column; position: relative; }
.minutowka-panel > .minutowka-clock-heading:has(.mn-add) { display: none !important; }
#side-panel .side-panel-header .sp-extra { display: flex; align-items: center; gap: 14px; margin-left: auto; margin-right: 14px; }
#side-panel .side-panel-header .sp-extra :is(.mn-notes, .mn-add) {
  width: 28px !important; height: 28px !important; display: inline-grid !important; place-items: center; color: var(--text-muted);
  background: none; border: 0; border-radius: 50%; padding: 0; line-height: 0; font-size: 0;
}
#side-panel .side-panel-header .sp-extra :is(.mn-notes, .mn-add) svg { width: 18px; height: 18px; }
.minutowka-panel > .mn-add-row { order: 1; }
.minutowka-panel > .minutowka-clock-tasks.grow { order: 2; }
.minutowka-panel > .mn-done-link { order: 3; }
.minutowka-panel > .minutowka-clock-heading:not(:has(.mn-add)) {
  order: 4; font-size: 12px !important; font-weight: 600 !important; color: var(--text-muted) !important;
  margin: 18px 0 2px !important; justify-content: flex-start !important; min-height: 0 !important;
}
.minutowka-panel > .minutowka-clock-heading:not(:has(.mn-add))::before,
.minutowka-panel > .minutowka-clock-heading:not(:has(.mn-add))::after { display: none !important; }
.minutowka-panel > .minutowka-clock-tasks:not(.grow) { order: 5; }
.minutowka-panel > .minutowka-clock-tasks.grow > .mn-section:not(.empty):first-of-type,
.minutowka-panel > .minutowka-clock-tasks.grow { margin-top: 0 !important; }
#side-panel .side-panel-header .sp-extra .mn-add svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
/* today's Sprzątajka rows: the same circle and text line as Minutówka's tasks above */
#side-panel-content .minutowka-panel .minutowka-clock-tasks:not(.grow) .habit-row { gap: 13px !important; }
#side-panel-content .minutowka-panel .minutowka-clock-tasks:not(.grow) .habit-row input[type="checkbox"] { width: 20px !important; height: 20px !important; margin: 0 0 0 4px !important; flex: none; }

/* A task's circle in the calendar (2026-11-04): it stays small, but the spot that ticks it is bigger -
   in a 15-minute block it was hard to hit. An invisible ring around it counts as the circle too. */
.week-grid-wrap .grid-event .task-icon { position: relative; }
.week-grid-wrap .grid-event .task-icon::before { content: ''; position: absolute; inset: -7px -6px -7px -7px; border-radius: 50%; }

/* "N oczekujących zadań" list: each task has a circle that ticks it right there (old ones too) */
.pending-tick { position: relative; width: 15px; height: 15px; flex: none; border-radius: 50%; border: 1.6px solid var(--pc); transition: background-color 0.18s; }
.pending-tick::before { content: ''; position: absolute; inset: -8px; }
.pending-tick:hover { background: color-mix(in srgb, var(--pc) 30%, transparent); }
.pending-tick[aria-checked="true"] { background: var(--pc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.6 3.6 7.4-8'/%3E%3C/svg%3E") center / 10px no-repeat; }
.pending-item.pending-done .pending-title { text-decoration: line-through; color: var(--text-muted); }