/* © 2026 VEYRO (ИП Макаров И. В.). appagent — проприетарная программа. Использование — по лицензионному договору https://appagent.ru/legal/offer/. Копирование и распространение без разрешения запрещены. */
/* Экраны телефона: главный, решения, задача, настройки. Значения — только из tokens.css, размеры в rem; светлая и тёмная тема
   переключаются токенами. Основная ширина 390: одна колонка, касания не меньше 2,75 rem. Цвет только усиливает слова и значки. */

.ph { display: grid; gap: var(--space-5); width: 100%; max-width: var(--layout-narrow); min-width: 0; margin: 0 auto; padding: var(--space-4); color: var(--color-ink); }
.ph > *, .ph-stack > * { min-width: 0; }
.ph-stack { display: grid; gap: var(--space-4); }

/* Шапка */
.ph-head { display: grid; gap: var(--space-2); }
.ph-title { font: var(--text-h2-weight) var(--text-h2-size)/var(--text-h2-line) var(--text-h2-family); letter-spacing: var(--text-h2-track); text-wrap: balance; overflow-wrap: anywhere; }
.ph-h2 { font: var(--text-h3-weight) var(--text-h3-size)/var(--text-h3-line) var(--text-h3-family); letter-spacing: var(--text-h3-track); overflow-wrap: anywhere; }
.ph-nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.ph-link {
  display: inline-flex; align-items: center; min-height: var(--size-touch-min); min-width: var(--size-touch-min);
  color: var(--color-acc-text); text-underline-offset: .2em;
}
.ph-link:hover { text-decoration: none; }

/* Разделы и списки */
.ph-section { display: grid; gap: var(--space-3); }
.ph-section__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.ph-list { display: grid; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.ph-empty { color: var(--color-ink2); font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); overflow-wrap: anywhere; }

/* Карточка решения: вся площадь — ссылка */
.ph-card {
  display: grid; gap: var(--space-2); padding: 0; background: var(--color-panel);
  border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.ph-card--full { padding: var(--space-5); gap: var(--space-3); }
.ph-card__a {
  display: grid; gap: var(--space-2); min-height: var(--size-control); padding: var(--space-4) var(--space-5);
  color: inherit; text-decoration: none; border-radius: inherit;
}
.ph-card__a:hover { background: var(--color-panel2); }
.ph-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.ph-card__title, .ph-card__meta { overflow-wrap: anywhere; }
.ph-question { overflow-wrap: anywhere; white-space: pre-line; font: var(--text-body-weight) var(--text-body-size)/var(--text-body-line) var(--font-sans); }

/* Проект в списке: имя, статус словом и значком, чем заняты */
.ph-proj {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-1) var(--space-3);
  min-height: var(--size-control); padding: var(--space-3) var(--space-5);
  background: var(--color-panel); border: 1px solid var(--color-line); border-radius: var(--radius-lg);
}
.ph-proj__name { overflow-wrap: anywhere; }
.ph-proj__doing { grid-column: 1 / -1; overflow-wrap: anywhere; }
.ph-computer .ph-confirm, .ph-computer > .ph-btn { grid-column: 1 / -1; }

/* Кнопки */
.ph-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--size-control); min-width: var(--size-touch-min); padding: 0 var(--space-6);
  border: 1px solid transparent; border-radius: var(--radius-pill); background: transparent; color: var(--color-ink);
  font: var(--text-button-weight) var(--text-button-size)/var(--text-button-line) var(--text-button-family);
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.ph-btn--primary { background: var(--color-acc); color: var(--color-on-acc); }
.ph-btn--primary:hover { background: color-mix(in srgb, var(--color-acc) 86%, var(--color-ink)); }
.ph-btn--secondary { border-color: var(--color-line2); color: var(--color-ink); }
.ph-btn--secondary:hover { border-color: var(--color-ink); background: var(--color-panel2); }
.ph-btn--text { color: var(--color-ink2); min-height: var(--size-touch-min); }
.ph-btn--text:hover { color: var(--color-ink); text-decoration: underline; }
.ph-btn--block { width: 100%; }
.ph-btn:disabled {
  background: var(--color-panel2); color: var(--color-ink2); border-color: var(--color-line2); cursor: not-allowed;
}
.ph-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.ph-actions--stack { display: grid; }

