/* Оболочка веб-версии. Сам документ рисуется своими стилями из пакета показа. */
* { box-sizing: border-box; }

/*
 * Скрытое должно быть скрыто.
 *
 * Браузер прячет элементы с признаком `hidden` собственным правилом, но любое
 * наше правило с `display` его перебивает — молча. Так панель редактора и
 * пустая рамка оставались на экране списка документов. Правило ниже возвращает
 * признаку `hidden` его смысл раз и навсегда, для всех элементов.
 */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  color: #1a1a1a;
  /* светлый фон — это оболочка программы; серый лежит только вокруг страницы
     документа, как и положено: он отделяет лист от всего остального */
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #f3f3f3;
  border-bottom: 1px solid #d0d0d0;
  flex: none;
}

.title { font-weight: 600; }
.grow { flex: 1; }
.status { color: #666; font-size: 13px; }

.tool {
  border: 1px solid transparent;
  background: transparent;
  padding: 7px 12px;
  border-radius: 2px;
  cursor: pointer;
  font: inherit;
  color: #1a1a1a;
}
.tool:hover { background: #e2e2e2; border-color: #c8c8c8; }
.tool-icon { min-width: 38px; font-size: 15px; }
.sep { width: 1px; height: 22px; background: #d0d0d0; }

.primary {
  border: 0;
  background: #1f4e79;
  color: #fff;
  padding: 11px 18px;
  border-radius: 3px;
  cursor: pointer;
  font: inherit;
}
.primary:hover { background: #17405f; }

/* --- список документов --- */

.list { padding: 20px 14px 40px; max-width: 780px; margin: 0 auto; width: 100%; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }

.upload {
  display: inline-flex;
  align-items: center;
  padding: 11px 18px;
  border-radius: 3px;
  background: #fff;
  border: 1px solid #c8c8c8;
  cursor: pointer;
}
.upload:hover { background: #f3f3f3; }

.documents { display: flex; flex-direction: column; gap: 8px; }

.card {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid #dcdcdc;
  border-radius: 3px;
  overflow: hidden;
}

.card-open {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.card-open:hover { background: #f3f7fb; }
.card-name { font-weight: 600; }
.card-meta { color: #6b6b6b; font-size: 13px; }

.card-remove {
  border: 0;
  background: transparent;
  color: #999;
  font-size: 22px;
  padding: 0 16px;
  cursor: pointer;
}
.card-remove:hover { color: #c0392b; background: #fbf0ef; }

.empty, .hint { color: #5c5c5c; }
.hint { margin-top: 20px; font-size: 13px; }

/* --- редактор --- */

.editor { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.editor-tools {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  background: #ececec;
  border-bottom: 1px solid #d6d6d6;
  flex-wrap: wrap;
}

/*
 * Лист документа всегда верстается в полную ширину, а на узкий экран
 * подгоняется уменьшением (размеры считает `fitFrame` в app.js). Уменьшение
 * визуальное: внутри рамки ничего не меняется, поэтому разбивка на страницы и
 * попадание курсора считаются одинаково на телефоне и на большом экране.
 */
.frame-box { flex: 1; min-height: 0; overflow: hidden; background: #6b6b6b; position: relative; }

/* рамки лежат друг на друге: новая готовится невидимой на месте старой */
.frame {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  background: #6b6b6b;
  transform-origin: top left;
}

/* --- вход --- */

.login-page { align-items: center; justify-content: center; }

.login {
  background: #fff;
  padding: 28px;
  border-radius: 4px;
  width: min(340px, 90vw);
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.login h1 { margin: 0; font-size: 22px; }
.login p { margin: 0; color: #666; }
.login input {
  padding: 12px;
  border: 1px solid #c8c8c8;
  border-radius: 3px;
  font: inherit;
}
.error { color: #c0392b; min-height: 20px; }

@media (max-width: 640px) {
  .editor-tools { gap: 2px; padding: 6px 8px; }
  .tool { padding: 8px 10px; }
  .tool-icon { min-width: 34px; }
}