/* The sign-in document, built to the supplied comp.
   It links /css/app.css first, so every token, button, field and segment is the
   same object as in the app. Everything below is this page only.

   Two rules this file learned the hard way:

   Nothing here hard-codes a text colour. An earlier version set the page to
   #FFFFFF while the type kept taking its colour from the tokens, which flip under
   prefers-color-scheme, so on a machine in dark mode it was near-white type on a
   white page. The page is pinned to the light palette on <html> instead.

   The bar, the copy and the card share .login-wrap, so the logo sits on the same
   left edge as the headline and the language switch on the same right edge as
   the card. */

.login-body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: var(--ink);
}

/* ------------------------------------------------------------- the backdrop */

/* The photograph is the page's background rather than a picture inside it, the
   way the comp has it. It is anchored bottom-left, where the subject is, and two
   white gradients on top of it fade it out towards the top and towards the right
   so that the copy and the card always sit on something plain. No overlay
   element and no mask: three layers of one background property, which is one
   paint and cannot get out of step with the layout. */
.login-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-color: var(--surface);
  background-image:
    /* A white veil, heavy at the top where the copy sits and clearing towards the
       bottom where the subject is. This is what lets type sit straight on the
       photograph the way the comp does it. */
    linear-gradient(to bottom, rgba(255, 255, 255, .93) 0%, rgba(255, 255, 255, .84) 26%, rgba(255, 255, 255, .5) 46%, rgba(255, 255, 255, .06) 68%, rgba(255, 255, 255, 0) 82%),
    /* and a second one that carries the picture into plain white before the card */
    linear-gradient(to right, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .72) 54%, var(--surface) 63%),
    image-set(url("/assets/art/bg-front-1800.webp") 1x);
  background-repeat: no-repeat;
  /* Full bleed, anchored to the subject rather than to the frame: she is a third
     of the way into the picture, so the left edge is where she is. */
  /* Full bleed, anchored to the subject rather than to the frame: she is a third
     of the way into the picture, so the left edge is where she is.

     The picture is not moved to make room for the copy: the copy is written to
     fit above her. Measured from the file itself, her face occupies 22 to 36 per
     cent of the image width and 45 to 70 per cent of its height, which at cover
     puts the top of her head at about 45 per cent of the viewport. Everything in
     the brand column is sized to finish above that line. */
  background-position: left center;
  background-size: auto, auto, cover;
}

/* The soft shapes behind the card in the comp: one blue wash and one orange arc
   in the top right corner. Drawn, not fetched. */
.login-deco {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.deco-blob {
  position: absolute;
  top: -22vh;
  right: -12vw;
  width: 54vw;
  height: 70vh;
  border-radius: 46% 54% 40% 60% / 52% 44% 56% 48%;
  background: linear-gradient(150deg, color-mix(in srgb, var(--brand) 13%, transparent), color-mix(in srgb, var(--brand) 3%, transparent) 70%);
}
/* The ring is centred exactly on the page's top right corner and only its inner
   quarter is kept, so the stroke starts on the top edge and finishes on the right
   edge with nothing floating in between. --r is the radius: the box is twice it,
   and the offsets are one of it. */
.deco-arc {
  --r: 210px;
  position: absolute;
  top: calc(var(--r) * -1);
  right: calc(var(--r) * -1);
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  border-radius: 50%;
  border: 20px solid color-mix(in srgb, var(--accent) 78%, transparent);
  clip-path: inset(50% 50% 0 0);
}

.login-wrap {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding-left: calc(clamp(20px, 4vw, 44px) + env(safe-area-inset-left, 0px));
  padding-right: calc(clamp(20px, 4vw, 44px) + env(safe-area-inset-right, 0px));
}

/* ---------------------------------------------------------------- the bar */

.login-bar {
  padding-top: calc(20px + env(safe-area-inset-top, 0px));
  padding-bottom: 14px;
}
.login-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.login-logo { width: clamp(164px, 15vw, 200px); height: auto; display: block; }

/* The switch sits on the photograph, so it carries its own surface. */
.login-bar .segment {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid var(--line-soft);
  backdrop-filter: blur(6px);
}

/* ------------------------------------------------------------- the columns */

/* The grid fills the height so the copy can start at the top of it while the
   card stays centred. Centring the grid itself pushed the copy down onto the
   subject's face, which is the one place on the page text must not land. */
.login { flex: 1; display: flex; align-items: stretch; }

.login-grid {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 452px;
  gap: clamp(32px, 5vw, 76px);
  /* The card and the copy start on the same line. Centring the card against a
     taller copy column is what made the two halves look off-balance. */
  align-items: start;
  min-height: 0;
  padding-top: clamp(20px, 5vh, 56px);
  padding-bottom: calc(clamp(28px, 5vh, 56px) + env(safe-area-inset-bottom, 0px));
}

/* ------------------------------------------------------------ brand column */

.login-brand { min-width: 0; padding-top: 4px; }

/* The eyebrow is the artwork cut from the supplied logo sheet, not type set to
   look like it, so the letterforms and the spacing are the real ones. */
.login-tagline-art {
  display: block;
  width: min(240px, 74%);
  height: auto;
  margin: 0 0 12px;
}

/* The Thai setting of the same line. The artwork is lettered; this is typeset,
   so it is matched on weight and colour rather than pretending to be the same
   drawing. */
.login-tagline-th {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink-3);
}
.login-signoff-th { font-size: 11.5px; color: var(--ink-4); opacity: .8; }

