/* Урок Просто — страница «Свои уроки» (OwnUp) в стиле v2 «Строка запроса» (up-own.css), 06.11.
   Корень — .up.up-docs.up-own: колонка 1040, карточки уроков, чипы, меню «…», пустое состояние — из up-docs.css как есть;
   строка загрузки — композер кита (up-kit.css). Здесь — только то, чего в наборе нет (кандидаты в ДС отмечены):
   - up-own-box — композер загрузки: поле текста под длинный урок, карточка файла (up-own-file), подсветка при перетаскивании
     (up-own-drop — кандидат в ДС «композер: перетаскивание файла»), ошибка под полем (up-own-err), счётчик в подвале;
   - up-own-st — статус урока в строке чипов: «Разбираем N %» (как процент документа в работе, up-docs-rec-busy) и «Не подтверждён»
     (как жёлтый чип шапки «Готового документа», up-meta-chip is-warn); высота — как у чипов форматов (28);
   - up-own-note — заметка о персональных данных под строкой (на сайте — жёлтая плашка формы).
   Переопределения набора — с пометкой «почему». */

/* ---------- строка загрузки: 880 по центру колонки, как поиск «Моих документов» ---------- */
.up-own-box { width: 100%; max-width: 880px; justify-self: center; }
.up-own-box[data-err="true"] { border-color: var(--error-edge); }
.up-own-box[data-drag="true"] .up-ring { opacity: 0; }  /* подсветку рамки заменяет пунктир перетаскивания */

/* поле: урок вставляют целиком — шрифт как у текста, не как у темы (у up-topic 21/30, 500); растёт до 40 % окна, но не выше 360 px
   (15 строк; на холсте «окно» — сама рамка, без потолка в px высота рамки с текстом зависела бы от неё же), дальше прокрутка */
.up-own-text { min-height: 120px; max-height: min(40vh, 360px); max-height: min(40dvh, 360px); font-size: 16px; line-height: 24px; font-weight: 400; }
.up-own-text::placeholder { font-weight: 400; }

/* карточка файла — вложение на месте поля */
.up-own-file { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 10px 10px 10px; border-radius: 16px;
  background: var(--surface-2); border: 1px solid var(--up-card-line); animation: up-own-in .32s var(--ease-out) both; }
.up-own-file-ic { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--ws-accent-soft); color: var(--ws-accent); }
.up-own-file-ic svg { margin-top: -8px; }
.up-own-file-ic b { position: absolute; left: 0; right: 0; bottom: 5px; font-size: 9.5px; line-height: 10px; font-weight: 700; letter-spacing: .04em; text-align: center; color: var(--ws-accent-ink); }
.up-own-file-main { display: grid; gap: 2px; min-width: 0; }
.up-own-file-n { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-own-file-s { font-size: 13px; line-height: 18px; color: var(--text-2); font-variant-numeric: tabular-nums; }
/* «×» — как крестик токена: при наведении красный и поворот (up-kit.css, button.up-token:hover .up-token-x) */
.up-own-file-x { display: grid; place-items: center; width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); cursor: pointer;
  transition: background-color .15s, color .15s; }
.up-own-file-x svg { transition: transform .15s var(--ease-out); }
.up-own-file-x:hover { background: var(--error-tint); color: var(--error); }
.up-own-file-x:hover svg { transform: rotate(90deg); }
.up-own-file-x:active { transform: scale(.94); }
.up-own-cap { margin: -2px 2px 0; font-size: 14px; line-height: 20px; color: var(--text-2); text-wrap: pretty; }
@keyframes up-own-in { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }

/* ошибка — под полем, цветом --error (как подсказка с ошибкой в «Моих классах», up-mc-hint[data-err]) */
.up-own-err { display: flex; align-items: flex-start; gap: 8px; margin: 0 2px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--error); }
.up-own-err svg { flex: 0 0 auto; margin-top: 1px; }

