/* playground.css: the accessibility playground, with js/playground.js. Tokens only. Two halves: the card (to the right of the home page's bio), and what each switch does
   to the whole page, driven by classes and an attribute that playground.js sets on <html>. */

/* ---------- the card ------------------------------------------------------------------------------------ */
.pg-hero{display:block;}
.pg-hero .pg{margin-top:clamp(1.5rem,3vw,2.25rem);}
/* the card is closed until the word "accessibility" in the bio is pressed */
.pg-hero .pg{display:none;}
.pg-hero.pg-open .pg{display:flex;animation:pgIn .3s ease;}
@keyframes pgIn{from{opacity:0;transform:translateY(.5rem);}to{opacity:1;transform:none;}}
.pg-trigger{
  font:inherit;color:inherit;letter-spacing:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;
  display:inline-block;
  text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.14em;   /* a link-style underline, like the site's links */
  transform-origin:50% 90%;
  animation:pgShake 3s ease-in-out 1s infinite;   /* a shake every few seconds says "press me" */
}
.pg-trigger:hover{animation:pgShake .6s ease-in-out;text-decoration-thickness:.1em;}
.pg-trigger[aria-expanded="true"],html.intro-on .pg-trigger{animation:none;}   /* not while the home intro covers the page */
@keyframes pgShake{
  0%,70%,100%{transform:none;}
  74%{transform:translateX(-4px) rotate(-3deg);}
  78%{transform:translateX(4px) rotate(3deg);}
  82%{transform:translateX(-3px) rotate(-2.5deg);}
  86%{transform:translateX(3px) rotate(2deg);}
  90%{transform:translateX(-1.5px) rotate(-1deg);}
  94%{transform:translateX(1px) rotate(.5deg);}
}
.pg-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.pg-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;}
.pg-close{
  flex:none;min-height:44px;
  font-family:"GT America Condensed",var(--ui);font-weight:500;
  font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;line-height:1;
  color:var(--ink);background:transparent;border:1px solid currentColor;border-radius:999px;padding:.6rem 1rem;cursor:pointer;
  transition:background-color .2s ease,color .2s ease;
}
.pg-close:hover{background:var(--ink);color:var(--panel);}
@media (min-width:64rem){
  .pg-hero.pg-open{
    display:grid;grid-template-columns:minmax(0,1fr) clamp(18rem,25vw,22rem);
    column-gap:clamp(2rem,5vw,5rem);align-items:start;
  }
  .pg-hero .hero-statement{max-width:none;}
  .pg-hero .pg{margin-top:.35em;}
}
.pg{
  display:flex;flex-direction:column;gap:.85rem;
  padding:clamp(1.1rem,2vw,1.6rem);
  background:var(--panel);color:var(--ink);
  border:1px solid var(--rule);border-radius:clamp(12px,1.6vw,20px);
  box-shadow:var(--shadow-card);
}
.pg .pg-h{
  margin:0;font-family:var(--display-alt);font-weight:400;
  font-size:clamp(1.4rem,2vw,1.8rem);line-height:1;letter-spacing:0;color:var(--ink);
}
.pg .pg-lede{margin:0;max-width:none;font-family:var(--body-text);letter-spacing:.022em;font-size:1.05rem;line-height:1.4;color:var(--ink);}
.pg-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.2rem;}
.pg-switch{
  display:flex;align-items:center;gap:.8rem;width:100%;min-height:44px;
  background:none;border:0;padding:.25rem 0;cursor:pointer;
  color:var(--ink);font:inherit;text-align:left;
}
.pg-track{
  flex:none;display:flex;align-items:center;
  width:2.9rem;height:1.6rem;padding:2px;
  border:2px solid var(--ink);border-radius:999px;background:transparent;
  transition:background-color .2s ease,border-color .2s ease;
}
.pg-thumb{width:1.05rem;height:1.05rem;border-radius:50%;background:var(--ink);transition:transform .2s ease,background-color .2s ease;}
.pg-switch[aria-checked="true"] .pg-track{background:var(--forest-700);border-color:var(--forest-700);}
.pg-switch[aria-checked="true"] .pg-thumb{background:var(--apricot-50);transform:translateX(1.3rem);}
.pg-label{font-family:var(--body-text);letter-spacing:.022em;font-size:1.15rem;line-height:1.2;color:var(--ink);}
.pg-row--select{display:flex;flex-direction:column;gap:.4rem;padding-top:.35rem;}
.pg-select{
  width:100%;min-height:44px;padding:.5rem .7rem;
  font-family:var(--body-text);letter-spacing:.022em;font-size:1.1rem;color:var(--ink);
  background:var(--ground);border:1px solid var(--ink);border-radius:8px;
}
.pg-reset{
  align-self:flex-start;min-height:44px;
  font-family:"GT America Condensed",var(--ui);font-weight:500;
  font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;line-height:1;
  color:var(--ink);background:transparent;border:1px solid currentColor;border-radius:999px;padding:.6rem 1.05rem;cursor:pointer;
  transition:background-color .2s ease,color .2s ease;
}
.pg-reset:hover{background:var(--ink);color:var(--panel);}
.pg-status{margin:0;max-width:none;min-height:1.3em;font-family:var(--body-text);letter-spacing:.022em;font-size:.95rem;line-height:1.3;color:var(--ink);}
.pg-filters{position:absolute;width:0;height:0;overflow:hidden;}

