/* TaskDay base components — source: Figma c9o6NCtB9gKUzMfrnn3ZPa «✅ 01 · Дизайн-система»
   (Button, Chip, Avatar, Card, Nav item, Toggle, Input, Segment, Toast, Modal, Task check, Step check)
   + «✅ 03 · Экраны» (task row) + «✅ 05 · Мобайл» (Bottom sheet).
   Uses only tokens.css. Named td-components.css because static/css/components.css is the old UI file.
   Corner rule: one sharp side, one rounded side (see --td-corner-*). Round exceptions: avatar, counter, toggle, main «+». */

/* ---------- Button (Style × Side) ---------- */
.td-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--td-space-8);
  padding: 10px var(--td-space-16); min-height: 39px; box-sizing: border-box;
  border: 0; border-radius: var(--td-corner-button-left);
  font: var(--td-fw-semibold) var(--td-fs-body)/19px var(--td-font-sans);
  background: var(--td-color-bg-subtle); color: var(--td-color-text-primary);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .15s, box-shadow .15s, color .15s;
}
.td-btn--right { border-radius: var(--td-corner-button-right); }
.td-btn--top { border-radius: var(--td-corner-dialog-top); }           /* Modal Confirm/Cancel */
.td-btn--block { display: flex; width: 100%; }
.td-btn--primary { background: var(--td-color-accent); color: var(--td-color-text-on-accent); }
/* primary-hover in Figma has the same fill as primary — no visual change */
.td-btn--secondary { background: var(--td-color-bg-subtle); color: var(--td-color-text-primary); }
.td-btn--ghost { background: var(--td-color-bg-surface); color: var(--td-color-text-primary); box-shadow: inset 0 0 0 1px var(--td-color-border-default); min-height: 41px; }
.td-btn--tinted { background: var(--td-color-accent-subtle); color: var(--td-color-accent); }
.td-btn--danger { background: var(--td-color-danger-subtle); color: var(--td-color-danger); } /* pale danger, as in Figma */
.td-btn--icon { padding: var(--td-space-8); min-height: 36px; width: 36px; background: var(--td-color-bg-subtle); color: var(--td-color-accent); }
.td-btn--icon .td-btn__label { display: none; }
.td-btn:disabled, .td-btn.is-disabled { opacity: .45; cursor: default; }
.td-btn:focus-visible { outline: 2px solid var(--td-color-accent); outline-offset: 2px; }
.td-btn--secondary .td-icon, .td-btn--ghost .td-icon, .td-btn--tinted .td-icon { color: var(--td-color-accent); }
.td-btn--primary .td-icon { color: var(--td-color-text-on-accent); --td-icon-accent: currentColor; }
.td-btn--danger .td-icon { color: var(--td-color-danger); --td-icon-accent: currentColor; }

/* ---------- Chip (Tone) ---------- */
.td-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: var(--td-space-4) 10px;
  border-radius: var(--td-corner-chip-diag);
  font: var(--td-fw-semibold) 11px/15px var(--td-font-sans); text-transform: uppercase; letter-spacing: 0;
  background: var(--td-color-bg-subtle); color: var(--td-color-text-secondary); white-space: nowrap;
}
.td-chip .td-icon { width: 14px; height: 14px; color: currentColor; --td-icon-accent: currentColor; }
.td-chip--accent  { background: var(--td-color-accent-subtle);  color: var(--td-color-accent); }
.td-chip--success { background: var(--td-color-success-subtle); color: var(--td-color-success); }
.td-chip--warning { background: var(--td-color-warning-subtle); color: var(--td-color-warning); }
.td-chip--daily   { background: var(--td-color-daily-subtle);   color: var(--td-color-daily); }
.td-chip--danger  { background: var(--td-color-danger-subtle);  color: var(--td-color-danger); }
.td-chip--neutral { background: var(--td-color-bg-subtle);      color: var(--td-color-text-secondary); }

