Document picker code and architecture

site/static/style.css

@@ -1,3 +1,4 @@
+/* Базовые цвета и типографика всего demo-picker. */
 :root {
     color-scheme: light;
     font-family: Georgia, 'Times New Roman', serif;
@@ -5,22 +6,29 @@
     background: #e9eee8;
 }
 
+/* Фон страницы намеренно отделён от карточной логики: picker не требует backend UI. */
 body {
     margin: 0;
     min-height: 100vh;
     background: radial-gradient(circle at 10% 0%, #f8fbf4, transparent 38%), #e9eee8;
 }
 
+/* Ограничивает ширину рабочей области и сохраняет адаптивные боковые поля. */
 .page { max-width: 980px; margin: 0 auto; padding: 64px 24px; }
+/* Служебный идентификатор версии приложения. */
 .eyebrow { color: #56745f; font: 700 12px/1.2 sans-serif; letter-spacing: 2px; }
+/* Заголовок и пояснение вводят пользователя в сценарий выбора документов. */
 h1 { max-width: 620px; margin: 12px 0; font-size: clamp(38px, 7vw, 72px); line-height: .95; font-weight: 400; }
 .lede { max-width: 560px; color: #5d6a61; font: 16px/1.6 sans-serif; }
+/* Группа действий: выбор файлов, папки и очистка состояния. */
 .toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin: 36px 0 16px; }
 button { border: 0; border-radius: 4px; padding: 12px 17px; color: #f7faf4; background: #1f5a3b; font: 700 13px sans-serif; cursor: pointer; }
 button.secondary { color: #1f5a3b; background: #cbdcc9; }
 button.quiet { color: #5d6a61; background: transparent; }
 button:disabled { opacity: .45; cursor: not-allowed; }
+/* Резервная область сообщения интегратора сохраняет высоту и не двигает таблицу. */
 .status { min-height: 22px; color: #56745f; font: 13px sans-serif; }
+/* Горизонтальный scroll на узких экранах не ломает таблицу дерева. */
 .table-wrap { overflow-x: auto; border-top: 1px solid #b9c7ba; }
 table { width: 100%; border-collapse: collapse; font: 14px/1.4 sans-serif; }
 th, td { padding: 14px 10px; border-bottom: 1px solid #cbd5cc; text-align: left; }
@@ -31,14 +39,17 @@ td:nth-child(2) { width: 140px; color: #68766c; }
 .tree-folder { color: #1f5a3b; }
 .tree-zip { color: #8a5a20; }
 .tree-chevron { display: inline-block; width: 12px; color: #78917d; font-size: 10px; }
+/* Удаление работает для leaf и групп и обрабатывается делегированием в initUploadTable. */
 .remove-btn { padding: 2px 7px; color: #8c5148; background: transparent; font: 20px/1 sans-serif; }
 .remove-btn:hover { color: #b32f22; }
 .tree-row td:first-child { white-space: nowrap; }
 .count { color: #5d6a61; font: 13px sans-serif; }
+/* Legacy-стили результата сохранены для совместимости, текущий picker их не использует. */
 .result { margin-top: 44px; padding-top: 18px; border-top: 2px solid #1f5a3b; }
 .result h2 { font-size: 26px; font-weight: 400; }
 .result li { margin: 8px 0; font: 14px sans-serif; }
 @media (max-width: 600px) {
+    /* На мобильном экране кнопки получают равномерную ширину. */
     .page { padding: 36px 16px; }
     .toolbar button { flex: 1 1 42%; }
 }