.login-headline {
  /* Two lines, never three. The English copy is longer than the Thai, and at
     44px it took a third line that pushed the chips down across her face. */
  font-size: clamp(27px, 2.6vw, 37px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.022em;
  margin: 0 0 11px;
  color: var(--ink);
}
/* Second line in the attention colour, as the comp has it. This is the one place
   on the page orange is used, which is what keeps it meaning anything. */
.login-headline .accent { display: block; color: var(--accent); }

/* Two written lines, not two lines that happen to fall out of the measure: the
   comp breaks this sentence at a specific place and the break belongs to the
   copy. Each one still wraps on its own when the column is too narrow. */
.login-blurb span { display: block; }
.login-blurb {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 58ch;
  margin: 0;
}

/* Three things the product does, as a row of chips. */
.login-points {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.login-point {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 18px 6px 6px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(6px);
}
/* Solid blue disc with a white glyph, the way the comp draws them. The chip is
   styled on its own class only: a bare `.login-point span` would also match it,
   which is one point more specific and quietly turned it back into a block box
   with the icon in its top left corner. */
.login-point-ic {
  flex: none;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
}
.login-point-ic svg { display: block; width: 17px; height: 17px; }
.login-point-label { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }

/* ------------------------------------------------------------- form column */

.login-panel { min-width: 0; display: flex; flex-direction: column; min-height: 100%; }

.login-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 28px;
  box-shadow: 0 2px 6px rgba(17, 45, 88, .04), 0 24px 60px rgba(17, 45, 88, .13);
  padding: 30px;
}

/* The active tab is a solid blue pill rather than a white one, which is the one
   piece of the comp that tells you which side of the card you are on from the
   other end of the room. */
.login-tabs {
  display: flex;
  gap: 4px;
  padding: 5px;
  margin-bottom: 22px;
  border-radius: var(--radius-pill);
  background: var(--sunken);
}
.login-tabs button {
  flex: 1;
  min-height: 40px;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: 14px;
  font-weight: 620;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.login-tabs button:hover { color: var(--ink); }
.login-tabs button.active {
  background: var(--brand);
  color: #fff;
  box-shadow: var(--shadow-brand);
}

.login-head { margin-bottom: 20px; }
.login-head h2 { font-size: 21px; letter-spacing: -.015em; margin: 0; color: var(--ink); }
.login-head p { color: var(--ink-2); font-size: 13.5px; line-height: 1.55; margin: 7px 0 0; }
/* With no heading above it the one explanatory line carries the top of the card
   on its own, and it is centred under the tabs the way the comp has it. */
.login-head.bare { margin-bottom: 20px; text-align: center; }
.login-head.bare p { margin: 0; }

/* Sign-in fields are the one place in the product where a person types a secret
   under time pressure, so they are taller and darker-labelled than the fields
   inside the app. */
.login-card .field { margin-bottom: 16px; }
.login-card .field > label { font-size: 13.5px; font-weight: 640; color: var(--ink); }
.login-card .field .help { color: var(--ink-2); font-size: 12.5px; }
.login-card input[type="text"],
.login-card input[type="email"],
.login-card input[type="password"] {
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 15px;
  color: var(--ink);
  background: var(--surface-2);
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.login-card input::placeholder { color: var(--ink-4); }
.login-card input:hover { border-color: var(--ink-4); }
.login-card input:focus {
  background: var(--surface);
  border-color: var(--brand);
  outline: none;
  box-shadow: 0 0 0 3px var(--focus);
}

/* A field with a glyph inside it. */
.field-ic { position: relative; }
.field-ic > .field-ic-mark {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  display: flex;
  color: var(--ink-4);
  pointer-events: none;
}
.field-ic > .field-ic-mark svg { display: block; width: 18px; height: 18px; }
.login-card .field-ic input { padding-left: 46px; }
.field-ic:focus-within > .field-ic-mark { color: var(--brand); }

/* The row the comp puts under the password: a choice on the left, a way out on
   the right. */
.login-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: -2px 0 18px;
}
.login-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.login-check input { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }
.login-link {
  border: 0; background: none; padding: 0; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--brand); cursor: pointer; text-decoration: none;
}
.login-link:hover { text-decoration: underline; }
.login-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

.login-form .btn.primary {
  width: 100%;
  min-height: 52px;
  margin-top: 8px;
  font-size: 15.5px;
  font-weight: 640;
}

/* ----------------------------------------------------------- password box */

.login-card .login-pw input { padding-right: 48px; }
.login-pw > button {
  position: absolute;
  top: 50%;
  right: 7px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--ink-3);
  cursor: pointer;
}
.login-pw > button:hover { background: var(--sunken); color: var(--ink); }
.login-pw > button svg { display: block; width: 18px; height: 18px; }

