/* The standalone asthma site's page: the colour tokens and buttons the tool's
   own styles (asthma-tool.css, cut from Tools' styles.css by build.js)
   expect, and the header and footer around it. Phone first. */
:root{
  --blue:#2563eb;--blue-dark:#1d4ed8;--blue-light:#dbeafe;
  --g50:#f9fafb;--g100:#f3f4f6;--g200:#e5e7eb;--g300:#d1d5db;--g400:#9ca3af;
  --g500:#6b7280;--g600:#4b5563;--g700:#374151;--g800:#1f2937;--g900:#111827;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:#f4f7fb;color:var(--g800);line-height:1.6;min-height:100vh;}
button{font-family:inherit;}
.site-wrap{max-width:1180px;margin:0 auto;padding:0 16px;}

.site-head{background:linear-gradient(135deg,#1e3a8a 0%,#1d4ed8 55%,#2563eb 100%);color:#fff;padding:22px 0 64px;}
.site-head-row{display:flex;flex-direction:column;gap:12px;}
.site-brand{display:flex;align-items:center;gap:12px;}
.site-brand img{border-radius:12px;box-shadow:0 0 0 2px rgba(255,255,255,.35);}
.site-brand h1{font-size:22px;line-height:1.2;font-weight:800;letter-spacing:-.01em;}
.site-brand p{font-size:13px;color:#bfdbfe;}
.site-lead{font-size:14.5px;line-height:1.55;color:#dbeafe;max-width:640px;}

main.site-wrap{margin-top:-48px;}
.card{background:#fff;border-radius:18px;box-shadow:0 1px 2px rgba(17,24,39,.06),0 18px 40px -20px rgba(30,58,138,.35);}
.site-noscript{padding:20px;color:var(--g600);}

.btn-sm{display:inline-flex;align-items:center;gap:6px;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s;}
.btn-primary{background:var(--blue);color:#fff;}
.btn-primary:hover{background:var(--blue-dark);}
.btn-ghost{background:#fff;color:var(--g700);}
.btn-ghost:hover{background:var(--g50);}

.site-foot{padding:28px 0 40px;color:var(--g600);font-size:13px;line-height:1.6;}
.site-foot p{margin-top:8px;max-width:860px;}
.site-foot i{color:var(--g400);margin-right:4px;}
.site-foot-strong{font-weight:700;color:var(--g800);font-size:14px;}
.site-foot-small{font-size:12px;color:var(--g400);}

.site-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,12px);opacity:0;background:var(--g900);color:#fff;padding:11px 18px;border-radius:12px;font-size:14px;font-weight:600;transition:opacity .2s,transform .2s;z-index:50;box-shadow:0 10px 30px -10px rgba(0,0,0,.4);}
.site-toast.is-on{opacity:1;transform:translate(-50%,0);}

@media (min-width:640px){
  .site-wrap{padding:0 24px;}
  .site-head{padding:30px 0 72px;}
  .site-head-row{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:24px;}
  .site-brand h1{font-size:26px;}
  .site-lead{text-align:right;max-width:460px;}
}
/* The page header already names the tool: only its mode switch stays. */
.gina-head > div:first-child{display:none;}
.gina-head{justify-content:flex-start;}
@page{margin:14mm;}
@media print{
  .site-head,.site-foot,.site-toast{display:none!important;}
}