/* ==========================================================================
   Relagix Plus — the look.

   Taken from the approved key visual: the magenta of the RELAGIX wordmark,
   the teal of "Plus" and of the "3", the soft lilac wash and the flowing
   contour lines behind it. Nothing here is invented; the palette is sampled
   from the artwork so that the avatar screen and the printed aid look like
   the same campaign.

   Built for a tablet held in landscape in a consulting room — an iPad or an
   Android tablet, in daylight, at arm's length. That decides most of it:
   large type, large targets, high contrast, no hover-only affordances, and no
   dark mode, because the brand is a light brand and a doctor comparing the
   screen with a printed detailer should see the same thing.
   ========================================================================== */

/* Every value below is SAMPLED from the approved key visual and the supplied
   logo artwork — the magenta of the button, the teal of "Plus", the wash from
   its top-left corner to its bottom-right. The first version of this file was
   guessed from memory of the artwork and was visibly not it. */
:root {
  /* the button, read straight off the key visual */
  --magenta:        #9A1681;
  --magenta-deep:   #7B0F6A;
  --magenta-bright: #A9219A;

  /* the mark */
  --logo-magenta:   #9D2484;
  --teal:           #007C81;
  --teal-deep:      #00646E;
  --indigo:         #2E3192;

  /* the wash, corner by corner */
  --ground-0:  #FCFCFC;
  --ground-1:  #FBF9FC;
  --ground-2:  #FAF3FA;
  --ground-3:  #F3E4F7;
  --ground-4:  #E5D3F9;

  /* How far the background plate hangs below the screen. */
  --drop: 6vh;

  --lilac-50:  #FDFBFE;
  --lilac-100: #FAF3FA;
  --lilac-200: #F3E4F7;
  --lilac-300: #E5D3F9;
  --lilac-400: #D3B6DC;

  --ink:        #221528;
  --ink-soft:   #4A3C50;
  --ink-faint:  #7A6D80;
  --line:       #EADFEE;

  --white: #FFFFFF;
  --ok:    #15803D;
  --warn:  #B45309;
  --stop:  #B3123F;

  --grad: linear-gradient(100deg, var(--magenta-deep) 0%, var(--magenta) 48%, var(--magenta-bright) 100%);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 34px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(34, 21, 40, .06), 0 2px 8px rgba(34, 21, 40, .05);
  --shadow-md: 0 2px 6px rgba(34, 21, 40, .07), 0 12px 32px rgba(122, 15, 106, .10);
  --shadow-lg: 0 4px 12px rgba(34, 21, 40, .08), 0 24px 64px rgba(122, 15, 106, .16);

  /* The safe areas of a notched iPad in a browser, plus a floor so the layout
     is the same on a device that reports none. */
  --pad-t: max(env(safe-area-inset-top), 0px);
  --pad-b: max(env(safe-area-inset-bottom), 0px);
  --pad-l: max(env(safe-area-inset-left), 0px);
  --pad-r: max(env(safe-area-inset-right), 0px);

  color-scheme: light;
}

/* ============================================================== the reset */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  /* iOS Safari's toolbars change the viewport height mid-gesture; dvh follows
     them and vh does not, which is the difference between a control bar that
     stays on screen and one that slides under the browser chrome. */
  min-height: 100dvh;
}

body {
  font-family: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               system-ui, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--ground-1);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  /* A detail aid is not a document. Nothing scrolls except the panes that are
     meant to, and a stray rubber-band on iPad looks like a bug. */
  overscroll-behavior: none;
}

/* A doctor jabbing at a control must not zoom the page, and a double tap on
   iPad zooms unless this says otherwise. */
button, a, [role="button"], input, select, label {
  touch-action: manipulation;
}

button { font: inherit; color: inherit; }

img, svg { max-width: 100%; display: block; }

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================ the backdrop */
/* The studio's own plate, and nothing else.

   Four things stood here before it arrived: contour lines drawn freehand in
   CSS, an attempt to lift the strands out of the key visual JPEG, a plate
   generated from that JPEG, and a constructed SVG. Every one of them was an
   approximation of artwork that existed. This is the artwork.

   `cover` rather than `contain`: the plate is 16:9 and a tablet is not, so
   something has to give, and it must be the plate's edges rather than the
   page's. The disc sits on the right of it, which is where RIA stands. */
