/* The sign-in document, AUVOX Sales Lab look (green + logo gold).
   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: 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%),
    /* and a third, drawn the same size as the photograph, that dissolves its top
       edge into white when a short window shrinks the photograph (see below) */
    linear-gradient(to bottom, var(--surface) 0%, rgba(255, 255, 255, 0) 30%),
    image-set(url("/assets/art/bg-front-1800.webp") 1x);
  background-repeat: no-repeat;
  /* Anchored bottom-left, where the subject is, and sized from the viewport
     height so her head always lands in the clear space between the feature band
     and the bottom edge - never under the copy or the card.

     The desktop file (bg-front-1800, 2026-10-07 v3) is cropped so the head runs
     from 55.7 to 90 per cent of the picture's height and 17 to 34 per cent of its
     width. Bottom-aligned, the head's top is therefore at 100% - 0.443 x the
     drawn height. The feature band ends 410-440px down at every desktop width, so
     the drawn height is (viewport - 450px) / 0.443 = x 2.257, which puts the top
     of her head 450px down - just under the band - at any height, capped at 115
     per cent of the viewport so a very tall window does not blow the face up.
     On a short window the picture shrinks until the head clears the band. The right side may then fall short of the
     card - the white veil already covers that side. Checked by measuring the head
     box against every UI box at 1001-1920 wide (capture/auvox2/login-photo-v3). */
  background-position: left bottom;
  /* --photo-lift: the copy moved up 2vh when the logo gap was tightened
     (2026-10-07), so the head moves up the same 2vh to keep its distance under
     the band. The photograph stays bottom-anchored (no strip under her), so the
     lift is made by drawing it 2vh / 0.443 = 4.5vh taller - in both the formula
     and the cap. */
  --photo-lift: 2vh;
  --photo-h: min(calc(115% + var(--photo-lift) / 0.443), calc((100% - 450px + var(--photo-lift)) * 2.257));
  background-size: auto, auto, auto var(--photo-h), auto var(--photo-h);
}

/* The soft shapes behind the card: one green wash and one thin gold arc in the
   top right corner - the logo's two colours. 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: 14px solid color-mix(in srgb, var(--gold) 70%, 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;
  /* Logo to eyebrow is about 45px at 1440x900 (bar 14 + this + 4): the same
     step as blurb to feature band, so the logo reads as the head of the column
     rather than a separate strip. Was clamp(20px, 5vh, 56px) = 63px, which the
     owner read as two unrelated blocks. Between 667 and 1120px tall this is
     exactly 2vh less than before; --photo-lift on .login-bg below must match. */
  padding-top: clamp(16px, 3vh, 36px);
  padding-bottom: calc(clamp(28px, 5vh, 56px) + env(safe-area-inset-bottom, 0px));
}

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

.login-brand { min-width: 0; padding-top: 4px; container-type: inline-size; }

/* 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 brand line, typeset in both languages: an AUVOX eyebrow - small, green,
   tracked, with a short live-green rule in front of it. */
.login-tagline-th {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--brand);
}
.login-tagline-th::before {
  content: "";
  flex: none;
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brand), var(--gold));
}

.login-headline {
  /* Two written lines, one per span, in both languages. The copy is short on
     purpose so neither line wraps on its own down to 320px; that is what keeps
     the Thai and the English the same shape. */
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 700;
  /* Thai tone marks need the room; 1.14 clipped the top of the second line. */
  line-height: 1.3;
  letter-spacing: -.02em;
  margin: 0 0 14px;
  color: var(--ink);
}
/* Second line in the brand green (5:1 on white - the gold is for the mark and
   the arc, it is too light to carry type). */
.login-headline .accent { display: block; color: var(--brand); }

/* One paragraph with a set measure and no written line breaks. The Thai and the
   English are written to the same length, so the same measure gives the same
   number of lines in both. */
.login-blurb {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 31em;
  margin: 0;
  /* balance, not pretty: with pretty the Thai left a lone conjunction at the end
     of the first line. Balanced lines break near the middle in both languages. */
  text-wrap: balance;
}

/* Three things the product does, as one band of three equal columns: icon, a
   short label, one supporting line. The columns are fixed by the grid and each
   string is a single line (nowrap), so the band cannot reflow differently in
   Thai and English the way the old row of pills did. One surface for the whole
   band, because it sits on the photograph. */
.login-points {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 600px;
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
}
.login-point {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 11px;
  row-gap: 1px;
  align-items: center;
  padding: 14px 14px 14px 14px;
  min-width: 0;
}
.login-point + .login-point { border-left: 1px solid var(--line-soft); }
/* Solid green disc with a white glyph. The disc 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 {
  grid-row: 1 / 3;
  flex: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-brand);
}
.login-point-ic svg { display: block; width: 16px; height: 16px; }
.login-point-label,
.login-point-sub {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.login-point-label { font-family: var(--font-display); font-size: 13.5px; font-weight: 600; line-height: 1.45; color: var(--ink); }
.login-point-sub { font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }

/* Where the column is too narrow for icon and text side by side (a 1024px
   laptop), the icon goes above the text. Same three columns, same rows, in both
   languages. */
@container (max-width: 560px) {
  .login-point {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    row-gap: 2px;
    align-items: start;
  }
  .login-point-ic { grid-row: auto; margin-bottom: 8px; }
}

/* ------------------------------------------------------------- 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 oklch(23% 0.022 158.5 / .04), 0 24px 60px oklch(23% 0.022 158.5 / .12);
  padding: 30px;
}

/* The active tab is a solid green 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;
}

.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;
    /* logo to eyebrow 41 -> 31px, in step with the desktop tightening */
    padding-top: 10px;
  }

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