/* Mark de English (/mark, /wayin, /sheet/<id>, WP3): los pasos, la pregunta como en el paper,
   la autopuntuación y la entrega de foto_hoja.js con la cara del diseño (D131). Solo tokens
   de estilo.css: claro y oscuro los pone el tema. Todo va dentro de .eng-mark: Maths no cambia. */
.eng-mark{min-width:0}
.eng-mark .em-cab{margin-bottom:18px}
.eng-mark .em-migas{margin-bottom:6px}
.em-ancha{max-width:1000px}

/* los pasos: el abierto con su número en tinta; los hechos, una línea con «Change» */
.em-paso{display:grid;gap:14px}
.em-paso-cab{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:start}
.em-paso-cab h2{font-family:var(--serif);font-weight:400;font-size:25px;line-height:30px;margin:0}
.em-paso-cab h2:focus{outline:none}
.em-paso-cab p{margin:4px 0 0}
.em-paso-cab.sin-n{grid-template-columns:minmax(0,1fr)}
/* mientras se puntúa, la caja del paso es la de la autopuntuación (un solo botón principal) */
.em-paso:has(.em-antes)>.em-paso-cab{display:none}
.em-paso .em-antes{padding:0;background:none;border:0;box-shadow:none}
.em-n{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:700;background:var(--ink);color:var(--paper)}
.em-n.ok{background:var(--blueSoft);color:var(--accentText)}
.em-hecho{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px 10px 14px;border:1px solid var(--line);border-radius:16px;background:var(--surface2)}
.em-hecho-tx{display:grid;min-width:0}
.em-hecho-tx small{font-size:12px;line-height:16px;color:var(--ink2)}
.em-hecho-tx b{font-size:15px;line-height:20px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.em-cambiar{min-height:40px}

/* opciones grandes (qué marca) */
.em-opciones{display:grid;gap:10px}
@media (min-width:560px){.em-opciones{grid-template-columns:repeat(2,minmax(0,1fr))}}
.em-op-grande{display:grid;gap:2px;align-content:center;min-height:68px;padding:12px 16px;border:1.5px solid var(--line);border-radius:16px;background:var(--surface);text-align:left;color:var(--ink);transition:border-color .2s,background .2s}
.em-op-grande b{font-size:16px;line-height:21px;font-weight:600}
.em-op-grande small{font-size:13px;line-height:18px;color:var(--ink2)}
.em-op-grande[aria-pressed="true"]{border-color:var(--blue);background:var(--blueSoft)}
@media (hover:hover){.em-op-grande:hover{border-color:var(--r3)}}

/* grupos de elección: radios de verdad, con cara de chip o de fila */
.em-grupo{border:0;margin:0;padding:0;min-width:0;display:grid;gap:8px}
.em-grupo legend{font-size:14px;line-height:20px;font-weight:600;color:var(--ink);padding:0;margin:0 0 8px}
.em-chips{display:flex;flex-wrap:wrap;gap:8px}
.em-op{min-height:44px;min-width:52px;justify-content:center;font-size:15px;cursor:pointer}
.em-op:has(input:checked){border-color:var(--blue);color:var(--accentText);background:var(--blueSoft)}
.em-op:has(input:focus-visible),.em-texto-fila:has(input:focus-visible),.em-cual-op:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.em-op:has(input:disabled){opacity:.6;cursor:default}
.em-seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.em-seg .em-op{width:100%}
.em-lista-radios{display:grid;gap:8px}
.em-texto-op{display:grid;gap:1px;min-width:0}
.em-texto-op b{overflow-wrap:anywhere}
.em-texto-op small{overflow-wrap:anywhere}
.em-cual{margin-top:4px}

/* la pregunta: nuestra, tecleada o en foto */
.em-vias{margin:0}
.em-vias button{white-space:normal;line-height:17px;min-height:44px;padding:4px 6px}
.em-via-cuerpo{display:grid;gap:14px}
.em-via-cuerpo>p{margin:0}
.em-nuestras .li{grid-template-columns:minmax(0,1fr) auto}
.em-nuestra{font-weight:500!important;display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.em-pregunta-caja{min-height:110px}
.em-foto-pregunta{min-height:132px;cursor:pointer}
.em-foto-pregunta:focus-within{border-color:var(--blue)}
.em-foto-nombre{overflow-wrap:anywhere}
.em-seguir{margin-top:4px}
.em-otro{margin:0}
.em-aviso{margin:0}

/* la pregunta como en el paper */
.em-q{display:grid;gap:14px}
.em-q-cab{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:34px}
.em-texto{padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:var(--surface2);display:grid;gap:10px}
.em-texto-h{margin:0;display:grid;gap:2px}
.em-texto-h b{font-size:15px;line-height:20px;font-weight:600}
.em-texto-h small{font-size:12px;line-height:16px;color:var(--ink2);font-weight:500}
.em-lineas{display:grid;gap:10px;font-size:16px;line-height:26px;color:var(--ink);overflow-wrap:anywhere}
.em-lineas p{margin:0}
.poema .em-lineas{gap:0}
.poema .em-lineas p{white-space:pre-wrap}
.em-cita{margin:0;text-align:right}
.em-enunciado{margin:0;font-size:17px;line-height:26px;font-weight:500;white-space:pre-line;overflow-wrap:anywhere}
.em-parte{display:grid;gap:6px;justify-items:start}
.em-pide{margin:0;font-size:17px;line-height:26px;font-weight:600;overflow-wrap:anywhere}
.em-parte .small{margin:0}
.em-ejemplo .fb{display:grid;gap:8px}
.em-ejemplo-tx{margin:0;font:500 19px/1.4 var(--hand)}
.em-escribe{display:grid;gap:10px}
.em-escribe p{margin:0;text-align:center}

/* la entrega (foto_hoja.js) con la cara del diseño */
.eng-mark .vias{display:grid;gap:10px}
.eng-mark .vias .en-papel{margin:-2px 0 0;font-size:13px;line-height:18px;color:var(--ink2)}
.eng-mark .vias-barra{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;margin:0;padding:3px;border-radius:14px;border:1px solid var(--line);background:var(--paper)}
.eng-mark .via{min-height:44px;border:0;border-radius:11px;padding:4px 8px;font-size:14px;line-height:17px;font-weight:600;color:var(--ink2);background:none;text-align:center}
.eng-mark .via[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px color-mix(in srgb,var(--ink) 16%,transparent)}
.eng-mark .fotos,.eng-mark .caja-form{margin:0;display:grid;gap:10px}
.eng-mark .fotos>p.meta,.eng-mark .caja-form>p.meta{margin:0;font-size:13px;line-height:18px;color:var(--ink2)}
.eng-mark .fotos .elegir{display:block;position:relative}
.eng-mark .fotos .elegir span{display:grid;place-items:center;min-height:132px;padding:20px;border:2px dashed var(--r2);border-radius:20px;background:var(--surface2);color:var(--accentText);font-size:16px;font-weight:600;text-align:center;cursor:pointer;transition:border-color .2s,background .2s}
@media (hover:hover){.eng-mark .fotos .elegir span:hover{border-color:var(--blue);background:var(--blueSoft)}}
.eng-mark .fotos .elegir:focus-within span{outline:2px solid var(--blue);outline-offset:2px}
.eng-mark .miniaturas{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin:0}
.eng-mark .miniaturas:empty{display:none}
.eng-mark .miniaturas img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.eng-mark .caja-texto{width:100%;max-width:none;min-height:180px;border-radius:14px;border:1.5px solid var(--line);background:var(--surface);padding:12px 14px;font:400 16px/24px var(--sans);color:var(--ink);resize:vertical}
.eng-mark .caja-texto:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px var(--blueSoft)}
.eng-mark .acciones{display:grid;gap:8px;margin:2px 0 0}
.eng-mark .acciones button.primario{width:100%;min-height:56px;border-radius:17px;font-size:17px;text-align:center;box-shadow:0 10px 24px -8px color-mix(in srgb,var(--blue) 60%,transparent)}
.eng-mark .acciones .meta{font-size:14px;line-height:20px;color:var(--ink2);text-align:center}
.eng-mark .acciones .meta:empty{display:none}

/* antes de ver la marca (D181) */
.em-antes{display:grid;gap:16px}
.em-antes h2{margin:0;font-size:26px;line-height:30px}
.em-antes h2:focus{outline:none}
.em-antes>p{margin:-8px 0 0}
.em-estado{margin:0;text-align:center;min-height:0}
.em-estado:empty{display:none}
.em-volver{justify-self:center}

/* debajo de la hoja */
.em-despues{margin-top:8px}
.em-guardar p{margin:0}
.em-guardar .btn-gold{width:100%}
.em-pregunta-plegada .fb{padding-top:0}
/* D232: la respuesta larga, contra el reloj (Mark de English y de ciencias) */
.aviso-reloj{margin:0 0 10px;padding:9px 12px;border-left:3px solid currentColor;border-radius:4px 12px 12px 4px;background:var(--surface)}

/* D234: el Paragraph Build guiado (eng_guia.js). Solo tokens: claro y oscuro los pone el tema. */
.eg-antes{display:grid;gap:12px}
.eg-antes-cab{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.eg-antes-h{font-family:var(--serif);font-weight:400;font-size:25px;line-height:30px;margin:0}
.eg-promesa{margin:0;font-size:15px;line-height:22px;color:var(--ink2)}
.eg-antes-lista{margin:0;padding-left:20px;display:grid;gap:8px;font-size:15px;line-height:22px}
.eg-meta{margin:0;font-weight:600}
.eg-sin{justify-self:start;min-height:40px;padding:0}
.eg-paso .eg-hacer{margin:0;font-size:16px;line-height:24px}
.eg-mas{margin:-6px 0 0;color:var(--ink2)}
.eg-pista{margin:0;font-size:16px;line-height:24px;font-weight:600}
.eg-rotulo{display:block;font-size:12px;line-height:16px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink2);margin-bottom:4px}
.eg-como{padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface2);display:grid;gap:6px}
.eg-como .eg-rotulo{color:var(--accentText)}
.eg-de{margin:0;overflow-wrap:anywhere}
.eg-frase{margin:0;font:500 19px/1.4 var(--hand);color:var(--ink);overflow-wrap:anywhere}
.eg-porque{margin:0;color:var(--ink2)}
.eg-no{padding:10px 14px;border-radius:14px;background:var(--lostbg);color:var(--lostText)}
.eg-no .eg-rotulo{color:var(--lostText)}
.eg-no p{margin:0;font-size:15px;line-height:22px;text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,var(--lostText) 45%,transparent)}
.eg-comprueba{padding:10px 14px;border-left:3px solid var(--blue);border-radius:4px 14px 14px 4px;background:var(--blueSoft)}
.eg-comprueba .eg-rotulo{color:var(--accentText)}
.eg-comprueba p{margin:0;font-size:15px;line-height:22px}
.eg-fold{border:1px solid var(--line);border-radius:14px;background:var(--surface);min-width:0}
.eg-fold>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:44px;padding:8px 14px;font-size:15px;font-weight:600;color:var(--accentText)}
.eg-fold>summary::-webkit-details-marker{display:none}
.eg-fold>summary .chev{width:18px;height:18px;transition:transform .25s var(--ease)}
.eg-fold[open]>summary .chev{transform:rotate(90deg)}
.eg-fold-cuerpo{padding:0 14px 12px}
.eg-fold .eg-como{border:0;padding:0;background:none}
.eg-pistas,.eg-checks{margin:0;padding-left:20px;display:grid;gap:6px;font-size:15px;line-height:22px}
.eg-repaso{margin-bottom:4px}
.eg-siguiente{display:grid;gap:12px}
.eg-filas{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.eg-fila{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center}
.eg-fila b{font-size:15px;line-height:20px;font-weight:600;overflow-wrap:anywhere}
.eg-fila small{font-size:13px;line-height:18px;color:var(--ink2);text-align:right}
.eg-fila.eg-otra-vez small{color:var(--lostText);font-weight:600}

/* D261: el kit en las herramientas («From your kit» / nuestro ejemplo) y «Save my line to the kit» */
.kit-herramienta .kit-h-tx{display:grid;gap:2px;min-width:0}
.kit-herramienta .kit-h-tx small{font-weight:500;font-size:13px;line-height:18px}
.kit-h-ideas{padding-left:20px;display:grid;gap:6px;font-size:14px;line-height:20px}
.kit-h-citas{list-style:none;display:grid;gap:8px;font:400 16px/1.4 var(--serif);overflow-wrap:anywhere}
.kit-linea{display:grid;gap:10px}
.kit-linea-tx{margin:0;padding-left:12px;border-left:3px solid var(--blue);font-size:15px;line-height:22px;overflow-wrap:anywhere}
.kit-linea-acciones{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.kit-linea-estado{min-height:18px;color:var(--ink2)}