/* get-links. Один мотив на весь сайт — гиперссылка: синий и подчёркивание значат «можно получить»,
   фиолетовый (цвет посещённой ссылки) — «уже сохранено», растущее подчёркивание — прогресс. */
@font-face {
  font-family: "Geologica"; src: url("/fonts/geologica.woff2") format("woff2");
  font-weight: 300 700; font-display: swap;
}
:root {
  --paper: #ffffff; --wash: #eef1f7; --ink: #101828; --soft: #55607a; --rule: #d5dbe8;
  --link: #1a3beb; --visited: #6b2fb3; --alarm: #b3261e; --on-link: #ffffff;
  --measure: 44rem;
  font-family: "Geologica", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight: 350; line-height: 1.5; font-size: 106.25%;
  color: var(--ink); background: var(--paper);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #0d1222; --wash: #182038; --ink: #e9edf7; --soft: #9aa6c2; --rule: #2a3454;
          --link: #8ea5ff; --visited: #c6a0ff; --alarm: #ff8a80; --on-link: #0d1222; }
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--paper); }
main, .top, .foot { width: 100%; max-width: calc(var(--measure) + 3rem); margin-inline: auto; padding-inline: 1.5rem; }
main { flex: 1; }
h1, h2, h3, p, ol { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; border-radius: 2px; }

/* шапка */
.top { display: flex; justify-content: space-between; align-items: baseline; padding-block: 1.25rem; }
.brand { font-weight: 650; font-size: 1.125rem; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.brand-dash { color: var(--link); }
.lang { display: flex; gap: 1rem; }
.lang button { all: unset; cursor: pointer; font-size: 0.875rem; color: var(--link); text-decoration: underline; text-underline-offset: 0.2em; }
.lang button[aria-pressed="true"] { color: var(--ink); text-decoration: none; cursor: default; }
.lang button:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }

/* первый экран */
.hero { padding-block: clamp(2rem, 9vh, 6rem) 3rem; }
h1 { font-size: clamp(2.5rem, 8.5vw, 4.75rem); line-height: 1.02; font-weight: 640; letter-spacing: -0.035em; }
.ask { display: flex; gap: 0.75rem; margin-top: clamp(1.75rem, 5vh, 3rem); align-items: stretch; }
.field { flex: 1; min-width: 0; display: flex; align-items: center; border-bottom: 3px solid var(--link); transition: border-color .15s; }
.field:focus-within { border-bottom-color: var(--ink); }
#url {
  flex: 1; min-width: 0; border: 0; background: none; padding: 0.6rem 0; font: inherit;
  font-size: clamp(1.125rem, 2.6vw, 1.5rem); color: var(--link); text-overflow: ellipsis;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em;
}
#url:placeholder-shown { text-decoration: none; }
#url::placeholder { color: var(--soft); opacity: .75; }
#url:focus { outline: none; }
.ghost { all: unset; cursor: pointer; padding: 0.4rem 0.2rem 0.4rem 0.9rem; font-size: 0.9375rem; color: var(--soft); }
.ghost:hover { color: var(--link); }
.ghost:focus-visible { outline: 3px solid var(--link); }
.primary {
  font: inherit; font-weight: 600; font-size: 1.0625rem; cursor: pointer; white-space: nowrap;
  padding: 0 1.6rem; min-height: 3.25rem; border: 0; border-radius: 999px; background: var(--link); color: var(--on-link);
}
.primary:hover { filter: brightness(1.12); }
.primary:disabled { cursor: progress; opacity: .7; }
.hint { margin-top: 0.9rem; color: var(--soft); font-size: 0.9375rem; }
.sites { border: 0; margin-top: 0.35rem; font-size: 0.9375rem; max-width: 38rem; }
.sites summary { display: inline; padding: 0; font-weight: 400; color: var(--link); text-decoration: underline; text-underline-offset: 0.2em; }
.sites summary::after, .sites[open] summary::after { content: none; }   /* значок +/− нужен только в «Вопросах» */
.sites p { padding: 0.5rem 0 0; color: var(--soft); }
.error { margin-top: 1rem; padding: 0.8rem 1rem; border-left: 3px solid var(--alarm); background: color-mix(in srgb, var(--alarm) 8%, transparent); max-width: 38rem; }
/* пока ищем — подчёркивание поля «бежит» */
.busy .field { border-image: linear-gradient(90deg, var(--link) 0 40%, var(--rule) 40% 60%, var(--link) 60%) 1; animation: run 1.1s linear infinite; background: linear-gradient(90deg, transparent, var(--wash), transparent) 0 0 / 50% 100% no-repeat; }
@keyframes run { from { background-position: -50% 0; } to { background-position: 150% 0; } }

