/* Aloft — airmail dispatch desk.
   A build gets checked in, stamped, and issued a pass with a stub. */

:root {
  --ink: #16202e;
  --ink-soft: #566276;
  --ink-faint: #8b94a2;
  --paper: #e8eae4;
  --card: #fcfcfa;
  --line: #ccd0c8;
  --line-strong: #2a3648;
  --red: #bd3a2c;
  --blue: #22509e;
  --green: #2c6a4f;
  --amber: #97621a;

  --radius: 3px;
  --shadow: 0 1px 0 rgba(22, 32, 46, 0.08), 0 12px 28px -18px rgba(22, 32, 46, 0.5);

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  background-image:
    linear-gradient(rgba(255,255,255,.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.55) 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--ink);
  font: 400 16px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--display); font-weight: 900; letter-spacing: -0.02em; margin: 0; }
p { margin: 0 0 1rem; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 2px; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff;
  padding: .6rem 1rem; z-index: 20;
}
.skip:focus { left: 0; }

/* ---------- masthead ---------- */

.masthead {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: 1120px; margin: 0 auto; padding: 1.4rem 1.5rem;
}
.wordmark {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--display); font-weight: 900; font-size: 1.32rem;
  letter-spacing: -0.045em; color: var(--ink); text-decoration: none;
}
.wordmark__mark {
  width: 22px; height: 22px; border-radius: 50%;
  background: repeating-linear-gradient(135deg, var(--red) 0 5px, transparent 5px 10px, var(--blue) 10px 15px, transparent 15px 20px);
  border: 1.5px solid var(--line-strong);
}
.masthead__nav { display: flex; align-items: center; gap: 1.1rem; font-size: .93rem; }
.masthead__nav a { color: var(--ink-soft); text-decoration: none; }
.masthead__nav a:hover { color: var(--ink); text-decoration: underline; }
.masthead__nav form { margin: 0; }
.linkish {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--ink-soft); text-decoration: none;
}
.linkish:hover { color: var(--ink); text-decoration: underline; }

/* ---------- shell ---------- */

.shell { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem 5rem; }
.shell--narrow { max-width: 640px; }

/* ---------- hero ---------- */

.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: 3.2rem; align-items: start; padding: 2.2rem 0 4rem; }
.hero__eyebrow {
  font: 500 .74rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft); display: flex; align-items: center; gap: .6rem; margin-bottom: 1.4rem;
}
.hero__eyebrow::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.hero h1 { font-size: clamp(2.4rem, 5.4vw, 3.9rem); line-height: .96; }
.hero h1 em { font-style: normal; color: var(--red); }
.hero__lede { font-size: 1.08rem; color: var(--ink-soft); max-width: 42ch; margin-top: 1.3rem; }

.route { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; gap: .1rem; }
.route li {
  display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: baseline;
  padding: .7rem 0; border-top: 1px solid var(--line);
  font-size: .93rem; color: var(--ink-soft);
}
.route li:last-child { border-bottom: 1px solid var(--line); }
.route b { font: 500 .78rem var(--mono); color: var(--ink); letter-spacing: .06em; }

/* ---------- dropzone ---------- */

