/*
  Styles for the document intake page.

  The design tokens are copied from the main site rather than imported from
  it. This page is deployed separately and must not depend on the site by so
  much as one request: if the site is down, sending documents still works.

  Same rule as the site — nothing is fetched from another domain. The single
  exception is the bot check, and only when it is switched on.
*/

/*
  Шрифтов у контура нет: файлы никогда не приносили, а объявления остались
  и сыпали по три отказа на каждую загрузку страницы. Системный шрифт —
  это решение, а не поломка: страница и так открывалась им.
*/

:root {
  --abyss: #04141A;
  --deep: #071E26;
  --mid: #0E4A55;
  --t-100: #DFF4F2;
  --t-300: #8FD3D2;
  --t-500: #3FA7AC;
  --g-300: #B6F2CE;
  --g-500: #6FE3A8;
  --sun: #FFC24D;
  --red: #FF8B7B;
  --text: #DCEAEA;
  --dim: #8FAEB2;
  --faint: #5B7A80;
  --line: rgba(143, 174, 178, .2);
  --line-soft: rgba(143, 174, 178, .14);
  --disp: system-ui, sans-serif;
  --ui: system-ui, sans-serif;
  --mono: ui-monospace, monospace;
  --gut: clamp(1.1rem, 3.6vw, 3.5rem);
}

* { box-sizing: border-box }
html { background: var(--abyss); -webkit-text-size-adjust: 100% }
body {
  margin: 0;
  background: var(--abyss);
  color: var(--text);
  font-family: var(--ui);
  font-size: clamp(.95rem, .92rem + .2vw, 1.06rem);
  line-height: 1.66;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--g-500); color: var(--abyss) }
:focus-visible { outline: 2px solid var(--g-500); outline-offset: 3px; border-radius: 3px }
a { color: var(--t-300) }

.wrap { max-width: 52rem; margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut) }

h1, h2 { font-family: var(--disp); margin: 0; letter-spacing: -.04em; line-height: 1.03 }
h1 { font-size: clamp(2.1rem, 1.3rem + 2.8vw, 3.4rem); font-weight: 700; margin-bottom: 1.6rem }
h2 {
  font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem);
  font-weight: 600;
  margin-top: 3rem;
  margin-bottom: 1rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-soft);
}
p { margin: 0 0 1rem; color: var(--dim) }

/* ── header ── */
.nav {
  background: rgba(4, 20, 26, .93);
  border-bottom: 1px solid var(--line-soft);
  position: sticky;
  top: 0;
  z-index: 5;
}
.nav__in {
  max-width: 52rem;
  display: flex;
  gap: .8rem 2rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.brand { text-decoration: none; color: var(--text) }
.brand b { display: block; font-family: var(--disp); font-size: 15px; letter-spacing: -.03em }
.brand i {
  display: block;
  font-style: normal;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 2px;
}
.lock {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--g-300);
  border: 1px solid rgba(111, 227, 168, .4);
  border-radius: 2px;
  padding: .35rem .6rem;
}

.doc { padding-top: clamp(2.4rem, 6vw, 4rem); padding-bottom: 4rem }

/* ── the promise ── */
.promise {
  border: 1px solid rgba(111, 227, 168, .3);
  border-radius: 4px;
  background: linear-gradient(165deg, rgba(14, 74, 85, .4), rgba(7, 30, 38, .8));
  padding: 1.4rem 1.5rem 1.6rem;
}
.promise h2 { margin-top: 0; padding-top: 0; border: 0; font-size: 1.05rem }
.promise ul { margin: 0; padding-left: 1.1rem; color: var(--dim) }
.promise li { margin-bottom: .5rem }
.promise li:last-child { margin-bottom: 0 }

.warn, .error {
  border-left: 3px solid var(--sun);
  background: rgba(255, 194, 77, .08);
  padding: .9rem 1.1rem;
  color: var(--text);
  margin: 1.5rem 0;
}
.error { border-left-color: var(--red); background: rgba(255, 139, 123, .1) }

.lede { max-width: 42rem }

/* ── form ── */
.row { margin-bottom: 1.3rem }
.two { display: grid; gap: 0 1.2rem }
@media (min-width: 38rem) { .two { grid-template-columns: 1fr 1fr } }

label {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--t-500);
  margin-bottom: .5rem;
  line-height: 1.7;
}
.req { color: var(--faint) }

