/* ==========================================================================
   accessibility.css: the Accessibility statement only (site/accessibility.html).
   Tokens only (var(--…)); no colour literals. Sandbox build, Sept 27, 2026.
   ========================================================================== */

.a11y-hero h1{margin-top:14px}
.a11y-hero .doc-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.a11y-hero .chip{white-space:normal;height:auto;min-height:30px;padding-top:5px;padding-bottom:5px;line-height:1.3}
.a11y-body{padding-top:clamp(32px, 4vw, 56px)}

/* Narrow screens: the one-column layout may never be wider than the screen */
@media (max-width: 1020px){
  .doc-layout{grid-template-columns:minmax(0,1fr)}
}

/* The statement body */
.doc > section:first-child > h2{margin-top:0}
.doc > section{scroll-margin-top:calc(var(--nav-h) + 24px)}
.doc .lead{margin-top:14px}
.doc .feature-list{padding-left:0;margin-top:18px}
.doc .feature-list li + li{margin-top:0}
.doc .feature-list li{line-height:1.6}
.doc .feature-list b{display:inline}

/* "Never color alone": the five statuses, shown the way the apps show them */
.status-demo{margin-top:20px;padding:18px 20px;border-radius:var(--r-lg);background:var(--surface-1);box-shadow:inset 0 0 0 1px var(--line-hair)}
.status-demo figcaption{margin-top:12px;font-size:var(--fs-meta);line-height:1.5;color:var(--ink-3)}

/* Known limits: a quiet caution list */
.limit-list{list-style:none;padding-left:0 !important;display:grid;gap:12px}
.limit-list li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;
  padding:16px 18px;border-radius:var(--r-lg);
  background:var(--surface-2);box-shadow:var(--sh-1), inset 0 0 0 1px var(--line-hair);
}
.limit-list li + li{margin-top:0 !important}
.limit-list .icon-well{width:40px;height:40px;border-radius:var(--r-sm)}
.limit-list .icon-well .ic{width:20px;height:20px}
.limit-list p{margin-top:0;line-height:1.6;color:var(--ink-2)}
.limit-list b{display:block;margin-bottom:2px}

/* Getting help */
.help-card{margin-top:20px}
.doc .help-card .contact-list{margin-top:0;padding-left:0}
.doc .help-card .contact-list li + li{margin-top:0}
.help-card .contact-list li{min-height:44px}
.help-card .contact-list a{overflow-wrap:anywhere}
.help-card p{margin-top:12px}