/* Peças reutilizáveis da folha: títulos, marca-texto, tabelas, post-its, botões de caneta, áudio e diálogos. */
.title{font-size:36px;line-height:42px;color:var(--pen-blue);font-weight:700;margin:0 0 14px;text-wrap:balance}
h3.hand{font-size:26px;line-height:28px;font-weight:700;margin:22px 0 6px;color:var(--ink)}
p{margin:0 0 12px}
.sub{color:var(--pencil)}
.pencil{color:var(--pencil)}
.small{font-size:14.5px;line-height:22px}
.red{color:var(--pen-red)}
.blue{color:var(--pen-blue)}
.big{font-size:27px;line-height:30px;font-weight:700}
.mk{background:linear-gradient(100deg,transparent 0 1%,var(--marker) 2% 97%,transparent 98%);padding:0 3px;border-radius:2px}
.en{font-weight:700}
ul.check,ol.trail{list-style:none;padding:0;margin:0 0 8px}
ul.check li{padding-left:28px;position:relative}
ul.check li::before{content:"";position:absolute;left:2px;top:7px;width:14px;height:14px;border:1.6px solid var(--pencil);border-radius:2px 4px 3px 2px}
ol.trail li{display:flex;gap:10px;align-items:baseline}
ol.trail .n{font-family:var(--f-hand);font-size:22px;width:18px;color:var(--pencil)}
ol.trail .st{margin-left:auto;font-family:var(--f-hand);font-size:20px;color:var(--pencil);white-space:nowrap}
ol.trail li.on .st{color:var(--pen-red);font-weight:700}
ol.trail li.off{color:var(--pencil)}

.tbwrap{overflow-x:auto;margin:0 0 12px}
table.tb{border-collapse:collapse;width:100%}
.tb td,.tb th{padding:0 8px 0 0;height:28px;line-height:28px;text-align:left;vertical-align:top;white-space:nowrap}
.tb th{font-family:var(--f-hand);font-size:20px;font-weight:700;color:var(--pencil)}
.tb td.wrap{white-space:normal}

.postit{background:var(--postit);color:#2A2A2A;padding:14px 16px 12px;margin:18px 4px 22px;position:relative;transform:rotate(-1.2deg);box-shadow:0 8px 12px -8px rgba(0,0,0,.45);line-height:24px}
.postit.pink{background:var(--postit-pink);transform:rotate(1deg)}
.postit::before{content:"";position:absolute;top:-11px;left:50%;width:74px;height:22px;margin-left:-37px;background:rgba(255,255,255,.55);border:1px solid rgba(0,0,0,.06);transform:rotate(2deg)}
.postit p{margin:0 0 8px}.postit p:last-child{margin:0}
.postit .hand.big{margin-bottom:6px}
s.wrongw{color:var(--pencil);text-decoration-color:var(--pen-red);text-decoration-thickness:2px}

.pen-btn{font-family:var(--f-hand);font-size:24px;font-weight:700;line-height:1;color:var(--pen-blue);background:transparent;border:2px solid var(--pen-blue);border-radius:255px 18px 225px 18px/18px 225px 18px 255px;padding:9px 18px 7px}
.pen-btn.fill{background:var(--pen-blue);color:var(--paper)}
.pen-btn:disabled{opacity:.35;cursor:default}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 8px}
.play{font-family:var(--f-hand);font-size:19px;font-weight:700;color:var(--pen-blue);background:none;border:0;padding:0 4px;white-space:nowrap}

.dlg{display:flex;flex-direction:column;margin:6px 0 10px}
.sayit{cursor:pointer;border-radius:3px;text-decoration:underline dotted color-mix(in srgb,var(--pen-blue) 40%,transparent);text-underline-offset:5px;text-decoration-thickness:1.5px;-webkit-tap-highlight-color:transparent}
.sayit .spk{display:inline-block;width:.95em;height:.95em;margin-left:.22em;vertical-align:-.1em;color:var(--pen-blue);opacity:.6}
.sayit:hover .spk{opacity:1}
.sayit.bare{text-decoration:none}
.sayit.speaking{background:color-mix(in srgb,var(--pen-blue) 14%,transparent);text-decoration-style:solid}
.sayit.speaking .spk{opacity:1;animation:pulse .7s ease-in-out infinite alternate}
@keyframes pulse{to{transform:scale(1.25)}}
.sayit:focus-visible{outline:2px dashed var(--pen-blue);outline-offset:2px}
.ttsnote{font-size:14.5px;line-height:22px}
.ln{display:flex;gap:8px;align-items:baseline}
.ln .who{font-family:var(--f-hand);font-size:21px;color:var(--pencil);flex:none;min-width:62px}
.ln .say{flex:1;min-width:0}
.ln .play{margin-left:auto}
.ptl{padding-left:70px;color:var(--pencil);font-size:14.5px;line-height:28px;font-style:italic}
.linkbtn{background:none;border:0;padding:0;font-family:var(--f-hand);font-size:22px;color:var(--pen-blue);text-decoration:underline;text-underline-offset:4px}

/* Cena da aula (na capa): texto de lápis com etiqueta */
.scene{border-left:2px solid var(--pencil);padding-left:12px;margin:0 0 14px;color:var(--ink);font-style:italic}
.scene p{margin:0}
.scene .label{font-style:normal;font-size:20px;color:var(--pencil);font-weight:700}

