/* ==========================================================================
   Goodthing Foundation - Accessibility Toolbar
   Framework-agnostic. Drop-in. Adapts to host palette via CSS vars below.
   Derived from the live B&D MOVES toolbar; generalised for reuse.
   ========================================================================== */

:root{
  /* Override these per site to match brand. Sensible defaults provided. */
  --a11y-ink: #14130f;       /* toolbar text / borders */
  --a11y-paper: #ffffff;     /* panel background */
  --a11y-accent: #d6ff3d;    /* active-state (B&D lime by default) */
  --a11y-scrim: rgba(10,10,10,.55);
}

/* text-size scaling - works for any rem/em-based type */
html[data-a11y-text="large"]   { font-size: 112.5%; }
html[data-a11y-text="largest"] { font-size: 125%; }

/* dyslexia-friendly: high-legibility stack + generous spacing */
html.a11y-dyslexia body, html.a11y-dyslexia input, html.a11y-dyslexia button, html.a11y-dyslexia textarea{
  font-family: "Atkinson Hyperlegible", Verdana, Tahoma, sans-serif !important;
  letter-spacing: .03em !important; word-spacing: .08em !important; line-height: 1.7 !important;
}

/* reduced motion */
html.a11y-reduce-motion *, html.a11y-reduce-motion *::before, html.a11y-reduce-motion *::after{
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important; scroll-behavior: auto !important;
}

/* high-contrast */
html.a11y-contrast{ background:#000 !important; }
html.a11y-contrast body, html.a11y-contrast *:not(.a11y-trigger):not(.a11y-trigger *){
  background-color:#000 !important; color:#fff !important; border-color:#fff !important; box-shadow:none !important; text-shadow:none !important;
}
html.a11y-contrast a{ color:#ffe600 !important; text-decoration:underline !important; }
html.a11y-contrast img, html.a11y-contrast video{ filter:none !important; opacity:1 !important; }

/* skip link */
.a11y-skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--a11y-ink);color:var(--a11y-paper);
  padding:12px 18px;border-radius:8px;font:600 15px/1 system-ui,sans-serif}
.a11y-skip:focus{left:12px}

/* trigger pill */
.a11y-trigger{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;
  font:600 .875rem/1 system-ui,sans-serif;color:var(--a11y-ink);background:rgba(31,28,22,.10);
  border:none;border-radius:999px;cursor:pointer;transition:background .15s}
.a11y-trigger:hover{background:rgba(31,28,22,.18)}
.a11y-trigger:focus-visible{outline:2px solid var(--a11y-ink);outline-offset:2px}
.a11y-trigger__icon{display:inline-flex;align-items:baseline;font-weight:800;font-size:1rem;letter-spacing:-.02em}
.a11y-trigger__plus{margin-left:1px;font-size:.6875rem}

/* overlay + panel */
.a11y-overlay{position:fixed;inset:0;z-index:9990;background:var(--a11y-scrim);animation:a11yFade .2s ease}
.a11y-panel{position:fixed;z-index:9991;left:50%;top:50%;transform:translate(-50%,-50%);
  width:calc(100% - 40px);max-width:460px;max-height:88vh;overflow-y:auto;
  background:var(--a11y-paper);color:var(--a11y-ink);border-radius:18px;padding:22px 22px 26px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.45);animation:a11yPop .2s cubic-bezier(.22,.61,.36,1)}
@keyframes a11yFade{from{opacity:0}to{opacity:1}}
@keyframes a11yPop{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
@media (max-width:520px){
  .a11y-panel{top:auto;bottom:0;left:0;right:0;transform:none;width:100%;max-width:none;border-radius:18px 18px 0 0}
  @keyframes a11yPop{from{transform:translateY(12px);opacity:.6}to{transform:none;opacity:1}}
}

.a11y-panel__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.a11y-panel__title{margin:0;font:700 1.375rem/1.1 system-ui,sans-serif}
.a11y-panel__close{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  background:none;border:none;border-radius:999px;font-size:1.4rem;color:inherit;cursor:pointer}
.a11y-panel__close:hover{background:rgba(10,10,10,.07)}

.a11y-group{margin-bottom:20px}
.a11y-group__title{margin:0 0 10px;font:600 .75rem/1 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;opacity:.6}
.a11y-sizes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.a11y-size{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:88px;padding:14px 8px;
  background:rgba(10,10,10,.05);border:2px solid transparent;border-radius:12px;color:inherit;cursor:pointer;font:inherit}
.a11y-size:hover{background:rgba(10,10,10,.09)}
.a11y-size[aria-pressed="true"]{background:var(--a11y-accent);border-color:var(--a11y-ink)}
.a11y-size__a{font-weight:800;line-height:1}
.a11y-size__t{font-size:.8125rem;font-weight:600}

.a11y-toggle{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:64px;
  margin-bottom:8px;padding:14px 16px;text-align:left;background:rgba(10,10,10,.05);border:2px solid transparent;
  border-radius:12px;color:inherit;cursor:pointer;font:inherit}
.a11y-toggle:hover{background:rgba(10,10,10,.09)}
.a11y-toggle[aria-pressed="true"]{background:var(--a11y-accent);border-color:var(--a11y-ink)}
.a11y-toggle__text{display:flex;flex-direction:column;gap:2px}
.a11y-toggle__name{font-size:1rem;font-weight:600}
.a11y-toggle__sub{font-size:.8125rem;opacity:.65}
.a11y-toggle__state{flex:none;padding:6px 12px;font:600 .75rem/1 system-ui,sans-serif;letter-spacing:.12em;
  text-transform:uppercase;background:rgba(10,10,10,.08);border-radius:999px}
.a11y-toggle[aria-pressed="true"] .a11y-toggle__state{background:var(--a11y-ink);color:var(--a11y-paper)}

.a11y-trigger:focus-visible,.a11y-size:focus-visible,.a11y-toggle:focus-visible,.a11y-panel__close:focus-visible{
  outline:2px solid var(--a11y-ink);outline-offset:2px}

/* ── Inline quick-bar + labelled trigger (px-based, robust to any root font-size; replicates B&D MOVES) ── */
.a11y-bar{display:none;align-items:center;gap:2px;background:rgba(31,28,22,.07);border-radius:999px;padding:4px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase}
.a11y-bar .a11y-label{opacity:.55;padding:0 8px;font-size:11px;font-weight:600;white-space:nowrap}
.a11y-bar button{color:var(--a11y-ink,#14130f);cursor:pointer;font:inherit;font-size:13px;font-weight:600;letter-spacing:.08em;background:none;border:none;border-radius:999px;padding:7px 11px;line-height:1;transition:background .15s}
.a11y-bar button:hover{background:rgba(31,28,22,.13)}
.a11y-bar button.on{background:var(--a11y-accent,#d6ff3d);color:var(--a11y-ink,#14130f)}
.a11y-bar .a11y-sep{background:rgba(31,28,22,.2);width:1px;height:16px;margin:0 4px;display:inline-block}
.a11y-trigger{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:none;border-radius:999px;background:rgba(31,28,22,.1);color:var(--a11y-ink,#14130f);cursor:pointer;font-weight:600;font-size:16px;line-height:1}
.a11y-trigger:hover{background:rgba(31,28,22,.18)}
.a11y-trigger__icon{display:inline-flex;align-items:baseline;font-size:18px;font-weight:800;color:var(--a11y-accent,#d6ff3d)}
.a11y-trigger__plus{margin-left:1px;font-size:12px}
.a11y-trigger__label{font-size:15px}
@media(min-width:1024px){.a11y-bar{display:inline-flex}.a11y-trigger{display:none}}