/* poh-ds — единая дизайн-система экранов PO-хелпера (визуал Инбокса).
   Один файл: токены + компоненты. Подключать целиком; свои стили экрана — только через var(--ds-*).
   Документация и правила — DESIGN.md рядом с этим файлом. Версия: 1.0.0 */

/* ───────── токены: светлая тема ───────── */
:root{
  color-scheme:light dark;
  /* цвет */
  --ds-bg:#F7F7F7;          /* фон экрана */
  --ds-surface:#FFFFFF;     /* карточки, листы */
  --ds-surface-2:#F2F2F5;   /* поля ввода, сегменты, нажатие */
  --ds-line:#EBEBEF;        /* разделители */
  --ds-text:#1C1C1E;
  --ds-text-2:#6E6E73;      /* вторичный текст, мета */
  --ds-text-3:#AEAEB2;      /* только неактивное и плейсхолдер */
  --ds-accent:#B84B65;      /* роза Инбокса: главное действие, выбранное, «сегодня» */
  --ds-on-accent:#FFFFFF;
  --ds-accent-soft:#FBEFF2; /* фон выбранного чипа / мягкой плашки */
  --ds-accent-soft-text:#9C3A51;
  --ds-danger:#C9302C;      /* только просрочка и ошибка */
  --ds-warning:#9A5B00;     /* только «скоро срок» */
  --ds-success:#1E7F3C;     /* только «сделано» */

  /* типографика: 5 ступеней, 3 насыщенности */
  --ds-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,system-ui,sans-serif;
  --ds-fs-display:28px;  /* заголовок экрана — один на экран */
  --ds-fs-title:17px;    /* заголовок карточки/строки */
  --ds-fs-body:15px;     /* основной текст */
  --ds-fs-input:16px;    /* поля ввода: iOS не зумит */
  --ds-fs-caption:13px;  /* мета, подписи */
  --ds-fs-label:11px;    /* надпись секции, заглавными */
  --ds-fw-regular:400; --ds-fw-medium:600; --ds-fw-bold:750;
  --ds-lh:1.35;

  /* отступы: шаг 4 */
  --ds-sp-1:4px; --ds-sp-2:8px; --ds-sp-3:12px; --ds-sp-4:16px; --ds-sp-5:24px; --ds-sp-6:32px;

  /* формы */
  --ds-r-sm:8px;    /* чипы, бейджи-прямоугольники */
  --ds-r-md:14px;   /* кнопки, поля, сегменты */
  --ds-r-lg:20px;   /* карточки, листы */
  --ds-r-pill:999px;

  /* глубина: два уровня */
  --ds-shadow-1:0 1px 3px rgba(0,0,0,.05);     /* карточка */
  --ds-shadow-2:0 8px 24px rgba(0,0,0,.12);    /* лист, FAB, всплывающее */

  /* движение */
  --ds-ease:cubic-bezier(.22,1,.36,1);
  --ds-dur:180ms;

  /* раскладка */
  --ds-col:720px;        /* ширина колонки контента на десктопе */
  --ds-tap:44px;         /* минимальная цель касания */
}

/* ───────── токены: тёмная тема (системная и принудительная) ───────── */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ds-bg:#000000; --ds-surface:#1C1C1E; --ds-surface-2:#2C2C2E; --ds-line:#38383A;
    --ds-text:#F2F2F7; --ds-text-2:#A1A1A6; --ds-text-3:#7C7C80;
    --ds-accent:#E58FA3; --ds-on-accent:#1C1C1E; --ds-accent-soft:#3A1F26; --ds-accent-soft-text:#F0A3B4;
    --ds-danger:#FF6B63; --ds-warning:#E5A33B; --ds-success:#4CC777;
    --ds-shadow-1:none; --ds-shadow-2:0 8px 24px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --ds-bg:#000000; --ds-surface:#1C1C1E; --ds-surface-2:#2C2C2E; --ds-line:#38383A;
  --ds-text:#F2F2F7; --ds-text-2:#A1A1A6; --ds-text-3:#7C7C80;
  --ds-accent:#E58FA3; --ds-on-accent:#1C1C1E; --ds-accent-soft:#3A1F26; --ds-accent-soft-text:#F0A3B4;
  --ds-danger:#FF6B63; --ds-warning:#E5A33B; --ds-success:#4CC777;
  --ds-shadow-1:none; --ds-shadow-2:0 8px 24px rgba(0,0,0,.6);
}

