/* aw-widget.css - Accessibility Widget (Floating Button) */

:root{
  --aw-z: 2147483000;
  --aw-bg: #111827;
  --aw-fg: #ffffff;
  --aw-muted: rgba(255,255,255,.75);
  --aw-panel: #0b1220;
  --aw-border: rgba(255,255,255,.12);
  --aw-shadow: 0 18px 50px rgba(0,0,0,.35);
  --aw-radius: 18px;
  --aw-gap: 10px;
  --aw-size: 56px;
  --aw-accent: #22c55e;
  --aw-tile: rgba(255,255,255,.08);
  --aw-tile-hover: rgba(255,255,255,.12);
  --aw-focus: 0 0 0 3px rgba(34,197,94,.45);
  --aw-font-scale-1: 1.08;
  --aw-font-scale-2: 1.16;
  --aw-font-scale-3: 1.24;
}

/* FAB + panel container */
.aw-root{
  position: fixed;
  inset: auto 18px 18px auto;
  z-index: var(--aw-z);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.aw-fab{
  width: var(--aw-size);
  height: var(--aw-size);
  border-radius: 999px;
  border: 1px solid var(--aw-border);
  background: var(--aw-bg);
  color: var(--aw-fg);
  box-shadow: var(--aw-shadow);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.aw-fab:focus{ outline: none; box-shadow: var(--aw-shadow), var(--aw-focus); }
.aw-fab svg{ width: 26px; height: 26px; }

.aw-panel{
  width: min(360px, calc(100vw - 24px));
  margin-bottom: 12px;
  background: var(--aw-panel);
  color: var(--aw-fg);
  border: 1px solid var(--aw-border);
  border-radius: var(--aw-radius);
  box-shadow: var(--aw-shadow);
  overflow: hidden;
}
.aw-panel[aria-hidden="true"]{ display: none; }

.aw-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 10px 12px;
  border-bottom: 1px solid var(--aw-border);
  gap: 10px;
}
.aw-title{ font-weight: 700; font-size: 14px; letter-spacing: .2px; }
.aw-sub{ font-size: 12px; color: var(--aw-muted); margin-top: 2px; }

.aw-close{
  border: 1px solid var(--aw-border);
  background: transparent;
  color: var(--aw-fg);
  width: 36px;
  height: 36px;
  border-radius: 12px;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.aw-close:focus{ outline: none; box-shadow: var(--aw-focus); }
.aw-close:hover{ background: rgba(255,255,255,.06); }

.aw-body{ padding: 12px; }

.aw-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--aw-gap);
}

.aw-tile{
  border: 1px solid var(--aw-border);
  background: var(--aw-tile);
  color: var(--aw-fg);
  border-radius: 14px;
  padding: 10px 10px;
  cursor: pointer;
  min-height: 48px;
  display: flex;
  gap: 10px;
  align-items: center;
  text-align: left;
}
.aw-tile:hover{ background: var(--aw-tile-hover); }
.aw-tile:focus{ outline: none; box-shadow: var(--aw-focus); }

.aw-ic{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(34,197,94,.14);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.aw-ic svg{ width: 18px; height: 18px; }

.aw-lbl{ font-weight: 650; font-size: 13px; line-height: 1.1; }
.aw-hint{ font-size: 11px; color: var(--aw-muted); margin-top: 2px; }

.aw-footer{
  padding: 10px 12px 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--aw-border);
}

.aw-btn{
  border: 1px solid var(--aw-border);
  background: rgba(255,255,255,.06);
  color: var(--aw-fg);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 650;
  font-size: 13px;
}
.aw-btn:hover{ background: rgba(255,255,255,.1); }
.aw-btn:focus{ outline: none; box-shadow: var(--aw-focus); }

.aw-help{
  border: none;
  background: transparent;
  color: var(--aw-muted);
  cursor: pointer;
  font-size: 12px;
  text-decoration: underline;
  padding: 8px 0;
}
.aw-help:focus{
  outline: none;
  box-shadow: var(--aw-focus);
  border-radius: 10px;
  padding: 8px 8px;
  margin-left: -8px;
}

.aw-help-text{
  margin-top: 10px;
  font-size: 12px;
  color: var(--aw-muted);
  line-height: 1.4;
  border: 1px dashed var(--aw-border);
  padding: 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
}