/* Подтверждение и цитата комментария */
.ph-confirm { display: grid; gap: var(--space-3); padding: var(--space-4); background: var(--color-bg2); border: 1px solid var(--color-line2); border-radius: var(--radius-md); }
.ph-quote {
  margin: 0; padding: var(--space-3) var(--space-4); border-left: var(--size-focus-width) solid var(--color-line2);
  color: var(--color-ink2); overflow-wrap: anywhere; white-space: pre-wrap;
  font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans);
}

/* Поля */
.ph-form { display: grid; gap: var(--space-4); }
.ph-form__row { display: grid; gap: var(--space-2); }
.ph-label { font: var(--text-label-weight) var(--text-caption-size)/var(--text-caption-line) var(--text-label-family); color: var(--color-ink2); }
.ph-field {
  width: 100%; min-height: var(--size-control); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-line2); border-radius: var(--radius-md); background: var(--color-bg); color: var(--color-ink);
  font: var(--text-ui-weight) var(--text-body-size)/var(--text-ui-line) var(--font-sans);
}
textarea.ph-field { resize: vertical; }
.ph-field:hover { border-color: var(--color-ink3); }
.ph-field[aria-invalid="true"] { border-color: var(--color-danger); }
.ph-field:disabled { background: var(--color-panel2); color: var(--color-ink2); cursor: not-allowed; }
.ph-field-err { color: var(--color-danger-text); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); overflow-wrap: anywhere; }
.ph-hint { color: var(--color-ink2); overflow-wrap: anywhere; }
.ph-hint--over { color: var(--color-danger-text); }

/* Результат действия */
.ph-result { display: flex; align-items: flex-start; gap: var(--space-2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); overflow-wrap: anywhere; }
.ph-result .ic { flex: none; width: 1rem; height: 1rem; margin-top: 0.1rem; }
.ph-result--ok .ic { color: var(--color-ok-text); }
.ph-result--danger { color: var(--color-danger-text); }
.ph-result--danger .ic { color: var(--color-danger-text); }

/* Полоса про состояние связи */
.ph-notice {
  display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4);
  background: var(--color-panel); border: 1px solid var(--color-line2); border-radius: var(--radius-md);
}
.ph-notice > .ic { margin-top: 0.15rem; color: var(--color-ink3); }
.ph-notice--warn > .ic { color: var(--color-warn-text); }
.ph-notice--danger > .ic { color: var(--color-danger-text); }
.ph-notice__tx { display: grid; flex: 1 1 auto; gap: var(--space-1); min-width: 0; overflow-wrap: anywhere; }
.ph-notice > .ph-btn { margin-left: auto; }

/* Настройки */
.ph-switchrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); }
.ph-switchrow > .caption { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.ph-note { display: grid; gap: var(--space-2); padding: var(--space-4); background: var(--color-bg2); border: 1px solid var(--color-line); border-radius: var(--radius-md); overflow-wrap: anywhere; }

/* Выключатель: слово «Включено» или «Выключено» и дорожка с ползунком */
.ph-sw {
  display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--size-touch-min); padding: 0;
  background: none; border: 0; color: var(--color-ink); cursor: pointer;
  font: var(--text-ui-weight) var(--text-caption-size)/1 var(--font-sans);
}
.ph-sw__word { color: var(--color-ink2); }
.ph-sw__track {
  position: relative; flex: none; width: calc(var(--space-10) + var(--space-1)); height: var(--space-6);
  background: var(--color-panel2); border: var(--size-focus-width) solid var(--color-ink3); border-radius: var(--radius-pill);
  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.ph-sw__thumb {
  position: absolute; top: 50%; left: var(--space-1); width: var(--space-3); height: var(--space-3);
  background: var(--color-ink3); border-radius: var(--radius-round); transform: translate(0, -50%);
  transition: transform var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
.ph-sw[aria-checked="true"] .ph-sw__track { background: var(--color-acc); border-color: var(--color-acc); }
.ph-sw[aria-checked="true"] .ph-sw__thumb { background: var(--color-on-acc); transform: translate(var(--space-5), -50%); }
.ph-sw:disabled { cursor: not-allowed; color: var(--color-ink2); }
.ph-sw:disabled .ph-sw__track { border-color: var(--color-line2); }
.ph-sw:disabled .ph-sw__thumb { background: var(--color-line2); }

.ph :focus-visible { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: var(--size-focus-offset); }

@media (min-width: 48rem) {
  .ph { padding: var(--space-8) var(--space-6); }
  .ph-actions--stack { display: flex; }
  .ph-btn--block { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ph-btn, .ph-sw__track, .ph-sw__thumb { transition: none; }
}