/* assets_oral/spomeni.css (v2) — « Спомени », UX pour personnes âgées.
   Très gros texte, gros boutons, fort contraste, guidage visuel, mode « поголеми букви ».
   Thème brun/crème. Safe-area (encoches). */

:root{
  --brown:#5e3a22; --brown-d:#3a2413; --cream:#faf6ed; --cream-2:#efe4d1;
  --accent:#8a5a3b; --danger:#a12d2d; --ok:#2f6b3a; --ink:#2b1c10;
  --fs:20px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;overscroll-behavior-y:none}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--cream); color:var(--ink);
  font-size:var(--fs); line-height:1.5; -webkit-text-size-adjust:100%;
}
body.big-text{--fs:25px}
@media (prefers-reduced-motion: reduce){*{animation:none !important; transition:none !important}}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* barre du haut */
.topbar{
  position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:8px;
  padding:calc(8px + env(safe-area-inset-top)) 14px 8px;
  background:var(--cream); border-bottom:1px solid var(--cream-2);
}
.topbar button{
  border:2px solid var(--cream-2); background:#fff; border-radius:12px;
  min-width:52px; min-height:52px; font-size:1.4rem; cursor:pointer; color:var(--brown);
}
.topbar .spacer{flex:1}
.dots{display:flex; gap:7px; align-items:center}
.dots i{width:12px;height:12px;border-radius:50%;background:var(--cream-2);display:block}
.dots i.on{background:var(--brown); transform:scale(1.25)}
.dots i.done{background:var(--accent)}

.wrap{max-width:640px; margin:0 auto; padding:14px 18px calc(48px + env(safe-area-inset-bottom));}
h1{color:var(--brown); font-size:1.9rem; margin:.2em 0 .1em}
.sub{color:var(--accent); margin:0 0 1em}
.step{display:none}
.step.active{display:block; animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.big-btn{
  display:flex; align-items:center; justify-content:center; gap:.5em; width:100%;
  min-height:74px; margin:14px 0; font-size:1.35rem; font-weight:700; color:var(--cream);
  background:var(--brown); border:none; border-radius:16px; cursor:pointer; padding:14px 18px;
  box-shadow:0 3px 0 var(--brown-d); transition:transform .05s;
}
.big-btn:active{transform:translateY(2px)}
.big-btn[disabled]{opacity:.45}
.big-btn.ghost{background:transparent; color:var(--brown); box-shadow:none; border:2px solid var(--brown); min-height:58px; font-size:1.1rem}
.big-btn.danger{background:var(--danger); box-shadow:0 3px 0 #6e1e1e}
.big-btn.ok{background:var(--ok); box-shadow:0 3px 0 #1f4726}

label{display:block; font-weight:700; color:var(--brown); margin:16px 0 6px}
input[type=text], select{
  width:100%; font-size:1.25rem; padding:15px; border:2px solid var(--cream-2);
  border-radius:12px; background:#fff; color:var(--ink);
}
select{appearance:none}
.card{background:#fff; border:2px solid var(--cream-2); border-radius:16px; padding:16px; margin:14px 0}
.consent{display:flex; gap:12px; align-items:flex-start; font-size:1.05rem}
.consent input{width:30px; height:30px; margin-top:2px; flex:none}

video, canvas, #selfiePreview, #reviewSelfie{width:100%; border-radius:16px; background:#000; aspect-ratio:3/4; object-fit:cover; display:block}

/* enregistreur */
.rec-face{text-align:center; padding:6px 0}
.timer{font-size:2.8rem; font-weight:800; color:var(--brown); font-variant-numeric:tabular-nums}
.mic{
  width:160px; height:160px; border-radius:50%; border:none; margin:12px auto;
  background:var(--brown); color:var(--cream); font-size:1.15rem; font-weight:700;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  cursor:pointer; box-shadow:0 4px 0 var(--brown-d);
}
.mic.recording{background:var(--danger); box-shadow:0 4px 0 #6e1e1e; animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.mic svg{width:46px;height:46px}
.level{height:16px; border-radius:8px; background:var(--cream-2); overflow:hidden; margin:14px 0}
.level>i{display:block; height:100%; width:0%; background:var(--ok); transition:width .08s}
.qcard{
  background:var(--brown); color:var(--cream); border-radius:16px; padding:18px 16px;
  font-size:1.25rem; font-weight:700; text-align:center; margin:10px 0;
}
.qnext{background:transparent;border:2px solid var(--brown);color:var(--brown);border-radius:12px;padding:10px 14px;font-size:1rem;font-weight:700;cursor:pointer;display:block;margin:0 auto}
.reassure{text-align:center; font-weight:700; color:var(--ok); margin:8px 0}
.hint{background:var(--cream-2); border-radius:12px; padding:14px; margin:12px 0; color:var(--ink)}
.hint b{color:var(--brown)}
.note{font-size:.95rem; color:var(--accent); margin-top:6px; text-align:center}

/* confirmation */
.review-id{display:flex; gap:14px; align-items:center; margin-bottom:10px}
.review-id img{width:90px;height:120px;aspect-ratio:auto}
.review-id .who strong{font-size:1.3rem; color:var(--brown); display:block}

.progress{height:22px; border-radius:12px; background:var(--cream-2); overflow:hidden; margin:16px 0}
.progress>i{display:block; height:100%; width:0%; background:var(--brown); transition:width .2s}
.msg{padding:14px; border-radius:12px; margin:12px 0; font-weight:600}
.msg.err{background:#f7e3e3; color:var(--danger)}
.center{text-align:center}
.big-emoji{font-size:4.4rem; margin:.2em 0}

/* Мои приказни (liste) */
#listScreen{display:none}
.litem{background:#fff;border:2px solid var(--cream-2);border-radius:14px;padding:14px;margin:12px 0;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.li-main{flex:1;min-width:170px}
.li-main strong{color:var(--brown);font-size:1.15rem}
.li-add{background:var(--brown);color:var(--cream);border:none;border-radius:12px;padding:12px 14px;font-size:1rem;font-weight:700;cursor:pointer;box-shadow:0 3px 0 var(--brown-d)}
.li-add:active{transform:translateY(2px)}

/* Étape thème */
.topics{display:grid;grid-template-columns:1fr;gap:12px;margin:8px 0}
.topic-btn{display:flex;align-items:center;gap:14px;width:100%;min-height:74px;background:#fff;border:2px solid var(--cream-2);border-radius:16px;padding:16px;font-size:1.2rem;font-weight:700;color:var(--brown);cursor:pointer;text-align:left;box-shadow:0 3px 0 var(--cream-2)}
.topic-btn:active{transform:translateY(2px)}
.topic-btn .tic{font-size:2rem;line-height:1;flex:none}