/* Erro de brasileiro: o errado riscado e o certo com áudio */
.mistake{border:2px dashed var(--pen-red);border-radius:10px 14px 8px 12px;padding:10px 14px;margin:16px 2px 20px}
.mistake p{margin:0 0 4px}
.mistake .label{font-size:22px;font-weight:700;color:var(--pen-red)}

/* Você sabia? — ficha pautada, levemente torta */
.dyk{position:relative;background:#FFFFFF;color:#25303C;border:1px solid #DAD3C2;padding:6px 14px 12px;margin:20px 4px 22px;transform:rotate(.8deg);box-shadow:0 8px 12px -8px rgba(0,0,0,.4);line-height:24px;
  background-image:linear-gradient(to bottom,transparent 0 34px,#E8A2A2 34px 35.5px,transparent 35.5px),repeating-linear-gradient(to bottom,transparent 0 35.5px,transparent 35.5px 59px,#CFE0EC 59px 60px);background-size:100% 100%,100% 24px}
.dyk p{margin:0 0 6px}
.dyk .label{font-size:24px;font-weight:700;color:var(--pen-red);line-height:30px;margin-bottom:8px}

/* E-mail de exemplo */
.mail{background:#FFFFFF;color:#25303C;border:1px solid #DAD3C2;border-top:6px solid var(--pen-blue);padding:10px 14px 12px;margin:12px 0 16px;line-height:24px;box-shadow:0 6px 10px -8px rgba(0,0,0,.35)}
.mail p{margin:0 0 4px}
.mail .subj{border-bottom:1px dashed #DAD3C2;padding-bottom:6px;margin-bottom:8px;font-weight:700}
.mail .gapline{height:10px}

/* Frase de sobrevivência — etiqueta de bagagem */
.ticket{position:relative;background:#EFD9AE;color:#2A2A2A;border-radius:10px 28px 28px 10px;padding:16px 18px 14px 48px;margin:18px 0 20px;box-shadow:0 8px 12px -8px rgba(0,0,0,.45);transform:rotate(-1deg)}
.ticket::before{content:"";position:absolute;left:16px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 3px #C9AF7E}
.ticket p{margin:0}
.ticket .tlabel{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#7A5C22}
.ticket .tphrase{font-family:var(--f-hand);font-size:34px;line-height:38px;font-weight:700;color:var(--pen-blue);margin:6px 0}
.ticket .tpt{font-style:italic;color:#5A4A2A}

/* Adesivo dentro de um post-it (módulo concluído) */
.stk-inline{width:90px;height:90px;margin:4px auto 8px;transform:rotate(-6deg);filter:drop-shadow(0 3px 3px rgba(0,0,0,.3))}
.stk-inline svg{width:100%;height:100%}

/* Sumário */
ol.trail.contents li{align-items:center;min-height:36px}
ol.trail.contents .ct{flex:1;min-width:0}
ol.trail.contents .linkbtn{font-family:var(--f-body);font-size:16.5px;text-align:left;color:var(--pen-blue)}

/* traduções dos exemplos (aparecem com "ver tradução") */
.expt{display:none;font-weight:400;font-style:italic;color:var(--pencil);font-size:14.5px;line-height:28px}
.exbox.showpt .expt{display:block}
.extoggle{margin:-6px 0 10px;text-align:right}
.extoggle .linkbtn{font-size:19px}

/* dicionário de toque */
.sayit .w{border-radius:3px}
.sayit .w.speaking{background:color-mix(in srgb,var(--pen-blue) 18%,transparent)}
.wordtip{position:fixed;z-index:30;max-width:min(280px,calc(100vw - 20px));background:#FFFDF6;border:1.5px solid var(--pen-blue);border-radius:10px;padding:8px 14px 10px;box-shadow:0 10px 22px -10px rgba(0,0,0,.45);animation:wtIn .14s ease-out}
.wordtip::after{content:"";position:absolute;left:calc(var(--arrow,50%) - 7px);bottom:-8px;width:12px;height:12px;background:#FFFDF6;border-right:1.5px solid var(--pen-blue);border-bottom:1.5px solid var(--pen-blue);transform:rotate(45deg)}
.wordtip.below::after{bottom:auto;top:-8px;transform:rotate(225deg)}
.wordtip .wt-word{margin:0;font-family:var(--f-hand);font-size:24px;font-weight:700;color:var(--pen-blue);line-height:1.1}
.wordtip .wt-mean{margin:2px 0 0;font-size:16px;line-height:1.35}
.wordtip .wt-play{margin-top:6px;background:none;border:0;padding:0;font-family:var(--f-hand);font-size:19px;color:var(--pen-blue);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@keyframes wtIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* Reforço */
.postit.gold{background:linear-gradient(135deg,#FBE7A6,#F4D46A 55%,#F8E39A);transform:rotate(.8deg)}
ol.trail.extras li .n{font-size:20px;color:#B8860B}
ol.trail.extras li.off .ct{color:var(--pencil)}
.extra-lock{font-size:14px;color:var(--pencil);display:block;line-height:20px}