/* lumibot.si "more features" pack (Oct 28, 2026): My settings, mixer, read-aloud, errands, stopping points,
   bigger text, colorblind shapes, easy-read letters, calm effects, skip & speed. Kid look by default; html.lx-pg = Sleek (PG) look. */

/* ---------- bigger text (whole page scales, so buttons grow too) ---------- */
html.lx-big1 body { zoom:1.12; }
html.lx-big2 body { zoom:1.25; }
html.lx-big1 #pr-field { zoom:.893; }
html.lx-big2 #pr-field { zoom:.8; }
html.lx-big1, html.lx-big2 { overflow-x:clip; }

/* ---------- easy-read letters ---------- */
html.lx-easy body, html.lx-easy body :is(p, h1, h2, h3, h4, li, a, button, span, small, b, i, em, strong, label, summary, input, textarea, time, div):not(.pc, .pc *) {
  font-family:"Atkinson Hyperlegible", Verdana, Tahoma, sans-serif !important; letter-spacing:.02em; word-spacing:.08em; }

/* ---------- calm effects (photosensitivity): no flashes, sparkles or looping shimmer ---------- */
html.lx-calm .lg-burst, html.lx-calm .h4-fly-dust { display:none !important; }
html.lx-calm *, html.lx-calm *::before, html.lx-calm *::after { animation-iteration-count:1 !important; }
html.lx-calm .lg-spot-beam { animation:none !important; opacity:.25; }
html.lx-calm .lg-card.fin-shiny::before, html.lx-calm .lg-streak.ready { animation:none !important; }

/* ---------- speed: fast ---------- */
html.lx-fast .lg-open[data-stage="rip"] .lg-open-pack { animation-duration:.3s !important; }
html.lx-fast .lg-open-card.flipin { animation-duration:.22s !important; }
html.lx-fast .lg-spot-beam, html.lx-fast .lg-spot-card { animation-duration:1.2s !important; }
html.lx-fast .lg-burst i { animation-duration:.6s !important; }
.lx-skip { margin:10px auto 0; display:flex; min-height:60px; font-size:19px; }
.lg-open:not([data-stage="pack"]) .lx-skip { display:none; }
/* fix: [hidden] buttons inside the pack opener stayed visible on sub pages (.lg-btn / .lg-open-acts set display) */
.lg-open [hidden] { display:none !important; }

