:root {
  --rz-side: 16px;
  --rz-gap:   5px;
}
.rz-corner { color: var(--rz-ink, var(--line2)); }
textarea::-webkit-resizer, .textarea::-webkit-resizer { display: none; }
textarea, textarea.input, .textarea { resize: vertical; }

.rz-host { position: relative; display: block; min-width: 0; }
.rz-host > .rz-corner {
  position: absolute;
  right: var(--rz-gap); bottom: var(--rz-gap);
  --rz-ink: var(--line2);
  pointer-events: none;
}
.rz-host > textarea, .rz-host > .textarea { display: block; }
.field-row > .rz-host { min-height: 0; flex: 0 1 auto; }
textarea.fixed, .textarea.fixed { resize: none; }

.panel-body { overscroll-behavior: contain; }

.field-icon { position: relative; --field-icon-w: var(--sp-400); }
input.input.date:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]) {
  width: 100%; padding-right: calc(var(--field-icon-w) + var(--sp-100));
}
.field-icon-btn {
  position: absolute;
  top: var(--bw); right: var(--bw); bottom: var(--bw);
  width: var(--field-icon-w);
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--ink3); cursor: pointer;
  border-radius: 0 var(--r) var(--r) 0;
  transition: background .15s, color .15s;
}
.field-icon-btn:hover  { color: var(--ink); }
.field-icon-btn:active { color: var(--acc-ink); }
.field-icon-btn svg { width: 17px; height: 17px; }

.daypick, .timepick {
  position: fixed; z-index: var(--z-pick); padding: var(--sp-150);
  background: var(--card); border: var(--bw) solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh-raised);
}
.daypick { width: 268px; overflow: clip; }
.daypick-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-100); font-size: var(--fs-s);
}
.daypick-head button {
  height: var(--h-btn-sm); min-width: var(--h-btn-sm);
  padding: 0 var(--sp-075);
  border: 0; border-radius: var(--r-s);
  background: none; color: var(--ink2);
  line-height: 1;
  transition: background .15s, color .15s;
}
.daypick-head button:hover { background: var(--a-200); color: var(--ink); }
.daypick-head button:active { background: var(--a-300); }
.daypick-when { display: flex; align-items: center; gap: var(--sp-025); }
.daypick-when button { font-weight: var(--fw-med); color: var(--ink); }

.daypick-over {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-150);
  background: var(--card);
  border-radius: inherit;
}
.daypick-pick {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-050);
  width: 100%;
}
.daypick-pick button {
  height: var(--h-btn); padding: 0 var(--sp-050);
  border: 0; border-radius: var(--r);
  background: none; color: var(--ink);
  font-size: var(--fs-s);
  transition: background .15s, color .15s;
}
.daypick-pick button:hover { background: var(--a-200); }
.daypick-pick button.on { background: var(--acc-weak); color: var(--acc-ink);
                          font-weight: var(--fw-med); }