/* ───────── основа ───────── */
@layer ds-reset{ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} }
html,body{min-height:100%}
body{font-family:var(--ds-font);font-size:var(--ds-fs-body);line-height:var(--ds-lh);
  background:var(--ds-bg);color:var(--ds-text);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--ds-accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }

/* ───────── раскладка ───────── */
.ds-app{display:flex;min-height:100dvh}
.ds-screen{flex:1;min-width:0;max-width:var(--ds-col);margin:0 auto;
  padding:max(var(--ds-sp-3),env(safe-area-inset-top)) var(--ds-sp-4) calc(96px + env(safe-area-inset-bottom))}
@media (min-width:900px){ .ds-screen{padding:var(--ds-sp-6) var(--ds-sp-5)} }
.ds-screen--wide{max-width:1080px}   /* две колонки на десктопе */

/* шапка экрана: один заголовок + одна строка подписи + максимум одно действие справа */
.ds-header{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--ds-sp-3);padding:var(--ds-sp-2) var(--ds-sp-1) var(--ds-sp-4)}
.ds-header__title{font-size:var(--ds-fs-display);font-weight:var(--ds-fw-bold);letter-spacing:-.4px;line-height:1.15}
.ds-header__sub{font-size:var(--ds-fs-caption);color:var(--ds-text-2);margin-top:2px}

/* секция: надпись + содержимое */
.ds-section{margin-bottom:var(--ds-sp-5)}
.ds-section__label{font-size:var(--ds-fs-label);font-weight:var(--ds-fw-bold);letter-spacing:.4px;text-transform:uppercase;
  color:var(--ds-text-2);padding:0 var(--ds-sp-1) var(--ds-sp-2);display:flex;justify-content:space-between}

/* ───────── поверхности ───────── */
.ds-card{background:var(--ds-surface);border-radius:var(--ds-r-lg);box-shadow:var(--ds-shadow-1);padding:var(--ds-sp-4)}
.ds-card--flush{padding:0 var(--ds-sp-4)}   /* для списка строк внутри */