/* ---------- colorblind shapes ---------- */
.lx-gsym { position:absolute; left:8px; top:15%; z-index:5; padding:3px 8px; border-radius:10px; background:rgba(8,8,20,.86); color:#fff; border:2px solid #fff; font:900 14px/1.1 Nunito, system-ui, sans-serif; letter-spacing:.04em; pointer-events:none; }
html:not(.lx-cb) .lx-gsym { display:none; }
html.lx-cb .lg-stop-s i { color:transparent !important; -webkit-text-stroke:1.5px #fff; }
html.lx-cb [aria-pressed="true"]:not(.lx-tog):not([data-sound]):not([data-h4-snd]):not(.h4-st):not(.lx-read), html.lx-cb .lg-nb.on { outline:3px dashed #fff; outline-offset:3px; }
html.lx-cb .lg-nb.on .lg-nb-t { text-decoration:underline 3px; text-underline-offset:4px; }
html.lx-cb .sb-st.s0::before { content:"● "; } html.lx-cb .sb-st.s1::before { content:"◆ "; } html.lx-cb .sb-st.s2::before { content:"★ "; }
html.lx-cb .gm-g[aria-pressed="true"] .gm-n { text-decoration:underline 3px; }

/* ---------- shared bits ---------- */
.lx-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.lx-k { font:900 15px/1.2 Nunito, system-ui, sans-serif; letter-spacing:.08em; text-transform:uppercase; color:#ffd36b; margin:0 0 6px; }
.lx-lead { font-size:19px; line-height:1.5; margin:6px 0 10px; }
.lx-small { font-size:16px; opacity:.85; margin:8px 0 0; }
.lx-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.lx-row .lg-btn, .lx-big { flex:1 1 180px; min-height:64px; font-size:19px; justify-content:center; }
.lx-pip { display:block; width:84px; margin:0 auto 4px; }
.lx-pip svg { width:100%; height:auto; display:block; filter:drop-shadow(0 0 14px rgba(255,226,122,.55)); }
.lx-yawn svg { animation:lx-yawn 3.2s ease-in-out infinite; transform-origin:50% 70%; }
.lx-sleep svg .lx-eyes { transform:scaleY(.2); transform-origin:50% 52%; }
@keyframes lx-yawn { 0%, 60%, 100% { transform:scale(1); } 75% { transform:scale(1.08, .94) rotate(-4deg); } }

/* ---------- read it to me ---------- */
.lx-read { display:inline-flex; align-items:center; gap:8px; min-height:60px; padding:0 20px; margin-top:12px; border-radius:18px; border:2px solid rgba(255,226,122,.6); background:rgba(255,226,122,.12); color:#fff; font:800 18px Nunito, system-ui, sans-serif; cursor:pointer; }
.lx-read span { font-size:22px; }
.lx-read:hover { background:rgba(255,226,122,.22); }
.lx-read.on { background:linear-gradient(100deg, #ffb347, #ffd36b); color:#2a1a00; border-color:transparent; }
.sb-dlg-acts .lx-read { margin:0; }
#pip-notebook article.entry .lx-read { display:flex; margin-top:10px; }

/* ---------- modal ---------- */
.lx-modal { position:fixed; inset:0; z-index:160; background:rgba(4,2,14,.72); display:flex; align-items:center; justify-content:center; padding:16px; }
.lx-modal-in { position:relative; width:min(600px, 100%); max-height:90vh; overflow-y:auto; box-sizing:border-box; padding:26px clamp(16px, 4vw, 30px) 24px; border-radius:30px; background:linear-gradient(170deg, #2a1d5c, #140d33); border:2px solid rgba(255,255,255,.22); box-shadow:0 20px 60px rgba(0,0,0,.6); color:#fff; font-family:Nunito, system-ui, sans-serif; text-align:center; animation:lx-in .3s cubic-bezier(.2, .8, .3, 1.2); }
.lx-modal-in h2 { font-size:30px; line-height:1.2; margin:4px 0 6px; }
.lx-mh { text-align:left; }
.lx-x { position:absolute; right:10px; top:10px; width:56px; height:56px; border-radius:50%; border:2px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff; font-size:22px; cursor:pointer; }
.lx-m-settings .lx-modal-in { text-align:left; }
@keyframes lx-in { from { transform:scale(.92); opacity:0; } }
.lx-tip { font-size:22px; margin:8px 0; } .lx-tip b { color:#ffd36b; }
.lx-peek { margin:6px 0 4px; padding:12px 14px; border-radius:16px; background:rgba(255,255,255,.07); font-size:18px; }
.lx-move-ic { font-size:64px; line-height:1; margin:6px 0; }
.lx-rest-sky { position:relative; height:70px; }
.lx-rest-sky i { position:absolute; width:6px; height:6px; border-radius:50%; background:#fff4c8; opacity:.7; animation:lx-tw 3s ease-in-out infinite; }
.lx-rest-sky i:nth-child(1) { left:10%; top:20%; } .lx-rest-sky i:nth-child(2) { left:25%; top:60%; animation-delay:.4s; } .lx-rest-sky i:nth-child(3) { left:40%; top:10%; animation-delay:.9s; } .lx-rest-sky i:nth-child(4) { left:55%; top:70%; animation-delay:1.3s; }
.lx-rest-sky i:nth-child(5) { left:68%; top:25%; animation-delay:.2s; } .lx-rest-sky i:nth-child(6) { left:80%; top:55%; animation-delay:1.7s; } .lx-rest-sky i:nth-child(7) { left:90%; top:15%; animation-delay:.6s; } .lx-rest-sky i:nth-child(8) { left:5%; top:75%; animation-delay:2.1s; }
@keyframes lx-tw { 50% { opacity:.15; transform:scale(.6); } }

/* ---------- errands ---------- */
.lx-errand { margin:16px 0 4px; padding:16px; border-radius:22px; background:linear-gradient(150deg, rgba(255,211,107,.16), rgba(201,162,255,.12)); border:2px solid rgba(255,211,107,.4); text-align:left; }
.lx-etask { display:flex; align-items:center; gap:12px; font-size:21px; font-weight:800; line-height:1.35; margin:4px 0; }
.lx-eic { font-size:34px; line-height:1; flex:none; }
.lx-m-errand .lx-modal-in { text-align:left; }
.lx-m-errand .lx-errand { margin:0; }
.lx-pill { position:fixed; left:max(10px, env(safe-area-inset-left)); bottom:max(12px, env(safe-area-inset-bottom)); z-index:95; display:flex; align-items:stretch; max-width:min(440px, calc(100vw - 104px)); border-radius:22px; background:#1d1640; border:2px solid #ffd36b; box-shadow:0 10px 30px rgba(0,0,0,.5); color:#fff; overflow:hidden; }
.lx-pill-go { display:flex; align-items:center; gap:10px; min-height:64px; padding:6px 10px 6px 12px; background:none; border:0; color:inherit; text-align:left; cursor:pointer; min-width:0; font-family:Nunito, system-ui, sans-serif; }
.lx-pill-go .lx-eic { font-size:28px; }
.lx-pill-t { font-size:16px; font-weight:800; line-height:1.25; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.lx-pill-t small { display:block; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#ffd36b; }
.lx-pill-x { flex:none; width:56px; border:0; border-left:2px solid rgba(255,255,255,.15); background:rgba(255,255,255,.06); color:#fff; font-size:20px; cursor:pointer; }
body.lg-lock .lx-pill { display:none; }
.lx-pill { transition:transform .35s; }
body:has(#lg-pipsay.on) .lx-pill { transform:translateY(170%); pointer-events:none; }
.lx-tile .h4-badge { background:#ffd36b; color:#2a1a00; }

/* ---------- my settings ---------- */
.lx-sheetbox { margin-top:14px; }
.lx-set { margin-top:14px; border-radius:22px; border:2px solid rgba(255,255,255,.18); background:rgba(255,255,255,.05); text-align:left; }
.lx-set > summary { list-style:none; cursor:pointer; min-height:64px; display:flex; align-items:center; gap:10px; padding:0 18px; font:900 21px Nunito, system-ui, sans-serif; color:#fff; border-radius:20px; }
.lx-set > summary::-webkit-details-marker { display:none; }
.lx-set > summary::after { content:"▾"; margin-left:auto; font-size:22px; transition:transform .2s; }
.lx-set[open] > summary::after { transform:rotate(180deg); }
.lx-set-in { padding:0 16px 16px; }
.lx-set section { padding:14px 0; border-top:1px solid rgba(255,255,255,.12); }
.lx-set h3 { font:900 19px Nunito, system-ui, sans-serif; margin:0 0 8px; color:#ffd36b; }
.lx-lab { font-weight:800; font-size:17px; margin:12px 0 6px; }
.lx-seg { display:flex; flex-wrap:wrap; gap:8px; }
.lx-seg button { flex:1 1 90px; min-height:60px; border-radius:18px; border:2px solid rgba(255,255,255,.22); background:rgba(255,255,255,.07); color:#fff; font:800 18px Nunito, system-ui, sans-serif; cursor:pointer; }
.lx-seg button[aria-pressed="true"] { background:linear-gradient(100deg, #ffb347, #ffd36b); color:#2a1a00; border-color:transparent; }
.lx-seg button[aria-pressed="true"]::before { content:"✓ "; }
.lx-trow { display:flex; align-items:center; gap:12px; justify-content:space-between; margin:10px 0; }
.lx-trow > span { min-width:0; } .lx-trow b { display:block; font-size:18px; } .lx-trow small { display:block; font-size:15px; opacity:.8; line-height:1.35; }
.lx-tog { flex:none; position:relative; display:flex; align-items:center; gap:8px; min-width:112px; min-height:60px; padding:0 14px 0 8px; border-radius:30px; border:2px solid rgba(255,255,255,.28); background:rgba(255,255,255,.08); color:#fff; font:900 17px Nunito, system-ui, sans-serif; cursor:pointer; }
.lx-tog-k { width:40px; height:40px; border-radius:50%; background:#8a84a8; transition:transform .2s, background .2s; }
.lx-tog[aria-pressed="true"] { background:linear-gradient(100deg, #5dffa0, #9be8ff); color:#0e2a22; border-color:transparent; }
.lx-tog[aria-pressed="true"] .lx-tog-k { background:#fff; transform:translateX(44px); }
.lx-tog[aria-pressed="true"] .lx-tog-t { transform:translateX(-46px); }
.lx-tog-t { transition:transform .2s; }
.lx-tog[aria-pressed="true"] .lx-tog-k::after { content:"✓"; display:flex; align-items:center; justify-content:center; height:100%; color:#0e2a22; font-weight:900; }
.lx-slider { display:block; margin:10px 0 14px; }
.lx-sl-t { display:flex; align-items:center; gap:8px; font-weight:800; font-size:18px; }
.lx-sl-t b { margin-left:auto; min-width:44px; text-align:right; color:#ffd36b; }
.lx-slider input[type=range] { -webkit-appearance:none; appearance:none; width:100%; height:44px; background:transparent; margin:4px 0 0; cursor:pointer; }
.lx-slider input[type=range]::-webkit-slider-runnable-track { height:14px; border-radius:8px; background:linear-gradient(90deg, #ffd36b, #c9a2ff); }
.lx-slider input[type=range]::-moz-range-track { height:14px; border-radius:8px; background:linear-gradient(90deg, #ffd36b, #c9a2ff); }
.lx-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:40px; height:40px; margin-top:-13px; border-radius:50%; background:#fff; border:4px solid #ffb347; box-shadow:0 2px 8px rgba(0,0,0,.4); }
.lx-slider input[type=range]::-moz-range-thumb { width:34px; height:34px; border-radius:50%; background:#fff; border:4px solid #ffb347; }
.lx-slider input[type=range]:focus-visible { outline:3px solid #fff; outline-offset:4px; border-radius:10px; }
.lx-saved { text-align:center; }
.lx-nb { cursor:pointer; font-family:inherit; }

/* ---------- Sleek (PG) look: darker, calmer, same content ---------- */
html.lx-pg .lx-modal-in { background:linear-gradient(180deg, #11131c, #07080d); border-color:rgba(150,170,210,.25); border-radius:18px; }
html.lx-pg .lx-k, html.lx-pg .lx-set h3, html.lx-pg .lx-sl-t b, html.lx-pg .lx-tip b { color:#9fc2ff; }
html.lx-pg .lx-errand { background:rgba(120,150,210,.08); border-color:rgba(150,170,210,.35); border-radius:16px; }
html.lx-pg .lx-set { border-radius:16px; background:rgba(10,12,20,.6); border-color:rgba(150,170,210,.25); }
html.lx-pg .lx-seg button[aria-pressed="true"], html.lx-pg .lx-read.on { background:linear-gradient(100deg, #6f8cff, #9fc2ff); color:#05070f; }
html.lx-pg .lx-tog[aria-pressed="true"] { background:linear-gradient(100deg, #5fd0c0, #9fc2ff); }
html.lx-pg .lx-pill { background:#0b0d14; border-color:#6f8cff; border-radius:14px; }
html.lx-pg .lx-pill-t small { color:#9fc2ff; }
html.lx-pg .lx-read { border-color:rgba(159,194,255,.55); background:rgba(111,140,255,.12); }
html.lx-pg .lx-slider input[type=range]::-webkit-slider-runnable-track { background:linear-gradient(90deg, #6f8cff, #5fd0c0); }
html.lx-pg .lx-pip svg { filter:none; }

@media (max-width:460px) {
  .lx-modal { padding:8px; align-items:flex-end; }
  .lx-modal-in { border-radius:26px 26px 18px 18px; padding:22px 14px 18px; }
  .lx-modal-in h2 { font-size:25px; }
  .lx-etask { font-size:19px; }
  .lx-tog { min-width:104px; }
}
@media (prefers-reduced-motion: reduce) {
  .lx-modal-in, .lx-yawn svg, .lx-rest-sky i { animation:none !important; }
  .lx-tog-k, .lx-tog-t, .lx-set > summary::after { transition:none; }
}