/* /book-login/ — the book's own styling for the Magic Login Mail form.
   The plugin's stylesheet does NOT load on this template, so everything the
   form looks like is here. Selectors are the plugin's; don't rename them. */

/* overflow-x because the artwork is anchored by its right edge and grows
   leftwards as the window gets taller - past the viewport edge on a short,
   narrow window, which would otherwise scroll the page sideways. Not plain
   `overflow`, which would kill any sticky/scroll behaviour later. */
.stf-login{min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
.stf-login-main{flex:1;padding-top:72px;padding-bottom:72px;max-width:620px}

.stf-login h1{font-family:var(--font-display);font-size:3rem;margin:0 0 16px}
.stf-login-body>p{font-size:1.0625rem;color:var(--text-secondary);margin:0 0 28px}

/* --- the form --- */
.stf-login .mlm-login_form{margin:0}
.stf-login .mlm-login_form p{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:0}

.stf-login .mlm-login_label{
  font-family:var(--font-display);font-weight:500;font-size:0.9375rem;
  letter-spacing:-0.005em;color:var(--text-primary)}

.stf-login .mlm-login_input{
  width:100%;display:block;
  font-family:var(--font-ui);font-size:1.0625rem;
  color:var(--text-primary);background:var(--white);
  padding:13px 15px;
  border:1.5px solid var(--border-subtle);border-radius:var(--radius-md);
  transition:border-color .15s ease, box-shadow .15s ease}

.stf-login .mlm-login_input:focus{
  outline:none;border-color:var(--accent-primary);
  box-shadow:0 0 0 3px var(--purple-100)}

.stf-login .mlm-login_input::placeholder{color:var(--gray-400)}

.stf-login .mlm-login_submit{
  margin-top:14px;display:inline-block;cursor:pointer;
  font-family:var(--font-display);font-weight:600;font-size:1rem;
  padding:15px 30px;border-radius:8px;
  border:1.5px solid var(--accent-warm);
  background:var(--accent-warm);color:var(--white);
  -webkit-appearance:none;appearance:none}
.stf-login .mlm-login_submit:hover{background:var(--orange-700);border-color:var(--orange-700)}

/* --- the plugin's notices (its own CSS isn't loaded) --- */
.stf-login .mlm-login-notice{
  font-family:var(--font-ui);font-size:1rem;line-height:1.55;
  padding:16px 18px;border-radius:var(--radius-md);margin:0 0 28px;
  background:var(--purple-100);border:1px solid var(--purple-300);color:var(--purple-800)}
.stf-login .mlm-login-notice a{color:var(--accent-primary)}

/* --- the way back --- */
.stf-login-alt{
  font-family:var(--font-ui);font-size:0.9375rem;color:var(--text-secondary);margin:36px 0 0}
.stf-login-alt a{color:var(--accent-primary)}

@media (max-width:600px){
  .stf-login h1{font-size:2.25rem}
  .stf-login-main{padding-top:48px}
  .stf-login .mlm-login_submit{width:100%;text-align:center}
}

/* --- the pattern artwork ---------------------------------------------------
   PatternExport_081326-23, hung off the CARD rather than off the page.

   That is the whole design of this: it's a pseudo-element on .stf-login-card,
   so its position is measured from the card's own box. The card stays centred,
   the artwork keeps exactly the same relationship to it at every window width,
   and it never drifts the way a page-level background-position does.

   Sizing is in vh, so it grows and shrinks with the window. Anchoring is by
   RIGHT edge, not left - the right edge is what holds the relationship to the
   card, so scaling grows the piece leftwards and the overlap stays put.

   It is allowed to slip behind the card (Christine, 2026-08-29: "I don't mind
   if it slips behind the card, don't try to prevent that"). z-index:-1 puts it
   under the card's background but still under the text, which paints above
   negative-index children regardless. */

/* isolation:isolate is load-bearing, not tidiness. .stf-chapter - an ancestor
   of this card - carries background:var(--surface-page), which is white. With
   no stacking context here, the z-index:-1 artwork below escapes to the root
   and paints BEHIND that white background, so it vanishes completely.
   Isolating confines it: above the ancestor's background, still below the text.
   Removing this line makes the artwork disappear. */
.stf-login-card{position:relative;isolation:isolate}

.stf-login-card::before{
  content:'';
  position:absolute;
  z-index:-1;
  height:72.6vh;
  width:48.4vh;                    /* height x the art's 432:648 ratio - keep these in step */
  top:-56px;
  right:calc(100% - 5px);          /* Now all but 5px of it sits clear of the card -
                                      145px further left than where it started, in px
                                      not vh, so the gap to the card holds steady as the
                                      window resizes. A vh offset would drift. */
  background-image:url('../../uploads/stf-pattern/PatternExport_081326-23.svg');
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  pointer-events:none}

/* No room beside the card - drop it rather than let it cover the form. */
@media (max-width:900px){
  .stf-login-card::before{display:none}
}

/* The reader gate reuses this stylesheet wholesale by carrying .stf-login's
   class names, so the two can never drift apart. Its heading is a sentence
   rather than a word, so it needs to come down from 3rem. */
.stf-gate-page .stf-login h1{font-size:2.25rem;line-height:1.15}