/* ==========================================================================
   SurveyIQ — screen: sign in

   Two equal columns: the value panel on the left, the sign-in card on the
   right. Below 860px the panel drops away and the card takes the screen.

   The screen is exactly one viewport tall and never scrolls. That is a promise
   the layout keeps structurally rather than by tuning numbers: every block
   takes its natural height except the form image, which is the one flexible
   item and absorbs whatever is left over. Nothing can push the page past its
   own height, so there is nothing to scroll.

   This screen runs on its own warm palette and its own two faces, both scoped
   to .signin below. They are deliberately not in tokens.css: the sign-in is
   the one page a visitor sees before the product, and giving the application
   these creams and this serif would repaint all twelve other screens.
   ========================================================================== */

.signin {
  /* Local to this screen. Written as literals because they are not app tokens
     and never should be - see the file header. */
  --s-panel:        #F6EEE3;
  --s-ground-a:     #FCF7EF;
  --s-ground-b:     #FAF2E6;
  --s-card-a:       #FFFDFA;
  --s-card-b:       #FDF4E6;
  --s-field:        #FFFDF9;

  --s-ink:          #35211A;
  --s-ink-deep:     #4E0C13;
  --s-sub:          #6B5647;
  --s-route:        #4B382D;
  --s-foot:         #8E7A69;

  --s-maroon:       #7A1420;
  --s-maroon-lit:   #8C2A2E;
  --s-title:        #6B1119;
  --s-title-accent: #A8534A;
  --s-on-maroon:    #FDF6EC;

  --s-hair:         rgba(122, 20, 32, .09);
  --s-field-line:   #E6DACB;

  /* Georgia and system-ui are real fallbacks, not decoration: if the webfont
     request is blocked the page still reads as itself rather than collapsing
     into the application's sans. */
  --s-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --s-sans:  'Jost', system-ui, -apple-system, sans-serif;

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  /* One row, declared. Without it the two columns are auto-placed, and since
     the card is written first it takes row 1 while the panel - asking for
     column 1, which auto-placement will not move backwards to reach - is
     pushed into a second row underneath it. minmax(0, ...) rather than 1fr so
     a tall child can overflow its own box instead of stretching the row. */
  grid-template-rows: minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
  /* The promise in the header, enforced. Anything that did outgrow the
     viewport would be cut rather than quietly adding a scrollbar - so the
     assertions that check for a page scroll are what keep this honest. */
  overflow: hidden;
  font-family: var(--s-sans);
  color: var(--s-ink);
  /* base.css sets body { line-height: 1.65 }, which every element here was
     inheriting - making the wordmark, the button, the field and each small
     line about 3px taller than the reference, and pushing the whole panel
     down with them. The reference sets no line-height at all and lets each
     element use `normal`; the four places it does specify one (the pitch,
     blurb, kicker and title) declare it themselves below and still win. */
  line-height: normal;
}

/* --------------------------------------------------------------------------
   Value panel
   -------------------------------------------------------------------------- */

.signin__panel {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  background: var(--s-panel);
  border-right: 1px solid var(--s-hair);
  padding: 34px 56px 28px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Behind everything, clipped by the panel, and out of the way of both the
   pointer and the accessibility tree. */
.signin__constellation {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .5;
  pointer-events: none;
}

/* Above the constellation. The panel is the positioned ancestor. */
.signin__lede {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.signin__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(6px, 1.2vh, 12px);
}

.signin__mark {
  width: 42px;
  height: 42px;
  flex: none;
}

.signin__brand-name {
  font-family: var(--s-serif);
  font-size: clamp(26px, 4.4vh, 38px);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--s-ink-deep);
}

.signin__pitch {
  font-family: var(--s-serif);
  font-weight: 600;
  font-size: clamp(28px, 4.9vh, 44px);
  line-height: 1.03;
  letter-spacing: -.015em;
  color: var(--s-ink);
  margin: 0 0 clamp(10px, 1.8vh, 16px);
}

/* The turn in the claim, and the only italic on the page. */
.signin__pitch-em {
  font-style: italic;
  font-weight: 600;
  color: var(--s-maroon-lit);
}

.signin__blurb {
  margin: -4px 0 clamp(8px, 1.4vh, 12px);
  font-size: clamp(13px, 1.8vh, 15px);
  line-height: 1.5;
  color: var(--s-ink);
}