input, select, textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);
  background: rgba(10, 42, 52, .55);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: .75rem .85rem;
  transition: border-color .2s, background .2s;
}
input:hover, select:hover, textarea:hover { border-color: rgba(143, 174, 178, .38) }
input:focus, select:focus, textarea:focus { border-color: var(--g-500); background: rgba(10, 42, 52, .8) }
input[aria-invalid='true'] { border-color: var(--red) }
textarea { resize: vertical }
select { appearance: none }

.hint { font-size: .82rem; color: var(--faint); margin: .45rem 0 0; line-height: 1.6 }

/* ── chosen files ── */
.drop {
  border: 1px dashed rgba(143, 174, 178, .4);
  border-radius: 4px;
  padding: 1.6rem 1.4rem;
  text-align: center;
  transition: border-color .2s, background .2s;
}
.drop.over { border-color: var(--g-500); background: rgba(111, 227, 168, .07) }
/* Поле спрятано от глаз, но НЕ от браузера: `pointer-events: none` здесь
   ломало открытие списка файлов на телефоне. Клавиатурой поле доступно,
   а видимый фокус рисуется на подписи. */
.drop input[type='file'] { position: absolute; width: 1px; height: 1px; opacity: 0 }
.drop:focus-within .linkish { outline: 2px solid var(--g-500); outline-offset: 3px }
label.linkish { cursor: pointer }
.dropline { color: var(--text); margin-bottom: .4rem }
.linkish {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--g-500);
  text-decoration: underline;
  cursor: pointer;
}

.files { list-style: none; margin: 1.2rem 0 1.6rem; padding: 0 }
.files li {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .7rem 0;
  border-top: 1px solid var(--line-soft);
  font-size: .92rem;
}
.files li:last-child { border-bottom: 1px solid var(--line-soft) }
.fname { flex: 1; min-width: 0; overflow-wrap: anywhere }
.fsize { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; color: var(--faint); white-space: nowrap }
.fdrop {
  background: none;
  border: 0;
  color: var(--faint);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.fdrop:hover { color: var(--red) }
.bar { flex: none; width: 5.5rem; height: 3px; background: rgba(143, 174, 178, .22); border-radius: 2px; overflow: hidden }
.bar span { display: block; height: 100%; width: 0; background: var(--g-500); transition: width .25s }
.files li.done .fsize { color: var(--g-300) }
.files li.bad .fsize { color: var(--red) }

/* ── button ── */
.btn {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--g-500);
  color: var(--abyss);
  border: 0;
  border-radius: 2px;
  padding: 1.05rem 1.8rem;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, opacity .2s;
}
.btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 16px 32px -14px rgba(111, 227, 168, .55) }
.btn:disabled { opacity: .45; cursor: default }

.ok { color: var(--g-300); border-top: 0; padding-top: 0 }
.case { font-family: var(--mono); font-size: 1.1em; color: var(--g-300); letter-spacing: .04em }

footer {
  border-top: 1px solid var(--line-soft);
  background: var(--deep);
  padding: 2rem 0 2.4rem;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  line-height: 2;
  color: var(--faint);
}
footer p { color: inherit; margin: 0 }

/* ── verified link, "what you have sent", staff page ── */
.asline { color: var(--text); border-left: 3px solid var(--g-500); padding: .2rem 0 .2rem 1rem; margin: 2rem 0 0 }
.asline strong { color: var(--g-300); font-weight: 600 }
.btnlink { display: inline-block; text-decoration: none }

.subs { list-style: none; margin: 1.5rem 0 2rem; padding: 0 }
.subs > li { padding: 1.2rem 0; border-top: 1px solid var(--line-soft) }
.subs .files { margin: .4rem 0 .6rem }
.subhead { color: var(--text); margin: 0 }
.hint.bad { color: var(--red) }

h3, h4 { font-family: var(--disp); color: var(--text); margin: 0 0 .5rem; letter-spacing: -.02em }
h3 { font-size: 1.15rem }
h4 { font-size: .95rem; margin-top: 1.4rem }
.card { border: 1px solid var(--line); border-radius: 4px; padding: 1.2rem 1.3rem; margin: 0 0 1.4rem; background: rgba(7, 30, 38, .6) }
.meta { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--t-500); margin-bottom: .6rem }
.linkrow { font-family: var(--mono); font-size: 11px; color: var(--t-300); overflow-wrap: anywhere; margin: 0 0 .3rem }
.actions { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: .8rem 0 0 }
.addsender { display: grid; gap: .6rem; margin-top: .8rem }
@media (min-width: 44rem) { .addsender { grid-template-columns: 1fr 1.3fr 1fr auto } }
.addsender .btn { padding: .8rem 1.1rem }
.minelink { margin-top: 1.2rem }