/* JIB account linking.
   Mirrors the mobile login screen (apps/jib_home LoginScreen +
   AuthScreenLayout) so the linking flow looks like the app: white ground,
   logo on top, teal-bordered fields at radiusS, JIB pill buttons.
   Tokens from packages/jib_ui — keep in sync. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/BricolageGrotesque-SemiBold.ttf?v=2") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-Regular.otf?v=2") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-Bold.otf?v=2") format("opentype");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* AppColors.greenBase is JibColors.teal — the name is legacy, the brand
     colour is teal. */
  --green-base: #234949;
  --green-light1: #2e5e5e;  /* teal500, pressed/hover primary */
  --teal50: #eaf3f3;        /* ghost button hover */
  --red-base: #f44336;      /* AppColors.redBase */
  --white-base: #ffffff;
  --grey-base: #868a8a;

  --radius-s: 5px;          /* JibDimensions.radiusS — fields */
  --spacing-m: 16px;        /* gridSpacingM */
  --spacing-l: 24px;        /* gridSpacingL */

  --display: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --body: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

/* Single-theme on purpose: the app's login screen is whiteBase only, and this
   page is meant to look like it. Every colour is painted explicitly so a dark
   host never bleeds through. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-l) var(--spacing-m);
  background: var(--white-base);
  color: var(--green-base);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.logo {
  width: 100%;
  max-width: 320px;
  margin: 0 0 40px;
  text-align: center;
}
.logo img {
  height: 60px;
  max-width: 100%;
  object-fit: contain;
}

/* The app gives the form 75% of the width; cap it so it stays readable on a
   desktop browser. */
.form-column {
  width: 100%;
  max-width: 380px;
}

h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  color: var(--green-base);
  margin: 0 0 8px;
  text-align: center;
  text-wrap: balance;
}

.consent {
  font-size: 14px;
  color: var(--grey-base);
  text-align: center;
  margin: 0 0 var(--spacing-l);
}

input[type="email"],
input[type="password"] {
  width: 100%;
  padding: var(--spacing-m);
  margin: 0 0 var(--spacing-m);
  font-family: var(--body);
  font-size: 16px; /* 16px avoids iOS zoom-on-focus */
  color: var(--green-base);
  background: var(--white-base);
  border: 1px solid var(--green-base);
  border-radius: var(--radius-s);
}
input[type="email"]::placeholder,
input[type="password"]::placeholder { color: var(--green-base); opacity: .75; }
input[type="email"]:focus,
input[type="password"]:focus {
  outline: none;
  border-width: 2px;
  padding: 15px; /* keep the box the same size as the 1px state */
}

.error {
  display: block;
  margin: 0 0 var(--spacing-m);
  font-size: 13px;
  color: var(--red-base);
}
.error:empty { display: none; }

/* JibButton — always a StadiumBorder. lg metrics: 36/16 padding, 17px label. */
.btn {
  display: block;
  width: 100%;
  padding: 16px 36px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 17px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color .15s;
}
.btn-primary {
  color: var(--white-base);
  background: var(--green-base);
  border: none;
  margin-top: 8px;
}
.btn-primary:hover { background: var(--green-light1); }

.btn-ghost {
  color: var(--green-base);
  background: transparent;
  border: 1.5px solid var(--green-base);
  margin-top: var(--spacing-m);
}
.btn-ghost:hover { background: var(--teal50); }

.btn:focus-visible {
  outline: 3px solid var(--green-light1);
  outline-offset: 2px;
}

footer {
  width: 100%;
  max-width: 380px;
  margin: 32px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--grey-base);
  text-align: center;
}
footer a { color: var(--grey-base); }

@media (min-width: 600px) {
  .logo img { height: 80px; }
  .logo { margin-bottom: 60px; }
  input[type="email"],
  input[type="password"] { padding: var(--spacing-l) var(--spacing-m); }
  input[type="email"]:focus,
  input[type="password"]:focus { padding: 23px 15px; }
}

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