/* The Learning page (docs/learn.md); the tiles reuse the point tiles of diafon.css */
.md-typeset .learn-lede{color:var(--muted);max-width:46rem}
.md-typeset .learn{max-width:52rem}
.md-typeset .learn-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin:1rem 0;padding:.6rem .8rem;
  border:1px solid var(--line);border-radius:12px;background:var(--card)}
.md-typeset .learn-bar label{font:600 .64rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:.45rem}
.md-typeset .learn select,.md-typeset .learn button,.md-typeset .learn input{font:600 .75rem var(--md-text-font-family,sans-serif);
  color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:.45rem;padding:.4rem .6rem}
.md-typeset .learn button{cursor:pointer}
.md-typeset .learn button:hover:not(:disabled){border-color:var(--accent)}
.md-typeset .learn button:disabled{opacity:.4;cursor:default}
.md-typeset .learn button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
[data-md-color-scheme="slate"] .md-typeset .learn button.primary{color:#14161b}
.md-typeset .learn-note{font-size:.72rem;color:var(--muted);flex:1;min-width:14rem}
.md-typeset .learn-note .badge{margin:0 .3rem 0 0;vertical-align:0}

.md-typeset .learn-steps{display:flex;flex-wrap:wrap;gap:.35rem;margin:0 0 1rem}
.md-typeset .learn-steps button{font-size:.68rem;padding:.3rem .55rem;border-radius:999px;color:var(--muted)}
.md-typeset .learn-steps button .n{font:600 .62rem var(--mono);margin-right:.15rem}
.md-typeset .learn-steps button.done{color:var(--ink);border-color:var(--base-c)}
.md-typeset .learn-steps button.here{background:var(--accent);border-color:var(--accent);color:#fff}
[data-md-color-scheme="slate"] .md-typeset .learn-steps button.here{color:#14161b}

.md-typeset .lesson{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.4rem 1.2rem 1.1rem;scroll-margin-top:3.5rem}
.md-typeset .lesson h2{margin:.8rem 0 .6rem}
.md-typeset .lesson h3{font:600 .64rem/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:1.2rem 0 .5rem}
.md-typeset .ln-op{font:600 1rem var(--mono)}
.md-typeset .ln-tiles{display:flex;flex-wrap:wrap;gap:.35rem}
.md-typeset .ln-tiles .pt{flex:0 0 auto;min-width:4.2rem;margin:0}
.md-typeset .ln-words{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.35rem}
.md-typeset .ln-word{display:flex;align-items:baseline;gap:.6rem;padding:.35rem .6rem;border-radius:.5rem;background:var(--sunken)}
.md-typeset .ln-word .w{min-width:5rem}
.md-typeset .ln-word .x{color:var(--muted)}
.md-typeset .ln-word code{font-size:.7rem;white-space:nowrap}
.md-typeset .ln-word .g{font-size:1.25rem;margin-left:auto}
.md-typeset .ln-drill{border:1px dashed var(--line);border-radius:12px;padding:.2rem .9rem .7rem}
.md-typeset .ln-ask{margin:.6rem 0 .4rem}
.md-typeset .ln-prompt{font-size:1.15rem}
.md-typeset .ln-row{display:flex;gap:.4rem;flex-wrap:wrap}
.md-typeset .ln-in{flex:1;min-width:10rem;font-family:var(--md-code-font-family,monospace)!important;font-size:.85rem!important}
.md-typeset .ln-in.ok{border-color:var(--good)!important;box-shadow:0 0 0 2px var(--x-t)}
.md-typeset .ln-in.no{border-color:var(--bad)!important}
.md-typeset .ln-said{margin:.5rem 0 0;min-height:1.6em}
.md-typeset .ln-said .ug{font-size:1.3rem}
.md-typeset .ln-count{margin:.2rem 0 0;font:600 .62rem var(--mono);color:var(--muted)}
.md-typeset .learn-move{display:flex;justify-content:space-between;margin:1rem 0 0}
.md-typeset .ln-card h3{font-family:var(--serif);text-transform:none;letter-spacing:0;font-size:1.1rem;color:var(--ink)}

@media print{
  .md-header,.md-tabs,.md-footer,.md-sidebar,.learn-bar,.learn-steps,.learn-move,.learn-lede,
  .md-typeset h1,.lesson > h2,.lesson > p,.ln-drill,.lesson > h3,.md-top{display:none!important}
  .md-typeset .lesson{border:none;padding:0}
  .md-typeset .ln-card .pt{break-inside:avoid}
}