/* AAI Measurement, front end. Palette declared locally so it renders
   correctly whatever theme is active. */
.aaiHelp{
  --navy:#06366F; --ink:#17243B; --slate:#526780; --sage:#7FA69B;
  --cream:#F8F5EF; --line:#DDDFE2;
  --sage-soft:#EAF0EE; --sage-edge:#6E9186; --sage-deep:#4C6D63;
  --sage-hover:#DCE7E3; --rule:#C2C7CC;
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:22px 24px;margin:22px auto 0;max-width:520px;
  /* Centred throughout. The card was text-align:left, but the AAI theme
     centres paragraphs inside the tool panel, so the headings and buttons
     sat left while the text sat centre. 1.3.1. */
  text-align:center;
  font-family:'Karla',system-ui,-apple-system,sans-serif;
}
.aaiHelp h3{font-family:'Newsreader',Georgia,serif;font-weight:400;font-size:1.22rem;
  color:var(--ink);margin:0 0 4px;line-height:1.2;text-wrap:balance}
.aaiHelp p{margin:0 auto 14px;color:var(--slate);font-size:.93rem;line-height:1.5;max-width:44ch;text-wrap:balance}
.aaiHelpBtns{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
/* Soft sage, chosen 17 September 2026. Sage is the tools and support
   colour, so the card stays in the same family as the thing the person
   has just used. All buttons identical: if Yes looked more inviting than
   Not yet, the figures would be measuring the button, not the tool.
   Label 13.5:1 on the fill, edge 3.5:1 on the card. The old edge was
   1.3:1, under the 3:1 WCAG 2.2 asks for a control's visible boundary. */
.aaiHb{background:var(--sage-soft);border:1.5px solid var(--sage-edge);border-radius:99px;
  padding:10px 21px;font-family:inherit;font-size:.96rem;font-weight:700;
  color:var(--ink);cursor:pointer;line-height:1.2;min-height:44px}
.aaiHb:hover{border-color:var(--sage-deep);background:var(--sage-hover)}
.aaiHb:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.aaiSkip{background:none;border:0;color:var(--slate);font-size:.88rem;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;margin:13px auto 0;padding:6px 10px;
  min-height:32px;font-family:inherit;display:block}
/* This rule separates two questions, so it carries meaning. */
.aaiFirst{border-top:1px solid var(--rule);margin-top:16px;padding-top:14px}
@media(prefers-reduced-motion:no-preference){
  .aaiHelp{animation:aaiIn .25s ease}
  @keyframes aaiIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}
@media(max-width:520px){
  .aaiHelp{padding:18px 18px}
  .aaiHelpBtns{flex-direction:column;align-items:center}
  .aaiHb{width:100%}
}

/* Shortcode summary */
.aaiSC{--navy:#06366F;--ink:#17243B;--slate:#526780;--cream:#F8F5EF;--line:#DDDFE2;
  border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;max-width:720px}
.aaiSCHead{background:var(--cream);border-bottom:1px solid var(--line);padding:16px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.aaiSCHead img{height:30px;width:auto;display:block}
.aaiSCHead span{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);font-weight:700}
.aaiSCStats{display:grid;grid-template-columns:repeat(4,1fr)}
.aaiSCStats div{padding:18px 16px;border-right:1px solid var(--line)}
.aaiSCStats div:last-child{border-right:0}
.aaiSCStats b{display:block;font-family:'Newsreader',Georgia,serif;font-weight:400;
  font-size:1.8rem;color:var(--navy);line-height:1;margin-bottom:5px}
.aaiSCStats span{font-size:.78rem;color:var(--slate)}
.aaiSCNote{padding:12px 20px;margin:0;font-size:.85rem;color:var(--slate);border-top:1px solid var(--line)}
@media(max-width:600px){ .aaiSCStats{grid-template-columns:1fr 1fr} }

/* The heading takes focus when the card appears, so screen reader and
   keyboard users know it is there. It is not a control and is not in the
   tab order, so no outline is drawn on it. 1.3.3. */
.aaiHelp h3:focus{outline:none}