/* ==========================================================================
   The sign-in form: in the header's card on every page, and in the "keep
   reading" card after a booklet's chapter one (src/components/SignIn.astro).
   Its colours are its own variables, so each place can set them from its
   own palette: the site's here, the reader's in booklet-reader.css.
   ========================================================================== */
.sign-in{
  --si-text:var(--text);--si-head:var(--head);--si-muted:var(--muted);
  --si-field:var(--bg);--si-line:var(--line-strong);--si-button:var(--accent-strong);--si-button-text:var(--bg);
  --si-link:var(--accent-strong);--si-error:#a8322b;--si-font:var(--f-body);
  margin-top:16px;font-family:var(--si-font);color:var(--si-text);text-align:left
}
:root[data-theme="dark"] .sign-in{--si-error:#f0a091}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sign-in{--si-error:#f0a091}}
.si-step{display:flex;flex-direction:column;gap:10px;margin:0}
/* Until js/sign-in.js has started, the forms could not work, so a line says so. */
.sign-in:not(.si-ready) .si-step{display:none}
.sign-in.si-ready .si-nojs{display:none}
.si-nojs{margin:0;font-size:.92rem;line-height:1.5;color:var(--si-muted)}
.si-step[hidden]{display:none}
.si-label{font-weight:600;font-size:.92rem;color:var(--si-head)}
.si-input{width:100%;box-sizing:border-box;min-height:48px;padding:10px 14px;border:1.5px solid var(--si-line);border-radius:12px;background:var(--si-field);color:var(--si-text);font:500 1.05rem var(--si-font)}
.si-input[aria-invalid="true"]{border-color:var(--si-error)}
.si-input:focus-visible{outline:3px solid var(--si-link);outline-offset:2px;border-color:var(--si-link)}
.si-code{font-size:1.5rem;letter-spacing:.3em;text-align:center;font-variant-numeric:tabular-nums}
.si-check:empty{display:none}
/* The bot check sits under the button, as wide as the form. Its line shows
   only while it needs a click. */
.si-check{width:100%}
.si-check-line{display:none;margin:4px 0 0;font-size:.92rem;line-height:1.5;color:var(--si-text)}
.si-asking .si-check-line{display:block}
.si-checking{display:flex;flex-direction:column;gap:8px}
/* While it is quiet it takes no room, so the tick box sits where it did. */
.si-checking:not(.si-asking){margin-top:-10px}
.si-go{min-height:48px;border:0;border-radius:12px;background:var(--si-button);color:var(--si-button-text);font:700 1rem var(--si-font);cursor:pointer}
.si-go:disabled,.si-link:disabled{opacity:.6;cursor:progress}
.si-sent{margin:0;font-size:.95rem;line-height:1.5;color:var(--si-text)}
.si-sent b{overflow-wrap:anywhere}
.si-help{margin:0;font-size:.86rem;line-height:1.5;color:var(--si-muted)}
.si-links{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0}
.si-link{min-height:44px;padding:0;border:0;background:none;color:var(--si-link);font:600 .92rem var(--si-font);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.si-error{margin:10px 0 0;font-size:.92rem;font-weight:600;line-height:1.45;color:var(--si-error)}
.si-error:empty{margin:0}

/* ---- the header's button: "sign in", or the reader's first letter ---- */
.si-pill{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 20px;border-radius:999px;border:1.6px solid rgba(255,255,255,.85);background:transparent;color:#fff;font:600 1rem var(--f-body);white-space:nowrap;transition:background-color .2s}
.si-pill:hover{background:rgba(255,255,255,.16)}
.si-ini{display:none;place-items:center;width:34px;height:34px;border-radius:50%;background:#eef3f9;color:#1d3a5f;font:700 .95rem var(--f-body)}
.si-in .si-pill{padding:0 18px 0 5px;background:rgba(255,255,255,.14)}
.si-in .si-ini{display:grid}
@media(max-width:860px){.si-pill{height:44px;padding:0 16px}}
.si-icon{display:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* A phone has room for a person drawing, or the reader's letter, alone; the
   button's label still says "sign in" to a screen reader. */
@media(max-width:640px){
  .si-pill{width:44px;padding:0;justify-content:center}
  .si-word{display:none}
  .si-icon{display:block}
  .si-in .si-icon{display:none}
  .si-in .si-pill{width:44px;padding:0;justify-content:center;background:none;border:0}
  .si-in .si-ini{width:44px;height:44px;font-size:1.05rem;border:2px solid rgba(255,255,255,.9)}
  .si-in .si-word{display:none}
}
@media(forced-colors:active){.si-pill{border:1px solid ButtonText}}

/* ---- the card ---- */
/* 352px leaves the 300px Cloudflare's bot check needs inside the padding. */
.si-pop{width:min(352px,calc(100vw - 32px))}
.si-pop.si-done .pop-title,.si-pop.si-done .pop-text{display:none}
.si-pop .pop-text{margin-bottom:4px}
.si-keep{display:flex;align-items:center;gap:10px;min-height:44px;font-size:.9rem;line-height:1.35;color:var(--si-text);cursor:pointer}
.si-keep input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--si-button)}
.si-in-label{margin:0;font:600 .72rem/1.2 var(--si-font);letter-spacing:.16em;text-transform:uppercase;color:var(--si-muted)}
.si-who{margin:6px 0 0;font:600 1.05rem/1.4 var(--si-font);color:var(--si-head);overflow-wrap:anywhere}
.si-step[data-step="done"]{gap:2px}
/* On a phone the card rises from the bottom of the screen, over a dimmed
   page that closes it when tapped. */
@media(max-width:640px){
  .login .si-pop{position:fixed;top:auto;left:0;right:0;bottom:0;width:auto;max-height:85vh;margin:0;overflow:auto;border-radius:24px 24px 0 0;padding:30px 24px calc(26px + env(safe-area-inset-bottom,0px));box-shadow:0 -10px 40px rgba(16,32,64,.25)}
  .login .si-pop::before{content:"";position:absolute;top:10px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:4px;background:var(--line-strong)}
  .top:has(.si-pop:not([hidden]))::before{content:"";position:fixed;inset:0;z-index:29;background:rgba(10,20,40,.4)}
}

/* Wide screens: the sign-in button grows with the header beside it. */
@media(min-width:1024px){.si-pill{height:clamp(46px,3.4vw,56px);padding:0 clamp(20px,1.6vw,28px);font-size:calc(.8rem + .25vw)}}