/* ---------- Input / Textarea / Select (Kind) ---------- */
.td-field {
  display: flex; align-items: center; gap: var(--td-space-8); box-sizing: border-box; min-height: 45px;
  padding: var(--td-space-12) 14px; border: 1px solid var(--td-color-border-default);
  border-radius: var(--td-corner-tile-left); background: var(--td-color-bg-subtle); color: var(--td-color-text-primary);
}
.td-field--surface { background: var(--td-color-bg-surface); }
.td-field:focus-within { border-color: var(--td-color-accent); }
.td-field .td-icon { color: var(--td-color-text-secondary); }
.td-field input, .td-field textarea, .td-field select,
.td-input, .td-textarea, .td-select {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0; margin: 0;
  font: var(--td-fw-regular) var(--td-fs-body)/19px var(--td-font-sans); color: var(--td-color-text-primary);
}
.td-field input::placeholder, .td-field textarea::placeholder { color: var(--td-color-text-secondary); }
.td-field--textarea { align-items: flex-start; }
.td-field--textarea textarea { min-height: 76px; resize: vertical; }
.td-field--select select { appearance: none; cursor: pointer; }
.td-field.is-error { border-color: var(--td-color-danger); }
.td-field.is-disabled { opacity: .5; }

/* ---------- Toggle (On) — round exception ---------- */
.td-toggle { position: relative; display: inline-block; width: 40px; height: 22px; flex: none; }
.td-toggle input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.td-toggle__track { position: absolute; inset: 0; border-radius: 11px; background: var(--td-color-border-toggle-off); transition: background-color .15s; }
.td-toggle__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--td-color-bg-surface); transition: transform .15s; }
.td-toggle input:checked + .td-toggle__track { background: var(--td-color-accent); }
.td-toggle input:checked + .td-toggle__track::after { transform: translateX(18px); }
.td-toggle input:focus-visible + .td-toggle__track { outline: 2px solid var(--td-color-accent); outline-offset: 2px; }

/* ---------- Checkbox: Task check 24 / Step check 20 (State=empty|done|add) ---------- */
.td-check {
  display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; box-sizing: border-box;
  border-radius: 7px; border: 1.5px solid var(--td-color-check-border); background: transparent;
  color: var(--td-color-text-on-accent); cursor: pointer; padding: 0;
}
.td-check .td-icon { width: 16px; height: 16px; visibility: hidden; --td-icon-accent: currentColor; }
.td-check.is-done, .td-check[aria-checked="true"] { background: var(--td-color-check-done); border-color: transparent; }
.td-check.is-done .td-icon, .td-check[aria-checked="true"] .td-icon { visibility: visible; }
.td-check--add { background: var(--td-color-check-add-bg); border-color: transparent; color: var(--td-color-accent); }
.td-check--add .td-icon { visibility: visible; }
.td-check--step { width: 20px; height: 20px; border-radius: 6px; }
.td-check--step .td-icon { width: 12px; height: 12px; }

/* ---------- Avatar (Tone) — round exception ---------- */
.td-avatar {
  display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%;
  font: var(--td-fw-semibold) var(--td-fs-body-lg)/20px var(--td-font-sans);
  background: var(--td-color-accent-subtle); color: var(--td-color-accent); overflow: hidden;
}
.td-avatar img { width: 100%; height: 100%; object-fit: cover; }
.td-avatar--success { background: var(--td-color-success-subtle); color: var(--td-color-success); }
.td-avatar--warning { background: var(--td-color-warning-subtle); color: var(--td-color-warning); }
.td-avatar--neutral { background: var(--td-color-bg-subtle); color: var(--td-color-text-primary); }
.td-avatar--sm { width: 28px; height: 28px; font-size: var(--td-fs-caption); }
.td-avatar.is-outlined { box-shadow: inset 0 0 0 2px var(--td-color-bg-surface); } /* INSIDE stroke, not clipped */

/* ---------- Counter / badge — round exception ---------- */
.td-counter {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box;
  border-radius: var(--td-radius-pill); font: var(--td-fw-semibold) 11px/1 var(--td-font-sans);
  background: var(--td-color-accent); color: var(--td-color-text-on-accent); font-variant-numeric: tabular-nums;
}
.td-counter--soft { background: var(--td-color-accent-subtle); color: var(--td-color-accent); }
.td-counter--danger { background: var(--td-color-danger); }
.td-counter--muted { background: var(--td-color-bg-subtle); color: var(--td-color-text-secondary); }

