/* Smart Dog — дизайн-система (docs/08-design-system.md) */

:root {
  /* Brand / Moss */
  --moss-50:#F2F7F2; --moss-100:#E1EDE2; --moss-200:#C3DBC6; --moss-300:#9CC3A2;
  --moss-400:#6FA57A; --moss-500:#4C8B59; --moss-600:#3A6E46; --moss-700:#2E5838;
  --moss-800:#24452C; --moss-900:#1B3421;
  /* Accent / Amber */
  --amber-50:#FFF8EC; --amber-100:#FFEDCC; --amber-200:#FFD899; --amber-300:#FFC166;
  --amber-400:#FBA83A; --amber-500:#F2921B; --amber-600:#D2760D; --amber-700:#A65A0C;
  /* Neutral / Sand + Stone */
  --sand-0:#FFFFFF; --sand-50:#FAF8F5; --sand-100:#F3F0EA; --sand-200:#E7E2D9;
  --stone-300:#D3CCC0; --stone-400:#A9A093; --stone-500:#7E766A; --stone-600:#5C554B;
  --stone-700:#423C35; --stone-800:#2B2721; --stone-900:#1A1713;
  /* Activity */
  --walk:#3A6E46; --meal:#F2921B; --train:#6F5FD0; --health:#1F6E7A;
  --potty:#7E766A; --rest:#D3CCC0;
  /* Semantic */
  --ok-fill:#2E9E5B; --ok-text:#1F7D45; --ok-bg:#E8F5ED;
  --warn-fill:#F2921B; --warn-text:#A65A0C; --warn-bg:#FFF4E0;
  --bad-fill:#D8453B; --bad-text:#B8332A; --bad-bg:#FDEDEC;
  --info-fill:#2F80ED; --info-text:#1B62C4; --info-bg:#EAF2FE;
  --gold:#E9B949;
  /* Aliases */
  --bg:var(--sand-50); --surface:var(--sand-0); --surface-2:var(--sand-100);
  --divider:var(--sand-200); --text:var(--stone-800); --text-2:var(--stone-600);
  --text-3:var(--stone-500); --border:var(--stone-500);
  --brand:var(--moss-600); --brand-press:var(--moss-700); --on-brand:#fff;
  --accent:var(--amber-500); --accent-text:var(--amber-700);
  --shadow-sm:0 1px 2px rgba(43,39,33,.06);
  --shadow-md:0 4px 12px rgba(43,39,33,.08);
  --shadow-lg:0 12px 28px rgba(43,39,33,.12);
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:28px; --r-full:999px;
  color-scheme: light;
}

[data-theme="dark"] {
  --bg:#14120F; --surface:#1E1B17; --surface-2:#29251F; --divider:#332E27;
  --text:#EDE8E0; --text-2:#A9A093; --text-3:#8C8478; --border:#4A443B;
  --brand:#7FBF8C; --brand-press:#9CD3A7; --on-brand:#14120F;
  --accent:#FFB84D; --accent-text:#FFC166;
  --walk:#7FBF8C; --meal:#FFB84D; --train:#A99AF0; --health:#5FC2CE; --potty:#A9A093;
  --ok-fill:#6FD196; --ok-text:#6FD196; --ok-bg:#1B2C21;
  --warn-fill:#FFB84D; --warn-text:#FFC166; --warn-bg:#2E2415;
  --bad-fill:#FF7A6E; --bad-text:#FF7A6E; --bad-bg:#2E1C1A;
  --info-fill:#7FB0FF; --info-text:#7FB0FF; --info-bg:#161F2E;
  --moss-50:#1B2C21; --moss-100:#20372a; --moss-200:#2E5838;
  --amber-50:#2E2415; --amber-100:#3A2C17; --amber-200:#4A3717;
  --shadow-sm:none; --shadow-md:none; --shadow-lg:0 12px 28px rgba(0,0,0,.5);
  color-scheme: dark;
}

*,*::before,*::after { box-sizing:border-box; }
/* Кнопки без класса .btn получали системное оформление браузера — серую рамку
   и чужой шрифт. Сбрасываем в одном месте, чтобы это не повторялось. */
button { font:inherit; color:inherit; }
html,body { margin:0; padding:0; width:100%; max-width:100%; overflow-x:hidden;
  overscroll-behavior-x:none; }
