/* =====================================================================
   MRsoft CRM — Sign in page
   ---------------------------------------------------------------------
   One stylesheet for layouts/auth.php + users/login.php, so the sign-in
   page loads nothing else from the app (fast first paint).

   Layout (like MRsoft HRMS):
     ┌───────────────────────────┬──────────────────────┐
     │ MR logo                   │ Sign in              │
     │ MRsoft Technologies       │ Company code         │
     │ tagline                   │ Email address        │
     │      (robot · Lottie)     │ Password        (eye)│
     │ ▢ feature   ▢ feature     │ [ Sign In → ]        │
     │ ▢ feature   ▢ feature     │ Forgot password?     │
     └───────────────────────────┴──────────────────────┘
   Phones: a compact brand header with a smaller robot, then the form.
   Light and dark (html[data-appearance=dark], set by ui-appearance.js).
   ===================================================================== */

/* ---------- Inter (the CRM font, self-hosted) ------------------------ */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/InterVariable.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/InterVariable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
                 U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+20B9, U+2122, U+2190-2199,
                 U+2212, U+2215, U+2713, U+2715, U+2717, U+25B4-25BE, U+FEFF, U+FFFD;
}

/* ---------- tokens ---------------------------------------------------- */
.mra {
  --mra-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mra-page: #0b0e24;

  /* brand panel (always dark) */
  --mra-b-ink: #ffffff;
  --mra-b-accent: #a5b4fc;
  --mra-b-text: #aab3d7;
  --mra-b-feat: #c6cdea;

  /* form panel */
  --mra-panel: #ffffff;
  --mra-ink: #1e2230;
  --mra-label: #363b46;
  --mra-sub: #6b7285;
  --mra-faint: #858da3;
  --mra-line: #e5e7f2;
  --mra-line-hover: #d3d7ea;
  --mra-field: #fafbff;
  --mra-field-focus: #ffffff;
  --mra-icon: #8b93a9;
  --mra-pri: #5e5cd8;
  --mra-pri-2: #796aee;
  --mra-focus: #6b63e4;
  --mra-ring: rgb(107 99 228 / .16);
  --mra-link: #5b5bd6;
  --mra-note: #f5f6fd;

  --mra-err: #c02d3c;  --mra-err-bg: #fff2f3;  --mra-err-line: #f9d2d7;
  --mra-ok: #147a45;   --mra-ok-bg: #effaf3;   --mra-ok-line: #c8ecd6;
  --mra-warn: #95560b; --mra-warn-bg: #fff8eb; --mra-warn-line: #f5dfb3;
  --mra-info: #4744c4; --mra-info-bg: #f3f3ff; --mra-info-line: #dcdbfb;
}
html[data-appearance=dark] .mra {
  --mra-panel: #121729;
  --mra-ink: #eef0f8;
  --mra-label: #c5cad8;
  --mra-sub: #98a0b6;
  --mra-faint: #6f7892;
  --mra-line: #283050;
  --mra-line-hover: #36406a;
  --mra-field: #0d1223;
  --mra-field-focus: #0f1428;
  --mra-icon: #707a96;
  --mra-focus: #8f86ff;
  --mra-ring: rgb(143 134 255 / .22);
  --mra-link: #a5b4fc;
  --mra-note: #171d33;

  --mra-err: #ff9aa6;  --mra-err-bg: #2c1720;  --mra-err-line: #57303d;
  --mra-ok: #7fdcaf;   --mra-ok-bg: #132a22;   --mra-ok-line: #25503f;
  --mra-warn: #f1c67c; --mra-warn-bg: #2d2415; --mra-warn-line: #5a4623;
  --mra-info: #b9bcff; --mra-info-bg: #1b1f3d; --mra-info-line: #343a6e;
}

