/* Когитатор: вид для телефона (выпуск 7.9.9).
   Подключается ПОСЛЕДНИМ в index.html, после всех остальных стилей.
   Причина: navigation.css, help-layout.css, character-hub.css и creation.css
   заново задают те же свойства без media-условия и перебивали правила
   для узкого экрана из workspace.css и app.css.
   Все правила ниже работают только на ширине до 850 px. */

/* Все размеры экрана: маленькое окно-вопрос по высоте равно тексту.
   Причина растягивания на весь экран: height:auto у окна с top:0 и bottom:0
   растягивает его, а правильно height:fit-content. */
dialog.small-dialog,
dialog.small-dialog.creation-save-question { height: fit-content !important; max-height: 90dvh !important; }

/* Окно «Испытания сцены» на любом экране: шапка сверху, тело прокручивается, кнопка «Назначить испытание» всегда видна.
   Причина: dialog:not(.small-dialog){overflow:hidden;height:92dvh} из navigation.css обрезало форму. */
dialog.trial-dialog[open] { display: flex !important; flex-direction: column; overflow: hidden !important; height: auto !important; max-height: calc(100dvh - 24px) !important; }
dialog.trial-dialog .trial-head { position: static; flex: 0 0 auto; }
dialog.trial-dialog .trial-body { flex: 1 1 auto; min-height: 0; overflow-y: auto !important; }
dialog.trial-dialog .trial-error, dialog.trial-dialog .trial-footer { flex: 0 0 auto; }
dialog.trial-dialog #trialCreate > button[type="submit"] { position: sticky; bottom: 0; z-index: 3; width: 100%; margin-top: 12px; box-shadow: 0 -10px 14px #0c1712; }
/* Один выбор вида: список, а плитки сжаты до названия */
dialog.trial-dialog .trial-kind-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin: 10px 0; }
dialog.trial-dialog .trial-kind-grid button { min-height: 0 !important; padding: 8px 10px; gap: 2px; flex-direction: row; align-items: center; }
dialog.trial-dialog .trial-kind-grid small { display: none; }
dialog.trial-dialog .trial-kind-grid b { font-size: 16px; }