/* подвал: «Выбрать файл» и подсказка-счётчик слева, кнопка справа */
.up-own-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.up-own-meter { min-width: 0; font-size: 13.5px; line-height: 20px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.up-own-meter[data-low="true"] { color: var(--warning); }

/* перетаскивание: файл ловим на всей странице (08.11, «Свои уроки 2, ответы: 3 — вся страница»); подсветка — вариант 1 или «Портал» (ниже).
   .up-own-drop — пунктир с лёгкой заливкой и подпись без круга (вариант 1); не тот формат — красные только пунктир, значок и заголовок, без заливки */
.up-own-drop { position: absolute; inset: 6px; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 4px; border-radius: 20px;
  border: 1.5px dashed var(--ws-accent); background: color-mix(in srgb, var(--ws-accent) 6%, var(--surface)); text-align: center; pointer-events: none;
  animation: up-own-fade .15s var(--ease-out) both; }
.up-own-drop-ic { display: grid; place-items: center; margin-bottom: 2px; color: var(--ws-accent); }
.up-own-drop b { font-size: 17px; line-height: 24px; font-weight: 600; color: var(--ws-accent-ink); }
.up-own-drop span:last-child { font-size: 14px; line-height: 20px; color: var(--text-2); }
.up-own { --own-veil: rgba(246, 245, 251, .66); }
.up-own[data-theme="dark"] { --own-veil: rgba(18, 16, 30, .66); }
/* подсветка перетаскивания — два варианта, Tweak drop (08.11, «Уведомления, ответы: 5 — первый вариант 1 и второй портал, без смешивания»).
   Вариант 1 (data-hl="v1") — пунктир с лёгкой заливкой на строке (.up-own-drop выше), страница как есть.
   «Портал» (data-hl="portal") — страница под пеленой, меню приглушено, строка впереди со свечением; пунктира нет, в поле — «Отпустите файл — разберём урок». */
.up-own-main[data-hl="portal"][data-drag="true"] .up-own-box { position: relative; z-index: 50; transition: box-shadow .2s var(--ease-out);
  box-shadow: 0 0 0 200vmax var(--own-veil), 0 0 0 1px color-mix(in srgb, var(--ws-accent) 55%, transparent), 0 0 64px 12px rgba(124, 104, 238, .5),
  30px 12px 84px 4px rgba(255, 160, 120, .45), 0 20px 40px rgba(75, 64, 184, .16); }
.up-own:has(.up-own-main[data-hl="portal"][data-drag="true"]) .f-side { opacity: .4; transition: opacity .2s var(--ease-out); }
.up-own-main[data-hl="portal"]:not([data-bad="true"]) .up-own-drop { display: none; }
.up-own-main[data-hl="portal"][data-bad="true"] .up-own-box { box-shadow: 0 0 0 200vmax var(--own-veil), 0 20px 40px rgba(31, 27, 58, .12); }
/* не тот формат — в обоих вариантах одинаково: красные пунктир, значок и заголовок, без заливки */
.up-own-main[data-bad="true"] .up-own-drop { border-color: var(--error); background: var(--surface); }
.up-own-main[data-bad="true"] .up-own-drop-ic, .up-own-main[data-bad="true"] .up-own-drop b { color: var(--error); }
@keyframes up-own-fade { from { opacity: 0; } to { opacity: 1; } }

/* под строкой: стоимость (жёлтая при лимите) и заметка о персональных данных */
.up-own-cost[data-limit="true"] { display: flex; align-items: center; justify-content: center; gap: 8px; }
.up-own-cost[data-limit="true"] b { font-weight: 600; color: var(--warning); }
.up-own-cost[data-limit="true"] svg { flex: 0 0 auto; color: var(--warning); }
.up-own-note { display: flex; align-items: flex-start; justify-content: center; gap: 8px; max-width: 640px; margin: -6px auto 0; font-size: 13.5px; line-height: 20px; color: var(--text-2); text-wrap: pretty; }
.up-own-note svg { flex: 0 0 auto; margin-top: 2px; color: var(--ws-icon); }

/* ---------- загруженные уроки: карточка урока «Моих документов» без раскрытия ----------
   Вся карточка — ссылка заголовка (растянутая ::after), чипы и «…» — над ней. Наведение, стопка и время — из up-docs.css. */
.up-own-lib { display: grid; gap: 10px; margin-top: 10px; }
.up-own-t { position: static; text-decoration: none; color: var(--ink); }
.up-own-t::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.up-own-h { position: relative; }
.up .up-own-t:focus-visible { outline: none; }
.up-own-ls:has(.up-own-t:focus-visible) { outline: 2px solid var(--ws-accent); outline-offset: -2px; }
.up-own-chips, .up-own-h .up-docs-ls-more { position: relative; z-index: 2; }
@media (hover: hover) { .up-own-h:hover .up-own-t { color: var(--ws-accent-ink); } }

/* превью урока в разборе — с кругом загрузки поверх (без бледности: в тёмной теме бледный лист сливался с фоном, как у «Сборки» до 06.11) */
.up-own-spin { position: absolute; left: 50%; top: 50%; z-index: 4; display: grid; place-items: center; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 999px;
  background: var(--surface); color: var(--ws-accent); box-shadow: 0 4px 12px -4px rgba(60, 40, 120, .45); }
.up-own-spin .ws-spin { display: inline-grid; }

/* статусы в строке чипов */
.up-own-st { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 8px; border-radius: 8px; font-size: 13px; line-height: 16px; font-weight: 600; white-space: nowrap; }
.up-own-st.is-busy { padding-left: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--ws-accent-edge); color: var(--ws-accent-ink); }
.up-own-st-n { font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; }
.up-own-st.is-warn { background: var(--warning-tint); box-shadow: inset 0 0 0 1px var(--warning-line); color: var(--warning); }
.up-own-st.is-warn svg { flex: 0 0 auto; }
/* «+ Презентация» — сделать документ по уроку: чип-ссылка набора, значок «+» акцентом */
.up-docs-fchip.is-add svg { color: var(--ws-accent); }