/* on the other pages: a way back out of a setting you chose on the home page */
.pg-pill{
  position:fixed;z-index:90;left:var(--step,1.5rem);bottom:clamp(.75rem,1.6vw,1.25rem);
  font-family:"GT America Condensed",var(--ui);font-weight:500;
  font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;line-height:1;
  color:var(--apricot-50);background:var(--forest-900);border:1px solid var(--apricot-50);border-radius:999px;
  padding:.7rem 1.05rem;min-height:44px;cursor:pointer;
}
.pg-pill:hover{background:var(--apricot-50);color:var(--forest-900);}

/* ---------- 1. high contrast ---------------------------------------------------------------------------- */
html.pg-contrast{
  --ground:var(--paper);--panel:var(--paper);--card-ground:var(--paper);
  --ink:var(--shade);--muted:var(--shade);--accent:var(--shade);--about-bio-ink:var(--shade);
  --rule:var(--shade);
  --focus-ring:var(--shade);
}
html.pg-contrast body{background:var(--ground);--ink:var(--shade);--muted:var(--shade);--accent:var(--shade);}   /* the case studies set these on <body>, below <html> */
/* the case studies' poster headers: black fields with cream type; the giant title keeps a company hue, bright enough to read against black */
html.pg-contrast .poster-head{--ph-ground:var(--shade);--ph-deep:var(--forest-600);}
html.pg-contrast .poster-head--oclc{--ph-deep:var(--inkblue-600);}
html.pg-contrast .poster-head--craft{--ph-deep:var(--orange-600);}
html.pg-contrast a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em;}
html.pg-contrast :focus-visible{outline-width:4px;outline-offset:3px;}
/* the work panels: black fields, cream type; the giant word keeps its company's hue as a deep tone */
html.pg-contrast .panel{--panel:var(--shade)!important;color:var(--apricot-50);}
html.pg-contrast .panel--oclc{--panel-deep:var(--inkblue-800)!important;}
html.pg-contrast .panel--cas{--panel-deep:var(--forest-800)!important;}
html.pg-contrast .panel--craft{--panel-deep:var(--orange-800)!important;}
html.pg-contrast .panel *{--rule:var(--apricot-50);}
html.pg-contrast .chip:nth-child(n){background:var(--shade)!important;color:var(--paper)!important;}
html.pg-contrast .tag{border-color:var(--apricot-50);}
/* the grey artboard canvas on the CAS pages hard-codes its label colour (4.89:1 on the canvas); black clears 7:1 there */
html.pg-contrast .case-artboard-label{color:var(--shade);}
/* the playground card itself: keep its on-state visible */
html.pg-contrast .pg{border-width:2px;}
html.pg-contrast .pg-switch[aria-checked="true"] .pg-track{background:var(--shade);border-color:var(--shade);}

/* ---------- 2. larger text ------------------------------------------------------------------------------ */
html.pg-large{font-size:150%;}
/* the about poster is a fixed-ratio stage with its giant "me" placed by hand; larger text needs a taller stage */
@media (min-width:64rem){
  html.pg-large .about-poster{aspect-ratio:16 / 13!important;}
  html.pg-large .about-word--me{top:55cqw!important;}
}

/* ---------- 3. simulate colour blindness ---------------------------------------------------------------- */
html[data-pg-cb="protanopia"]{filter:url(#pg-protanopia);}
html[data-pg-cb="deuteranopia"]{filter:url(#pg-deuteranopia);}
html[data-pg-cb="tritanopia"]{filter:url(#pg-tritanopia);}
html[data-pg-cb="achromatopsia"]{filter:url(#pg-achromatopsia);}

@media (prefers-reduced-motion:reduce){.pg-track,.pg-thumb,.pg-reset,.pg-close,.pg-trigger{transition:none;}.pg-hero.pg-open .pg{animation:none;}.pg-trigger,.pg-trigger:hover{animation:none;}}
html.reduce-motion .pg-trigger,html.reduce-motion .pg-trigger:hover,html.reduce-motion .pg-hero.pg-open .pg{animation:none;}