/* check.css: the few pieces these four pages add on top of the Field Manual
   files copied into fm/ (tokens, masthead, cover for .btn, close for the
   plates' responsive padding and the colophon). Same tokens, same type
   roles, nothing new invented that the system already has. */

/* ---- the signup plate ---- */
.lm-hero{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-m); align-items:start; }
@media (min-width:901px){
  .lm-hero{ grid-template-columns:minmax(0,1fr) minmax(0,300px); gap:var(--space-l); }
}
.lm-hero[data-fig]::before{ grid-column:1; grid-row:1; }
.lm-copy{ grid-column:1; grid-row:1; display:flex; flex-direction:column; gap:var(--space-m); min-width:0; }
.lm-copy h1{ max-width:11em; }
/* Phones: scale the headline with the screen so it sets as three even lines
   ("Find the sentence / your competitors / aren't saying") from 320 to 420px
   instead of four with "competitors" alone. */
@media (max-width:420px){ .lm-copy h1{ font-size:clamp(2rem, 11.2vw, 3.25rem); } }
.lm-copy .pull{ margin:0; }
.lm-cover{ margin:0; }
@media (min-width:901px){ .lm-cover{ grid-column:2; grid-row:1; } }
.lm-cover img{
  display:block; width:100%; height:auto;
  border:1px solid var(--ink);
  /* the printed page sitting on the plate: a hard offset, no blur, the way
     the site draws depth everywhere else */
  box-shadow:8px 8px 0 var(--ink);
}
@media (max-width:900px){ .lm-cover{ max-width:240px; } }
.lm-cover figcaption{ margin-top:var(--space-s); }

/* what's inside: mark bullets, first-line aligned (the marker is inline in
   the first line, and the hang keeps wrapped lines on the text edge) */
.lm-list{ list-style:none; margin:0; padding:0 0 0 .95em; display:flex; flex-direction:column; gap:var(--space-xs); max-width:34em; }
.lm-list li{ text-wrap:pretty; }

/* ---- the form ---- */
.signup{ display:flex; flex-direction:column; gap:var(--space-s); max-width:34em; }
.signup label.m-hard{ display:block; }
.signup-row{ display:flex; flex-wrap:wrap; gap:var(--space-xs); align-items:stretch; }
.signup input[type=email]{
  flex:1 1 16em; min-width:0;
  font:inherit; font-size:var(--t-body); color:var(--ink);
  background:#F4EDDE; border:1px solid var(--ink); border-radius:0;
  padding:var(--space-s);
  min-height:56px;
}
.signup input[type=email]::placeholder{ color:var(--ink-quiet); }
.signup input[type=email]:focus-visible{ outline:3px solid var(--red); outline-offset:2px; }
.signup input[aria-invalid=true]{ border-color:var(--red); box-shadow:inset 0 -3px 0 var(--red); }
.signup .btn{ font-size:var(--t-micro); min-height:56px; }
.signup .btn[disabled]{ opacity:.6; cursor:progress; }
.signup-msg{ margin:0; min-height:0; }
.signup-msg:empty{ display:none; }
.signup-msg.is-error{ color:var(--ink); border-left:3px solid var(--red); padding-left:var(--space-s); }
.signup-note{ margin:0; }
.signup .m{ margin:0; }
/* The honeypot: off-screen for people and screen readers (aria-hidden),
   still in the DOM for a bot that fills every field it finds. */
.hp{ position:absolute !important; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }

.lm-done{ display:flex; flex-direction:column; gap:var(--space-s); max-width:34em; border-left:3px solid var(--red); padding-left:var(--space-s); }
.lm-done h2{ font-size:var(--t-h3); line-height:var(--lh-h3); margin:0; max-width:none; }
.lm-done p{ margin:0; }

/* ---- the plain plates (download, unsubscribe, privacy, the study note) ---- */
.lm-plain{ display:flex; flex-direction:column; gap:var(--space-m); }
.lm-plain h1{ max-width:12em; }
.lm-plain h2{ margin-bottom:0; }
.lm-plain p{ margin:0; }
.lm-plain .stack-s{ display:flex; flex-direction:column; gap:var(--space-s); }
.lm-actions{ display:flex; flex-wrap:wrap; gap:var(--space-s) var(--space-m); align-items:baseline; }
/* .lnk sets align-self:flex-start in tokens.css; in this row the link and the button label share one baseline. */
.lm-actions > *{ align-self:baseline; }

/* page states: only the section matching body[data-state] shows */
[data-show]{ display:none; }
body[data-state=checking] [data-show~=checking],
body[data-state=ready] [data-show~=ready],
body[data-state=invalid] [data-show~=invalid],
body[data-state=ask] [data-show~=ask],
body[data-state=done] [data-show~=done],
body[data-state=error] [data-show~=error]{ display:flex; }
.btn.m-out{ color:var(--oaktag); }

/* Big Shoulders at the hero step is too large for a one-line state page on a
   phone; the plain plates take the h2 step there. */
.lm-plain h1{ font-size:var(--t-h2); line-height:1.08; }
@media (min-width:901px){ .lm-plain h1{ font-size:calc(var(--t-hero) * .8); } }

.masthead-brand img{ border-radius:0; }
footer.colophon .lnk{ align-self:center; }

/* the hidden attribute always wins over a component display rule */
[hidden]{ display:none !important; }

/* Turnstile draws itself only when it needs a person to act (interaction-only). */
.lm-turnstile{ min-height:0; }
.lm-turnstile:empty{ display:none; }