/* Midweek pulse form.
 *
 * The brand furniture (fonts, logo header, WG dots, footer, palette) is
 * reproduced from the GNS document shell, never re-designed per surface. See
 * capabilities/brand-studio/templates/gns-document-shell.md. The tokens and
 * the furniture classes below are the same ones roster-app's participant
 * intake page uses, so the two surfaces read as one system to a client who
 * sees both.
 *
 * Fonts and the logo are real files under this page's own origin, never
 * base64 data: URIs. public/_headers sets a strict CSP with font-src 'self',
 * so a data: URI font would be blocked live while working fine locally. That
 * is a bug class that only shows up after deploy.
 */

@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-600.woff2) format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/poppins-700.woff2) format('woff2');}
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/lato-400.woff2) format('woff2');}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/lato-700.woff2) format('woff2');}

:root{
  --brand:#0067A6; --brand-deep:#0B3357; --brand-bright:#2C79B0;
  --wg-green:#00A049; --wg-gold:#FBC331; --wg-red:#C06E60;
  --ink:#1B2A38; --muted:#5A6B7B; --rule:#DCE6EF; --paper:#FFFFFF; --tint:#E8F1F8;
  --font-display:'Poppins',system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:'Lato',system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
body{
  margin:0; background:#F2F6FA; color:var(--ink);
  font:16px/1.6 var(--font-body); padding:28px 16px 60px;
}
.sheet{max-width:820px;margin:0 auto;background:var(--paper);border:1px solid var(--rule);
  border-radius:12px;padding:28px 32px 24px}

/* --- brand furniture, reproduced verbatim from the GNS document shell --- */
.mh{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:16px}
.brandlogo{width:142px;height:58px;background:url(logo.png) left center/contain no-repeat}
.dots{display:flex;gap:9px}
.dots span{width:13px;height:13px;border-radius:50%}
.dots .r{background:var(--wg-red)} .dots .a{background:var(--wg-gold)} .dots .g{background:var(--wg-green)}
.rule{height:1px;background:var(--rule)}
.foot .footrule{margin-top:26px}
.foot .foot-in{padding-top:15px;text-align:center}
.foot .tag{font-family:var(--font-display);font-weight:700;color:var(--brand);font-size:14.5px}
.foot .con{margin-top:6px;font-size:13px;color:var(--brand);font-weight:600}

.eyebrow{font-family:var(--font-display);font-weight:600;color:var(--brand-bright);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin:22px 0 6px}
h1{font-family:var(--font-display);font-weight:700;color:var(--brand);
  font-size:31px;line-height:1.2;margin:0 0 8px}
h2{font-family:var(--font-display);font-weight:600;color:var(--brand-deep);
  font-size:21px;line-height:1.3;margin:22px 0 6px}
.lede{color:var(--muted);margin:0 0 4px}
.loading{color:var(--muted)}

/* --- the promise panel ------------------------------------------------
 * Same tinted panel the intake page uses for the same sentence. A leader is
 * being asked to write down where they struggled, so the confidentiality
 * promise is furniture, not a footnote. */
.promise{background:var(--tint);border-radius:10px;padding:16px 18px;margin:20px 0 6px}
.promise h3{font-family:var(--font-display);font-weight:600;color:var(--brand-deep);
  font-size:15px;margin:0 0 4px}
.promise p{margin:0;font-size:14.5px;color:var(--ink)}

/* --- questions -------------------------------------------------------- */
.q{margin:26px 0 0}
.q .qnum{font-family:var(--font-display);font-weight:700;color:var(--brand-bright);
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:5px}
.q .prompt{font-family:var(--font-display);font-weight:600;font-size:17px;
  line-height:1.4;margin:0 0 4px;color:var(--ink)}
.q .hint{color:var(--muted);font-size:14px;margin:0 0 9px}

textarea{width:100%;border:1px solid var(--rule);border-radius:8px;padding:10px 12px;
  font:16px/1.6 var(--font-body);color:var(--ink);background:#fff}
textarea:focus{outline:2px solid var(--tint);border-color:var(--brand)}
textarea{min-height:104px;resize:vertical}

input[type=text],input[type=email]{width:100%;border:1px solid var(--rule);border-radius:8px;
  padding:10px 12px;font:16px/1.6 var(--font-body);color:var(--ink);background:#fff;max-width:360px}
input[type=text]:focus,input[type=email]:focus{outline:2px solid var(--tint);border-color:var(--brand)}

.actions{margin:28px 0 4px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.btn{border:1px solid var(--rule);background:#fff;border-radius:8px;padding:11px 20px;cursor:pointer;
  font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--ink)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn[disabled]{opacity:.55;cursor:default}
.linkish{background:none;border:none;padding:0;color:var(--brand);font:inherit;
  text-decoration:underline;cursor:pointer}

.note{color:var(--muted);font-size:14px}
.err{color:var(--wg-red);font-weight:700;margin:14px 0 0}
.gate-error{color:var(--wg-red);font-weight:700;margin:14px 0 0}

/* The sign-out control sits quietly under the footer rule. A client who
   finished should not have to hunt for it, and should not trip over it. */
.signout{margin-top:18px;text-align:center}
.signout .linkish{color:var(--muted);font-size:13px}

@media (max-width:720px){
  body{padding:16px 10px 40px}
  .sheet{padding:20px 18px 18px}
  h1{font-size:25px}
}