/* Atelier Academy v67: reading, hand and touch support. Everything here is switched by data-* attributes that app.js puts on <html>. */

/* ---- settings panel extras ---- */
.settings-hint{font-size:11px;color:var(--muted);line-height:1.5;margin:6px 0 0}
.settings-group>label:not(.settings-toggle)+select{margin-bottom:2px}

/* ---- skip link ---- */
.aa-skip{position:fixed;left:12px;top:-60px;z-index:2147483600;background:#10233f;color:#fff;padding:10px 16px;border-radius:10px;font-weight:700;text-decoration:none;transition:top .15s}
.aa-skip:focus{top:12px}

/* ---- reading font ---- */
html[data-font="lexend"]{--aa-font:'Lexend','Verdana','Tahoma',sans-serif}
html[data-font="atkinson"]{--aa-font:'Atkinson Hyperlegible','Verdana','Tahoma',sans-serif}
html[data-font="verdana"]{--aa-font:Verdana,Tahoma,'Trebuchet MS',sans-serif}
html[data-font]:not([data-font="default"]) body,
html[data-font]:not([data-font="default"]) body :not(svg):not(svg *):not(code):not(pre):not(kbd){font-family:var(--aa-font)!important}

/* ---- letter / word spacing (the "wider" step matches the WCAG 1.4.12 text-spacing values) ---- */
html[data-spacing="wide"]{--aa-ls:.05em;--aa-ws:.12em}
html[data-spacing="wider"]{--aa-ls:.12em;--aa-ws:.16em}
html[data-spacing="wide"] body :not(svg):not(svg *),
html[data-spacing="wider"] body :not(svg):not(svg *){letter-spacing:var(--aa-ls)!important;word-spacing:var(--aa-ws)!important}

/* ---- line spacing ---- */
html[data-line="relaxed"]{--aa-lh:1.75}
html[data-line="loose"]{--aa-lh:2.05}
html[data-line="relaxed"] body :is(p,li,dd,dt,td,th,blockquote,figcaption,small,label,.pip-bubble,.pip-bubble *),
html[data-line="loose"] body :is(p,li,dd,dt,td,th,blockquote,figcaption,small,label,.pip-bubble,.pip-bubble *){line-height:var(--aa-lh)!important}
html[data-line="relaxed"] body :is(h1,h2,h3,h4),html[data-line="loose"] body :is(h1,h2,h3,h4){line-height:1.35!important}

/* ---- shorter lines, plain text ---- */
html[data-narrow-text] body :is(p,li,dd,blockquote){max-width:68ch}
html[data-plain-text] body :not(svg):not(svg *){font-style:normal!important;text-transform:none!important}
html[data-plain-text] body :is(p,li,dd,blockquote){text-align:left!important}

/* ---- page tint (a pale colour laid over the whole page) ---- */
html[data-tint="cream"]{--aa-tint:#fff0bd}
html[data-tint="blue"]{--aa-tint:#d4eaff}
html[data-tint="green"]{--aa-tint:#d9f4d6}
html[data-tint="peach"]{--aa-tint:#ffdfcd}
html[data-tint="lilac"]{--aa-tint:#e8dcff}
html[data-tint]:not([data-tint="none"])::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:2147483000;mix-blend-mode:multiply;background:var(--aa-tint)}

/* ---- reading ruler ---- */
.aa-ruler{position:fixed;left:0;right:0;top:0;height:64px;z-index:2147482000;pointer-events:none;box-shadow:0 0 0 100vmax rgba(8,16,30,.4);border-top:2px solid rgba(242,193,78,.95);border-bottom:2px solid rgba(242,193,78,.95);transform:translateY(-300px);will-change:transform}
.aa-ruler[hidden]{display:none}

/* ---- read aloud button ---- */
.aa-read{position:fixed;z-index:2147483500;border:0;border-radius:999px;padding:9px 16px;background:#10233f;color:#fff;font:700 13px/1 system-ui,sans-serif;letter-spacing:0;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.aa-read:hover,.aa-read:focus-visible{background:#735ca9}
.aa-read[hidden]{display:none}

/* ---- underline links ---- */
html[data-underline-links] a:not(.button){text-decoration:underline!important;text-underline-offset:.18em;text-decoration-thickness:2px!important}

/* ---- larger buttons / touch targets ---- */
html[data-big-targets] :is(button,.button,a.button,select,.icon-button,.settings-trigger,.pip-chip,.pip-send,.pip-min,.pip-close,.pip-sound,.pip-music-pp,.pip-music-open,.pip-music-stop,.settings-toggle,summary,[role="button"],[role="tab"]){min-height:44px;min-width:44px}
html[data-big-targets] .settings-toggle i{transform:scale(1.15)}
html[data-big-targets] :is(nav a,.footer a,.lesson-sidebar a){display:inline-block;padding-block:.5em}

/* ---- large pointer ---- */
html[data-big-cursor],html[data-big-cursor] *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 24 24'%3E%3Cpath d='M5 2.5l13.5 10-6 1.4 3.6 7-3 1.6-3.6-7-4.6 4z' fill='black' stroke='white' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 4 3,auto!important}
html[data-big-cursor] :is(a,button,select,label,summary,[role="button"],[role="tab"],[data-action],.pip-btn,.settings-toggle,input[type="checkbox"],input[type="radio"]){cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 24 24'%3E%3Cpath d='M5 2.5l13.5 10-6 1.4 3.6 7-3 1.6-3.6-7-4.6 4z' fill='%23f2c14e' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 4 3,pointer!important}
html[data-big-cursor] :is(input[type="text"],input[type="email"],input[type="password"],input[type="search"],textarea){cursor:text!important}

/* ---- hand preference ----
   "right": controls on the right, lesson menu moves to the right too.   "left": controls on the left. */
html[data-hand="right"] .learning-layout{direction:rtl}
html[data-hand="right"] .learning-layout>*{direction:ltr}
html[data-hand="left"] .settings-drawer{right:auto;left:16px;transform-origin:top left}
html[data-hand="left"] .pip-root{left:24px;right:auto}
html[data-hand="left"] .pip-btn-t{right:auto;left:104px}
html[data-hand="left"] .pip-panel{right:auto;left:138px}
html[data-hand="left"] .pip-root.is-open .pip-btn{right:auto;left:-6px}
html[data-hand="left"] .pip-root .pip-panel.is-min{right:auto;left:140px}
html[data-hand="left"] .pip-min{margin-left:auto}
@media (max-width:900px){html[data-hand="left"] .pip-panel{left:82px;right:auto}}
@media (max-width:700px){html[data-hand="left"] .settings-drawer{left:10px;right:auto}}
@media (max-width:520px){
  html[data-hand="left"] .pip-root{left:6px;right:auto}
  html[data-hand="left"] .pip-root.is-open .pip-panel{left:8px;right:auto}
  html[data-hand="left"] .pip-root.is-open .pip-btn{left:6px;right:auto}
  html[data-hand="left"] .pip-root .pip-panel.is-min{left:96px;right:auto}
}