/* ═══════════════════════════════════════════════════════════════
   DIRIGO — accessibility panel, cookie notice, social marks.
   ═══════════════════════════════════════════════════════════════ */

/* ── floating launcher ───────────────────────────────────────── */
.a11y-btn{
  position:fixed;inset-block-end:1.4rem;inset-inline-start:1.4rem;z-index:43;
  width:52px;height:52px;border-radius:999px;display:grid;place-items:center;
  border:1px solid var(--line);background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 12px 30px -18px rgba(0,0,0,.6);cursor:pointer;padding:0;
  transition:transform .45s var(--ease),background .35s,border-color .35s,inset-block-end .45s var(--ease);
}
.a11y-btn:hover{transform:translateY(-3px);border-color:var(--cyan)}
.a11y-btn svg{width:26px;height:26px;color:var(--ink)}
/* Lift clear of the cookie bar while it is still on screen. */
body.cookie-open .a11y-btn{inset-block-end:6.6rem}

/* ── panel ───────────────────────────────────────────────────── */
.a11y-panel{
  position:fixed;inset-block-end:1.4rem;inset-inline-start:1.4rem;z-index:44;
  width:min(330px,calc(100vw - 2.8rem));
  background:var(--paper);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 30px 70px -34px rgba(0,0,0,.6);
  padding:1.3rem;
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.97);transform-origin:bottom left;
  transition:opacity .35s var(--ease),transform .45s var(--ease),visibility 0s linear .45s;
}
body.a11y-open .a11y-panel{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .35s var(--ease),transform .45s var(--ease),visibility 0s;
}
body.a11y-open .a11y-btn{opacity:0;pointer-events:none}
.a11y-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-bottom:.9rem;margin-bottom:.9rem;border-bottom:1px solid var(--line);
}
.a11y-head h2{font-size:1.02rem;font-weight:700}
.a11y-close{
  width:30px;height:30px;border-radius:999px;border:1px solid var(--line);
  background:transparent;cursor:pointer;display:grid;place-items:center;
  font-size:1.05rem;line-height:1;color:var(--ink-soft);padding:0;
}
.a11y-close:hover{border-color:var(--ink);color:var(--ink)}

.a11y-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.7rem}
.a11y-row span{font-size:.92rem;color:var(--ink-soft)}
.a11y-steps{display:flex;gap:.35rem}
.a11y-steps button{
  width:32px;height:32px;border-radius:9px;border:1px solid var(--line);
  background:transparent;cursor:pointer;font:inherit;font-size:1rem;color:var(--ink);
}
.a11y-steps button:hover{border-color:var(--cyan)}
.a11y-size{min-width:3.2ch;text-align:center;font-size:.9rem;color:var(--ink)}

