/* KASITHA · kx-stitch-help · v1b · CSS
   Reskin Escuela (/help). Ámbito: .kxh (lo añade el JS de la capa).
   ROLLBACK: quitar el <link> de index.html. */

/* --- Cabecera --- */
.kxh .t-head{font-size:30px;line-height:1.14;letter-spacing:-.01em;text-align:left}
.kxh .kxh-ext{display:none} /* la 2ª frase del titular solo en escritorio */

/* --- Tarjetas de lecciones: el summary ES la tarjeta (número dentro),
       como en la maqueta. El acordeón real se conserva. --- */
.kxh .help-step-sum{background:var(--surface);border:1px solid var(--hairline);
  border-radius:16px;padding:14px 16px;box-shadow:0 4px 14px rgba(45,32,22,.05);
  gap:14px;transition:box-shadow .18s}
.kxh .help-step-sum:hover{box-shadow:0 8px 22px rgba(45,32,22,.09)}
.kxh .help-step-card{background:transparent;border:0;padding:0;box-shadow:none;min-height:0}
.kxh .help-step-sum:hover .help-step-card{box-shadow:none} /* la sombra hover del core pintaba una caja anidada */
.kxh .help-step-txt b{font:700 17.5px var(--serif);letter-spacing:-.01em;margin-bottom:2px}
.kxh .help-step-txt i{font-size:13px;line-height:1.45}
.kxh .kxh-lec{display:none}
.kxh .help-step-count{color:var(--ink-mute)}
/* el número ya viene como círculo perfilado granate (core); dentro de la
   tarjeta queda igual que la maqueta móvil */

/* cuerpo del acordeón: ya no hay número fuera, fuera el sangrado de 58px */
.kxh .help-cat-body{padding-left:12px;padding-right:12px}

/* --- Palabra del día: más presencia (la piel oscura ya la pone el core) --- */
.kxh .kx-termcard{padding:20px 20px 18px}
.kxh .kx-tc-lead{letter-spacing:.14em}
.kxh .kx-tc-term{font-size:25px}

/* --- Escritorio --- */
@media (min-width:960px){
  /* ancho de trabajo 1010; el core usa #app:has(.tabbar) (1,1,1),
     hace falta #app .kxh (1,2,1) para ganar, igual que en el dashboard */
  #app .kxh .tab-content{max-width:1010px}
  .kxh .t-head{font-size:36px;max-width:720px}
  .kxh .kxh-ext{display:inline;color:var(--ink)}
  /* rejilla de 3 columnas de tarjetas altas (maqueta PC);
     la regla del core es #app:has(.tabbar) #help-guides */
  #app .kxh #help-guides{grid-template-columns:repeat(3,1fr);gap:16px 16px;align-items:start}
  /* el acordeón abierto ocupa todo el ancho para leer las lecciones cómodo;
     los cerrados no se estiran con él (align-items:start) */
  .kxh .help-step[open]{grid-column:1/-1}
  .kxh .help-step-sum{display:block;position:relative;padding:18px 18px 20px;
    min-height:172px;box-sizing:border-box}
  .kxh .help-step[open] .help-step-sum{min-height:0}
  .kxh .help-step-num{margin:0 0 16px}
  .kxh .help-step-card{display:block}
  .kxh .help-step-txt b{font-size:20px;margin-bottom:6px;display:block}
  .kxh .help-step-txt i{font-size:13.5px}
  /* contador como píldora "N lecciones" arriba a la derecha */
  .kxh .help-step-count{position:absolute;top:18px;right:18px;background:#f7efe6;
    border-radius:999px;padding:4px 11px;font:600 11.5px var(--sans);color:var(--ink-soft)}
  .kxh .kxh-lec{display:inline}
  .kxh .kxh-chev{display:none}
  /* tarjeta final impar: a todo el ancho pero compacta */
  .kxh .help-step-final .help-step-sum{min-height:0}
  .kxh .help-cat-body{padding-left:6px;padding-right:6px}
  .kxh .kx-tc-term{font-size:30px}
  .kxh .kx-termcard{padding:26px 28px 22px}
}