/* The Travel app's start screen, in the Labs Travel brand kit's light theme. The colours and radii
   are the kit's tokens (labs-travel-tokens.css, generated from Labs-Travel-Brand-Kit/Tokens/tokens.json
   by scripts/generate-brand-assets.mjs); nothing below picks a colour of its own. Light only; the
   agency's own colours take over once its portal opens.

   The ground is the kit's page colour, --lt-surface-page: the launch image is drawn on it and the web
   view's background (capacitor.config.ts) is set to it, so launch image → door → screen never flash. */
@import url("./labs-travel-tokens.css");

/* The kit's display face for titles, bundled so the screen needs no network (Poppins, SIL OFL 1.1 —
   fonts/OFL.txt; the Latin files of @fontsource/poppins 5.3.0). Text stays in the phone's own face,
   the nearest thing to the kit's Inter that an offline screen can count on. */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/poppins-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/poppins-latin-700-normal.woff2") format("woff2");
}
:root {
  --font-display: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-text: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color-scheme: light;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  background: var(--lt-surface-page);
  color: var(--lt-ink);
  font: 16px/1.5 var(--font-text);
  -webkit-text-size-adjust: 100%;
}
.shell {
  min-height: 100vh;
  max-width: 480px;
  margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* The product's lockup, LABS • TRAVEL: the kit's outlined file (labs-travel-lockup.svg), never live
   type. It heads every screen of the launcher (index.html and offline.html); the maker had the door.
   168 px wide (the kit's minimum is 140), with the kit's clear space of two bar heights around it. */
.lockup {
  display: flex;
  padding: 5px 0;
}
.lockup img {
  display: block;
  width: 168px;
  height: auto;
}

/* The door — the Quobo Labs wordmark holds the first screen on first paint
   (index.html). It has no entrance: the static HTML carries it, so it is
   simply there when the web view paints, on the same ground as the launch
   image. It holds 1100 ms, leaves in 280 ms with one fade, and the screen
   under it fades up in its place (.door-on). shell.js removes the node once
   the fade has ended, and drops both at once when a remembered agency skips
   the beat. Reduced motion keeps the picture and drops the fades. */
.door {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  background: var(--lt-surface-page);
  animation: door-out 280ms ease both 1100ms;
}
.door img {
  width: min(72vw, 300px);
  height: auto;
}
@keyframes door-out {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
.door-on > * {
  animation: fade-up 280ms ease both 1100ms;
}
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .door {
    animation-duration: 1ms;
  }
  .door-on > * {
    animation: none;
  }
}
.view {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Borders before shadows: a card on the page is white with a line edge. */
.card {
  background: var(--lt-surface);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-radius-lg);
  padding: 20px;
}
h1 {
  margin: 0 0 8px;
  font: 600 22px/28px var(--font-display);
  color: var(--lt-ink);
}
h2 {
  margin: 0 0 4px;
  font: 600 17px/24px var(--font-display);
  color: var(--lt-ink);
}
p {
  margin: 0 0 12px;
  color: var(--lt-ink-muted);
}
label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
  color: var(--lt-ink);
}
input {
  width: 100%;
  font: inherit;
  font-size: 17px;
  padding: 12px 14px;
  border: 1px solid var(--lt-line-strong);
  border-radius: var(--lt-radius-md);
  background: var(--lt-surface);
  color: var(--lt-ink);
}
/* The kit's focus ring: 2 px, offset 2 px, on everything that takes focus. */
:focus-visible,
input:focus {
  outline: 2px solid var(--lt-focus);
  outline-offset: 2px;
}
input.code {
  letter-spacing: 0.3em;
  font-size: 22px;
  text-align: center;
}
.btn {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 13px 16px;
  border: 0;
  border-radius: var(--lt-radius-md);
  background: var(--lt-action-primary);
  color: var(--lt-action-primary-ink);
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn[disabled] {
  opacity: 0.6;
}
.btn.secondary {
  background: var(--lt-surface);
  color: var(--lt-ink);
  border: 1px solid var(--lt-line-strong);
}
.link {
  background: none;
  border: 0;
  padding: 8px 0;
  font: inherit;
  font-size: 15px;
  color: var(--lt-ink-link);
  cursor: pointer;
  text-align: left;
}
.row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
/* Status notes: the text stays ink on a light tint of the status colour (the kit's status-danger
   #c2183a and status-warning #b54708, at 7 % fill and 35 % edge). rgba, not color-mix(), because the
   app supports iOS 15. */
.error {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--lt-radius-md);
  background: rgba(194, 24, 58, 0.07);
  border: 1px solid rgba(194, 24, 58, 0.35);
  color: var(--lt-ink);
  font-size: 14px;
}
.note {
  padding: 10px 12px;
  border-radius: var(--lt-radius-md);
  background: rgba(181, 71, 8, 0.07);
  border: 1px solid rgba(181, 71, 8, 0.35);
  color: var(--lt-ink);
  font-size: 14px;
}
.agencies {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.agency {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: var(--lt-surface);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-radius-lg);
  font: inherit;
  text-align: left;
  color: var(--lt-ink);
  cursor: pointer;
}
.agency:active {
  background: var(--lt-surface-info);
}
/* The agency's own logo, in a tile: the page colour behind a dark logo, Harbour behind a light one. */
.agency .logo {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: var(--lt-radius-lg);
  background: var(--lt-surface-page);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-weight: 700;
  color: var(--lt-brand-harbour);
}
.agency .logo.on-dark {
  background: var(--lt-brand-harbour);
}
.agency .logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.agency .name {
  font-weight: 600;
}
.agency .host {
  font-size: 13px;
  color: var(--lt-ink-muted);
}
.agency .chev {
  margin-left: auto;
  color: var(--lt-ink-muted);
  font-size: 22px;
}
.trip dl {
  margin: 8px 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  font-size: 15px;
}
.trip dt {
  color: var(--lt-ink-muted);
}
.trip dd {
  margin: 0;
  font-weight: 500;
}
.docs {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.docs button {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-radius-md);
  background: var(--lt-surface);
  font: inherit;
  color: var(--lt-ink-link);
  cursor: pointer;
}
.muted {
  color: var(--lt-ink-muted);
  font-size: 14px;
}
.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--lt-line);
  border-top-color: var(--lt-action-primary);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  margin: 8px auto;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.foot {
  text-align: center;
  font-size: 13px;
}
.foot a {
  color: var(--lt-ink-muted);
  display: inline-block;
  padding: 10px 8px;
}