/* WITU accessibility panel: compact presentation, full-size touch targets. */
:root {
  --a11y-brand: #663201;
  --a11y-accent: #fd6501;
  --a11y-action: #a63d00;
  --a11y-ink: #30251d;
  --a11y-muted: #66574a;
  --a11y-border: #e9d9cc;
  --a11y-surface: #fff8f2;
}
.a11y-launcher {
  position: fixed; left: 16px; bottom: 16px; z-index: 1100;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 15px;
  border: 1px solid #fff; border-radius: 24px;
  background: var(--a11y-brand); color: #fff;
  font: 600 13px/1.4 Arial, sans-serif; letter-spacing: .01em;
  box-shadow: 0 3px 12px #66320126; cursor: pointer;
}
.a11y-launcher:hover { background: var(--a11y-action); }
.a11y-panel {
  box-sizing: border-box; position: fixed; inset: auto auto 70px 16px;
  width: min(360px, calc(100vw - 32px));
  max-height: min(620px, calc(100dvh - 90px)); margin: 0;
  overflow: auto; overscroll-behavior: contain;
  padding: 16px; border: 1px solid var(--a11y-border);
  border-top: 4px solid var(--a11y-accent); border-radius: 12px;
  background: #fff; color: var(--a11y-ink);
  box-shadow: 0 12px 40px #30251d26;
  font: 14px/1.5 Arial, sans-serif;
  scrollbar-width: thin; scrollbar-color: #c6a990 #fff8f2;
}
.a11y-panel *, .a11y-panel *::before, .a11y-panel *::after { box-sizing: border-box; }
.a11y-panel::backdrop { background: #30251d40; }
.a11y-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--a11y-border); }
.a11y-top h2 { margin: 0; color: var(--a11y-brand); font: 700 18px/1.3 Arial,sans-serif; }
.a11y-panel p { margin: 10px 0; color: var(--a11y-muted); font-size: 13px; line-height: 1.5; }
.a11y-panel > label { display: block; margin-top: 8px; font-weight: 600; }
.a11y-panel select {
  display: block; width: 100%; min-height: 44px; margin: 4px 0 10px;
  padding: 8px 10px; border: 1px solid #bfa38c; border-radius: 6px;
  background: #fff; color: var(--a11y-ink); font: inherit;
}
.a11y-options { display: grid; gap: 4px; }
.a11y-options label {
  display: flex; align-items: center; gap: 10px; min-height: 44px;
  padding: 7px 9px; background: var(--a11y-surface);
  border: 1px solid transparent; border-radius: 6px; cursor: pointer;
}
.a11y-options label:hover { border-color: var(--a11y-border); }
.a11y-options label:has(input:checked) { border-color: #b77847; background: #fff0e3; }
.a11y-options input { width: 18px; height: 18px; margin: 0; flex-shrink: 0; accent-color: var(--a11y-brand); }
.a11y-panel button {
  min-height: 44px; padding: 8px 10px; border: 1px solid var(--a11y-border);
  border-radius: 6px; background: var(--a11y-surface); color: var(--a11y-brand);
  font: 600 13px/1.35 Arial,sans-serif; cursor: pointer;
}
.a11y-panel button:hover { border-color: #b77847; background: #fff0e3; }
.a11y-panel [data-close] { flex-shrink: 0; padding-inline: 10px; background: #fff; }
.a11y-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--a11y-border); }
.a11y-panel [data-read] { grid-column: 1 / -1; background: var(--a11y-brand); border-color: var(--a11y-brand); color: #fff; }
.a11y-panel [data-read]:hover { background: var(--a11y-action); }
.a11y-panel button:disabled { opacity: .6; cursor: default; }
.a11y-panel .a11y-help { margin-top: 12px; font-size: 12px; line-height: 1.5; }
#a11y-status:empty { display: none; }
#a11y-status { padding: 8px 10px; background: var(--a11y-surface); border-left: 3px solid var(--a11y-accent); color: var(--a11y-brand); }
.a11y-panel :is(button,input,select):focus-visible, .a11y-launcher:focus-visible { outline: 3px solid var(--a11y-brand); outline-offset: 3px; box-shadow: 0 0 0 6px #fff; }
.a11y-guide { position: fixed; left: 0; right: 0; height: 4px; background: var(--a11y-accent); border: 1px solid var(--a11y-brand); pointer-events: none; z-index: 1050; }
.a11y-guide[hidden] { display: none; }
@media (max-width: 420px) {
  .a11y-launcher { left: 10px; bottom: 10px; }
  .a11y-panel { left: 10px; bottom: 64px; width: calc(100vw - 20px); max-height: calc(100dvh - 80px); padding: 14px; }
}
@media (max-height: 480px) { .a11y-panel { bottom: 12px; max-height: calc(100dvh - 24px); } }

body.a11y-spacing :is(main,.site-header,.site-footer) :is(p,li,a,h1,h2,h3,h4,h5,h6,label,blockquote) { line-height:1.8 !important; letter-spacing:.08em !important; word-spacing:.12em !important; }
body.a11y-font :is(main,.site-header,.site-footer) :is(p,li,a,button,label,input,textarea,select,h1,h2,h3,h4,h5,h6,span) { font-family:Arial,Helvetica,sans-serif !important; }
body.a11y-links a, body.a11y-links a:hover, body.a11y-links a:visited { text-decoration:underline !important; text-underline-offset:4px; outline:2px solid currentColor; outline-offset:2px; }
body.a11y-headings main :is(h1,h2,h3,h4,h5,h6) { outline:3px solid #663201; outline-offset:4px; }
body.a11y-images :is(main,.site-footer) :is(img,video) { visibility:hidden !important; }
body.a11y-images main * { background-image:none !important; }
body.a11y-motion *, body.a11y-motion *::before, body.a11y-motion *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
body.a11y-motion .fade-in { opacity:1 !important; transform:none !important; }
body[data-a11y-contrast="dark"] { --a11y-bg:#111; --a11y-fg:#fff; --a11y-link:#ffe066; }
body[data-a11y-contrast="light"] { --a11y-bg:#fff; --a11y-fg:#111; --a11y-link:#123e85; }
body[data-a11y-contrast="dark"] :is(main,.site-header,.site-footer), body[data-a11y-contrast="light"] :is(main,.site-header,.site-footer), body[data-a11y-contrast="dark"] :is(main,.site-header,.site-footer) *, body[data-a11y-contrast="light"] :is(main,.site-header,.site-footer) * { background-color:var(--a11y-bg) !important; background-image:none !important; color:var(--a11y-fg) !important; border-color:var(--a11y-fg) !important; text-shadow:none !important; }
body[data-a11y-contrast="dark"] a, body[data-a11y-contrast="light"] a { color:var(--a11y-link) !important; }
body[data-a11y-contrast="dark"] .a11y-launcher, body[data-a11y-contrast="light"] .a11y-launcher { color:white !important; }

body[data-a11y-contrast="dark"], body[data-a11y-contrast="light"] { background:var(--a11y-bg) !important; color:var(--a11y-fg) !important; }