/* Waku — HSK vocabulary pages. Same slate and jade as the rest of the site;
   tone colours are the ones Waku paints pinyin with. */

.hk-hsk{padding-bottom:40px}
.hk-hsk-hero{padding-top:44px;padding-bottom:8px}
.hk-hsk-hero h1{font-size:clamp(34px,5.4vw,56px);line-height:1.04;letter-spacing:-.035em;font-weight:800;margin:14px 0 0}
.hk-hsk-hero h1 .hk-n{display:inline-block;font-size:.42em;letter-spacing:0;font-weight:700;color:var(--soft);vertical-align:middle;margin-left:10px;
  padding:4px 12px;border:1px solid var(--strong);border-radius:99px}
.hk-hsk-hero h1 em{font-style:normal;color:var(--jade)}
.hk-hsk-hero .lede{margin:14px 0 0;max-width:46em}

/* level switcher */
.hk-lvls{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.hk-lvls a{padding:7px 14px;border-radius:99px;border:1px solid var(--line);background:var(--card);color:var(--soft);
  font-weight:700;font-size:14px;text-decoration:none;transition:border-color .2s,color .2s,transform .2s var(--spring)}
.hk-lvls a:hover{color:var(--ink);border-color:var(--strong);transform:translateY(-1px)}
.hk-lvls a.hk-on{background:var(--jade);border-color:var(--jade);color:var(--on-jade)}

/* progress */
.hk-prog{display:flex;align-items:center;gap:16px;margin-top:22px;max-width:560px}
.hk-prog p{margin:0;color:var(--soft);font-size:15px;white-space:nowrap}
.hk-prog b{color:var(--ink)}
.hk-bar{flex:1;height:8px;border-radius:99px;background:var(--raised);overflow:hidden;display:block}
.hk-bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--jade-deep),var(--jade));transition:width .6s var(--ease)}

/* tabs */
.hk-tabs{display:inline-flex;gap:4px;margin-top:28px;padding:4px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.hk-tabs button{border:0;background:none;color:var(--soft);font-weight:700;font-size:15px;padding:10px 18px;border-radius:10px;cursor:pointer;transition:background .2s,color .2s}
.hk-tabs button:hover{color:var(--ink)}
.hk-tabs button[aria-selected="true"]{background:var(--raised);color:var(--ink);box-shadow:inset 0 0 0 1px var(--strong)}
.hk-pane{padding-top:22px}

/* list tools */
.hk-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.hk-tools input{flex:1 1 260px;min-width:0;background:var(--card);border:1px solid var(--strong);border-radius:12px;color:var(--ink);
  font:inherit;font-size:15px;padding:11px 14px}
.hk-tools input::placeholder{color:var(--faint)}
.hk-tools input:focus{outline:none;border-color:var(--jade);box-shadow:0 0 0 3px var(--jade-soft)}
.hk-seg{display:inline-flex;padding:3px;border-radius:12px;background:var(--card);border:1px solid var(--line)}
.hk-seg button{border:0;background:none;color:var(--soft);font-weight:600;font-size:14px;padding:8px 12px;border-radius:9px;cursor:pointer}
.hk-seg button:hover{color:var(--ink)}
.hk-seg button[aria-pressed="true"]{background:var(--jade-soft);color:var(--jade)}

/* Waku link-up */
.hk-waku-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:12px 16px;
  border-radius:14px;background:linear-gradient(90deg,var(--jade-soft),var(--card));border:1px solid var(--line)}
.hk-waku-bar p{margin:0;font-size:14px;color:var(--soft)}
.hk-waku-bar p b{color:var(--ink)}
.hk-waku-act{display:flex;flex-wrap:wrap;gap:8px}

