/* ============================================================================
   The Ramses.Pharma skin for the shared Ramses.ID sign-in page.
   ============================================================================

   /authentication is Ramses.ID's page, reverse-proxied by this ingress so that it
   is same-origin with the portal (snippets/ramses-portal-authentication.conf).
   We do not own its markup and we do not want to fork it, so pharma branding is
   applied as a stylesheet appended to their head — see
   snippets/pharma-auth-skin.conf for the injection.

   THREE RULES THIS FILE IS WRITTEN TO OBEY

   1. FAIL SOFT. Every selector below names something in *their* markup. If they
      rename a class or restructure the page, the rule stops applying and the page
      reverts to their own design. Nothing here can leave the page half-built, and
      nothing here is load-bearing for signing in.

   2. NEVER TOUCH THE QR. The QR card keeps its own artwork and its own contrast.
      It frames the thing a phone camera has to read; restyling it is the one edit
      on this page that could cost someone a login.

   3. NEVER ADD HEIGHT WHERE THERE IS NONE. `.shell` is `overflow: hidden` with
      fixed grid rows, and their own stylesheet shrinks everything under
      `max-height: 720px`. Anything that grows the instructions column is behind a
      matching height query, because pushing content out of a hidden overflow is
      how a skin turns into an outage.

   WHAT IS DELIBERATELY NOT CHANGED

   · "Continue with Ramses", the Ramses lockup in the header, `Ramses.ID` beside
     it, and "Protected by Ramses.ID" in the footer. The credential really is a
     Ramses identity issued by Ramses.ID, and the header lockup really does link
     to app.ramses.org. Rewriting any of it would make the page lie about who is
     authenticating you, on the one page where that matters most.

   · `--purple`. Their brand purple is #8214e6 and ours is #8a12d9 — 8 points of
     red and 13 of blue apart. Overriding the variable would recolour only the
     rules that read it, while the two dozen hardcoded `rgba(130, 20, 230, …)`
     borders and tints kept the old value: a visible mismatch in exchange for a
     hue shift nobody can see. Left alone on purpose.

   So what this skin actually does: it names the portal you are entering, marks it
   with the pharma capsule, and replaces the Ramses corporate watermark on the
   page ground with ours.

   NOTE ON CASCADE: this stylesheet is injected after theirs, so equal-specificity
   rules win on order alone. That is why there is not one `!important` below — and
   why there should not be. An `!important` here would keep winning after their
   markup changed underneath it, which is exactly the failure mode rule 1 avoids.
   ============================================================================ */

/* --- the page ground -------------------------------------------------------
 * Their aurora artwork carries the Ramses corporate glyph, faint, at the lower
 * left. Same composition, pharma subject: assets/pharma-watermark.svg is the
 * capsule in a ring at the same weight and tint, and the two washes reproduce the
 * lilac falloff of the original so the type on top keeps its contrast.
 *
 * The shorthand replaces all four background layers at once rather than
 * overriding `background-image` alone, so there is no way to end up with our
 * watermark sitting on their photograph.
 *
 * `min(82vh, 96vw)` is the phone case. Sized off height alone the capsule is
 * 690px tall in a 390px-wide window — no longer a watermark but the loudest thing
 * on the page, drawn straight across the QR. Their own artwork got this for free
 * from `cover`; ours has to say it.
 */
.shell {
  background:
    url('/pharma-watermark.svg') left -11vw bottom -16vh / auto min(82vh, 96vw) no-repeat,
    radial-gradient(115% 85% at 6% 58%, #e9e0f7 0%, rgba(233, 224, 247, 0) 60%) center / cover no-repeat,
    radial-gradient(95% 80% at 92% 4%, #f0eafb 0%, rgba(240, 234, 251, 0) 64%) center / cover no-repeat,
    #fbf9ff;
}

/* --- the destination -------------------------------------------------------
 * Added under their heading, not over it: their line says what you are signing in
 * WITH, this one says what it opens. The copy matches the SPA's own title, so the
 * page you leave and the app you arrive at call themselves the same thing.
 *
 * `.instructions h1` is `white-space: nowrap` at up to 51px with tight tracking,
 * all of which a pseudo-element inherits — hence the full reset below rather than
 * just a size.
 */
@media (min-width: 721px) {
  #page-title::after {
    content: 'You’re signing in to Ramses.Pharma — counter and back office.';
    display: block;
    margin-top: 14px;
    color: var(--muted, #5c5d67);
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: normal;
    line-height: 1.45;
    white-space: normal;
  }
}

/* --- the pharma lockup on a phone -----------------------------------------
 * Same lockup, centred, above their heading — the phone layout hides the eyebrow
 * and the steps, so this is the only place the portal gets named on a small
 * screen.
 *
 * `min-height: 640px` is where measuring said it stops being free. The column is
 * centred in a 1fr row, so a phone that tall still has ~200px of slack above the
 * heading and the ~42px this adds costs the QR nothing. Below it the lockup goes
 * away and the watermark carries the branding alone — see rule 3 at the top.
 *
 * `width: fit-content` + `margin-inline: auto` rather than `justify-content` on a
 * full-width box: the mark is a background on reserved padding, so it only sits
 * beside the wordmark if the box hugs the text.
 */
@media (max-width: 720px) and (min-height: 640px) {
  .instructions::before {
    content: 'Ramses.Pharma';
    display: flex;
    align-items: center;
    width: fit-content;
    min-height: 28px;
    margin: 0 auto 14px;
    padding-left: 37px;
    background: url('/pharma-mark.svg') left center / 28px 28px no-repeat;
    color: var(--text, #111116);
    font-size: 16px;
    font-weight: 750;
    letter-spacing: -.02em;
    line-height: 1;
    white-space: nowrap;
  }
}

/* --- the pharma lockup -----------------------------------------------------
 * The mark belongs in the content column, not in their header: the header is the
 * identity provider's and is correct as it stands.
 *
 * A pseudo-element can hold text or an image but not both, so the wordmark is the
 * `content` and the capsule is a background on the padding it reserves.
 *
 * Behind a height query as well as a width one (rule 3): this adds ~52px to a
 * column that already holds three steps, a browser row and a button inside a
 * hidden overflow. Below 780px tall the page keeps the destination line and the
 * watermark and drops the lockup.
 */
@media (min-width: 721px) and (min-height: 780px) {
  /* The lockup already names the portal, so the line under the heading stops
   * naming it and explains it instead — "Ramses.Pharma" twice inside four lines
   * reads like a template that got filled in twice. Later rule, same specificity,
   * so this simply replaces the copy above whenever the lockup is showing. */
  #page-title::after {
    content: 'Counter, inventory and back office for your pharmacy.';
  }

  .instructions::before {
    content: 'Ramses.Pharma';
    display: flex;
    align-items: center;
    min-height: 34px;
    margin-bottom: 20px;
    padding-left: 44px;
    background: url('/pharma-mark.svg') left center / 34px 34px no-repeat;
    color: var(--text, #111116);
    font-size: 19px;
    font-weight: 750;
    letter-spacing: -.02em;
    line-height: 1;
    white-space: nowrap;
  }
}