.checkin {
  background: var(--card); border: 1.5px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.checkin__band {
  height: 9px;
  background: repeating-linear-gradient(135deg, var(--red) 0 9px, #fcfcfa 9px 18px, var(--blue) 18px 27px, #fcfcfa 27px 36px);
  border-bottom: 1.5px solid var(--line-strong);
}
.checkin__body { padding: 1.6rem; }
.checkin h2 { font-size: 1.05rem; letter-spacing: -0.01em; }
.checkin__hint { font-size: .88rem; color: var(--ink-soft); margin: .35rem 0 1.2rem; }

.drop {
  border: 1.5px dashed var(--line-strong); border-radius: var(--radius);
  padding: 2.1rem 1.2rem; text-align: center; background: #f4f5f0;
  transition: background .16s ease, border-color .16s ease;
  cursor: pointer; display: block; width: 100%;
}
.drop:hover, .drop.is-over { background: #eef0e8; border-color: var(--blue); }
.drop__icon { width: 34px; height: 34px; margin: 0 auto .8rem; display: block; color: var(--ink-soft); }
.drop__title { font-family: var(--display); font-weight: 700; font-size: 1rem; }
.drop__meta { font: 400 .8rem var(--mono); color: var(--ink-faint); margin-top: .4rem; }

.options { margin-top: 1.2rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.options summary { cursor: pointer; font-size: .88rem; color: var(--ink-soft); }
.options__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-top: .9rem; }
.field { display: grid; gap: .32rem; }
.field label { font: 500 .72rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.field input, .field textarea, .field select {
  font: 400 .93rem var(--body); color: var(--ink);
  padding: .55rem .65rem; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: #fff; width: 100%;
}
.field textarea { resize: vertical; min-height: 74px; }
.field--wide { grid-column: 1 / -1; }

/* ---------- progress ---------- */

.progress { margin-top: 1.2rem; }
.progress__track { height: 8px; background: #e3e5dd; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; }
.progress__bar { height: 100%; width: 0; background: var(--blue); transition: width .18s ease; }
.progress__label { font: 400 .8rem var(--mono); color: var(--ink-soft); margin-top: .5rem; }

.notice {
  margin-top: 1rem; padding: .75rem .9rem; border-left: 3px solid var(--red);
  background: #fbf0ee; font-size: .9rem; color: #7d281e;
}
.notice--warn { border-color: var(--amber); background: #fbf4e8; color: #6d4712; }
.notice--info { border-color: var(--blue); background: #eef2fa; color: #1b3d78; }

/* ---------- the pass (signature) ---------- */

.pass {
  position: relative; background: var(--card);
  border: 1.5px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: var(--shadow); display: grid; grid-template-columns: minmax(0,1fr) 208px;
}
.pass::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 9px;
  background: repeating-linear-gradient(135deg, var(--red) 0 9px, #fcfcfa 9px 18px, var(--blue) 18px 27px, #fcfcfa 27px 36px);
  border-bottom: 1.5px solid var(--line-strong);
}
.pass__main { padding: 2.1rem 1.6rem 1.5rem; min-width: 0; }
.pass__stub {
  padding: 2.1rem 1.2rem 1.5rem; text-align: center;
  border-left: 1.5px dashed var(--line-strong); background: #f6f7f2;
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
}
/* punch holes on the perforation */
.pass__stub::before, .pass__stub::after {
  content: ""; position: absolute; width: 15px; height: 15px; border-radius: 50%;
  background: var(--paper); border: 1.5px solid var(--line-strong);
  right: 200px;
}
.pass__stub::before { top: -8px; clip-path: inset(50% 0 0 0); }
.pass__stub::after { bottom: -8px; clip-path: inset(0 0 50% 0); }

.pass__head { display: flex; gap: .95rem; align-items: center; }
.pass__icon {
  width: 56px; height: 56px; border-radius: 12px; border: 1px solid var(--line);
  object-fit: cover; background: #eceee7; flex: none;
}
.pass__name { font-family: var(--display); font-weight: 900; font-size: 1.35rem; line-height: 1.1; word-break: break-word; }
.pass__id { font: 400 .78rem var(--mono); color: var(--ink-soft); word-break: break-all; margin-top: .2rem; }

.tag {
  display: inline-block; font: 500 .68rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  padding: .32rem .5rem; border: 1px solid currentColor; border-radius: 2px;
}
.tag--ios { color: var(--ink); }
.tag--android { color: var(--green); }
.tag--muted { color: var(--ink-faint); }

.spec { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; margin-top: 1.4rem; border-top: 1px solid var(--line); }
.spec div { padding: .6rem 0; border-bottom: 1px solid var(--line); min-width: 0; }
.spec dt { font: 500 .68rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.spec dd { margin: .3rem 0 0; font-size: .92rem; word-break: break-word; }
.spec dd.mono { font-family: var(--mono); font-size: .82rem; }

.linkrow { display: flex; gap: .5rem; margin-top: 1.3rem; }
.linkrow input {
  flex: 1; min-width: 0; font: 400 .84rem var(--mono); padding: .6rem .7rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: #fff; color: var(--ink);
}

.stub__label { font: 500 .66rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.stub__qr { width: 148px; height: 148px; background: #fff; border: 1px solid var(--line); padding: 6px; }
.stub__qr svg { width: 100%; height: 100%; display: block; }
.stub__expiry { font: 500 .82rem var(--mono); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: 600 .95rem var(--body); padding: .68rem 1.15rem; cursor: pointer;
  background: var(--ink); color: #fff; border: 1.5px solid var(--ink); border-radius: var(--radius);
  text-decoration: none; transition: transform .12s ease, background .12s ease;
}
.btn:hover { background: #23324a; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn--small { padding: .42rem .75rem; font-size: .85rem; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { background: #eef0e8; }
.btn--wide { width: 100%; padding: .95rem 1.2rem; font-size: 1.02rem; }
.btn--go { background: var(--blue); border-color: var(--blue); }
.btn--go:hover { background: #1c4488; }
.btn--danger { color: var(--red); border-color: var(--red); background: transparent; }
.btn--danger:hover { background: #fbf0ee; }

/* ---------- reads panel ---------- */

.reads { border-top: 1.5px solid var(--line-strong); padding-top: 2.4rem; }
.reads h2 { font-size: 1.5rem; }
.reads__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; margin-top: 1.6rem; }
.reads__grid h3 { font-size: .95rem; font-weight: 700; }
.reads__grid ul { list-style: none; margin: .9rem 0 0; padding: 0; }
.reads__grid li { padding: .42rem 0 .42rem 1.15rem; position: relative; font-size: .92rem; color: var(--ink-soft); }
.reads__grid li::before { content: "→"; position: absolute; left: 0; color: var(--line-strong); font-size: .8rem; }

/* ---------- install page ---------- */

body.install { display: flex; flex-direction: column; min-height: 100dvh; }
.install-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.card {
  width: 100%; max-width: 460px; background: var(--card);
  border: 1.5px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden;
}
.card__band {
  height: 9px;
  background: repeating-linear-gradient(135deg, var(--red) 0 9px, #fcfcfa 9px 18px, var(--blue) 18px 27px, #fcfcfa 27px 36px);
  border-bottom: 1.5px solid var(--line-strong);
}
.card__body { padding: 1.8rem 1.5rem 1.6rem; }
.card__app { display: flex; gap: 1rem; align-items: center; }
.card__app img, .card__app .placeholder {
  width: 64px; height: 64px; border-radius: 14px; border: 1px solid var(--line); flex: none; background: #eceee7;
}
.card__title { font-family: var(--display); font-weight: 900; font-size: 1.4rem; line-height: 1.1; word-break: break-word; }
.card__version { font: 400 .82rem var(--mono); color: var(--ink-soft); margin-top: .25rem; }
.card__actions { margin-top: 1.5rem; display: grid; gap: .6rem; }
.card__note {
  margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line);
  font-size: .9rem; color: var(--ink-soft); white-space: pre-wrap;
}
.card__qr { text-align: center; margin-top: 1.4rem; padding-top: 1.3rem; border-top: 1px dashed var(--line-strong); }
.card__qr svg { width: 168px; height: 168px; }
.foot-meta { font: 400 .76rem/1.5 var(--mono); color: var(--ink-faint); text-align: center; padding: 0 1.5rem 2rem; }
.steps { list-style: none; margin: 1rem 0 0; padding: 0; counter-reset: step; }
.steps li {
  counter-increment: step; position: relative; padding: .35rem 0 .35rem 1.7rem;
  font-size: .88rem; color: var(--ink-soft);
}
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: .4rem;
  width: 1.15rem; height: 1.15rem; border: 1px solid var(--line-strong); border-radius: 50%;
  font: 500 .66rem/1.05rem var(--mono); text-align: center; color: var(--ink);
}

/* ---------- table ---------- */

.page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem 0 1.8rem; }
.page-head h1 { font-size: 2rem; }
.page-head p { margin: .4rem 0 0; color: var(--ink-soft); font-size: .93rem; }

.builds { width: 100%; border-collapse: collapse; font-size: .92rem; background: var(--card); border: 1.5px solid var(--line-strong); }
.builds th {
  text-align: left; font: 500 .68rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); padding: .8rem .9rem; border-bottom: 1.5px solid var(--line-strong);
}
.builds td { padding: .85rem .9rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.builds tr:last-child td { border-bottom: 0; }
.builds__app { display: flex; align-items: center; gap: .7rem; }
.builds__app img { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); }
.builds__name { font-weight: 600; }
.builds__id { font: 400 .74rem var(--mono); color: var(--ink-faint); }
.builds__actions { display: flex; gap: .4rem; justify-content: flex-end; flex-wrap: wrap; }
.state { font: 500 .7rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.state--live { color: var(--green); }
.state--gone { color: var(--ink-faint); }

.empty { border: 1.5px dashed var(--line-strong); padding: 3rem 1.5rem; text-align: center; background: var(--card); }
.empty h2 { font-size: 1.2rem; }
.empty p { color: var(--ink-soft); margin: .5rem 0 1.2rem; }

/* ---------- auth / message ---------- */

.panel { background: var(--card); border: 1.5px solid var(--line-strong); box-shadow: var(--shadow); padding: 2rem 1.7rem; margin-top: 2rem; }
.panel h1 { font-size: 1.7rem; }
.panel p { color: var(--ink-soft); font-size: .95rem; }
.panel .field { margin-top: 1.1rem; }
.panel .btn { margin-top: 1.4rem; }
.panel__alt { margin-top: 1.2rem; font-size: .9rem; color: var(--ink-soft); }

/* ---------- footer ---------- */

.footer {
  max-width: 1120px; margin: 0 auto; padding: 1.8rem 1.5rem 3rem;
  border-top: 1px solid var(--line); font-size: .84rem; color: var(--ink-faint);
}
.footer p { margin: 0 0 .4rem; }
.footer__warn { color: var(--amber); }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 2.2rem; padding-bottom: 3rem; }
  .reads__grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .pass { grid-template-columns: 1fr; }
  .pass__stub { border-left: 0; border-top: 1.5px dashed var(--line-strong); }
  .pass__stub::before, .pass__stub::after { display: none; }
  .builds thead { display: none; }
  .builds, .builds tbody, .builds tr, .builds td { display: block; width: 100%; }
  .builds tr { border-bottom: 1.5px solid var(--line-strong); padding: .4rem 0; }
  .builds td { border: 0; padding: .3rem .9rem; }
  .builds__actions { justify-content: flex-start; padding-bottom: .6rem; }
}

@media (max-width: 540px) {
  .options__grid { grid-template-columns: 1fr; }
  .spec { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}