/* строка списка: [ведущий элемент] заголовок/мета [хвост] */
.ds-row{display:flex;align-items:center;gap:var(--ds-sp-3);min-height:var(--ds-tap);padding:var(--ds-sp-3) 0}
.ds-row + .ds-row{border-top:1px solid var(--ds-line)}
.ds-row__main{flex:1;min-width:0}
.ds-row__title{font-size:var(--ds-fs-body);font-weight:var(--ds-fw-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-row__meta{font-size:var(--ds-fs-caption);color:var(--ds-text-2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-row__end{flex:none;font-size:var(--ds-fs-caption);color:var(--ds-text-2);font-variant-numeric:tabular-nums}
.ds-row--done .ds-row__title{color:var(--ds-text-2);text-decoration:line-through}
a.ds-row:active,button.ds-row:active{opacity:.6}

/* отметка-кружок (чекбокс задачи) */
.ds-check{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--ds-text-3);background:none;cursor:pointer;
  display:grid;place-items:center;transition:background var(--ds-dur) var(--ds-ease)}
.ds-check[aria-checked="true"]{background:var(--ds-accent);border-color:var(--ds-accent)}
.ds-check[aria-checked="true"]::after{content:"";width:9px;height:5px;border:2px solid var(--ds-on-accent);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}

/* аватар-инициалы */
.ds-avatar{flex:none;width:32px;height:32px;border-radius:50%;background:var(--ds-surface-2);color:var(--ds-text-2);
  display:grid;place-items:center;font-size:var(--ds-fs-caption);font-weight:var(--ds-fw-medium)}

/* ───────── действия ───────── */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-sp-2);min-height:var(--ds-tap);
  padding:0 var(--ds-sp-4);border-radius:var(--ds-r-md);border:0;cursor:pointer;
  font-size:var(--ds-fs-body);font-weight:var(--ds-fw-medium);background:var(--ds-surface-2);color:var(--ds-text);
  transition:opacity var(--ds-dur) var(--ds-ease)}
.ds-btn:active{opacity:.7}
.ds-btn--primary{background:var(--ds-accent);color:var(--ds-on-accent)}   /* одна на экран */
.ds-btn--ghost{background:none;color:var(--ds-accent);padding:0 var(--ds-sp-2)}
.ds-btn--danger{background:none;color:var(--ds-danger)}
.ds-btn--block{width:100%}
.ds-btn[disabled]{opacity:.4;cursor:default}

/* плавающая главная кнопка (считается главным действием экрана) */
.ds-fab{position:fixed;right:max(var(--ds-sp-4),env(safe-area-inset-right));bottom:calc(80px + env(safe-area-inset-bottom));
  width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;background:var(--ds-accent);color:var(--ds-on-accent);
  box-shadow:var(--ds-shadow-2);display:grid;place-items:center;font-size:var(--ds-fs-display);font-weight:var(--ds-fw-regular)}
@media (min-width:900px){ .ds-fab{bottom:var(--ds-sp-5);right:var(--ds-sp-5)} }

/* ───────── выбор ───────── */
/* чипы-фильтры: одна строка, листается вбок, не больше 5–6 видимых */
.ds-chips{display:flex;gap:var(--ds-sp-2);overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--ds-sp-4)) var(--ds-sp-4);padding:0 var(--ds-sp-4)}
.ds-chips::-webkit-scrollbar{display:none}
.ds-chip{flex:none;min-height:32px;padding:0 var(--ds-sp-3);border-radius:var(--ds-r-pill);border:0;cursor:pointer;
  background:var(--ds-surface);color:var(--ds-text);font-size:var(--ds-fs-caption);font-weight:var(--ds-fw-medium);box-shadow:var(--ds-shadow-1)}
.ds-chip[aria-pressed="true"]{background:var(--ds-accent-soft);color:var(--ds-accent-soft-text);box-shadow:none}

/* сегменты: 2–4 взаимоисключающих вида */
.ds-segmented{display:flex;padding:3px;border-radius:var(--ds-r-md);background:var(--ds-surface-2);margin-bottom:var(--ds-sp-4)}
.ds-segmented button{flex:1;min-height:32px;border:0;background:none;border-radius:calc(var(--ds-r-md) - 3px);cursor:pointer;
  font-size:var(--ds-fs-caption);font-weight:var(--ds-fw-medium);color:var(--ds-text-2)}
.ds-segmented button[aria-selected="true"]{background:var(--ds-surface);color:var(--ds-text);box-shadow:var(--ds-shadow-1)}

/* ───────── статус ───────── */
.ds-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--ds-r-pill);
  background:var(--ds-danger);color:var(--ds-surface);font-size:var(--ds-fs-label);font-weight:var(--ds-fw-bold);font-variant-numeric:tabular-nums}
.ds-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ds-text-3);flex:none}
.ds-dot--danger{background:var(--ds-danger)} .ds-dot--warning{background:var(--ds-warning)} .ds-dot--success{background:var(--ds-success)}
.ds-text-danger{color:var(--ds-danger)} .ds-text-warning{color:var(--ds-warning)} .ds-text-success{color:var(--ds-success)}
.ds-muted{color:var(--ds-text-2)}