.signin__kicker {
  margin: 0 0 clamp(9px, 1.6vh, 14px);
  font-size: clamp(13.5px, 1.9vh, 17px);
  font-weight: 500;
  line-height: 1.5;
  color: var(--s-ink);
}

/* --- The call to action ---------------------------------------------------
   Drawn as the underlined serif link the mockup shows, but it is a submit
   button for the form in the other column - so it starts a real sign-in
   rather than going nowhere.
   -------------------------------------------------------------------------- */

.signin__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 clamp(8px, 1.4vh, 14px);
  padding: 0 0 4px;
  border: 0;
  border-bottom: 1px solid rgba(122, 20, 32, .35);
  background: none;
  font-family: var(--s-serif);
  font-size: clamp(15px, 2.4vh, 19px);
  font-weight: 600;
  color: var(--s-maroon);
  cursor: pointer;
}

.signin__cta:hover { border-bottom-color: var(--s-maroon); }

.signin__cta-arrow {
  font-family: var(--s-sans);
  font-size: 17px;
  transition: transform .14s var(--ease);
}
.signin__cta:hover .signin__cta-arrow { transform: translateX(3px); }

.signin__cta:focus-visible {
  outline: 2px solid var(--s-maroon);
  outline-offset: 4px;
  border-radius: 2px;
}

/* --- The form itself ------------------------------------------------------
   An SVG, so it is sharp at any size and costs one small request. The
   intrinsic width/height on the <img> reserve its box before it loads, which
   is what stops the panel jumping as the page settles.

   The drawing is sized by the column's width, never by the height left over
   below the copy - so the form is always as wide as the panel allows, which
   is how the mockup draws it. The mockup gets there by laying its card out at
   a fixed 129.7% and scaling it by 0.771 (129.7% x 0.771 = 100%), the frozen
   output of a script that measured one window; width: 100% is the same result
   without the arithmetic, and it holds at any size.

   This is also the one elastic block on the screen: everything else takes its
   natural height and this takes what is left, which is what makes "the page
   never scrolls" a property of the layout rather than a number that happens
   to work on the window it was built in.

   The drawing is proportioned so that the width the panel gives it and the
   height left below the copy come out level - nothing is actually cut at any
   size from 1100x760 up. The overflow: hidden below is the floor under a
   window narrower or shorter than any of those, where clipping the foot of
   the form is still better than a scrollbar.
   -------------------------------------------------------------------------- */

.signin__shot {
  margin: 0;
  flex: 1;
  /* A flex item floors at its content size unless told otherwise. */
  min-height: 0;
  /* Clips whatever the leftover height cannot hold, which is exactly what the
     reference's own container does. */
  overflow: hidden;
}

/* --- The illustrated form -------------------------------------------------
   Local to this stylesheet, which only index.html loads.

   Laid out 129.7% wide and scaled back by 0.771 - the reference's own pair of
   numbers, and they multiply out to exactly 100%. So the card always fills
   the column's full width, flush with the copy above it, while every size
   inside it stays in the reference's proportion no matter how wide the column
   gets. A transform does not affect layout, so the scaling costs the flex
   column nothing.
   -------------------------------------------------------------------------- */

.sf {
  width: 129.7%;
  transform: scale(0.771);
  transform-origin: left top;
  background: #FFFFFF;
  border: 1px solid rgba(122, 20, 32, .1);
  border-radius: 16px;
  box-shadow: 0 18px 40px -22px rgba(76, 40, 20, .35);
  padding: 20px 26px;
}

.sf__head {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-bottom: 12px;
  border-bottom: 1px solid #EFE6DA;
}

