/* "Dodaj wizytę" i "Zablokuj czas" (block G20). Built on the app's own tokens and primitives (.sheet, .sheetcard, .row, .kv, .btn, .btn2, .chip, .toggle,
   .alert, .derr, .ini, .catdot): same type, same glass, same 44 pt targets, dark and light, reduced motion. Nothing here changes an existing rule;
   every class starts with cw-. The sheet is a phone-first bottom sheet; from 901 px up it becomes a centred card of a readable width (the full
   width of a desktop screen would stretch every row). Reference language: the owner's Revolut and Apple Calendar screens (grouped rows without
   lines, one white primary pill that stays in reach, quiet captions, an inline alert instead of a dialog). */

.cw-root { display: flex; flex-direction: column; gap: 16px; }
.cw-fs { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; transition: opacity 160ms ease; }
.cw-fs:disabled { opacity: .72; }

/* grouped rows: a hairline between rows, none at the ends (the card's own corners do the framing) */
.cw-card { overflow: hidden; }
.cw-card > .row { position: relative; }
.cw-card > .row + .row::before, .cw-card > .row + .kv::before { content: ""; position: absolute; left: 16px; right: 0; top: 0; height: .5px; background: var(--sep); }
.cw-dotw { display: flex; width: 24px; height: 44px; align-items: center; justify-content: center; flex: none; }
.cw-ok { display: flex; color: var(--accent); flex: none; }
.cw-gh { padding-bottom: 8px; }
.cw-hint { padding: 0 4px; }
.cw-empty { padding: 22px 8px; text-align: center; }

/* rows whose value is a system date or time picker: the visible text is ours, the field is transparent and covers the row */
.cw-ghostrow { position: relative; cursor: pointer; }
.cw-ghostrow .v { color: var(--fg); font-weight: 600; background: var(--card); border-radius: 10px; padding: 7px 12px; line-height: 20px; box-shadow: var(--rim); transition: background 160ms ease, color 160ms ease; }
.kv input.cw-ghost { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; opacity: 0; border: 0; margin: 0; padding: 0; cursor: pointer; font-size: 16px; z-index: 1; -webkit-appearance: none; appearance: none; text-align: left; text-align-last: left; }
.cw-ghostrow:focus-within { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: 16px; }
.cw-ghostrow:focus-within .v { color: var(--accent); }
.cw-ghostrow:active .v { background: var(--card2); }
.cw-card > .kv .v.num { font-variant-numeric: tabular-nums; }
/* a value in a stacked row (label above value) wraps inside its card, even a very long single word: used by the visit cancel sheet (live test of 18.10, finding 2) and the visit note */
.kv.stack .v { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }

/* a − / + stepper on the right of a row */
.cw-step { display: inline-flex; gap: 8px; margin-right: -6px; }
.cw-step button { width: 44px; height: 44px; border-radius: 22px; background: var(--card); color: var(--fg); font-size: 24px; line-height: 1; font-weight: 500; display: grid; place-items: center; box-shadow: var(--rim); }

/* free hours and quick choices: one row that scrolls sideways on a phone, wraps on a wide screen */
.cw-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 16px; margin: 0 -16px; scroll-snap-type: x proximity; scroll-padding: 0 16px; overscroll-behavior-x: contain; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent 100%); }
.cw-chips::-webkit-scrollbar { display: none; }
.cw-chip { flex: none; height: 44px; padding: 0 16px; border-radius: 22px; background: var(--card2); color: var(--fg); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; scroll-snap-align: start; transition: background 160ms ease, color 160ms ease, transform 140ms var(--ease-out); }
.cw-chip[aria-pressed="true"] { background: var(--pill); color: var(--on-pill); }

/* search field of the pickers */
.cw-search { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; border-radius: 24px; background: var(--field); color: var(--fg3); }
.cw-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--fg); font: 17px/22px var(--font); outline: none; -webkit-appearance: none; appearance: none; }
.cw-search input::placeholder { color: var(--fg3); opacity: 1; }
.cw-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.cw-search:focus-within { box-shadow: inset 0 0 0 1.5px var(--accent); }
.cw-newrow { background: var(--card2); border-radius: 20px; }

/* inline alerts: what is wrong, in words, next to the thing that is wrong */
.cw-warns { display: flex; flex-direction: column; gap: 10px; }
.cw-warns:empty { display: none; }
.cw-alert .d { font-size: 15px; line-height: 21px; color: var(--fg); margin: 0; }
.cw-alert.bad { background: var(--bad-bg); }
.cw-alert.bad svg { color: var(--bad); }
.cw-nb { display: inline-block; max-width: 100%; vertical-align: bottom; }
/* a text action inside an alert (for example "Zobacz prośbę"): a full 44 pt target, the app's accent, no box */
.cw-link { display: flex; align-items: center; min-height: 44px; margin: 2px 0 -8px; padding: 0; color: var(--accent); font: 600 15px/21px var(--font); text-align: left; }
.cw-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
/* the one-line result of the last check, above the save button (it disappears as soon as the owner changes the form) */
.cw-notice { margin: 0 0 10px; font-size: 15px; line-height: 21px; color: var(--fg2); text-align: center; }
.cw-info { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 22px; background: var(--card3); color: var(--fg); }
.cw-info svg { color: var(--fg2); margin-top: 1px; }
.cw-after { margin-top: 2px; }

/* the primary action stays in reach while a long form scrolls (the sheet has 30 px of its own padding below) */
.cw-cta { position: sticky; bottom: -26px; margin: 0 -16px -26px; padding: 18px 16px 26px; background: linear-gradient(180deg, transparent 0, var(--sheet) 22px); z-index: 2; }
textarea.ed.cw-note { min-height: 76px; }
.cw-cta .derr { margin-bottom: 10px; }
.btn2.cw-danger { color: var(--bad); }

/* a day off above the visits that are still on that day */
.cw-offbar { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 22px; background: var(--card2); box-shadow: var(--rim); }
.cw-offbar > svg { color: var(--fg2); }
.cw-offbar .grow { flex: 1; min-width: 0; }
.cw-offbar .btn2 { width: auto; padding: 0 18px; flex: none; }

/* the entry that was just saved: one calm pulse, so the eye finds it */
.cw-fresh { animation: cwFresh 1800ms var(--ease-out) 1; }
@keyframes cwFresh { 0% { box-shadow: 0 0 0 0 var(--accent); } 18% { box-shadow: 0 0 0 5px var(--accent); } 100% { box-shadow: 0 0 0 0 transparent; } }
.blk.cw-fresh, .gapb.cw-fresh { outline: 2px solid transparent; }

.cw-root .sheethead .x { display: inline-flex; align-items: center; gap: 2px; }

/* wide screens: a centred card of a readable width instead of a sheet as wide as the window */
@media (min-width: 901px) {
  .sheet:has(.cw-root) { left: 0; right: 0; width: min(560px, calc(100% - 48px)); margin: 0 auto; bottom: 24px; border-radius: 28px; max-height: calc(100% - 48px); padding-bottom: 26px; }
  .sheet:has(.cw-root) .grab { display: none; }
  .cw-chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; -webkit-mask-image: none; mask-image: none; }
  .cw-cta { margin-bottom: -22px; padding-bottom: 22px; bottom: -22px; }
}

@media (prefers-reduced-motion: reduce) {
  .cw-fresh { animation: none; box-shadow: 0 0 0 3px var(--accent); }
  .cw-chip, .cw-fs { transition: none; }
}
@media (prefers-reduced-transparency: reduce) { .cw-cta { background: var(--sheet); } }
.cw-chip:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .cw-chip:active { transform: none; } }