/* ---------- пусто: веер крупнее, чем в «Моих документах» (владелец 07.11, «Свои уроки, ответы: 6 — есть замечание (если своих уроков нет,
   то документы над подписью не видны)»): листы в 1,5 раза больше — видно, что это урок, презентация и самоанализ. Локальная правка: веер
   «Моих документов» (up-docs.css) не меняется ---------- */
.up-own-empty .up-docs-fan { width: 400px; height: 230px; margin-top: 40px; }
.up-own-empty .up-docs-fsheet .up-sh.is-large { --up-sh-k: .46; }
.up-own-empty .up-docs-fsheet:nth-child(1) { margin-left: -78px; transform: translateX(-70px) rotate(-10deg); }
.up-own-empty .up-docs-fsheet:nth-child(2) { margin-left: -106px; transform: translateY(-18px); }
.up-own-empty .up-docs-fsheet:nth-child(3) { margin-left: -106px; transform: translateX(80px) translateY(-9px) rotate(10deg); }

/* ---------- ширины ---------- */
/* телефон: под строкой — список, поэтому без липкой полосы (у «Нового документа» она есть — там вся страница форма): кнопка
   остаётся в строке во всю ширину, стоимость видна (набор на < 640 прячет обе — up-kit.css «ширины») */
@media (max-width: 639px) {
  .up-own-box .up-foot { flex-wrap: wrap; }
  .up-own-box .up-pills { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; -webkit-mask-image: none; mask-image: none; }
  .up-own-box .up-foot > .up-go { display: inline-grid; width: 100%; grid-template-columns: 1fr auto; padding: 0 2px 0 20px; }
  .up-own-box .up-foot > .up-go .up-go-label > span { opacity: 1; transform: none; }
  .up-own-box .up-foot > .up-go[data-ready="false"] .up-go-ic svg { transform: rotate(-90deg); }
  .up-own .up-cost { display: block; margin-top: -4px; }
  /* две строки вместо переноса посередине: «Разбор не списывает документ» / «Сегодня осталось 4 разбора из 5» */
  .up-own-cost b { display: block; }
  .up-own-sep { display: none; }
  .up-own-sub { display: block; }
  .up-own-sub::first-letter { text-transform: uppercase; }
  .up-own .up-own-cost[data-limit="true"] { display: flex; align-items: flex-start; text-align: left; }
  .up-own-text { min-height: 132px; font-size: 16px; line-height: 24px; }
  .up-own-note { justify-content: flex-start; text-align: left; }
  .up-own-file { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 10px; padding: 8px; }
  .up-own-file-ic { width: 44px; height: 44px; }
  .up-own-file-x { width: 44px; height: 44px; }
  /* «…» урока: в «Моих документах» стоит слева от шеврона (right: 54px), здесь шеврона нет — у правого края */
  .up-own-list[data-view="list"] .up-docs-ls-more { right: 4px; }
  .up-own-empty .up-docs-fan { width: min(316px, 100%); height: 187px; margin-top: 44px; }
  .up-own-empty .up-docs-fsheet .up-sh.is-large { --up-sh-k: .36; }
  .up-own-empty .up-docs-fsheet:nth-child(1) { margin-left: -62px; transform: translateX(-58px) rotate(-10deg); }
  .up-own-empty .up-docs-fsheet:nth-child(2) { margin-left: -83px; transform: translateY(-14px); }
  .up-own-empty .up-docs-fsheet:nth-child(3) { margin-left: -83px; transform: translateX(63px) translateY(-8px) rotate(10deg); }
}

@media (max-width: 379px) {  /* 320: веер помещается в 288 px */
  .up-own-empty .up-docs-fan { height: 160px; margin-top: 36px; }
  .up-own-empty .up-docs-fsheet .up-sh.is-large { --up-sh-k: .31; }
  .up-own-empty .up-docs-fsheet:nth-child(1) { margin-left: -53px; transform: translateX(-50px) rotate(-10deg); }
  .up-own-empty .up-docs-fsheet:nth-child(2) { margin-left: -71px; transform: translateY(-12px); }
  .up-own-empty .up-docs-fsheet:nth-child(3) { margin-left: -71px; transform: translateX(54px) translateY(-7px) rotate(10deg); }
}

@media (prefers-reduced-motion: reduce) {
  .up-own-main[data-hl][data-drag="true"] .up-own-box, .up-own:has(.up-own-main[data-hl][data-drag="true"]) .f-side { transition: none; }
}