body {
  background:var(--bg); color:var(--text);
  padding-top:env(safe-area-inset-top);   /* статус-бар iPhone в режиме приложения */
  font-family:'Inter','Onest',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:15px; line-height:22px; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display,.num { font-family:'Onest','Inter',-apple-system,sans-serif; }
h1 { font-size:28px; line-height:34px; font-weight:700; margin:0; letter-spacing:-.01em; }
h2 { font-size:22px; line-height:28px; font-weight:600; margin:0; }
h3 { font-size:18px; line-height:24px; font-weight:600; margin:0; }
p { margin:0 0 12px; }
a { color:var(--brand); }
.display { font-size:34px; line-height:40px; font-weight:700; }
.num { font-variant-numeric:tabular-nums; font-weight:600; }
.cap { font-size:13px; line-height:18px; color:var(--text-2); }
.over { font-size:11px; line-height:14px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-3); }
.muted { color:var(--text-2); }

/* Каркас */
#app { max-width:520px; margin:0 auto; min-height:100vh; background:var(--bg);
  box-shadow:0 0 60px rgba(43,39,33,.06); overflow-x:hidden; }
/* Длинные слова и ссылки не должны растягивать карточку */
.card, .ev, .step, .banner, .prose, .wk, .skill { overflow-wrap:anywhere; }
img, svg, table { max-width:100%; }
.screen { padding:16px 16px 96px; }
.screen-head { padding:20px 16px 8px; }
.screen-head .over { margin-bottom:4px; }
.stack > * + * { margin-top:12px; }
.stack-lg > * + * { margin-top:24px; }
.row { display:flex; align-items:center; gap:12px; }
.row-between { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.grow { flex:1; min-width:0; }
.section-title { display:flex; align-items:baseline; justify-content:space-between;
  margin:32px 0 12px; }
.section-title:first-child { margin-top:0; }

/* Карточки */
.card { background:var(--surface); border-radius:var(--r-md); padding:16px;
  box-shadow:var(--shadow-sm); border:1px solid transparent; }
[data-theme="dark"] .card { border-color:var(--divider); }
.card-lg { border-radius:var(--r-lg); padding:20px; box-shadow:var(--shadow-md); }
.card-flat { background:var(--surface-2); box-shadow:none; }

/* Кнопки */
.btn { appearance:none; border:none; font:inherit; font-weight:600; cursor:pointer;
  border-radius:var(--r-sm); padding:0 20px; min-height:52px; display:inline-flex;
  align-items:center; justify-content:center; gap:8px; transition:120ms ease-out;
  background:var(--brand); color:var(--on-brand); width:100%; }
.btn:active { background:var(--brand-press); transform:scale(.99); }
.btn:disabled { background:var(--stone-300); color:var(--sand-0); cursor:not-allowed; }
.btn-sec { background:transparent; color:var(--text); border:1px solid var(--border); }
.btn-sec:active { background:var(--surface-2); }
.btn-ghost { appearance:none; -webkit-appearance:none; border:none; background:transparent;
  color:var(--brand); font-weight:600; font-size:14px; line-height:1; min-height:40px;
  padding:0 10px; border-radius:var(--r-sm); cursor:pointer; width:auto;
  display:inline-flex; align-items:center; gap:6px; }
.btn-ghost:active { background:var(--surface-2); }
.btn-ghost:disabled { color:var(--text-3); }
/* Строки-ссылки в карточках настроек */
.list-row { appearance:none; -webkit-appearance:none; background:none; border:none;
  text-align:left; cursor:pointer; color:inherit; }
.btn-sm { min-height:44px; font-size:14px; padding:0 16px; width:auto; }
.btn-row { display:flex; gap:12px; }
.btn-row .btn { flex:1; }

/* Чипы и бейджи */
.chip { display:inline-flex; align-items:center; gap:6px; border-radius:var(--r-xs);
  padding:5px 10px; font-size:13px; font-weight:600; background:var(--surface-2);
  color:var(--text-2); border:none; font-family:inherit; }
.chip-brand { background:var(--moss-100); color:var(--moss-800); }
[data-theme="dark"] .chip-brand { color:var(--brand); }
.chip-accent { background:var(--amber-100); color:var(--amber-700); }
[data-theme="dark"] .chip-accent { color:var(--accent); }
.chip-train { background:color-mix(in srgb, var(--train) 14%, transparent); color:var(--train); }
.badge { font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:3px 8px; border-radius:var(--r-full); background:var(--surface-2); color:var(--text-2); }

/* Шапка «Сегодня» */
.hero { background:linear-gradient(180deg,var(--moss-50) 0%,var(--bg) 100%);
  padding:20px 16px 4px; }
.avatar { width:52px; height:52px; border-radius:var(--r-full); background:var(--moss-200);
  display:grid; place-items:center; font-size:26px; flex:none; overflow:hidden; }
.avatar img { width:100%; height:100%; object-fit:cover; }
.avatar-lg { width:72px; height:72px; font-size:34px; }
.avatar-xl { width:120px; height:120px; font-size:56px; }
.ring { width:56px; height:56px; flex:none; position:relative; }
.ring svg { transform:rotate(-90deg); }
.ring-label { position:absolute; inset:0; display:grid; place-items:center;
  font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }

/* Лента дня */
.timeline { position:relative; }
.tl-item { display:flex; gap:12px; }
.tl-rail { width:12px; flex:none; display:flex; flex-direction:column; align-items:center; }
.tl-dot { width:12px; height:12px; border-radius:var(--r-full); background:var(--dot,var(--stone-300));
  margin-top:20px; flex:none; }
.tl-line { flex:1; width:2px; background:var(--divider); }
.tl-body { flex:1; min-width:0; padding-bottom:12px; }
.ev { display:flex; gap:12px; align-items:flex-start; background:var(--surface);
  border-radius:var(--r-md); padding:14px; box-shadow:var(--shadow-sm);
  border-left:4px solid var(--ev,var(--stone-300)); border-top:1px solid transparent;
  border-right:1px solid transparent; border-bottom:1px solid transparent; }
[data-theme="dark"] .ev { border-top-color:var(--divider); border-right-color:var(--divider);
  border-bottom-color:var(--divider); }
.ev-now { background:var(--moss-50); outline:2px solid var(--moss-200); }
.ev-done { opacity:.62; }
.ev-done .ev-title { text-decoration:line-through; text-decoration-color:var(--stone-400); }
.ev-skip { border-style:dashed; border-left-style:solid; opacity:.62; }
.ev-icon { width:36px; height:36px; border-radius:var(--r-xs); display:grid; place-items:center;
  font-size:18px; flex:none; background:color-mix(in srgb, var(--ev) 12%, transparent); }
.ev-title { font-weight:600; }
.ev-time { font-size:13px; font-variant-numeric:tabular-nums; color:var(--text-2); }
.ev-train { margin-top:10px; padding:10px 12px; border-radius:var(--r-xs);
  background:color-mix(in srgb, var(--train) 8%, transparent); font-size:13px; line-height:18px; }
.ev-check { width:28px; height:28px; border-radius:var(--r-full); border:2px solid var(--stone-300);
  background:transparent; cursor:pointer; display:grid; place-items:center; flex:none;
  color:transparent; font-size:15px; font-weight:700; padding:0; }
.ev-check[aria-pressed="true"] { background:var(--ok-fill); border-color:var(--ok-fill); color:#fff; }

/* Навыки */
.skill { display:flex; gap:12px; align-items:center; padding:12px 14px; background:var(--surface);
  border-radius:var(--r-md); box-shadow:var(--shadow-sm); cursor:pointer; width:100%;
  border:1px solid transparent; font:inherit; color:inherit; text-align:left; }
[data-theme="dark"] .skill { border-color:var(--divider); }
.dots { display:flex; gap:4px; }
.dot { width:9px; height:9px; border-radius:var(--r-full); background:var(--stone-300); }
.dot-on { background:var(--gold); }
.stage-bar { height:4px; border-radius:var(--r-full); background:var(--surface-2); overflow:hidden; }
.stage-bar i { display:block; height:100%; background:var(--brand); border-radius:var(--r-full); }

/* Оценки */
.rate-row { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.rate { min-height:72px; border-radius:var(--r-sm); border:2px solid var(--divider);
  background:var(--surface); display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:4px; cursor:pointer; font:inherit; padding:4px 2px; }
.rate b { font-size:20px; font-family:'Onest',sans-serif; }
.rate span { font-size:10px; line-height:12px; color:var(--text-2); text-align:center; }
.rate[aria-pressed="true"] { border-color:var(--rc); background:color-mix(in srgb,var(--rc) 14%,transparent); }
.rate[aria-pressed="true"] b { color:var(--rc); }

/* Формы */
label.field { display:block; margin-bottom:16px; }
label.field > span { display:block; font-size:13px; font-weight:600; color:var(--text-2);
  margin-bottom:6px; }
input,select,textarea { width:100%; font-family:inherit; font-weight:inherit; color:var(--text);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm);
  padding:13px 14px; min-height:48px;
  /* 16px обязательны: при меньшем размере Safari на iPhone автоматически приближает
     страницу при фокусе в поле, и её потом приходится отзумливать руками */
  font-size:16px; line-height:22px; }
input:focus,select:focus { outline:2px solid var(--brand); outline-offset:1px; }
.seg { display:flex; gap:8px; flex-wrap:wrap; }
.seg button { flex:1; min-width:72px; min-height:48px; border-radius:var(--r-sm);
  border:1px solid var(--border); background:var(--surface); color:var(--text); font:inherit;
  font-weight:600; cursor:pointer; padding:8px; }
.seg button[aria-pressed="true"] { background:var(--moss-100); border-color:var(--moss-600);
  color:var(--moss-800); }
[data-theme="dark"] .seg button[aria-pressed="true"] { color:var(--brand); }
.check { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--r-xs);
  background:var(--surface); border:1px solid var(--divider); cursor:pointer; font-size:14px; }
.check input { width:20px; height:20px; min-height:20px; flex:none; accent-color:var(--moss-600); }

/* Таб-бар */
.tabs { position:fixed; bottom:0; left:0; right:0; max-width:520px; margin:0 auto;
  background:color-mix(in srgb,var(--surface) 92%, transparent);
  backdrop-filter:blur(12px); border-top:1px solid var(--divider);
  display:grid; grid-template-columns:repeat(4,1fr); padding:6px 4px
  calc(6px + env(safe-area-inset-bottom)); z-index:20; }
.tab { background:none; border:none; font:inherit; cursor:pointer; color:var(--text-3);
  display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 2px;
  min-height:52px; font-size:11px; font-weight:600; }
.tab svg { width:24px; height:24px; }
.tab[aria-current="page"] { color:var(--brand); }

/* Прочее */
.banner { display:flex; gap:12px; padding:14px; border-radius:var(--r-md); font-size:14px;
  line-height:20px; background:var(--warn-bg); color:var(--warn-text); }
.banner-info { background:var(--info-bg); color:var(--info-text); }
.banner-ok { background:var(--ok-bg); color:var(--ok-text); }
.banner b { display:block; margin-bottom:2px; }
.divider { height:1px; background:var(--divider); margin:12px 0; }
.empty { text-align:center; padding:40px 20px; color:var(--text-2); }
.empty .big { font-size:44px; margin-bottom:12px; }
.list-row { display:flex; align-items:center; gap:12px; padding:14px 0;
  border-bottom:1px solid var(--divider); }
.list-row:last-child { border-bottom:none; }
.pill { display:inline-block; padding:2px 10px; border-radius:var(--r-full); font-size:12px;
  font-weight:600; background:var(--surface-2); color:var(--text-2); }
.kpi { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; text-align:center; }
.kpi div { background:var(--surface); border-radius:var(--r-md); padding:14px 6px;
  box-shadow:var(--shadow-sm); }
.kpi b { display:block; font-family:'Onest',sans-serif; font-size:20px; font-variant-numeric:tabular-nums; }
.kpi span { font-size:11px; color:var(--text-2); }
.wk { display:flex; gap:12px; padding:14px; border-radius:var(--r-md); background:var(--surface);
  box-shadow:var(--shadow-sm); }
.wk-n { width:36px; height:36px; border-radius:var(--r-full); background:var(--surface-2);
  display:grid; place-items:center; font-weight:700; font-size:13px; flex:none;
  font-variant-numeric:tabular-nums; }
.wk-now .wk-n { background:var(--moss-600); color:#fff; }
.wk-past { opacity:.55; }
.phase { padding:14px 16px; border-radius:var(--r-md); background:var(--moss-50);
  border-left:4px solid var(--moss-600); }
.art { display:flex; gap:14px; align-items:flex-start; }
.art-cover { width:64px; height:64px; border-radius:var(--r-sm); flex:none; display:grid;
  place-items:center; font-size:28px; background:var(--surface-2); }
.prose h3 { margin:24px 0 8px; }
.prose ol,.prose ul { padding-left:20px; margin:0 0 12px; }
.prose li { margin-bottom:8px; }
.step { padding:14px; border-radius:var(--r-sm); background:var(--surface-2); margin-bottom:10px; }
.step b { display:block; margin-bottom:4px; }
.sheet-back { position:fixed; inset:0; background:rgba(26,23,19,.45); z-index:40;
  display:flex; align-items:flex-end; justify-content:center; animation:fade 180ms ease-out; }
.sheet { background:var(--bg); width:100%; max-width:520px; border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:12px 16px calc(24px + env(safe-area-inset-bottom)); max-height:92vh; overflow:auto;
  animation:up 320ms cubic-bezier(.22,1,.36,1); }
.sheet-handle { width:36px; height:4px; border-radius:var(--r-full); background:var(--stone-300);
  margin:0 auto 16px; }
@keyframes fade { from{opacity:0} to{opacity:1} }
@keyframes up { from{transform:translateY(24px)} to{transform:translateY(0)} }
@keyframes pop { 0%{transform:scale(.8);opacity:0} 60%{transform:scale(1.06)} 100%{transform:scale(1);opacity:1} }
.pop { animation:pop 600ms cubic-bezier(.22,1,.36,1); }
.timer { font-family:'Onest',sans-serif; font-size:56px; line-height:60px; font-weight:700;
  font-variant-numeric:tabular-nums; text-align:center; }
.walk-actions { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.walk-actions button { min-height:64px; border-radius:var(--r-md); border:1px solid var(--border);
  background:var(--surface); font:inherit; font-weight:600; cursor:pointer; color:var(--text); }
.walk-actions button[data-count]:not([data-count="0"])::after { content:" ×" attr(data-count);
  color:var(--brand); }
.clicker { width:100%; min-height:88px; border-radius:var(--r-lg); background:var(--train);
  color:#fff; border:none; font:inherit; font-size:20px; font-weight:700; cursor:pointer;
  font-family:'Onest',sans-serif; }
.clicker:active { transform:scale(.98); }
.chart { width:100%; height:180px; }
@media (prefers-reduced-motion:reduce) { *{animation-duration:.01ms !important; transition-duration:.01ms !important;} }

/* Плашка установки */
.install-bar { position:fixed; left:8px; right:8px; bottom:calc(70px + env(safe-area-inset-bottom));
  max-width:504px; margin:0 auto; z-index:30; display:flex; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--divider); border-radius:var(--r-md);
  padding:12px 34px 12px 12px; box-shadow:var(--shadow-lg);
  animation:up 320ms cubic-bezier(.22,1,.36,1); }
.install-title { font-weight:600; line-height:20px; }
.install-bar .cap { line-height:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.install-icon { border-radius:10px; flex:none; background:var(--moss-600); }
.install-bar .btn-sm { flex:none; padding:0 14px; }
.install-x { position:absolute; top:6px; right:6px; width:26px; height:26px; min-height:26px;
  border:none; background:none; color:var(--text-3); font-size:13px; cursor:pointer;
  border-radius:var(--r-full); padding:0; }
.install-x:active { background:var(--surface-2); }
.share-ico { width:34px; height:34px; border-radius:var(--r-xs); background:var(--info-bg);
  color:var(--info-text); display:grid; place-items:center; flex:none; }
@media (max-width:380px) { .install-bar .cap { display:none; } }

/* Пошаговая инструкция в карточке навыка */
.steps { margin:12px 0 0; padding:12px 12px 12px 32px; border-radius:var(--r-xs);
  background:color-mix(in srgb, var(--train) 8%, transparent); }
.steps li { font-size:14px; line-height:20px; margin-bottom:10px; }
.steps li:last-child { margin-bottom:0; }
.steps li::marker { font-weight:700; color:var(--train); }