.a11y-opts{display:grid;gap:.4rem;margin-top:.3rem}
.a11y-opt{
  display:flex;align-items:center;gap:.7rem;width:100%;
  padding:.62rem .8rem;border-radius:11px;border:1px solid var(--line);
  background:transparent;cursor:pointer;font:inherit;font-size:.92rem;
  color:var(--ink-soft);text-align:start;
  transition:border-color .3s,color .3s,background .3s;
}
.a11y-opt:hover{border-color:var(--ink);color:var(--ink)}
.a11y-opt .dot{
  width:16px;height:16px;border-radius:5px;border:1px solid var(--line);flex:none;
  display:grid;place-items:center;transition:background .3s,border-color .3s;
}
.a11y-opt[aria-pressed="true"]{border-color:var(--cyan);color:var(--ink)}
.a11y-opt[aria-pressed="true"] .dot{background:var(--cyan);border-color:var(--cyan)}
.a11y-opt[aria-pressed="true"] .dot::after{content:"";width:6px;height:6px;border-radius:2px;background:#fff}
.a11y-reset{
  margin-top:.9rem;width:100%;padding:.62rem;border-radius:11px;
  border:1px solid var(--line);background:transparent;cursor:pointer;
  font:inherit;font-size:.88rem;color:var(--ink-soft);
}
.a11y-reset:hover{border-color:var(--ink);color:var(--ink)}

/* ── the profiles themselves ─────────────────────────────────── */
html.a11y-links a{text-decoration:underline!important;text-underline-offset:.22em}
html.a11y-readable body,
html.a11y-readable h1,html.a11y-readable h2,html.a11y-readable h3{
  font-family:Arial,"Segoe UI",system-ui,sans-serif!important;
  letter-spacing:normal!important;
}
/* Filtering html or body would make fixed elements scroll, so desaturate the
   media itself rather than the page. */
html.a11y-gray img,html.a11y-gray video,html.a11y-gray .card img{filter:grayscale(1)!important}
html.a11y-contrast{--ink:#000;--ink-soft:#000;--ink-faint:#333;--line:#000;--paper:#fff;--paper-soft:#fff}
html.a11y-contrast .hero h1,html.a11y-contrast .lead h2,html.a11y-contrast .fact b,
html.a11y-contrast .page-head h1,html.a11y-contrast .world-title,html.a11y-contrast .manifesto .w.hot{
  background:none!important;-webkit-text-fill-color:currentColor;color:#000!important;
  -webkit-text-stroke:0!important;
}
html.a11y-contrast .lead,html.a11y-contrast .lead h2{background:#000;color:#fff}
html.a11y-contrast .lead h2,html.a11y-contrast .lead .lead-aside p{color:#fff!important}
html.a11y-contrast .hero-veil,html.a11y-contrast .grain{display:none}
html.a11y-contrast .logo-tile img{filter:grayscale(1) contrast(1.4)!important}
html.a11y-still *,html.a11y-still *::before,html.a11y-still *::after{
  animation-play-state:paused!important;
  animation-duration:.001ms!important;
  transition-duration:.001ms!important;
}
html.a11y-still .grain{display:none}

/* Focus must stay obvious once anyone is navigating by keyboard. */
:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px;
}

/* ── cookie notice ───────────────────────────────────────────── */
.cookie{
  position:fixed;inset-block-end:1.2rem;inset-inline:1.2rem;z-index:42;
  margin-inline:auto;width:min(880px,calc(100vw - 2.4rem));
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;
  padding:1.05rem 1.3rem;border-radius:16px;
  background:rgba(255,255,255,.92);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:0 24px 60px -32px rgba(0,0,0,.55);
  transform:translateY(140%);transition:transform .6s var(--ease);
}
body.cookie-open .cookie{transform:none}
.cookie p{margin:0;flex:1 1 320px;font-size:.9rem;line-height:1.7;color:var(--ink-soft)}
.cookie-acts{display:flex;gap:.6rem;flex-wrap:wrap}
.cookie-acts button{
  padding:.6rem 1.25rem;border-radius:999px;border:1px solid var(--line);
  background:transparent;cursor:pointer;font:inherit;font-size:.88rem;color:var(--ink);
  transition:background .35s,color .35s,border-color .35s;
}
.cookie-acts .ok{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cookie-acts .ok:hover{background:var(--cyan);border-color:var(--cyan);color:#fff}
.cookie-acts .no:hover{border-color:var(--ink)}

/* ── social marks ────────────────────────────────────────────── */
.social{display:flex;gap:.55rem;align-items:center}
.social a{
  width:40px;height:40px;border-radius:999px;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--ink-soft);
  transition:border-color .35s,color .35s,transform .45s var(--ease);
}
.social a:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-3px)}
.social svg{width:18px;height:18px}
.menu-foot .social{margin-top:.4rem}

@media(max-width:600px){
  .cookie{inset-inline:.8rem;width:calc(100vw - 1.6rem);padding:1rem}
  .a11y-btn{inset-block-end:1rem;inset-inline-start:auto;inset-inline-end:1rem}
  .a11y-panel{inset-inline-start:auto;inset-inline-end:1rem;transform-origin:bottom right}
  body.cookie-open .a11y-btn{inset-block-end:11rem}
}