.sf__title { font-size: 17px; font-weight: 600; color: #2C1C14; }
.sf__meta  { font-size: 12px; font-weight: 500; letter-spacing: .14em; color: #9A8878; }

.sf__q {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 15px;
}
/* The rating sits a little tighter under the rule than the questions do. */
.sf__q--first { gap: 7px; padding-top: 13px; }

.sf__label { font-size: 14.5px; font-weight: 500; color: #5C4838; }

.sf__stars {
  display: flex;
  gap: 10px;
  font-size: 19px;
  line-height: 1;
  color: #B8901F;
}
.sf__star--off { color: #DDD2C4; }

.sf__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #E6DCCF;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14.5px;
  color: #5C4838;
}

.sf__opt--on {
  border-color: #7A1420;
  background: #FDF6F1;
  color: #35211A;
  font-weight: 500;
}

.sf__radio {
  width: 12px;
  height: 12px;
  flex: none;
  border: 1px solid #C9BBAA;
  border-radius: 50%;
}
.sf__radio--on { border: 3.5px solid #7A1420; }

.sf__field {
  border: 1px solid #E6DCCF;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14.5px;
  color: #B3A294;
}

.sf__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 16px;
}

.sf__submit {
  font-size: 14.5px;
  font-weight: 500;
  color: #FDF6EC;
  background: linear-gradient(180deg, #8C1C24 0%, #5E0F17 100%);
  border-radius: 8px;
  padding: 9px 20px;
}

/* --------------------------------------------------------------------------
   Sign-in column
   -------------------------------------------------------------------------- */

.signin__form-col {
  /* Written first in the document so Tab reaches the email field before the
     panel's copy, but placed second on the screen. */
  grid-column: 2;
  grid-row: 1;
  background: linear-gradient(160deg, var(--s-ground-a) 0%, var(--s-ground-b) 100%);
  display: flex;
  flex-direction: column;
  /* Centred, so the space above the card and the space below it are equal.
     The reference pins the card 88px from the top and pads 28px at the
     bottom, which leaves it visibly higher in the column than it is low -
     centring is the one place this deliberately departs from it, and the
     padding below is the floor for a window too short to centre within. */
  justify-content: center;
  padding: 28px clamp(14px, 2.6vw, 48px);
  /* The card is fixed content, so this never engages at a workable window
     size. It is here for the window shorter than the card itself, where the
     alternative - under the grid's overflow: hidden - is a sign-in button
     nobody can reach. */
  overflow-y: auto;
}

.signin__stack {
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* The footer line sits inside this stack, so centring the stack leaves the
     card itself high - the space below it carries the line and the gap, the
     space above carries nothing. Reserving that same height above the card
     balances it, and it is the card, not the stack, that the eye centres on.
     The 18px gap plus the 18px footer line. */
  padding-top: 36px;
}

.signin__form {
  background: linear-gradient(170deg, var(--s-card-a) 0%, var(--s-card-b) 100%);
  border: 1px solid rgba(122, 20, 32, .08);
  border-radius: 30px;
  box-shadow: 0 34px 70px -40px rgba(76, 40, 20, .45);
  padding: clamp(38px, 11%, 72px) clamp(20px, 6.5%, 46px);
}

/* The gap below the heading belongs to the sub-line, which is where the
   reference puts it - the wrapper only groups the two for layout. */
.signin__heading { margin-bottom: 0; }

.signin__title {
  font-family: var(--s-serif);
  font-size: clamp(26px, 2.6vw, 44px);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.05;
  margin: 0 0 10px;
  color: var(--s-title);
  /* The two words are one line or the heading loses its shape. */
  white-space: nowrap;
}

.signin__title-accent { color: var(--s-title-accent); }

.signin__sub {
  margin: 0 0 clamp(24px, 3vw, 38px);
  font-size: clamp(14px, 1.25vw, 17px);
  font-weight: 300;
  color: var(--s-sub);
}

.signin__label {
  display: block;
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 500;
  color: var(--s-ink);
  margin-bottom: 10px;
}

.signin__input {
  width: 100%;
  font-family: var(--s-sans);
  font-size: clamp(14px, 1.3vw, 18px);
  font-weight: 300;
  color: var(--s-ink);
  background: var(--s-field);
  border: 1px solid var(--s-field-line);
  border-radius: 12px;
  padding: clamp(13px, 1.4vw, 19px) clamp(14px, 1.6vw, 22px);
  margin-bottom: 22px;
  outline: none;
}

.signin__input::placeholder { color: #B3A294; }

.signin__input:focus-visible {
  border-color: var(--s-maroon);
  box-shadow: 0 0 0 3px rgba(122, 20, 32, .10);
}

/* --- Microsoft sign-in ----------------------------------------------------
   The only filled control on the screen, and the one thing this page exists
   to have you press.
   -------------------------------------------------------------------------- */

.signin__ms {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  white-space: nowrap;
  font-family: var(--s-sans);
  font-size: clamp(14px, 1.4vw, 19px);
  font-weight: 500;
  color: var(--s-on-maroon);
  background: linear-gradient(180deg, #8C1C24 0%, #5A0E15 100%);
  border: none;
  border-radius: 12px;
  padding: clamp(14px, 1.5vw, 20px) 24px;
  margin-bottom: 26px;
  box-shadow: 0 14px 26px -16px rgba(94, 15, 23, .8);
  cursor: pointer;
}

.signin__ms:hover { background: linear-gradient(180deg, #97222A 0%, #63111A 100%); }

.signin__ms:focus-visible {
  outline: 2px solid var(--s-maroon);
  outline-offset: 3px;
}

.signin__ms[disabled] {
  opacity: .6;
  cursor: default;
  pointer-events: none;
}

.signin__ms-mark {
  width: 22px;
  height: 22px;
  flex: none;
}

/* What the one route is for, so nobody has to guess which button is theirs. */
.signin__routes {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: clamp(13px, 1.2vw, 16px);
  color: var(--s-route);
}

.signin__routes li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.signin__tick {
  color: var(--s-maroon);
  font-weight: 500;
  flex: none;
}

/* Under the card, not inside it. */
.signin__poweredby {
  margin: 0;
  font-size: 13px;
  color: var(--s-foot);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Guest access

   A disclosure, not a second column: guests are the exception here, and
   showing both forms at once asks every employee to work out which is theirs.
   Hidden in this deployment; the rules stay because signin.js still reads the
   markup at init, and the password route works the moment a guest domain is
   allow-listed.
   -------------------------------------------------------------------------- */

.signin__guest {
  margin-top: 18px;
  border-top: 1px solid var(--s-field-line);
  padding-top: 14px;
  /* Puts back what .signin sets to `normal` for the visible card. The fields
     in here are the shared .field / .input / .btn components, which are built
     against the application's 1.65 body leading - the reference has no guest
     form, so there is nothing to match it to, and it should keep rendering
     the way it does on every other page. */
  line-height: var(--lh-body);
}

.signin__guest-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
}

/* The default triangle is replaced by the chevron below. */
.signin__guest-summary::-webkit-details-marker { display: none; }
.signin__guest-summary::marker { content: ""; }

.signin__guest-title {
  font-family: var(--s-serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--s-title);
}

.signin__guest-chevron {
  color: var(--s-sub);
  font-size: 20px;
  line-height: 1;
  transition: transform .12s var(--ease);
}

.signin__guest[open] .signin__guest-chevron { transform: rotate(90deg); }

.signin__guest .signin__fields { margin-top: 12px; }

.signin__guest-summary:focus-visible {
  outline: 2px solid var(--s-maroon);
  outline-offset: 3px;
  border-radius: 6px;
}

.signin__fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.signin__submit {
  height: 44px;
  margin-top: 2px;
  border-radius: var(--r-xs);
  font-size: var(--fs-14);
}

.signin__legal {
  font-size: var(--fs-12-5);
  color: var(--s-sub);
  line-height: var(--lh-body);
  padding: 12px 14px;
  border: 1px solid var(--s-field-line);
  border-radius: var(--r-xl);
  background: var(--s-field);
}

.signin__help { margin-top: 16px; }

/* Switching between signing in and signing up. A button, not a link: it goes
   nowhere, it changes what this form is. */
.signin__switch {
  font-size: inherit;
  color: var(--s-maroon);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.signin__switch:hover { color: var(--s-ink); }

/* --------------------------------------------------------------------------
   Narrow screens

   One column. The panel goes - its copy and picture need width to work - and
   the card takes the screen. The footer line comes with it, because there is
   only one copy of it on the page and it belongs under the card.
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .signin { grid-template-columns: minmax(0, 1fr); }
  .signin__panel { display: none; }
  .signin__form-col {
    grid-column: 1;
    padding: 28px 20px;
  }
  .signin__form { border-radius: 22px; padding: 34px 26px; }
  .signin__title { white-space: normal; }
}

/* Too short for a picture. Dropping it leaves the words and the way in, which
   is the part of this screen with a job to do. */
@media (max-height: 620px) {
  .signin__shot { display: none; }
}