/* результат */
.result { padding-bottom: 3.5rem; scroll-margin-top: 1rem; }
.media { display: flex; gap: 1.25rem; align-items: flex-start; padding: 1.25rem; background: var(--wash); border-radius: 14px; }
.thumb { flex: none; width: 11rem; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--rule); }
.thumb.square { width: 6.5rem; aspect-ratio: 1; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb.empty img { display: none; }
.meta { min-width: 0; }
.meta h2 { font-size: 1.25rem; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.meta p { margin-top: 0.35rem; color: var(--soft); font-size: 0.9375rem; }
#groups h3 { margin: 2rem 0 0.25rem; font-size: 0.9375rem; font-weight: 500; color: var(--soft); }

.files, .files tbody { display: block; width: 100%; }
.files tr {
  position: relative; display: grid; grid-template-columns: 9.5rem 3.5rem 6.5rem 1fr; column-gap: 1rem; align-items: baseline;
  padding: 0.85rem 0; border-bottom: 1px solid var(--rule);
}
.files tr::after {            /* подчёркивание-прогресс */
  content: ""; position: absolute; left: 0; bottom: -1px; height: 3px; width: var(--p, 0%);
  background: var(--link); transition: width .6s ease; opacity: 0;
}
.files tr[data-phase="queued"]::after, .files tr[data-phase="downloading"]::after, .files tr[data-phase="converting"]::after { opacity: 1; }
.files tr[data-phase="queued"]::after, .files tr[data-phase="converting"]::after { width: 100%; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.files td { padding: 0; }
.files .q { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.files .f, .files .s { white-space: nowrap; color: var(--soft); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.files .a { text-align: right; display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; justify-content: flex-end; align-items: baseline; }
.act {
  all: unset; cursor: pointer; color: var(--link); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em;
}
.act:hover { text-decoration-thickness: 3px; }
.act:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; border-radius: 2px; }
.act.saved { color: var(--visited); font-weight: 500; }
.status { color: var(--soft); font-variant-numeric: tabular-nums; }
.rowerr { color: var(--alarm); font-size: 0.9375rem; text-align: right; max-width: 24rem; }
.note { margin-top: 1rem; color: var(--soft); font-size: 0.875rem; }
.promo { margin-top: 2rem; padding: 1rem 1.25rem; border: 1px solid var(--rule); border-radius: 14px; }

/* пояснения */
.how, .faq { padding-block: 2.5rem; border-top: 1px solid var(--rule); max-width: 38rem; }
.how h2, .faq h2 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 1.25rem; }
.how ol { padding-left: 1.4rem; display: grid; gap: 0.9rem; }
.how li::marker { color: var(--link); font-weight: 600; }
.how strong { font-weight: 600; }
details { border-bottom: 1px solid var(--rule); }
summary { cursor: pointer; padding: 0.9rem 0; font-weight: 500; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--link); font-weight: 400; font-size: 1.25rem; line-height: 1; }
details[open] summary::after { content: "−"; }
details p { padding-bottom: 1.1rem; color: var(--soft); }

.foot { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; padding-block: 1.5rem 2rem; font-size: 0.875rem; border-top: 1px solid var(--rule); }
.foot a, .doc a { color: var(--link); text-underline-offset: 0.2em; }
.foot a:visited { color: var(--visited); }

/* страница документов */
.doc { max-width: 38rem; padding-block: 2rem 4rem; }
.doc h1 { font-size: 2.25rem; letter-spacing: -0.03em; margin-bottom: 0.5rem; }
.doc h2 { font-size: 1.375rem; font-weight: 600; margin: 2.5rem 0 0.75rem; scroll-margin-top: 1rem; }
.doc p, .doc li { margin-bottom: 0.75rem; }
.doc .draft { padding: 0.8rem 1rem; border-left: 3px solid var(--alarm); background: color-mix(in srgb, var(--alarm) 8%, transparent); }

@media (max-width: 36rem) {
  :root { font-size: 100%; }
  .ask { flex-direction: column; }
  .primary { width: 100%; }
  .media { flex-direction: column; }
  .thumb { width: 100%; }
  .thumb.square { width: 6.5rem; }
  .files tr { grid-template-columns: auto auto 1fr; row-gap: 0.5rem; }
  .files .s { text-align: right; }
  .files .a { grid-column: 1 / -1; justify-content: flex-start; text-align: left; }
  .rowerr { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}