/* -------------------------------------------------------------- pw hints */

.login-rules {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 5px;
  font-size: 12.5px;
}
.login-rule { display: flex; align-items: center; gap: 8px; }
.login-rule svg { display: block; width: 14px; height: 14px; flex: none; }
.login-rule.ok { color: var(--good); }
.login-rule.no { color: var(--ink-3); }

/* ------------------------------------------------- what the card promises */

/* The comp closes the card with a shield and two lines of small print. Ours says
   what is actually true of this build: the server is the organisation's own, and
   a manager is shown the summary and the commitments rather than the words. */
.login-seal {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}
.login-seal-ic { flex: none; display: flex; color: var(--brand); }
.login-seal-ic svg { display: block; width: 22px; height: 22px; }
.login-seal b { display: block; font-size: 13px; font-weight: 640; color: var(--ink); margin-bottom: 3px; }
.login-seal p { font-size: 12.5px; line-height: 1.5; color: var(--ink-3); margin: 0; }

/* ----------------------------------------------------------------- notes */

.login-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  margin-bottom: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.55;
  text-align: left;
}
.login-note svg { display: block; width: 17px; height: 17px; flex: none; margin-top: 1px; }
.login-note.bad { background: var(--bad-soft); border-color: var(--bad); color: #7A241C; }
.login-note.warn { background: var(--warn-soft); border-color: var(--warn); color: #6B4508; }
.login-note.brand { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-ink); }
.login-note.good { background: var(--good-soft); border-color: var(--good); color: var(--good); }

.login-done { text-align: center; padding: 6px 0 2px; }
.login-done .login-done-mark {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--good-soft);
  color: var(--good);
}
.login-done .login-done-mark svg { display: block; width: 26px; height: 26px; }
.login-done h2 { font-size: 20px; margin-bottom: 10px; color: var(--ink); }
.login-done p { color: var(--ink-2); font-size: 13.5px; line-height: 1.6; }
.login-done p + p { margin-top: 8px; }

.login-foot {
  color: var(--ink-2);
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  margin: 16px 0 0;
}

/* The comp closes the page bottom right with a rule and the brand line. */
.login-signoff {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin-top: auto;
  padding-top: 28px;
}
.login-signoff::before {
  content: "";
  width: clamp(40px, 8vw, 96px);
  height: 1px;
  background: var(--line);
}
.login-signoff img { display: block; width: 168px; height: auto; opacity: .62; }

.login-build { text-align: center; font-size: 11.5px; color: var(--ink-4); letter-spacing: .04em; margin: 8px 0 0; }

.login-busy { opacity: .6; pointer-events: none; }

/* ----------------------------------------------------------------- narrow */

@media (max-width: 1000px) {
  .login { display: block; }
  .login-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
    padding-top: 20px;
  }

  /* The photograph moves behind the top of the page, where the copy is, and the
     card sits on plain white below it. */
  .login-bg {
    background-image:
      linear-gradient(to bottom, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, .88) 34%, var(--surface) 62%),
      image-set(url("/assets/art/bg-front-tall-900.webp") 1x);
    background-position: 30% top;
    background-size: auto, 150% auto;
  }
  .login-panel { min-height: 0; }
  .login-signoff { display: none; }
  .deco-blob { display: none; }
  /* Smaller and paler on a phone: at the desktop radius the sweep runs down into
     the headline. */
  .deco-arc {
    --r: 116px;
    border-width: 14px;
    border-color: color-mix(in srgb, var(--accent) 58%, transparent);
  }

  .login-headline { font-size: clamp(25px, 5.4vw, 32px); }
  .login-blurb { font-size: 14.5px; }
  .login-points { display: none; }

  .login-panel { max-width: 480px; }
  .login-card { padding: 22px; border-radius: 22px; }
  /* 16px is the threshold below which iOS zooms the page on focus. */
  .login-card input[type="text"],
  .login-card input[type="email"],
  .login-card input[type="password"] { font-size: 16px; }
}

@media (max-width: 420px) {
  .login-tagline-art { width: min(224px, 66%); margin-bottom: 14px; }
  .login-blurb { max-width: none; }
  .login-card { padding: 18px; }
  .login-tabs button { font-size: 13.5px; }
}