.daypick-wheel {
  position: relative;
  --wheel-h: 216px;
  width: 100%; height: var(--wheel-h); overflow: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(transparent, #000 22%,
                                      #000 78%, transparent);
          mask-image: linear-gradient(transparent, #000 22%,
                                      #000 78%, transparent);
}
.daypick-wheel::-webkit-scrollbar { width: 0; height: 0; }
.daypick-wheel-rail {
  display: flex; flex-direction: column;
  padding: calc((var(--wheel-h) - var(--h-btn)) / 2) 0;
}
.daypick-wheel button {
  height: var(--h-btn); flex: none;
  scroll-snap-align: center;
  border: 0; background: none; color: var(--ink3);
  font-size: var(--fs); font-variant-numeric: tabular-nums;
  transition: color .15s;
}
.daypick-wheel button:hover { color: var(--ink); }
.daypick-wheel button.on {
  color: var(--acc-ink); font-weight: var(--fw-semi); font-size: var(--fs-l);
}
.daypick-wheel-box { position: relative; width: 100%; }
.daypick-wheel-band {
  position: absolute; left: 0; right: 0; top: 50%;
  height: var(--h-btn); margin-top: calc(var(--h-btn) / -2);
  pointer-events: none;
  border-top: var(--bw) solid var(--line);
  border-bottom: var(--bw) solid var(--line);
}
.daypick-week, .daypick-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-025);
}
.daypick-week span {
  text-align: center; font-size: var(--fs-xs); color: var(--ink3);
  padding-bottom: var(--sp-050);
}
.daypick-grid button {
  height: 30px; border: var(--bw) solid transparent; border-radius: var(--r-s);
  background: none; color: var(--ink);
  font-family: var(--num); font-size: var(--fs-s);
}
.daypick-grid .other {
  display: flex; align-items: center; justify-content: center;
  height: 30px;
  color: var(--line2);
  font-family: var(--num); font-size: var(--fs-s);
}
.daypick-grid button:hover { background: var(--a-200); }
.daypick-grid button.now { border-color: var(--line2); }
.daypick-grid button.on { background: var(--acc-solid); color: #fff; }
.daypick-foot {
  display: flex; gap: var(--sp-075); margin-top: var(--sp-100);
  padding-top: var(--sp-100); border-top: var(--bw) solid var(--line);
}
.daypick-foot button {
  flex: 1; padding: var(--sp-075); border: var(--bw) solid var(--line);
  border-radius: var(--r-s); background: none; color: var(--ink2);
  font-size: var(--fs-s);
}
.daypick-foot button:hover { border-color: var(--acc); color: var(--acc-ink); }

.numfield { position: relative; display: block; min-width: 0; }
.numfield > .input { width: 100%; }
.numfield-unit {
  position: absolute; top: 0; right: var(--sp-150); height: 100%;
  display: inline-flex; align-items: center;
  color: var(--ink3); font-size: var(--fs-s); pointer-events: none;
}
.numfield.has-unit > .input { padding-right: var(--sp-400); }

.numfield.with-steps {
  display: inline-flex; align-items: center; gap: var(--sp-050);
  width: auto;
}
.numfield.with-steps > .input {
  width: 5ch; min-width: 5ch; max-width: 5ch; text-align: center;
  padding-left: var(--sp-100); padding-right: var(--sp-100);
}
.numfield.with-steps.has-unit > .input { padding-right: var(--sp-100); }
.numfield.with-steps > .numfield-unit {
  position: static; height: auto; right: auto;
}

.demo-bar:not(:empty) {
  display: flex; align-items: center; gap: var(--sp-150);
  padding: var(--sp-150) var(--sp-200);
  border: var(--bw) dashed var(--line2); border-radius: var(--r);
  background: var(--a-100);
}
.demo-bar .small { color: var(--ink3); }

.fold { padding: 0; }
.sblock .fold {
  box-shadow: none;
  border: var(--bw) solid var(--line);
}
.fold-head {
  display: flex; align-items: center; gap: var(--sp-100);
  width: 100%; padding: var(--sp-150) var(--gap);
  background: none; border: 0; text-align: left; cursor: pointer;
  font: inherit; color: inherit;
}
.fold-head:hover { background: var(--a-100); }
.fold.open .fold-head { border-bottom: var(--bw) solid var(--line); }
.fold-note { font-size: var(--fs-s); color: var(--ink3); }

.fold-head > .card-title,    .fold-head > .fold-note,
.fold-head > .fold-t,
.dash-card > .row > .card-title, .dash-card > .row > .dash-note {
  align-self: baseline;
}
.fold-x {
  display: inline-flex; color: var(--ink3); transition: transform .18s;
}
.fold.open .fold-x { transform: rotate(180deg); }
.fold-body {
  display: grid; grid-template-rows: 0fr;
  visibility: hidden; padding: 0;
  transition: grid-template-rows var(--dur-fold) var(--ease-out),
              padding var(--dur-fold) var(--ease-out),
              visibility var(--dur-fold);
}
.fold.open .fold-body {
  grid-template-rows: 1fr; visibility: visible;
  transition-duration: var(--dur-fold), var(--dur-fold), 0s;
}
.fold-in { min-height: 0; min-width: 0; overflow: clip; }
.fold.open > .fold-body > .fold-in { overflow-clip-margin: var(--sp-050); }
html[data-motion="calm"] .fold-body { transition: none; }

.fold-t { font-size: var(--fs); line-height: var(--lh);
          font-weight: var(--fw-reg); color: var(--ink); }

.fold-rows {
  display: flex; flex-direction: column;
  max-height: 420px; overflow: auto;
}
.fold-rows > * {
  padding: var(--sp-100) var(--gap);
  border: 0;
  border-top: var(--bw) solid var(--line);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.fold-rows > *:first-child { border-top: 0; }
.fold-in > .empty-state { padding: var(--sp-300) var(--gap); }

.fold-plain {
  display: flex; flex-direction: column; gap: var(--gap);
  padding: var(--gap);
}
.fold-plain > .grid-table { max-height: 420px; min-height: 0; }

.fold-row {
  display: flex; align-items: flex-start; gap: var(--gap);
}
.fold-row-main { flex: 1 1 auto; min-width: 0; }
.fold-row-side { flex: none; text-align: right; }
.fold-row-note {
  margin-top: var(--sp-025);
  font-size: var(--fs-s); line-height: var(--lh-s); color: var(--ink3);
}

.timepick {
  width: max-content; max-width: 240px;
}
/* A few times of the day as chips (15.970, `timeList`): a chip changes at a press, «+» adds one; the small window —
   hours and minutes, the usual hours, the answer */
.time-list { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sp-100); }
.time-chip { cursor: pointer; font-variant-numeric: tabular-nums; }
.time-chip:hover { background: var(--a-200); }
.time-list-empty { color: var(--ink3); }
.time-ask { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-150); padding: var(--sp-050); }
.time-ask-usual { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-050); max-width: 240px; }
.time-ask .timepick-zone { margin-top: 0; max-width: 240px; }
.timepick-zone {
  margin-top: var(--sp-100); padding-top: var(--sp-075);
  border-top: var(--bw) solid var(--line);
  font-size: var(--fs-s); color: var(--ink3); text-align: center;
  max-width: 190px;
}

.hint-stack { display: grid; }
.hint-stack > * { grid-area: 1 / 1; }
.hint-stack > .off { visibility: hidden; }

/* 15.1030: a storage's mark — the service's own drawing, or the registry's sign on a quiet ground */
.svc-mark { flex: none; display: inline-grid; place-items: center; width: var(--sp-400); height: var(--sp-400);
            border-radius: var(--r-s); background: var(--a-100); color: var(--ink2); }
.svc-mark.big { width: var(--sp-600); height: var(--sp-600); border-radius: var(--r); }
.svc-mark.brand > svg { width: 62%; height: auto; }
/* Yandex Disk's saucer is dark on top: it stands on a light plate in both themes, as its app icon does */
.svc-mark.brand.yadisk { background: #ffffff; }
.svc-mark.brand.yadisk > svg { width: 74%; }
.svc-caption { display: flex; align-items: center; gap: var(--sp-100); }