/* ---------- base -------------------------------------------------------- */
.mra, .mra *, .mra *::before, .mra *::after { box-sizing: border-box; }
html:has(body.mra) { background: var(--mra-page, #0b0e24); color-scheme: light; }
html[data-appearance=dark]:has(body.mra) { color-scheme: dark; }
body.mra {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  font-family: var(--mra-font); font-size: 14px; line-height: 1.5; font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  color: var(--mra-ink);
  background:
    radial-gradient(1100px 620px at 8% -8%, rgb(94 92 216 / .26), transparent 62%),
    radial-gradient(900px 600px at 100% 110%, rgb(121 106 238 / .16), transparent 60%),
    var(--mra-page);
  display: grid; place-items: center;
  padding: 32px 24px;
}
/* zero specificity, so every component rule below wins over it */
:where(.mra) :where(button, input) { font: inherit; color: inherit; }
.mra svg { flex: none; }

/* ---------- the card ------------------------------------------------- */
/* UI-14 · back to the size it was before UI-5: 1160 × 680, columns 54/46.
   UI-5 shrank it to 680 × 620 because that is what was asked for then;
   the client has now seen both side by side on their own server and
   wants the wide one back — "sign in page div again old la iruntha size
   liye mathu" — with the marketing copy still gone.

   Where 1160 × 680 comes from, since the pre-UI-5 build is not in this
   repository: measured off the client's own screenshot. The card is
   1305 × 765 device pixels there, and that machine is at 125% Windows
   scaling with the browser at 90% zoom — 1.125× — so 1305/1.125 = 1160
   and 765/1.125 = 680. 1160 is also the width the UI-5 note recorded
   when it replaced it, which is the cross-check. The brand panel
   measures 704 device px (626 css, 54%) against the form's 601 (534,
   46%).

   `height` is exact at 680 and clamped by the viewport below that, so a
   short laptop screen shortens the card instead of pushing the Sign In
   button off the bottom. What is NOT coming back is the marketing copy:
   the tagline and the four feature rows stay removed. (UI-15 then put
   the Follow-up chip back, single-line like the other two — see the
   .mra-chip rules below.) */
.mra-card {
  width: min(1160px, 100%);
  height: 680px;
  /* 64px, not 28: `body.mra` has `padding: 32px 24px`, so 64px of the
     viewport height is already spoken for. The old 28 under-reserved by
     36px — invisible while the card was 620 tall (620 + 64 < 700) and a
     36px vertical page scroll at 1366×700 the moment it became 680. */
  max-height: calc(100dvh - 64px);
  display: grid; grid-template-columns: minmax(0, .54fr) minmax(0, .46fr);
  border-radius: 26px; overflow: hidden;
  background: var(--mra-panel);
  box-shadow: 0 40px 110px rgb(3 5 20 / .55), 0 0 0 1px rgb(255 255 255 / .05);
}

/* ---------- left: brand + robot --------------------------------------- */
/* `container-type: size` is what makes the robot adaptive to THIS DIV
   rather than to the viewport — see .mra-bot. It needs the element to
   be sized by its own rules in both axes, which it is: a grid item in a
   card with a definite height. */
.mra-brand {
  position: relative; isolation: isolate; overflow: hidden;
  container-type: size; container-name: mrabrand;
  display: flex; flex-direction: column;
  padding: 34px 26px 30px;
  color: var(--mra-b-ink);
  background:
    radial-gradient(760px 460px at -6% -10%, rgb(99 102 241 / .30), transparent 62%),
    radial-gradient(620px 460px at 108% 112%, rgb(129 140 248 / .34), transparent 58%),
    linear-gradient(160deg, #1c2049 0%, #141833 46%, #1b2152 100%);
}
/* the dot grid of the reference, fading out towards the top left */
.mra-brand::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgb(165 180 252 / .22) 1.1px, transparent 1.6px);
  background-size: 26px 26px; background-position: 13px 13px;
  -webkit-mask-image: radial-gradient(120% 90% at 100% 100%, #000 18%, transparent 78%);
          mask-image: radial-gradient(120% 90% at 100% 100%, #000 18%, transparent 78%);
}
/* the CRM's bucket circles (dashboard buckets, table headers), very soft:
   one in the top-right corner, a larger one rising from the bottom right */
.mra-brand::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at calc(100% - 26px) -34px, rgb(255 255 255 / .065) 0 118px, transparent 119px),
    radial-gradient(circle at calc(100% - 120px) calc(100% + 150px), rgb(255 255 255 / .04) 0 250px, transparent 251px);
}

.mra-logo { display: block; width: 66px; height: auto; filter: drop-shadow(0 10px 24px rgb(124 106 239 / .35)); }
@supports (container-type: size) {
  .mra-logo { width: clamp(48px, 22cqw, 84px); }
}
/* UI-5 · sized to the panel, not the viewport.
   `2.55vw` was 28-36px, which is right across a 620px-wide panel and
   wrong across the 306px one this card has: "MRsoft Technologies" broke
   across two lines and ate the robot's room. `cqw` is a share of
   .mra-brand itself, so it shrinks with the panel rather than with the
   monitor; the vw value stays as the fallback where container queries
   are missing. */
.mra-name {
  margin: 14px 0 0;
  font-size: clamp(20px, 2.2vw, 30px); line-height: 1.15; font-weight: 750; letter-spacing: -.028em;
  color: var(--mra-b-ink);
}
@supports (container-type: size) {
  .mra-name { font-size: clamp(18px, 8.2cqw, 30px); }
}
.mra-name span {
  color: var(--mra-b-accent);
  background: linear-gradient(90deg, #a5b4fc 0%, #c3b8fd 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* UI-5 removed the tagline, the Follow-up chip and the four feature
   rows from the markup, and their rules went with them. Unlike a shared
   component, these named exactly the three things the client asked to
   take off this one page, so leaving them behind would only send a
   reader looking for markup that is not there. `.mra-chip` itself
   stays: the New lead and Call connected chips still use it. */

/* the robot: the Lottie canvas is square and mostly empty, so it is laid
   out larger than its box and centred on the robot's own middle */
/* UI-5 · the robot sizes itself to its panel.
   It was `clamp(170px, 29vh, 262px)` — a share of the VIEWPORT. Inside
   a card that is now a fixed 620px tall, that is the wrong thing to
   measure: on a tall monitor 29vh overflowed the panel, and on a short
   one it left the panel half empty.

   `cqw`/`cqh` are percentages of .mra-brand itself, so the robot is a
   share of the box it actually lives in and stays right at every card
   size and every screen. The viewport clamp is kept as the fallback
   value for anything without container queries; the @supports block
   replaces it where they exist. */
.mra-bot {
  --bot: clamp(120px, 26vh, 230px);             /* fallback: no container queries */
  position: relative; flex: 1 1 auto;
  min-height: 0;
  margin: 14px 0 10px;
}
@supports (container-type: size) {
  .mra-bot {
    /* the smaller of "most of the panel's width" and "the height left
       over once the logo and name have taken theirs" */
    --bot: clamp(96px, min(78cqw, 34cqh), 230px);
  }
}
.mra-bot__halo {
  position: absolute; left: 50%; top: 50%; width: calc(var(--bot) * 1.06); aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(124 115 255 / .34), rgb(124 115 255 / .12) 58%, transparent 74%);
}
.mra-bot__halo::before, .mra-bot__halo::after {
  content: ""; position: absolute; border-radius: 50%; border: 1px solid rgb(165 180 252 / .16);
}
.mra-bot__halo::before { inset: 9%; }
.mra-bot__halo::after  { inset: -12%; border-color: rgb(165 180 252 / .09); }
.mra-bot__floor {
  position: absolute; left: 50%; bottom: 4px; width: calc(var(--bot) * .62); height: 18px;
  transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(56 217 245 / .30), transparent);
  filter: blur(2px);
}
.mra-bot__stage {
  position: absolute; left: 50%; top: 50%;
  /* 1.52x because the Lottie's own artboard has a wide margin around
     the robot; --bot is the robot's VISIBLE height, not the file's.
     max-width keeps the stage inside the panel at the narrowest card
     rather than letting the artboard's margin cause a scrollbar. */
  width: min(calc(var(--bot) * 1.52), 100%); aspect-ratio: 1;
  transform: translate(-49.5%, -53.6%);
  pointer-events: none;
}
.mra-bot__stage > svg { display: block; width: 100% !important; height: 100% !important; }
.mra-bot__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.mra-bot__stage.is-live .mra-bot__poster { display: none; }

/* floating CRM cards around the robot (decoration) */
/* The two chips sit at the panel's top-left and bottom-right, clear of
   the robot in the middle. They were at `top: 10%` and `top: 57%` with
   a 620px-wide panel to spread across; in a 306px one those put both of
   them ON the robot. `max-width` is what stops a chip reaching past the
   panel edge — they carry white-space: nowrap, so without it the text
   simply overflows. */
.mra-chip {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  max-width: calc(100% - 8px);
  padding: 6px 11px 6px 6px; border-radius: 12px;
  background: rgb(22 27 58 / .62); border: 1px solid rgb(165 180 252 / .16);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px rgb(3 5 20 / .35);
  font-size: 12px; line-height: 1.25; color: #e6e9ff; white-space: nowrap;
  animation: mra-float 6s ease-in-out infinite;
}
.mra-chip b { display: block; font-weight: 650; }
.mra-chip__ic {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: #fff; flex: none;
  background: linear-gradient(135deg, #818cf8, #6366f1);
}
/* UI-15 · where the three chips float, measured off the client's
   screenshot rather than chosen. The icon squares are the landmark in
   the picture — 32×32 device px each, so unambiguous to find — and the
   positions below put each icon's centre where that picture has it:

                        icon centre, device px   ÷1.125 = css, from the card
       New lead              410 , 474.5              90.7 , 259.1
       Call connected        811.5, 687.5            447.6 , 448.4
       Follow-up             439 , 824               116.4 , 569.8

   x is identical in their before and after shots; only y moved — lead
   up 37 device px, call down 20, follow-up down 85 — so the change they
   are asking for is the vertical spacing around the robot.

   All three are `left`/`top` percentages of `.mra-bot`, not a mix of
   left/right and top/bottom: the same anchor for all three is what makes
   them keep their relationship to the robot as the card narrows, and it
   is what the measurements above can actually be checked against. */
.mra-chip--lead { left: 7.9%;  top: 18.2%;   animation-delay: -1.2s; }
.mra-chip--call { left: 69.9%; top: 56.9%;   animation-delay: -3.4s; }
.mra-chip--task { left: 12.4%; top: 81.7%;   animation-delay: -2.3s; }
.mra-chip--call .mra-chip__ic { background: linear-gradient(135deg, #34d399, #059669); }
.mra-chip--task .mra-chip__ic { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
@keyframes mra-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* features: 2 x 2 */
/* ---------- right: the form ------------------------------------------ */
/* The column is ~374px at the new card width, so the padding cannot be
   the old 64px — that left 246px for a form whose fields want 300+. */
.mra-panel {
  display: flex; flex-direction: column;
  padding: 30px 26px 20px;
  background: var(--mra-panel);
  overflow-y: auto;
}
html[data-appearance=dark] .mra-panel { border-left: 1px solid rgb(255 255 255 / .05); }
.mra-form-wrap { width: 100%; max-width: 340px; margin: auto; }

.mra-title { margin: 0; font-size: 30px; line-height: 1.15; font-weight: 750; letter-spacing: -.03em; color: var(--mra-ink); }
.mra-sub { margin: 9px 0 28px; font-size: 14.5px; color: var(--mra-sub); }

/* server messages */
.mra-alert {
  display: flex; align-items: flex-start; gap: 10px;
  margin: -6px 0 22px; padding: 11px 13px; border-radius: 12px;
  border: 1px solid var(--mra-info-line); background: var(--mra-info-bg); color: var(--mra-info);
  font-size: 13.5px; line-height: 1.45; font-weight: 500;
  animation: mra-in .28s ease-out both;
}
.mra-alert svg { margin-top: 1px; }
.mra-alert--error   { border-color: var(--mra-err-line);  background: var(--mra-err-bg);  color: var(--mra-err); }
.mra-alert--success { border-color: var(--mra-ok-line);   background: var(--mra-ok-bg);   color: var(--mra-ok); }
.mra-alert--warning { border-color: var(--mra-warn-line); background: var(--mra-warn-bg); color: var(--mra-warn); }
@keyframes mra-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* fields */
.mra-field { margin: 0 0 18px; }
.mra-field > label {
  display: block; margin: 0 0 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--mra-label);
}
.mra-input { position: relative; display: flex; align-items: center; }
.mra-input__ic {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  color: var(--mra-icon); pointer-events: none; transition: color .15s;
}
.mra-input input {
  width: 100%; height: 50px; margin: 0;
  padding: 0 16px 0 46px;
  border: 1px solid var(--mra-line); border-radius: 12px;
  background: var(--mra-field); color: var(--mra-ink);
  font-size: 15px; letter-spacing: .005em;
  outline: none; -webkit-appearance: none; appearance: none;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.mra-input input::placeholder { color: var(--mra-faint); opacity: 1; }
.mra-input input:hover { border-color: var(--mra-line-hover); }
.mra-input input:focus { border-color: var(--mra-focus); background: var(--mra-field-focus); box-shadow: 0 0 0 4px var(--mra-ring); }
.mra-input:focus-within .mra-input__ic { color: var(--mra-focus); }
.mra-input--code input { text-transform: uppercase; letter-spacing: .06em; }
.mra-input--code input::placeholder { letter-spacing: .04em; }
.mra-input--pass input { padding-right: 52px; }
/* Chrome autofill keeps the field colours */
.mra-input input:-webkit-autofill,
.mra-input input:-webkit-autofill:hover,
.mra-input input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--mra-ink);
  -webkit-box-shadow: 0 0 0 1000px var(--mra-field) inset;
  caret-color: var(--mra-ink);
  transition: background-color 9999s ease-out 0s;
}
.mra-eye {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
  border: 0; border-radius: 10px; background: transparent; color: var(--mra-icon); cursor: pointer;
}
.mra-eye:hover { color: var(--mra-focus); background: var(--mra-ring); }
.mra-eye:focus-visible { outline: 2px solid var(--mra-focus); outline-offset: 1px; }
.mra-eye[hidden] { display: none; }
.mra-eye .is-hide { display: none; }
.mra-eye[aria-pressed="true"] .is-show { display: none; }
.mra-eye[aria-pressed="true"] .is-hide { display: block; }

/* field-level messages (auth.js) */
.mra-field.is-invalid .mra-input input { border-color: var(--mra-err); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mra-err) 14%, transparent); }
.mra-field.is-invalid .mra-input__ic { color: var(--mra-err); }
.mra-msg { display: none; margin: 7px 2px 0; font-size: 12.5px; font-weight: 500; color: var(--mra-err); }
.mra-field.is-invalid .mra-msg { display: block; }
.mra-caps { display: none; align-items: center; gap: 6px; margin: 7px 2px 0; font-size: 12.5px; font-weight: 500; color: var(--mra-warn); }
.mra-caps.is-on { display: flex; }

/* the button */
.mra-submit {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 52px; margin: 8px 0 0; padding: 0 20px;
  border: 0; border-radius: 12px; cursor: pointer;
  background: linear-gradient(90deg, var(--mra-pri) 0%, var(--mra-pri-2) 100%);
  color: #fff; font-size: 15.5px; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 16px 30px -12px rgb(94 92 216 / .65), inset 0 1px 0 rgb(255 255 255 / .16);
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.mra-submit:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 20px 34px -12px rgb(94 92 216 / .7), inset 0 1px 0 rgb(255 255 255 / .16); }
.mra-submit:active { transform: translateY(0); filter: brightness(.98); }
.mra-submit:focus-visible { outline: 3px solid rgb(121 106 238 / .5); outline-offset: 3px; }
.mra-submit__arrow { transition: transform .18s; }
.mra-submit:hover .mra-submit__arrow { transform: translateX(3px); }
.mra-submit__spin {
  display: none; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgb(255 255 255 / .35); border-top-color: #fff;
  animation: mra-spin .7s linear infinite;
}
.mra-submit.is-busy { cursor: progress; filter: saturate(.9); transform: none; }
.mra-submit.is-busy .mra-submit__spin { display: block; }
.mra-submit.is-busy .mra-submit__arrow { display: none; }
@keyframes mra-spin { to { transform: rotate(360deg); } }

/* forgot password: a native <details>, so it works without scripts */
.mra-forgot { margin-top: 18px; text-align: center; }
.mra-forgot > summary {
  display: inline-block; padding: 4px 6px; border-radius: 6px; cursor: pointer; list-style: none;
  color: var(--mra-link); font-size: 13.5px; font-weight: 600;
}
.mra-forgot > summary::-webkit-details-marker { display: none; }
.mra-forgot > summary::marker { content: ""; }
.mra-forgot > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.mra-forgot > summary:focus-visible { outline: 2px solid var(--mra-focus); outline-offset: 2px; }
.mra-forgot__note {
  display: flex; gap: 9px; align-items: flex-start; text-align: left;
  margin: 10px 0 0; padding: 11px 13px; border-radius: 12px;
  background: var(--mra-note); color: var(--mra-sub); font-size: 13px; line-height: 1.5;
  animation: mra-in .22s ease-out both;
}
.mra-forgot__note svg { margin-top: 2px; color: var(--mra-link); }

.mra-foot {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 30px 0 0; font-size: 12px; color: var(--mra-sub);
}

/* ---------- tablet ---------------------------------------------------- */
@media (max-width: 1100px) {
  .mra-brand { padding: 42px 40px 36px; }
  /* UI-15 · the chips are anchored by `left` now, so nudging `right`
     did nothing. Left as a comment rather than a rule that lies. */
}
@media (max-width: 980px) {
  .mra-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mra-chip { display: none; }
}

/* ---------- phones: brand header on top, then the form ---------------- */
@media (max-width: 760px) {
  body.mra { padding: 16px 14px; place-items: start center; }
  /* The 1160×680 card is a DESKTOP size. Stacked into one column it has
     to size to its content again: a fixed height squeezed the brand
     row to a sliver and clipped the logo in half. Measured on a 390px
     screen before this line existed. The 680px cap is the stacked
     card's own width — a 1160px column on a phone is not a layout. */
  .mra-card {
    grid-template-columns: minmax(0, 1fr);
    width: min(680px, 100%); height: auto; min-height: 0; max-height: none;
    border-radius: 22px;
  }
  .mra-brand {
    /* `size` containment tells the box to ignore its contents when
       sizing itself. That is exactly right for a fixed-height column
       and exactly wrong for a stacked row, which must grow to fit the
       logo and the name — the other half of the clipping above.
       `inline-size` keeps cqw working for the type scale and gives the
       height back to the content. */
    container-type: inline-size;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px;
    padding: 22px 20px 20px;
  }
  .mra-brand__head { min-width: 0; }
  .mra-logo { width: 58px; }
  .mra-name { margin: 12px 0 0; font-size: 24px; }
  .mra-chip { display: none; }
  .mra-bot { --bot: 112px; width: 112px; min-height: 124px; margin: 0; }
  .mra-bot__halo::after { display: none; }
  .mra-panel { padding: 28px 22px 22px; }
  .mra-title { font-size: 26px; }
  .mra-sub { margin-bottom: 22px; }
  .mra-input input { font-size: 16px; }        /* no iOS zoom on focus */
  .mra-foot { margin-top: 24px; }
}
@media (max-width: 360px) {
  .mra-name { font-size: 21px; }
  .mra-bot { --bot: 92px; width: 92px; min-height: 104px; }
}

/* short laptop screens: keep everything on one screen */
@media (min-width: 761px) and (max-height: 720px) {
  /* The card's own max-height already shortens it on a screen like
     this, and --bot is a share of the panel, so the robot shrinks with
     it — there is no vh clamp here any more to fight that. */
  .mra-brand { padding-top: 22px; padding-bottom: 20px; }
  .mra-panel { padding-top: 22px; padding-bottom: 16px; }
  .mra-name { margin-top: 10px; }
  .mra-bot { margin: 8px 0 6px; }
  .mra-sub { margin-bottom: 18px; }
  .mra-field { margin-bottom: 14px; }
  .mra-foot { margin-top: 20px; }
}

/* ---------- motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mra-chip, .mra-alert, .mra-forgot__note, .mra-submit__spin { animation: none; }
  .mra-submit, .mra-submit__arrow { transition: none; }
  .mra-submit:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   UI-5 · messages as toasts, top right of the screen
   ══════════════════════════════════════════════════════════════════
   "Please sign in first." used to be a red strip inside the card. The
   client asked for it to arrive the way the CRM's own toasts do once
   you are signed in — top right edge — and that also takes a variable
   44px out of a card which is now a fixed 620px tall.

   Shaped to match `.ui-toast` in ui-kit.css (icon · title + message ·
   dismiss · a bar that drains) without loading the app's stylesheets:
   this page deliberately depends on auth.css alone.
   ================================================================== */
.mra-toasts {
  position: fixed; top: 18px; right: 18px; z-index: 60;
  display: flex; flex-direction: column; gap: 10px;
  width: min(370px, calc(100vw - 32px));
  pointer-events: none;
}
.mra-toast {
  /* UI-12 · the same weight as the toasts inside the CRM. */
  opacity: var(--toast-opacity, .9);
  position: relative; overflow: hidden; pointer-events: auto;
  display: grid; grid-template-columns: 26px minmax(0, 1fr) 26px; align-items: start; gap: 11px;
  padding: 13px 13px 14px; border-radius: 13px;
  background: var(--mra-panel);
  border: 1px solid var(--mra-line, rgb(15 23 42 / .10));
  box-shadow: 0 18px 44px rgb(3 5 20 / .28), 0 0 0 1px rgb(255 255 255 / .04);
  font-size: 13px; line-height: 1.5; color: var(--mra-ink);
  animation: mra-toast-in .26s cubic-bezier(.2, .8, .3, 1) both;
}
@media (prefers-reduced-motion: reduce) { .mra-toast { animation: none; } }
@keyframes mra-toast-in { from { opacity: 0; transform: translateX(14px); } }
.mra-toast.is-going { opacity: 0; transform: translateX(14px); transition: opacity .22s ease, transform .22s ease; }
.mra-toast__ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; }
.mra-toast__ic svg { width: 15px; height: 15px; }
.mra-toast__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mra-toast__body strong { font-size: 12.5px; font-weight: 700; letter-spacing: -.01em; }
.mra-toast__body span { color: var(--mra-sub, #5b627a); overflow-wrap: anywhere; }
.mra-toast__x {
  width: 26px; height: 26px; display: grid; place-items: center;
  border: 0; border-radius: 7px; background: transparent; color: var(--mra-sub, #5b627a);
  cursor: pointer; padding: 0;
}
.mra-toast__x svg { width: 14px; height: 14px; }
.mra-toast__x:hover { background: rgb(15 23 42 / .07); color: var(--mra-ink); }
/* The bar drains left to right for as long as auth.js waits before
   removing the toast, so the countdown is visible rather than a
   surprise. It is decoration: no JavaScript, no animation, no harm. */
.mra-toast__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; opacity: .22; transform-origin: left; }
.mra-toast.is-timed .mra-toast__bar { animation: mra-toast-bar var(--mra-toast-ms, 6000ms) linear both; }
@keyframes mra-toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

.mra-toast--success { color: var(--mra-ok); }
.mra-toast--success .mra-toast__ic { background: var(--mra-ok-bg); color: var(--mra-ok); }
.mra-toast--error   { color: var(--mra-err); }
.mra-toast--error   .mra-toast__ic { background: var(--mra-err-bg); color: var(--mra-err); }
.mra-toast--warning { color: var(--mra-warn); }
.mra-toast--warning .mra-toast__ic { background: var(--mra-warn-bg); color: var(--mra-warn); }
/* UI-12 · this was --mra-b-accent, which is the pale indigo (#a5b4fc)
   that belongs on the dark brand panel. As text on the white card it
   measured 1.97:1 — unreadable, and wrong since UI-5 rather than
   anything the translucency did. --mra-info is the palette's own
   colour for this tone, the one .mra-alert--info already uses, and it
   has a dark-mode value of its own. Measured from rendered pixels at
   opacity .9: 6.65:1 light, 8.23:1 dark. */
.mra-toast--info    { color: var(--mra-info, #4744c4); }
.mra-toast--info    .mra-toast__ic { background: var(--mra-info-bg); color: var(--mra-info, #4744c4); }
/* the title inherits the tone, the message stays neutral and readable */
.mra-toast__body span { color: var(--mra-sub, #5b627a); }

@media (max-width: 520px) {
  .mra-toasts { top: 10px; right: 10px; left: 10px; width: auto; }
}