/*
  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.
*/

@font-face {
  font-family: 'Bricolage';
  src: url('/fonts/bricolage-grotesque.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('/fonts/instrument-sans.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'Martian Mono';
  src: url('/fonts/martian-mono.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
}

: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: 'Bricolage', system-ui, sans-serif;
  --ui: 'Instrument Sans', system-ui, sans-serif;
  --mono: 'Martian 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) }
.drop input[type='file'] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none }
.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 }