/* ───────── ввод ───────── */
.ds-input{width:100%;min-height:var(--ds-tap);padding:0 var(--ds-sp-3);border-radius:var(--ds-r-md);border:0;
  background:var(--ds-surface-2);font-size:var(--ds-fs-input)}
.ds-input::placeholder{color:var(--ds-text-3)}
.ds-field{display:block;margin-bottom:var(--ds-sp-4)}
.ds-field__label{display:block;font-size:var(--ds-fs-caption);color:var(--ds-text-2);margin:0 0 var(--ds-sp-1) var(--ds-sp-1)}

/* ───────── пусто ───────── */
.ds-empty{text-align:center;padding:var(--ds-sp-6) var(--ds-sp-4);color:var(--ds-text-2)}
.ds-empty__title{font-size:var(--ds-fs-title);font-weight:var(--ds-fw-medium);color:var(--ds-text);margin-bottom:var(--ds-sp-1)}
.ds-empty .ds-btn{margin-top:var(--ds-sp-4)}

/* ───────── лист снизу (детали, форма) ───────── */
.ds-sheet{position:fixed;inset:auto 0 0 0;max-height:88dvh;overflow:auto;background:var(--ds-surface);
  border-radius:var(--ds-r-lg) var(--ds-r-lg) 0 0;box-shadow:var(--ds-shadow-2);
  padding:var(--ds-sp-3) var(--ds-sp-4) calc(var(--ds-sp-4) + env(safe-area-inset-bottom));
  transform:translateY(105%);transition:transform var(--ds-dur) var(--ds-ease);z-index:20}
.ds-sheet[open],.ds-sheet.is-open{transform:none}
.ds-sheet__grip{width:36px;height:5px;border-radius:var(--ds-r-pill);background:var(--ds-line);margin:0 auto var(--ds-sp-3)}
.ds-scrim{position:fixed;inset:0;background:rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity var(--ds-dur) var(--ds-ease);z-index:19}
.ds-scrim.is-open{opacity:1;pointer-events:auto}
@media (min-width:900px){
  .ds-sheet{inset:auto auto 50% 50%;width:480px;border-radius:var(--ds-r-lg);transform:translate(-50%,60%);opacity:0;pointer-events:none}
  .ds-sheet.is-open{transform:translate(-50%,50%);opacity:1;pointer-events:auto}
}

/* ───────── навигация: таббар (телефон) / рейка (десктоп) ───────── */
.ds-tabbar{position:fixed;left:0;right:0;bottom:0;display:flex;background:var(--ds-surface);border-top:1px solid var(--ds-line);
  padding:var(--ds-sp-1) 0 env(safe-area-inset-bottom);z-index:10}
.ds-tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:50px;justify-content:center;
  font-size:var(--ds-fs-label);font-weight:var(--ds-fw-medium);color:var(--ds-text-2);position:relative}
.ds-tabbar a[aria-current="page"]{color:var(--ds-accent)}
.ds-tabbar svg{width:24px;height:24px}
.ds-tabbar .ds-badge{position:absolute;top:2px;left:calc(50% + 6px)}
@media (min-width:900px){
  .ds-tabbar{position:sticky;top:0;bottom:auto;flex-direction:column;justify-content:flex-start;width:84px;height:100dvh;
    border-top:0;border-right:1px solid var(--ds-line);padding:var(--ds-sp-4) var(--ds-sp-2);gap:var(--ds-sp-2)}
  .ds-tabbar a{flex:none;min-height:60px;border-radius:var(--ds-r-md)}
  .ds-tabbar a[aria-current="page"]{background:var(--ds-accent-soft);color:var(--ds-accent-soft-text)}
}

/* ───────── утилиты (только эти) ───────── */
.ds-stack{display:flex;flex-direction:column;gap:var(--ds-sp-3)}
.ds-hstack{display:flex;align-items:center;gap:var(--ds-sp-2)}
.ds-grid{display:grid;gap:var(--ds-sp-4);grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.ds-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}