/* the words */
.hk-list{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.hk-w{position:relative;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"hz py act" "hz df act";column-gap:14px;row-gap:2px;
  align-items:center;padding:12px 12px 12px 16px;border-radius:14px;background:var(--card);border:1px solid var(--line);
  transition:border-color .2s,background .2s,opacity .2s}
.hk-w:hover{border-color:var(--strong)}
.hk-w .hk-hz{grid-area:hz;font:500 28px/1.15 var(--zh);color:var(--ink);min-width:1.2em}
.hk-w .hk-tr{display:none}
.hk-w .hk-py{grid-area:py;font-weight:600;font-size:15px;line-height:1.3;align-self:end}
.hk-w .hk-df{grid-area:df;font-size:13.5px;line-height:1.35;color:var(--soft);align-self:start;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hk-w .hk-gap{font-style:normal;color:var(--faint);margin:0 2px}
.hk-w .hk-act{grid-area:act;display:flex;gap:6px}
.hk-w button,.hk-say{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--raised);
  color:var(--soft);cursor:pointer;transition:color .2s,border-color .2s,background .2s,transform .2s var(--spring)}
.hk-w button svg,.hk-say svg{width:19px;height:19px}
.hk-w button:hover,.hk-say:hover{color:var(--ink);border-color:var(--strong)}
.hk-w button:active,.hk-say:active{transform:scale(.92)}
.hk-say.hk-playing{color:var(--jade);border-color:var(--jade)}
.hk-w .hk-kn[aria-pressed="true"]{background:var(--jade);border-color:var(--jade);color:var(--on-jade)}
.hk-w.hk-known{background:var(--sunken)}
.hk-w.hk-known .hk-hz{color:var(--soft)}
.hk-w.hk-pop .hk-kn{animation:knpop .4s var(--spring)}
@keyframes knpop{40%{transform:scale(1.25)}}
.hk-hide-py .hk-w .hk-py,.hk-hide-df .hk-w .hk-df{filter:blur(6px);opacity:.6;transition:filter .2s,opacity .2s;cursor:pointer}
.hk-hide-py .hk-w:hover .hk-py,.hk-hide-df .hk-w:hover .hk-df,.hk-hide-py .hk-w.hk-peek .hk-py,.hk-hide-df .hk-w.hk-peek .hk-df{filter:none;opacity:1}
.hk-empty{color:var(--faint);margin:28px 0}
.hk-more{margin:24px 0 0;text-align:center}

/* flashcards */
.hk-fcard{max-width:620px;margin:6px auto 0}
.hk-fc-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 10px;color:var(--soft);font-size:14px}
.hk-link{border:0;background:none;color:var(--jade);font:inherit;font-size:14px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:0}
.hk-fc-face{min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:32px 24px;text-align:center;
  border-radius:22px;background:radial-gradient(120% 90% at 50% 0%,var(--raised),var(--card));border:1px solid var(--line);
  box-shadow:0 30px 60px -40px rgba(0,0,0,.8)}
.hk-fc-face.hk-flip{animation:flip .35s var(--ease)}
@keyframes flip{0%{transform:perspective(900px) rotateX(0)}50%{transform:perspective(900px) rotateX(12deg) scale(.98)}100%{transform:none}}
.hk-fc-hz{font:500 clamp(56px,11vw,88px)/1.1 var(--zh);color:var(--ink)}
.hk-fc-back{display:flex;flex-direction:column;align-items:center;gap:8px}
.hk-fc-py{font-size:26px;font-weight:700}
.hk-fc-df{color:var(--soft);font-size:17px;max-width:30em}
.hk-fc-btns{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:16px}
kbd{font:600 11px/1 var(--ui);padding:3px 6px;border-radius:6px;border:1px solid currentColor;opacity:.6;margin-left:4px}
.hk-grade{min-width:120px;border:1px solid var(--strong);background:var(--card);color:var(--ink)}
.hk-grade.hk-again{border-color:rgba(228,136,107,.5);color:var(--t4)}
.hk-grade.hk-good{background:var(--jade);border-color:var(--jade);color:var(--on-jade)}
.hk-grade.hk-easy{border-color:rgba(127,182,218,.5);color:var(--t1)}
.hk-fc-done{text-align:center;padding:40px 20px}
.hk-fc-done .hk-big{font-size:24px;font-weight:800;margin:0}
.hk-fc-done p{color:var(--soft)}