.wash {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  /* The plate hangs below the bottom of the screen.

     On a 4:3 tablet the plate is wider than the screen, so `cover` crops it
     sideways and not at all vertically — which means background-position has
     no overflow to move and the wave sits exactly where the file puts it.
     Making the LAYER taller than the viewport is what gives the wave somewhere
     to go: it scales to the taller box and its lower edge falls off the
     bottom, carrying the crest down and away from the Ask RIA button.

     The left column rises to meet it (--rise, in app.css). Both were needed:
     the button is centred in its half and the wave crosses that half, so
     moving only one of them left them touching on some shapes of screen. */
  bottom: calc(-1 * var(--drop));

  /* Anchored to the BOTTOM, not the centre.

     The plate is 16:9 and a screen is not. Centred, `cover` takes the
     overflow off the top and the bottom equally — and everything in this
     plate that carries the design is at the bottom: the ribbon that sweeps
     up from the left, and the strands running out to the right. The top is
     empty wash, so that is where the crop should fall, all of it. */
  background: url("/brand/ground.webp") center bottom / cover no-repeat;
  /* Behind the plate while it loads, and if it never loads at all. */
  background-color: var(--ground-1);
}

/* The door, and anywhere else that wants the colour without the artwork: a
   flat lavender ground and nothing on it. */
.wash.plain {
  bottom: 0;
  background: var(--lilac-200);
}

/* ============================================================== the marks */
/* There is no wordmark in here, and that is deliberate.

   RELAGIX Plus is a registered mark with a drawn device in it — the woman's
   head forming the I — and the molecule line is part of the lockup. It was
   supplied as artwork and is used as artwork: public/brand/relagix-plus.png,
   which is the division's own export. An earlier version of this file set it
   in CSS with a gradient clipped to the text, which reproduced neither the
   device nor the type and was simply wrong.

   The same goes for the tagline. tools/make-brand.mjs is what puts both in
   public/brand/, and if the division reissues either one, that is the only
   thing that has to run.

   What IS here is everything around them: the palette they are drawn from,
   the wash they sit on, and the controls beside them. */

/* ============================================================== the buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  /* 56 px is the floor for a target that will be hit by a thumb, at arm's
     length, on a tablet somebody else is holding. */
  min-height: 56px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--r-pill);
  font-weight: 650;
  font-size: 17px;
  letter-spacing: .005em;
  cursor: pointer;
  background: var(--grad);
  color: var(--white);
  box-shadow: var(--shadow-md);
  transition: transform .12s ease, box-shadow .18s ease, opacity .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px) scale(.995); }
.btn[disabled] { opacity: .45; cursor: default; box-shadow: none; }
.btn.ghost {
  background: var(--white);
  color: var(--magenta);
  box-shadow: inset 0 0 0 1.5px var(--lilac-400), var(--shadow-sm);
}
.btn.quiet {
  background: transparent;
  color: var(--ink-soft);
  box-shadow: inset 0 0 0 1.5px var(--line);
  font-weight: 600;
}
.btn.stop { background: linear-gradient(100deg, #8E0E33, var(--stop)); }
.btn.big { min-height: 68px; font-size: 21px; padding: 0 40px; }

/* ============================================================== the fields */
.field { display: block; margin-bottom: 18px; }
.field > span {
  display: block;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 7px;
}
.input, select.input {
  width: 100%;
  min-height: 56px;
  padding: 0 18px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  color: var(--ink);
  /* Anything under 16px makes iOS Safari zoom the whole page when the field
     takes focus, and the page never zooms back. */
  font-size: 17px;
  font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.input:focus {
  outline: 0;
  border-color: var(--magenta);
  box-shadow: 0 0 0 4px rgba(162, 24, 95, .12);
}
select.input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%237A6D80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 46px;
}

.card {
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(231, 220, 234, .8);
}

.muted { color: var(--ink-faint); }
.tiny { font-size: 13px; }

/* Present to screen readers, absent from the page. */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}