@media (max-width: 850px) {
  dialog.small-dialog.creation-save-question { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; padding: 18px !important; margin: auto !important; }
  html, body { overflow-x: hidden; }
  img, canvas, svg, video { max-width: 100%; }

  /* Создание персонажа: одна колонка, панель «Ваш старт» уходит под форму */
  .creation-columns { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .creation-columns .dhstats,
  .creation-wizard .dhstats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .creation-columns .stat { min-height: 96px; }
  .creation-columns .stat strong { font-size: 26px; }
  .stat, .stat > span, .stat > small, .stat label { overflow-wrap: anywhere; hyphens: auto; }
  .creation-columns .creation-review { grid-template-columns: minmax(0, 1fr); }

  /* Лист персонажа */
  .dossier-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .dossier-art { min-height: 0; height: 330px; }
  .dossier-body { padding: 18px 16px; }
  .dossier .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Игровой стол: страница прокручивается, сцена сверху, сведения и кубики ниже */
  .workspace.is-playing { height: auto; min-height: 100dvh; overflow: visible; }
  .workspace.is-playing .content { height: auto; display: block; padding: 12px 16px; }
  .is-playing .workspace-main { display: block; min-height: 0; }
  .is-playing .game-table { height: auto; flex: none; }
  .table-layout,
  .is-playing .table-layout { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; max-height: none; flex: none; }
  .table-inspector,
  .is-playing .table-inspector { display: flex; flex-direction: column; max-height: none; min-width: 0; }
  .is-playing .inspector-body { min-height: 0; max-height: none; overflow: visible; }
  .table-stage, .table-stage-body { min-height: 220px; height: auto; }

  /* Шапка: слово не обрезается, выбор кампании и «Меню» переносятся */
  .topbar { height: auto; flex-wrap: wrap; padding: 10px 16px; gap: 10px; }
  .topbar > .row { width: 100%; flex-wrap: wrap; flex-shrink: 1; }
  .topbar select { width: 100%; max-width: 100%; }
  .brand { white-space: nowrap; font-size: 17px; letter-spacing: 1px; }
  /* Рабочая шапка: знак и «Меню» в первой строке, вкладки во второй, выбор кампании в третьей */
  .workspace-header { gap: 10px 12px; align-items: center; }
  .workspace-header .wordmark { order: 1; flex: 1 1 auto; }
  .workspace-account { display: contents; }
  .workspace-menu { order: 2; }
  .workspace-account select { order: 3; flex: 1 1 100%; width: 100%; max-width: 100%; }
  .workspace-nav { order: 4; flex: 1 1 100%; }

  /* Окна: умещаются в экран, тело прокручивается, низ с кнопками виден */
  dialog:not(.small-dialog) { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  dialog .dialog-body, dialog .trial-body { overflow-y: auto; min-height: 0; max-width: 100%; }
  dialog > *, dialog .dialog-body > * { max-width: 100%; min-width: 0; }
  dialog .detail, dialog aside.detail { width: 100%; max-width: 100%; }

  /* Маленькие окна-вопросы («Сохранить черновик?» и подобные): по ширине экрана, высота по тексту, кнопки друг под другом */
  dialog.small-dialog { width: calc(100vw - 24px); max-width: calc(100vw - 24px); height: auto; max-height: 90dvh; margin: auto; overflow-y: auto; }
  dialog.small-dialog .actions { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  dialog.small-dialog .actions button { width: 100%; margin: 0; }

  /* Имущество и сделки: одна колонка, окно на весь экран и прокручивается */
  .inventory-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; padding: 14px !important; overflow-x: hidden !important; overflow-y: auto !important; }
  .inventory-dialog header h2 { font-size: 20px; }
  .inventory-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .inventory-tabs button { flex: 0 0 auto; }
  .inventory-tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .inventory-tools label { min-width: 0; width: 100%; }
  .inventory-tools select, .inventory-tools input { width: 100%; }
  .inventory-columns,
  .inventory-columns.with-catalog,
  .inventory-columns.with-catalog.compact-inventory,
  .trade-sides { grid-template-columns: minmax(0, 1fr); overflow: visible; flex: none; gap: 14px; }
  .inventory-dialog .inventory-columns { flex: 0 0 auto !important; height: auto !important; min-height: 0; }
  .inventory-columns > section { overflow: visible; height: auto; }
  .owned-items-grid, .inventory-catalog .catalog-grid, .compact-inventory .owned-items-grid { grid-template-columns: minmax(0, 1fr); }

  /* Справка по умениям и склонностям: значки переносятся, не вылезают вправо */
  .rule-pills, .rule-fact { flex-wrap: wrap; min-width: 0; max-width: 100%; }
  .rule-pill { max-width: 100%; min-width: 0; flex-wrap: wrap; white-space: normal; }
  .rule-pill > span, .help-tip { max-width: 100%; white-space: normal; flex-wrap: wrap; }

  /* Окно «Выберите персонажа»: карточки друг под другом, не растягиваются на всю высоту */
  .dialog-body { align-content: start; }
  .character-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; }
  .character-cards > button { min-height: 76px; padding: 12px; gap: 12px; }

  /* Шаг «Развитие»: список и сведения друг под другом */
  .creation-dialog:has(.development) .dialog-body { overflow-y: auto !important; overflow-x: hidden; }
  .development { flex: none; }
  .development .grid { grid-template-columns: minmax(0, 1fr); }
  .development .list { max-height: none; overflow: visible; }
  .development .detail { position: static; max-height: none; overflow: visible; }
  .development .bar input { margin-left: 0; width: 100%; }
  .development .tabs { overflow-x: auto; flex-wrap: nowrap; }
  .development .tab { flex: 0 0 auto; }

  /* Картотека: окно на весь экран, страница прокручивается, полка и сведения друг под другом.
     Причина: cabinet.css задает высоту 100% и overflow:hidden для панели, на телефоне всё обрезалось. */
  dialog.cabinet-dialog { width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; max-height: 100dvh !important; }
  .cabinet-dialog .dialog-body, .cabinet-dialog .modalbody:has(#cabinetPanel), .cabinet-dialog .modalcontent:has(#cabinetPanel) { overflow-y: auto !important; overflow-x: hidden !important; padding: 12px !important; display: block !important; }
  #cabinetPanel { height: auto !important; display: block !important; }
  #cabinetPanel > * { margin-bottom: 14px; }
  .cabinet-toolbar label { min-width: 0 !important; max-width: 100% !important; flex: 1 1 100% !important; }
  .cabinet-layout { display: block !important; }
  .cabinet-browse { overflow: visible !important; margin-bottom: 14px; }
  /* Сведения о выбранной карточке раскрываются прямо под ней (cabinet.js переносит блок под выбранную карточку) */
  .cabinet-detail { position: static !important; max-height: none !important; overflow: visible !important; grid-column: 1 / -1; padding: 14px !important; border: 1px solid #af914e !important; border-left-width: 4px !important; background: #17251c; box-shadow: none; }
  .cabinet-detail h2 { font-size: 20px; }
  .cabinet-bookcase { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)) !important; grid-auto-rows: 310px !important; padding: 8px 4px 0 !important; }
  .cabinet-book-slot { padding: 4px 3px 0 !important; border-bottom-width: 10px !important; }
  .cabinet-spine { padding: 30px 4px 74px !important; }
  .cabinet-spine strong { font-size: 15px !important; max-height: 150px !important; overflow: hidden; }
  .cabinet-spine .cabinet-count { font-size: 11px !important; bottom: 6px !important; line-height: 1.2 !important; }
  .cabinet-spine .cabinet-count small { font-size: 10px !important; }
  .cabinet-cards { grid-template-columns: minmax(0, 1fr) !important; }
  .cabinet-add { grid-template-columns: minmax(0, 1fr) !important; padding: 14px !important; }
  .cabinet-pager { flex-wrap: wrap; }

  /* Нажатие пальцем: не меньше 44 px */
  button, .button, summary, select,
  input:not([type="checkbox"]):not([type="radio"]),
  [role="tab"], .tab, .chip, .character-check,
  .development .chip, .development .b, .development .tab { min-height: 44px !important; }
  button, .button, .development .b { min-width: 44px; }
  /* Кнопки «?»: значок остается маленьким, область нажатия шире */
  .help-tip-trigger, .help-tip button, .help-button, button.help, .rule-help { min-width: 0 !important; min-height: 0 !important; position: relative; }
  .help-tip-trigger::after, .help-tip button::after, .help-button::after, button.help::after, .rule-help::after { content: ""; position: absolute; inset: -12px; }
  nav a, nav button, .tabs button, .subtabs button { min-height: 44px !important; }

  /* Поля: 16 px, чтобы телефон не приближал страницу при вводе */
  input, select, textarea { font-size: 16px; max-width: 100%; }

  /* Любой текст переносится, ничего не вылезает вправо */
  h1, h2, h3, p, li, label, small, strong, .long-text, .rule-description { overflow-wrap: anywhere; }
  table { display: block; overflow-x: auto; max-width: 100%; }
}

@media (max-width: 480px) {
  .brand .wordmark, .brand-text { font-size: 15px; }
  .creation-columns .dhstats,
  .creation-wizard .dhstats,
  .dossier .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}