/* tone trainer */
.hk-tt{max-width:620px;margin:6px auto 0;text-align:center;padding:28px 22px;border-radius:22px;background:var(--card);border:1px solid var(--line)}
.hk-tt-score{display:flex;justify-content:center;gap:22px;margin:0;color:var(--soft);font-size:14px}
.hk-tt-score b{color:var(--ink)}
.hk-tt-word{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px}
.hk-tt-hz{font:500 clamp(48px,9vw,72px)/1.1 var(--zh)}
.hk-say.hk-big{width:46px;height:46px;border-radius:14px}
.hk-tt-df{color:var(--soft);margin:8px 0 0;min-height:1.5em}
.hk-tt-syls{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:22px}
.hk-syl{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px;border-radius:16px;background:var(--raised);border:1px solid var(--line);min-width:132px}
.hk-syl .hk-s{font-size:22px;font-weight:700;letter-spacing:.02em}
.hk-syl .hk-opts{display:flex;gap:4px}
.hk-syl .hk-opts button{width:28px;height:30px;border-radius:8px;border:1px solid var(--strong);background:var(--card);color:var(--soft);font-weight:700;font-size:14px;cursor:pointer;padding:0}
.hk-syl .hk-opts button[aria-pressed="true"]{color:var(--paper);border-color:transparent}
.hk-syl .hk-opts button[data-v="1"][aria-pressed="true"]{background:var(--t1)}
.hk-syl .hk-opts button[data-v="2"][aria-pressed="true"]{background:var(--t2)}
.hk-syl .hk-opts button[data-v="3"][aria-pressed="true"]{background:var(--t3)}
.hk-syl .hk-opts button[data-v="4"][aria-pressed="true"]{background:var(--t4)}
.hk-syl .hk-opts button[data-v="5"][aria-pressed="true"]{background:var(--t5)}
.hk-syl.hk-cur{border-color:var(--jade)}
.hk-syl.hk-right{border-color:var(--t2);box-shadow:0 0 0 3px rgba(111,203,160,.15)}
.hk-syl.hk-wrong{border-color:var(--t4);box-shadow:0 0 0 3px rgba(228,136,107,.15);animation:shake .35s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.hk-tt-res{min-height:1.6em;margin:16px 0 0;font-weight:700}
.hk-tt-res .hk-ok{color:var(--t2)}.hk-tt-res .hk-no{color:var(--t4)}
.hk-tt-btns{margin-top:10px}
.hk-tt-help{color:var(--faint);font-size:13px;margin:16px 0 0}

/* hub */
.hk-lvgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}
.hk-lvcard{display:flex;flex-direction:column;gap:6px;padding:22px;border-radius:18px;background:var(--card);border:1px solid var(--line);
  color:var(--ink);text-decoration:none;transition:transform .25s var(--spring),border-color .2s}
.hk-lvcard:hover{transform:translateY(-3px);border-color:var(--jade);color:var(--ink)}
.hk-lv-n{font-size:24px;font-weight:800;letter-spacing:-.02em}
.hk-lv-c{color:var(--jade);font-weight:700;font-size:14px}
.hk-lv-s{font:500 20px/1.5 var(--zh);color:var(--soft);letter-spacing:.06em;margin-top:4px}
.hk-lv-b{color:var(--soft);font-size:14.5px;flex:1}
.hk-lvcard .hk-bar{flex:none;margin-top:10px;height:6px}
.hk-lv-k{font-size:13px;color:var(--faint)}
.hk-lv-k b{color:var(--ink)}
.hk-hub-waku{margin-top:56px;padding:34px;border-radius:22px;background:radial-gradient(90% 120% at 0% 0%,var(--jade-soft),var(--card));border:1px solid var(--line)}
.hk-hub-waku h2{margin:0;font-size:28px;letter-spacing:-.02em}
.hk-hub-waku p{color:var(--soft);max-width:44em}

.nav a[aria-current="page"]{color:var(--ink)}

@media (max-width:860px){.hk-lvgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){
  .hk-lvgrid{grid-template-columns:1fr}
  .hk-list{grid-template-columns:1fr}
  .hk-tabs{display:flex;width:100%}.hk-tabs button{flex:1;padding:10px 6px;font-size:14px}
  .hk-seg button{padding:8px 9px;font-size:13px}
  .hk-syl{min-width:0}
  .hk-hsk-hero h1 .hk-n{display:table;margin:10px 0 0}
}
@media (prefers-reduced-motion:reduce){
  .hk-fc-face.hk-flip,.hk-w.hk-pop .hk-kn,.hk-syl.hk-wrong{animation:none}
  .hk-bar i{transition:none}
}