/* AeroSpeak · shell (header, barra de seleção, ajustes, tab bar, estados de áudio) */
:root{--accent:#D71920;--accent-ink:#B5121B;--glass:rgba(255,255,255,.78);--glass-dark:rgba(22,22,24,.86);--ease:cubic-bezier(.2,.8,.2,1);--tabbar-h:64px}

.skip-link{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 14px;border-radius:10px;background:#171717;color:#fff;font:600 13px var(--body);text-decoration:none;transition:top .2s}
.skip-link:focus{top:12px}
#main:focus{outline:none}

/* ---------- Header em uma linha ---------- */
.top .topin{position:relative;flex-wrap:nowrap;gap:18px}
.top .nav{flex:1 1 auto;order:0;justify-content:center;flex-wrap:nowrap;gap:2px;width:auto;overflow:visible}
.top .nav a{white-space:nowrap;font-size:13.5px;padding:9px 11px;border-radius:9px;transition:color .15s,background .15s}
.top-tools{display:flex;align-items:center;gap:8px;flex:none}
.icon-btn{display:inline-flex;align-items:center;gap:6px;height:38px;min-width:38px;justify-content:center;padding:0 10px;border:1px solid var(--line);border-radius:11px;background:#fff;color:#2a2a2a;cursor:pointer;transition:border-color .15s,background .15s,transform .1s}
.icon-btn:hover{border-color:#c7c7c7;background:#fafafa}
.icon-btn:active{transform:scale(.96)}
.icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon-btn kbd{font:10px var(--mono);color:var(--mute);border:1px solid var(--line2);padding:1px 5px;border-radius:4px}
.icon-btn[aria-expanded=true]{border-color:var(--accent);color:var(--accent)}
.is-touch .icon-btn kbd{display:none}
.top .top-progress{display:block;min-width:58px;margin-left:4px}

@media(max-width:1120px){.top .nav a{font-size:12.5px;padding:8px 8px}.top .topin{gap:12px}.brand small{display:none}}

/* ---------- Painel de ajustes ---------- */
.settings-panel{position:absolute;right:0;top:calc(100% + 12px);z-index:40;width:min(340px,calc(100vw - 24px));padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--glass);backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);box-shadow:0 24px 60px #1717172a;opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right;transition:opacity .18s var(--ease),transform .18s var(--ease)}
.settings-panel.is-on{opacity:1;transform:none}
.settings-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.settings-head b{font:600 11px var(--mono);letter-spacing:.1em;color:var(--mute)}
.settings-head button{border:0;background:transparent;font-size:22px;line-height:1;color:var(--mute);cursor:pointer}
.settings-panel .voice-control{display:grid;gap:6px;max-width:none;border:0;padding:0;background:transparent}
.settings-panel .voice-control select{max-width:none;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font:14px var(--body)}
.settings-tip{margin:12px 0 0;color:var(--dim);font:13px/1.45 var(--body)}

/* ---------- Barra flutuante de seleção ---------- */
.sel-bar{position:fixed;z-index:60;display:flex;gap:2px;padding:5px;border-radius:14px;background:var(--glass-dark);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);box-shadow:0 14px 36px #0000003d,inset 0 0 0 1px #ffffff14;opacity:0;transform:translateY(6px) scale(.96);transition:opacity .16s var(--ease),transform .16s var(--ease);user-select:none;-webkit-user-select:none}
.sel-bar.is-on{opacity:1;transform:none}
.sel-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border:0;border-radius:10px;background:transparent;color:#fff;font:600 13px var(--body);cursor:pointer;transition:background .12s}
.sel-btn:hover,.sel-btn:focus-visible{background:#ffffff1f}
.sel-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sel-btn:first-child svg{stroke:#ff6b70}
.sel-bar.is-docked{left:50%!important;top:auto!important;bottom:calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom));transform:translate(-50%,8px) scale(.96)}
.sel-bar.is-docked.is-on{transform:translate(-50%,0)}

/* ---------- Tab bar (celular) ---------- */
.tabbar{display:none}
.more-sheet{display:none}
@media(max-width:980px){
  .top .nav{display:none}
  .top .topin{justify-content:space-between}
  body{padding-bottom:calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom))}
  .tabbar{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:50;display:grid;grid-template-columns:repeat(5,1fr);height:var(--tabbar-h);padding:6px;border-radius:22px;background:var(--glass);backdrop-filter:blur(24px) saturate(1.8);-webkit-backdrop-filter:blur(24px) saturate(1.8);box-shadow:0 10px 34px #17171724,inset 0 0 0 1px #17171712}
  .tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;border-radius:16px;background:transparent;color:#6b6b6b;font:600 10.5px var(--body);letter-spacing:.01em;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .15s,background .15s,transform .1s}
  .tabbar a:active,.tabbar button:active{transform:scale(.94)}
  .tabbar svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .tabbar [aria-current=page]{color:var(--accent);background:#d719200f}
  .more-sheet{position:fixed;inset:0;z-index:55;display:block;background:#17171700;transition:background .22s}
  .more-sheet[hidden]{display:none}
  .more-sheet.is-on{background:#17171740}
  .more-box{position:absolute;left:10px;right:10px;bottom:calc(var(--tabbar-h) + 20px + env(safe-area-inset-bottom));display:grid;gap:4px;padding:10px;border-radius:22px;background:var(--glass);backdrop-filter:blur(24px) saturate(1.8);-webkit-backdrop-filter:blur(24px) saturate(1.8);box-shadow:0 20px 50px #17171733;transform:translateY(16px);opacity:0;transition:transform .22s var(--ease),opacity .22s var(--ease)}
  .more-sheet.is-on .more-box{transform:none;opacity:1}
  .more-grip{justify-self:center;width:36px;height:4px;margin:2px 0 6px;border-radius:4px;background:#17171722}
  .more-box a,.more-box button{display:grid;gap:2px;padding:13px 14px;border:0;border-radius:14px;background:transparent;color:#171717;font:600 16px var(--body);text-align:left;text-decoration:none;cursor:pointer}
  .more-box a:active,.more-box button:active,.more-box [aria-current=page]{background:#1717170a}
  .more-box [aria-current=page]{color:var(--accent)}
  .more-box small{color:var(--mute);font:400 12.5px var(--body)}
  .toast{bottom:calc(var(--tabbar-h) + 22px + env(safe-area-inset-bottom))!important}
}
@media(max-width:560px){
  .top .top-progress{display:none}
  .brand b{font-size:16px}
}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:24px;z-index:70;padding:11px 16px;border-radius:12px;background:var(--glass-dark);color:#fff;font:500 13.5px var(--body);box-shadow:0 12px 30px #0000003a;opacity:0;transform:translate(-50%,10px);transition:opacity .2s var(--ease),transform .2s var(--ease)}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------- Áudios ainda sem gravação ---------- */
.is-missing audio,.is-missing .audio-tools,.is-missing>code,.is-missing .file-hint{display:none!important}
.audio-slot.is-missing .audio-slot-title small,.audio-slot-card.is-missing summary small{opacity:.7}
.audio-slot.is-missing::after,.audio-slot-card.is-missing[open]::after{content:"Gravação ainda não adicionada";display:block;margin-top:6px;color:var(--mute);font:500 11px var(--mono);letter-spacing:.04em}
.audio-file-state{display:none}
.audio-panel.is-empty .audio-slots,.audio-panel.is-empty .listening-guidance{display:none}
.audio-panel.is-empty::after{content:"As gravações deste exercício ainda não foram adicionadas. Faça a atividade pelo texto e volte depois para a escuta.";display:block;margin-top:8px;color:var(--dim);font:14px/1.5 var(--body)}
.mission-audio.is-missing audio{display:block!important;opacity:.35;pointer-events:none}
.audio-summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin:0 0 26px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:#fff}
.audio-summary b{color:var(--accent);font:600 30px/1 var(--display)}
.audio-summary span{color:var(--dim);font:14px var(--body)}
.audio-summary label{margin-left:auto;color:var(--dim);font:13px var(--body);cursor:pointer}
.hide-missing .audio-slot-card.is-missing,.hide-missing .group-missing{display:none}
.audio-none .audio-summary::after{content:"Copie os MP3 para media/audio/ com o nome indicado em manifest.csv. Os players aparecem aqui e nas aulas automaticamente.";flex-basis:100%;color:var(--mute);font:13px/1.5 var(--body)}
.audio-none .group{opacity:.55}

/* ---------- Leitura ---------- */
.lesson-text{text-wrap:pretty}
.lesson-text::selection,.lesson-text *::selection{background:#d7192033}
.page-art img{height:auto;max-width:100%;background:#f3f3f3}

@media(prefers-reduced-motion:reduce){.sel-bar,.settings-panel,.more-box,.more-sheet,.toast,.tabbar a{transition:none!important}}