/* Cursor halo */
#aw-cursor{
  position: fixed;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  pointer-events: none;
  z-index: var(--aw-z);
  border: 2px solid rgba(34,197,94,.65);
  box-shadow: 0 0 0 8px rgba(34,197,94,.18);
  transform: translate(-9999px,-9999px);
  opacity: 0;
}
html.aw-cursor #aw-cursor{ opacity: 1; }

/* ====== Global accessibility effects (applied on <html>) ====== */

/* Font scaling */
html.aw-big-1{ font-size: calc(100% * var(--aw-font-scale-1)); }
html.aw-big-2{ font-size: calc(100% * var(--aw-font-scale-2)); }
html.aw-big-3{ font-size: calc(100% * var(--aw-font-scale-3)); }

/* Letter spacing */
html.aw-letter-1 *{ letter-spacing: .02em !important; }
html.aw-letter-2 *{ letter-spacing: .04em !important; }
html.aw-letter-3 *{ letter-spacing: .06em !important; }

/* Line height */
html.aw-line-1 body{ line-height: 1.6 !important; }
html.aw-line-2 body{ line-height: 1.85 !important; }

/* Text align */
html.aw-align-left body{ text-align: left !important; }
html.aw-align-center body{ text-align: center !important; }
html.aw-align-justify body{ text-align: justify !important; }

/* Dark / high contrast */
html.aw-dark-contrast{ filter: contrast(1.2) saturate(1.05); }
html.aw-dark-contrast body{
  background: #0a0a0a !important;
  color: #ffffff !important;
}
html.aw-dark-contrast a{ color: #a7f3d0 !important; }

/* Links underline */
html.aw-links a{
  text-decoration: underline !important;
  text-underline-offset: 2px;
  text-decoration-thickness: 2px;
}

/* Reduce motion */
html.aw-stop-motion *,
html.aw-stop-motion *::before,
html.aw-stop-motion *::after{
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* Hide images */
html.aw-hide-images img,
html.aw-hide-images svg,
html.aw-hide-images video,
html.aw-hide-images picture{
  visibility: hidden !important;
}

/* Dyslexia-friendly (fallback stack) */
html.aw-dyslexia body,
html.aw-dyslexia *{
  font-family: "Atkinson Hyperlegible", "Lexend", "Verdana", "Tahoma", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

/* Low saturation */
html.aw-sat-low{ filter: saturate(.55) !important; }

/* Optional: Zoom mode for widget UI only */
.aw-panel.aw-zoom{ transform: scale(1.06); transform-origin: bottom right; }

/* Default: on small screens use 1 column for easier tapping */
@media (max-width: 420px){
  .aw-root{ inset: auto 12px 12px auto; }
  .aw-grid{ grid-template-columns: 1fr; }
}

/* Respect OS reduced motion by default if user wants */
@media (prefers-reduced-motion: reduce){
  html:not(.aw-stop-motion) .aw-panel{ scroll-behavior: auto; }
}

/* --- MOBILE COMPACT + SCROLL (fix: too big + missing options) --- */
@media (max-width: 480px){
  :root{
    --aw-size: 48px; /* smaller fab */
    --aw-radius: 16px;
  }

  .aw-root{ inset: auto 10px 10px auto; }

  .aw-panel{
    width: min(340px, calc(100vw - 20px));
    max-height: min(72vh, 560px); /* keep within viewport */
    display: flex;
    flex-direction: column;
  }

  .aw-body{
    overflow: auto; /* scroll inside panel */
    -webkit-overflow-scrolling: touch;
    padding: 10px;
  }

  .aw-grid{ gap: 8px; }
  .aw-tile{ padding: 8px; min-height: 44px; }
  .aw-ic{ width: 30px; height: 30px; border-radius: 10px; }
  .aw-lbl{ font-size: 12.5px; }
  .aw-hint{ font-size: 10.5px; }

  .aw-head{ padding: 10px; }
  .aw-close{ width: 34px; height: 34px; border-radius: 12px; }

  .aw-footer{
    position: sticky;
    bottom: 0;
    background: var(--aw-panel);
    z-index: 1;
  }
}