/* ---------- Card (Type) ---------- */
.td-ui-card {
  display: flex; flex-direction: column; gap: var(--td-space-8); padding: var(--td-space-18); box-sizing: border-box;
  background: var(--td-color-bg-surface); border: 1px solid var(--td-color-border-default);
  border-radius: var(--td-corner-card-main-left);
}
.td-ui-card--side { border-radius: var(--td-corner-card-side-right); }
.td-ui-card--list { border-radius: var(--td-corner-tile-left); }
.td-ui-card__title { margin: 0; font: var(--td-fw-semibold) var(--td-fs-body-lg)/20px var(--td-font-sans); color: var(--td-color-text-primary); }
.td-ui-card__desc { margin: 0; font: var(--td-fw-regular) var(--td-fs-caption)/16px var(--td-font-sans); color: var(--td-color-text-secondary); }

/* ---------- Task row (screens 01: Task card + active rail + check + title/meta/time + action) ---------- */
.td-task-row {
  position: relative; display: flex; align-items: center; gap: var(--td-space-16);
  min-height: 72px; padding: var(--td-space-12) var(--td-space-12) var(--td-space-12) var(--td-space-20); box-sizing: border-box;
  background: var(--td-color-bg-surface); border-radius: var(--td-corner-tile-left);
}
.td-task-row + .td-task-row { margin-top: 3px; }
.td-task-row:hover { background: var(--td-color-bg-subtle); }
.td-task-row.is-active { background: var(--td-color-accent-subtle); }
.td-task-row.is-active::before {           /* Task active rail 4×39, 0 2 2 0 */
  content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 39px; transform: translateY(-50%);
  background: var(--td-color-accent); border-radius: var(--td-corner-rail);
}
.td-task-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--td-space-4); padding-left: var(--td-space-4); }
.td-task-row__title { font: var(--td-fw-semibold) var(--td-fs-body)/19px var(--td-font-sans); color: var(--td-color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-task-row.is-done .td-task-row__title { color: var(--td-color-text-secondary); text-decoration: line-through; }
.td-task-row__meta, .td-task-row__time { font: var(--td-fw-regular) var(--td-fs-caption)/16px var(--td-font-sans); color: var(--td-color-text-secondary); }
.td-task-row__meta { display: flex; align-items: center; gap: var(--td-space-4); }
.td-task-row__meta .td-icon { width: 16px; height: 16px; }
.td-task-row__time { flex: none; font-variant-numeric: tabular-nums; }
.td-task-row__action { flex: none; }

/* ---------- Segmented control (Position × Selected) ---------- */
.td-seg { display: inline-flex; align-items: center; }
.td-seg__item {
  display: inline-flex; align-items: center; justify-content: center; padding: var(--td-space-8) 14px; min-height: 34px; box-sizing: border-box;
  border: 0; background: var(--td-color-bg-subtle); color: var(--td-color-text-secondary); cursor: pointer;
  font: var(--td-fw-medium) 13px/18px var(--td-font-sans);
}
.td-seg__item:first-child { border-radius: var(--td-corner-segment-first); }
.td-seg__item:last-child { border-radius: var(--td-corner-segment-last); }
.td-seg__item.is-selected, .td-seg__item[aria-selected="true"] {
  min-height: 36px; background: var(--td-color-bg-surface); color: var(--td-color-text-primary); font-weight: var(--td-fw-semibold);
  box-shadow: inset 0 0 0 1px var(--td-color-border-default); position: relative; z-index: 1;
}

/* ---------- Menu item / Nav item (State=default|hover|selected) ---------- */
.td-menu-item {
  display: flex; align-items: center; gap: var(--td-space-12); width: 100%; min-height: 44px; box-sizing: border-box;
  padding: var(--td-space-12) 15px var(--td-space-12) 19px; border: 0; background: transparent; cursor: pointer; text-align: left;
  border-radius: var(--td-corner-card-main-left);
  font: var(--td-fw-semibold) var(--td-fs-body)/19px var(--td-font-sans); color: var(--td-color-text-primary);
}
.td-menu-item .td-icon { color: var(--td-color-accent); }
.td-menu-item:hover { background: var(--td-color-bg-subtle); }
.td-menu-item.is-selected { background: var(--td-color-accent-subtle); color: var(--td-color-accent); }
.td-menu-item--danger, .td-menu-item--danger .td-icon { color: var(--td-color-danger); }
/* dark sidebar variant = Figma «Nav item» */
.td-menu-item--nav { color: var(--td-color-text-sidebar); }
.td-menu-item--nav .td-icon { color: currentColor; }
.td-menu-item--nav:hover { background: var(--td-color-bg-sidebar-selected); }
.td-menu-item--nav.is-selected { background: var(--td-color-bg-sidebar-selected); color: var(--td-color-text-on-accent); }

/* ---------- Toast ---------- */
.td-toast {
  display: flex; align-items: flex-start; gap: var(--td-space-12); width: 380px; max-width: 100%; box-sizing: border-box;
  padding: 14px var(--td-space-16); background: var(--td-color-bg-surface); border: 1px solid var(--td-color-border-default);
  border-radius: var(--td-corner-toast); box-shadow: var(--td-shadow-toast);
}
.td-toast .td-icon { color: var(--td-color-text-primary); --td-icon-accent: var(--td-color-accent); }
.td-toast__text { display: flex; flex-direction: column; gap: var(--td-space-4); min-width: 0; }
.td-toast__title { font: var(--td-fw-semibold) 13px/18px var(--td-font-sans); color: var(--td-color-text-primary); }
.td-toast__body { font: var(--td-fw-regular) var(--td-fs-caption)/16px var(--td-font-sans); color: var(--td-color-text-secondary); }

/* ---------- Modal ---------- */
.td-backdrop { position: fixed; inset: 0; background: rgb(27 33 51 / .4); display: grid; place-items: center; z-index: 1000; }
.td-backdrop--sheet { place-items: end center; }
.td-modal {
  display: flex; flex-direction: column; gap: 14px; width: 520px; max-width: 100%; box-sizing: border-box;
  padding: 28px; background: var(--td-color-bg-surface); border-radius: var(--td-radius-modal);
}
.td-modal__title { margin: 0; font: var(--td-fw-bold) 22px/30px var(--td-font-sans); color: var(--td-color-text-heading); }
.td-modal__body { margin: 0; font: var(--td-fw-regular) var(--td-fs-body)/19px var(--td-font-sans); color: var(--td-color-text-secondary); }
.td-modal__actions { display: flex; gap: var(--td-space-8); }

/* ---------- Bottom sheet (mobile) ---------- */
.td-sheet {
  display: flex; flex-direction: column; width: 100%; max-width: 390px; max-height: 92vh; box-sizing: border-box;
  background: var(--td-color-bg-surface); border-radius: var(--td-corner-sheet); box-shadow: var(--td-shadow-sheet);
  padding-bottom: env(safe-area-inset-bottom, 0px); overflow: hidden;
}
.td-sheet__grabber { display: flex; justify-content: center; padding: var(--td-space-8) 0 var(--td-space-4); }
.td-sheet__grabber::before { content: ""; width: 36px; height: 5px; border-radius: 3px; background: var(--td-color-border-default); }
.td-sheet__header { display: flex; align-items: center; gap: var(--td-space-12); min-height: 44px; padding: 0 var(--td-space-8) 0 var(--td-space-16); }
.td-sheet__header > :first-child { flex: 1; display: flex; gap: var(--td-space-8); }
.td-sheet__close { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; color: var(--td-color-text-primary); }
.td-sheet__body { display: flex; flex-direction: column; gap: var(--td-space-16); padding: var(--td-space-4) var(--td-space-16) var(--td-space-16); overflow: auto; }
.td-sheet__title { margin: 0; font: var(--td-fw-extrabold) 22px/30px var(--td-font-sans); color: var(--td-color-text-heading); }
.td-sheet__sub { font: var(--td-fw-semibold) 13px/18px var(--td-font-sans); color: var(--td-color-text-secondary); }
.td-sheet__actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--td-space-8); }
.td-sheet__action {
  display: flex; flex-direction: column; align-items: center; gap: var(--td-space-4); padding: 10px 0; min-height: 64px; box-sizing: border-box;
  border: 0; background: var(--td-color-bg-subtle); border-radius: var(--td-corner-tile-diag); cursor: pointer;
  font: var(--td-fw-semibold) var(--td-fs-caption)/16px var(--td-font-sans); color: var(--td-color-text-primary);
}
.td-sheet__action .td-icon { color: var(--td-color-accent); }
.td-sheet__footer { padding: var(--td-space-12) var(--td-space-16); border-top: 1px solid var(--td-color-border-default); }