/* Login page — FROZEN look (handover 12 §1, §1a, §1b; owner 20 Oct 2026 17:08–17:38 UTC). Desktop (owner, 21 Oct 2026
   09:52 UTC, §1a): the white sign-in panel (logo, form, For line) on the RIGHT; the warm-white-to-light-red OS side on the
   LEFT, the OS ring cut off at the top-left corner (the O partly hidden, the S showing) and the tagline at the bottom;
   the letterhead red strip along the bottom. (The classes keep their names: .lg-left is the form panel, .lg-right the
   faded OS side.) Phone: unchanged — one column on the same background, logo centred, red band 34px with the chevron.
   Brand files are used as given (public/img/brand). Fonts and small corners from the app (design trial 2). */
:root {
  --red: #E30016;
  --red-dark: #A60D13;
  --red-mid: #C90015;
  --ink: #1B1918;
  --text-2: #57534F;
  --hint: #4F4A46;
  --box-line: #E3D3D1;
  --sans: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --strip: 64px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: #FFFFFF; color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.45; -webkit-text-size-adjust: 100%; }
img { display: block; }

.lg { position: relative; min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1fr clamp(400px, 37%, 540px); grid-template-rows: 1fr var(--strip); overflow: hidden; }

/* Right: the form */
.lg-left { grid-column: 2; grid-row: 1; background: #FFFFFF; display: flex; align-items: center; padding: 48px 56px; position: relative; z-index: 1; }
.lg-inner { width: 100%; max-width: 330px; }
.lg-logo { width: 326px; max-width: 100%; height: auto; aspect-ratio: 192.25 / 46.75; }   /* the files' own shape (bigger OS ring, owner 21 Oct 2026) */
.lg-title { margin: 52px 0 0; font-size: 22px; font-weight: 500; letter-spacing: -0.005em; line-height: 1.2; }
.lg-sub { margin: 8px 0 0; color: var(--text-2); font-size: 14.5px; line-height: 1.3; }
.lg-form { margin-top: 30px; display: flex; flex-direction: column; gap: 16px; }
/* The fields, the Show button, the message and Sign in are the design system's (ds-field, ds-input, ds-btn-quiet,
   ds-field-msg, ds-btn-main; full-app rollout, owner 24 Oct 2026): this sheet only places them. */
.lg-field input { font-size: 16px; }   /* 16 px: a phone does not zoom into the box */
.lg-pw { position: relative; display: block; }
.lg-pw input { padding-right: 64px; }
/* Centred by top / bottom / margin, not a transform: the design system's press (a 1 px sink) moves it 1 px only — a transform
   here was replaced on press, the button jumped 19 px and the click landed on the box (owner, 24 Oct 2026). */
.lg-show { position: absolute; right: 4px; top: 0; bottom: 0; margin: auto 0; }
.lg-btn { margin-top: 6px; }
.lg-note { margin-top: 26px; margin-bottom: -10px; }
.lg-forgot { margin: 18px 0 0; font-size: 14px; color: var(--hint); }
.lg-narrow { display: none; }
.lg-for { margin-top: 38px; padding-top: 14px; border-top: 1px solid #E4E0DD; display: flex; align-items: center; gap: 14px; }
.lg-for span { font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); }
.lg-for img { height: 24px; width: auto; }
.lg-for i { width: 1px; height: 28px; background: #D9D3CF; }

/* Left: warm white fading to light red, the OS ring alone, very large and cut off at the top-left (the O partly hidden,
   the S showing) */
.lg-right { grid-column: 1; grid-row: 1 / span 2; position: relative; overflow: hidden;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBF4F3 40%, #F6E3E2 100%); }
.lg-ring { position: absolute; height: 124%; width: auto; aspect-ratio: 1; left: calc((100vh - var(--strip)) * -0.31); top: -29%; opacity: 0.11;
  -webkit-mask-image: radial-gradient(circle at 30% 30%, #000 40%, transparent 75%); mask-image: radial-gradient(circle at 30% 30%, #000 40%, transparent 75%); }
.lg-tag { position: absolute; left: 74px; bottom: calc(var(--strip) + 56px); max-width: 360px; }
.lg-tag p { margin: 0; font-size: 24px; line-height: 1.4; font-weight: 400; color: var(--ink); }
.lg-tag .lg-units { margin-top: 10px; font-size: 14px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red-dark); }

/* Bottom: the letterhead strip — a full-width #A60D13 band with the chevron piece at the right (evolve-strip-chevrons.svg;
   its band part is 57 of its 125 units high, so the piece is the band height × 125 / 57 and rises above the band). */
.lg-strip { grid-column: 1 / -1; grid-row: 2; position: relative; z-index: 2; background: var(--red-dark); display: flex; align-items: center; padding: 0 48px; }
.lg-address { color: #FFFFFF; font-size: 14px; letter-spacing: 0.01em; opacity: 0.95; }
.lg-chev { position: absolute; right: 0; bottom: 0; height: calc(var(--strip) * 125 / 57); width: auto; pointer-events: none; }

/* Office monitors with little height (1280 × 720, 1366 × 768): the same page, tighter. */
@media (min-width: 761px) and (max-height: 800px) {
  .lg-left { padding-top: 32px; padding-bottom: 32px; }
  .lg-logo { width: 290px; }
  .lg-title { margin-top: 34px; }
  .lg-form { margin-top: 22px; gap: 13px; }
  .lg-for { margin-top: 26px; }
  .lg-tag { bottom: calc(var(--strip) + 40px); }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .lg { grid-template-columns: 1fr 420px; }
  /* The narrower OS side: the ring sized from its width so the S still shows whole (the O partly hidden). */
  .lg-ring { height: auto; width: calc((100vw - 420px) * 1.45); left: calc((100vw - 420px) * -0.36); top: calc((100vw - 420px) * -0.34); }
  .lg-left { padding-left: 44px; padding-right: 44px; }
  .lg-tag { left: 44px; right: 32px; }
  .lg-tag p { font-size: 21px; }
}

/* Phones (owner's Phone Login Editor settings, 360 wide): one column on the right side's background, lighter. */
@media (max-width: 760px) {
  :root { --strip: 34px; }
  .lg { grid-template-columns: 1fr; grid-template-rows: 1fr var(--strip); background: linear-gradient(180deg, #FFFFFF 0%, #FBF5F4 45%, #F5E6E5 100%); }
  .lg-right { grid-column: 1; grid-row: 1 / span 2; background: none; }
  .lg-ring { width: 430px; height: auto; left: auto; right: -150px; top: -120px; opacity: 0.13; transform: rotate(-16deg);
    -webkit-mask-image: linear-gradient(225deg, #000 35%, transparent 85%); mask-image: linear-gradient(225deg, #000 35%, transparent 85%); }
  .lg-tag { display: none; }
  .lg-left { grid-column: 1; grid-row: 1; background: transparent; align-items: flex-start; padding: 52px 28px 40px; }
  .lg-inner { max-width: 440px; margin: 0 auto; }
  .lg-logo { width: 160px; margin: 0 auto; }
  .lg-title, .lg-sub, .lg-for { display: none; }
  .lg-form { margin-top: 14px; gap: 14px; }
  .lg-note { margin-top: 26px; margin-bottom: -2px; }
  .lg-wide { display: none; }
  .lg-narrow { display: inline; }
  .lg-forgot { margin-top: 20px; }
  .lg-strip { padding: 0; }
  .lg-address { display: none; }
  .lg-chev { height: 75px; right: -25px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }