/*
 * Learner entry R1 — additions on top of the word page layer (/dictionary/v4/detail.css).
 * Tokens (--word-*) and the paper / cellophane / marker come from that file unchanged.
 * Only the question line, the short labels, the two exits and the index list are new.
 */

/* Font SSOT (/commons/css/fonts.css): the page language's UI stack, not the Latin default. */
body.learner-entry:lang(ja){--word-font:var(--gg-font-ui-ja)}
body.learner-entry:lang(ko){--word-font:var(--gg-font-ui-ko)}
body.learner-entry:lang(en){--word-font:var(--gg-font-ui-base)}

/* The answer and its example are the whole first screen: no forced fold here. */
body.learner-entry .answer-stage{min-height:0}

body.learner-entry .le-h1{display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin:0}
body.learner-entry .le-question{display:block; color:var(--word-muted); font-size:15px; font-weight:700; line-height:1.4; overflow-wrap:anywhere}
body.learner-entry .le-answer{padding-top:18px; padding-bottom:14px}
body.learner-entry .le-answer .ipa-row{margin-top:12px}

body.learner-entry .le-meaning .sense-ui{flex-direction:column; align-items:flex-start; gap:4px}

body.learner-entry .le-example{padding-top:12px; padding-bottom:16px}
body.learner-entry .le-label{
  margin:0; color:var(--word-muted); font-size:10.5px; font-weight:900; letter-spacing:.04em; text-transform:uppercase;
}
body.learner-entry .le-example .example{margin-top:7px}
body.learner-entry .le-word-link{margin:14px 0 0; font-size:14px; line-height:1.6}
body.learner-entry .le-word-link a{display:inline-block; padding-block:3px; color:var(--word-accent); font-weight:800; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; overflow-wrap:anywhere}
body.learner-entry .le-word-link a:hover{text-decoration-thickness:2px}
body.learner-entry a:focus-visible{outline:2px solid var(--word-accent); outline-offset:3px}

/* Learning exits: same block as the word page's guidance (commons/php/vi_dictionary_handoff.php). */
.dictionary-learning{font-family:var(--word-font);color:var(--word-ink);margin:22px 18px 18px;position:relative}
.dictionary-learning__heading{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin:0 -10px 12px 0;font:inherit;font-size:15px;font-weight:800;line-height:1.5}
.dictionary-learning__heading::before{content:"";height:1px;background:var(--word-line-strong);flex:1;min-width:16px}
.dictionary-learning__heading span{padding:6px 10px;border:1px solid var(--word-line-strong);background:var(--word-paper);max-width:calc(100% - 28px)}
.dictionary-learning__list{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.dictionary-learning__item{margin:0;padding:0 0 14px;border-bottom:1px solid var(--word-line)}
.dictionary-learning__item:last-child{border-bottom:0;padding-bottom:0}
.dictionary-learning__goal{margin:0 0 3px;font-size:13px;line-height:1.6;font-weight:700}
.dictionary-learning a.dictionary-learning__link{display:inline-block;color:var(--word-accent);font-size:15px;line-height:1.7;font-weight:800;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;padding-block:3px;overflow-wrap:anywhere}
.dictionary-learning a.dictionary-learning__link:hover{text-decoration-thickness:2px}
.dictionary-learning a.dictionary-learning__link:focus-visible{outline:2px solid var(--word-accent);outline-offset:4px}
.dictionary-learning__note{margin:4px 0 0;font-size:13px;line-height:1.7;color:var(--word-muted)}
@media(max-width:480px){.dictionary-learning{margin-inline:14px}.dictionary-learning__heading{margin-right:-6px}.dictionary-learning__heading span{padding-inline:8px}}

/* Line under the answer: which words this page comes from, and the way to their list. */
body.learner-entry .le-meta{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin:12px 0 0; font-size:13px; line-height:1.5}
body.learner-entry .le-meta-label{color:var(--word-muted); font-size:10.5px; font-weight:900; letter-spacing:.04em; text-transform:uppercase}
body.learner-entry .le-meta-link{color:var(--word-accent); font-weight:700; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}

/* Index: common words, most common first (the rank orders; its number is not shown). */
body.learner-entry .le-index-title{font-size:clamp(22px,5vw,28px); font-weight:800; line-height:1.2}
body.learner-entry .le-index-sub{display:block; margin-top:4px; color:var(--word-muted); font-size:14px; font-weight:700}
body.learner-entry .le-index-intro{margin:10px 0 0; color:var(--word-muted); font-size:14px; line-height:1.6}
body.learner-entry .le-index .content{padding-top:10px}
body.learner-entry .le-index .le-label{margin-top:14px}
body.learner-entry .le-index-cols{margin-bottom:0}
body.learner-entry .le-index-list{list-style:none; margin:6px 0 4px; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); column-gap:18px}
body.learner-entry .le-index-list a{display:grid; grid-template-columns:minmax(0,1fr); align-items:baseline; padding:8px 0; border-bottom:1px solid var(--word-line); color:var(--word-ink); text-decoration:none}
body.learner-entry .le-index-list a:hover .le-index-term{text-decoration:underline; text-underline-offset:3px}
body.learner-entry .le-index-term{font-size:14px; font-weight:700; overflow-wrap:anywhere}
body.learner-entry .le-index-vi{color:var(--word-accent); font-size:14px; font-weight:800}