/* wishyou.today learning: per-language styles (generated from tools/learning/engine/lang-css.mjs) */
/* ===== learning language styles ===== */
/* Latin-script languages: the spelling is the reading, so no reading line; words sit apart like normal text */
.lang-latin { --hz: 'Karla', sans-serif; }
.lang-latin .tk__py, .lang-latin .tk__ro { display: none; }
.lang-latin .tk__hz { font: 700 22px 'Karla', sans-serif; }
.lang-latin .tk-line, .lang-ko .tk-line { gap: 10px 0; }
.lang-latin .tk, .lang-ko .tk { min-width: 0; padding-inline: 2px; }
.lang-latin .tk.sp, .lang-ko .tk.sp { margin-left: 0.42em; }
.lang-latin .wc__hz { font: 800 clamp(34px, 8vw, 64px) 'Karla', sans-serif; letter-spacing: 0; }
.lang-latin .q__big { font: 800 clamp(30px, 7vw, 52px) 'Karla', sans-serif; }
.lang-latin .part b, .lang-latin .label b, .lang-latin .blk.hz { font-family: 'Karla', sans-serif; font-weight: 800; }
.lang-latin .opt .hz, .lang-latin .tile .hz { font: 800 20px 'Karla', sans-serif; }
.lang-latin .tk-line--tight .tk__hz { font-size: 20px; }
/* gender colours on nouns (masculine blue, feminine pink, neuter green) */
.g-m { border-bottom: 4px solid var(--blue); } .g-f { border-bottom: 4px solid var(--pink); } .g-n { border-bottom: 4px solid var(--green); }
/* Japanese: furigana above kanji, rōmaji under the word */
.tk__ro { font: 700 12px 'Karla', sans-serif; color: var(--soft-ink); white-space: nowrap; }
.hide-ro .tk__ro, .hide-ro .ro-opt { display: none; }
.lang-ja .tk__py { font: 500 11.5px var(--hz); letter-spacing: 0.02em; }
.lang-ja .tk__py:empty::before { content: '\00a0'; }
.lang-ja .wc__hz, .lang-ko .wc__hz { letter-spacing: 0.02em; font-size: clamp(54px, 12vw, 96px); }
/* Korean: romanisation under the word, spaces between words */
.lang-ko .tk__py { font: 700 12.5px 'Karla', sans-serif; }
/* spelling bite */
.spell { display: grid; gap: 14px; justify-items: center; text-align: center; }
.spell__en { font: 900 clamp(22px, 4vw, 30px) 'Unbounded', sans-serif; letter-spacing: -0.03em; text-transform: lowercase; }
.spell input { width: min(100%, 420px); min-height: 56px; padding: 10px 14px; border: 4px solid var(--ink); font: 800 24px 'Karla', sans-serif; text-align: center; background: #fff; color: var(--ink); }
.spell input:focus-visible { outline: 4px solid var(--blue); outline-offset: 2px; }
.keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.keys button { min-width: 44px; min-height: 44px; border: 3px solid var(--ink); background: #fff; font: 800 18px 'Karla', sans-serif; cursor: pointer; touch-action: manipulation; }
@media (hover: hover) { .keys button:hover { background: var(--yellow); } }
.spell__mask { font: 800 22px 'Karla', sans-serif; letter-spacing: 0.18em; color: var(--soft-ink); }
/* match-up play */
.match { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.match button { min-height: 56px; padding: 8px 10px; border: 3px solid var(--ink); background: #fff; color: var(--ink); font: 700 16px 'Karla', sans-serif; cursor: pointer; touch-action: manipulation; display: grid; place-items: center; gap: 2px; }
.match button .hz { font-size: 22px; }
.match button[aria-pressed="true"] { background: var(--yellow); }
.match button.is-done { background: var(--green); border-style: dashed; cursor: default; }
.match button.is-wrong { animation: shake 0.3s; }
.match svg { width: 46px; height: 46px; }
/* exam (v2 layout) */
.xsec { display: grid; gap: 16px; }
.xsec__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: baseline; }
.xpart { display: grid; gap: 12px; padding: 14px 0; border-top: 2px dashed #d9d4f0; }
.xpart__how { margin: 0; font-weight: 700; color: var(--soft-ink); }
.xitem { display: grid; gap: 10px; padding: 12px; border: 3px solid var(--ink); background: #fff; }
.xitem__n { font: 900 14px 'Unbounded', sans-serif; }
.xitem textarea { width: 100%; min-height: 120px; padding: 10px; border: 3px solid var(--ink); font: 500 17px var(--hz); }
.xitem details summary { cursor: pointer; font-weight: 800; min-height: 44px; display: flex; align-items: center; }
.xscore { display: grid; gap: 10px; }
/* static summary shown before the lesson starts (and without JavaScript) */
.seo-words, .seo-sents { list-style: none; margin: 8px 0 14px; padding: 0; display: grid; gap: 4px; font-size: 15px; }
.seo-words span, .seo-sents span { font-family: var(--hz); font-weight: 700; }
/* the org chart (language index) */
.org { display: grid; gap: clamp(34px, 5vw, 56px); margin: 0; padding: 0; list-style: none; }
.org__root { display: flex; justify-content: center; }
.org__node { display: inline-grid; gap: 4px; justify-items: center; padding: 12px 18px 14px; border: 4px solid var(--paper); background: var(--bg); color: var(--paper); text-align: center; }
.org__node b { font: 900 clamp(18px, 2.4vw, 24px) 'Unbounded', sans-serif; letter-spacing: -0.03em; text-transform: lowercase; }
.org__node span { font-size: 13px; font-weight: 700; color: var(--muted); }
.org__branches { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 30px 26px; margin: 0; padding: 30px 0 0; list-style: none; }
.org__branches::before { content: ''; position: absolute; top: 0; left: 12%; right: 12%; border-top: 3px dashed rgba(244, 242, 250, 0.4); }
.org__lang { position: relative; display: grid; gap: 14px; align-content: start; padding: 18px 18px 20px; background: #fff; color: var(--ink); border: 4px solid var(--ink); box-shadow: 10px 10px 0 var(--c); }
.org__lang::before { content: ''; position: absolute; top: -34px; left: 50%; height: 30px; border-left: 3px dashed rgba(244, 242, 250, 0.4); }
.org__lang--soon { background: transparent; color: var(--paper); border: 4px dashed rgba(244, 242, 250, 0.5); box-shadow: none; }
.org__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.org__native { font: 500 clamp(26px, 3.4vw, 36px) var(--hz); line-height: 1; }
.org__native--latin { font: 900 clamp(22px, 2.8vw, 30px) 'Unbounded', sans-serif; letter-spacing: -0.04em; }
.org__name { margin: 0; font: 900 18px 'Unbounded', sans-serif; letter-spacing: -0.03em; text-transform: lowercase; color: #6b6496; }
.org__line { margin: 0; font-size: 15px; line-height: 1.45; color: #4a4470; }
.org__tracks { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.org__track { display: grid; gap: 8px; padding-left: 14px; border-left: 3px solid var(--c); }
.org__track > b { font: 800 14px 'Unbounded', sans-serif; letter-spacing: -0.02em; }
.org__track > b small { font: 700 12px 'Karla', sans-serif; color: #6b6496; margin-left: 6px; }
.org__levels { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.org__lvl { display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 9px; border-radius: 999px; border: 3px dashed #b9b2dc; color: #6b6496; font: 800 13.5px 'Unbounded', sans-serif; background: #fff; }
.org__lvl--live { background: var(--c); color: var(--ink); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.org__lvl--ready { background: #fff; color: var(--ink); border: 3px solid var(--ink); }
.org__lvl--next { border: 3px solid var(--pink); color: var(--ink); }
a.org__lvl:focus-visible { outline: 4px solid var(--blue); outline-offset: 3px; }
@media (hover: hover) { a.org__lvl--live:hover, a.org__lvl--ready:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); } }
.org__note { margin: 0; font-size: 13px; color: #6b6496; line-height: 1.45; }
.org__lang--soon .org__name { color: var(--paper); }
.org__lang--soon .org__line, .org__lang--soon .org__note, .org__lang--soon .org__track > b small { color: var(--muted); }
.org__lang--soon .org__track > b { color: var(--paper); }
.legend .org__lvl { flex: none; width: 22px; min-width: 22px; height: 22px; padding: 0; box-shadow: none; }
@media (max-width: 720px) { .org__branches::before, .org__lang::before { display: none; } .org__lang { box-shadow: 6px 6px 0 var(--c); } }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 26px; padding: 0; list-style: none; font-weight: 700; font-size: 13.5px; color: var(--muted); }
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.org__lvl--later { border-style: dashed; }
/* the map as a tree: a dashed trunk from "languages" down the left, a branch to each language, then to its exam tracks */
.tree { margin-top: 8px; }
.tree__root { display: flex; }
.tree__langs { position: relative; display: grid; gap: clamp(22px, 3vw, 30px); margin: 0; padding: 24px 0 0 34px; list-style: none; }
.tree__langs::before { content: ''; position: absolute; left: 12px; top: 0; bottom: 46px; border-left: 3px dashed rgba(244, 242, 250, 0.45); }
.tree__lang { position: relative; display: grid; gap: 14px; }
.tree__lang::before { content: ''; position: absolute; left: -22px; top: 44px; width: 20px; border-top: 3px dashed rgba(244, 242, 250, 0.45); }
.tree__node { display: grid; gap: 4px; align-content: start; padding: 14px 16px 16px; background: #fff; color: var(--ink); border: 4px solid var(--ink); box-shadow: 8px 8px 0 var(--c); }
a.tree__node { text-decoration: none; }
a.tree__node:focus-visible { outline: 4px solid var(--blue); outline-offset: 4px; }
@media (hover: hover) { a.tree__node:hover { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 var(--c); } }
.tree__native { font: 500 30px var(--hz); line-height: 1.1; }
.tree__native--latin { font: 900 24px 'Unbounded', sans-serif; letter-spacing: -0.04em; }
.tree__name { font: 900 15px 'Unbounded', sans-serif; letter-spacing: -0.03em; text-transform: lowercase; color: #6b6496; }
.tree__count { font-size: 14px; font-weight: 700; color: #4a4470; line-height: 1.4; }
.tree__count a { color: var(--ink); border-bottom: 3px solid var(--pink); }
.tree__go { justify-self: start; margin-top: 4px; font-weight: 800; font-size: 14px; border-bottom: 3px solid var(--c); }
.tree__lang--soon .tree__node { background: transparent; color: var(--paper); border: 4px dashed rgba(244, 242, 250, 0.5); box-shadow: none; }
.tree__lang--soon .tree__name { color: var(--paper); } .tree__lang--soon .tree__count { color: var(--muted); } .tree__lang--soon .tree__count a { color: var(--paper); }
.tree__tracks { position: relative; display: grid; gap: 12px; margin: 0; padding: 0 0 0 26px; list-style: none; }
.tree__tracks::before { content: ''; position: absolute; left: 10px; top: -14px; bottom: 22px; border-left: 3px dashed rgba(244, 242, 250, 0.45); }
.tree__track { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.tree__track::before { content: ''; position: absolute; left: -16px; top: 23px; width: 14px; border-top: 3px dashed rgba(244, 242, 250, 0.45); }
.tree__label { display: inline-grid; min-width: 104px; padding: 5px 10px 6px; border: 3px solid var(--c); color: var(--paper); }
.tree__label b { font: 800 13px 'Unbounded', sans-serif; letter-spacing: -0.02em; }
.tree__label small { font: 700 11.5px 'Karla', sans-serif; color: var(--muted); }
.tree .org__lvl:not(.org__lvl--live) { background: transparent; color: var(--paper); border-color: rgba(244, 242, 250, 0.55); }
.tree .org__lvl.org__lvl--next, .legend .org__lvl.org__lvl--next { border-color: var(--pink); border-style: solid; }
.legend .org__lvl:not(.org__lvl--live):not(.org__lvl--next) { background: transparent; border-color: rgba(244, 242, 250, 0.55); }
@media (hover: hover) { .tree a.org__lvl:not(.org__lvl--live):hover { border-style: solid; border-color: var(--paper); } }
@media (min-width: 900px) {
  .tree__lang { grid-template-columns: 250px minmax(0, 1fr); gap: 0; align-items: start; }
  .tree__tracks { padding: 10px 0 0 40px; }
  .tree__tracks::before { left: 14px; top: 33px; bottom: 23px; }
  .tree__tracks::after { content: ''; position: absolute; left: -8px; top: 34px; width: 24px; border-top: 3px dashed rgba(244, 242, 250, 0.45); }
  .tree__track::before { left: -26px; width: 24px; }
}
/* a language page: one card per level */
.lang-native { font-family: var(--hz); font-weight: 500; margin-right: 0.2em; }
.lvls { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 26px 24px; margin: 0; padding: 0; list-style: none; }
.lvls > li { display: flex; }
.lvl { display: grid; gap: 10px; align-content: start; width: 100%; padding: 18px 18px 16px; background: #fff; color: var(--ink); border: 4px solid var(--ink); box-shadow: 8px 8px 0 var(--c); }
.lvl--next { box-shadow: 8px 8px 0 var(--pink); }
.lvl--later { background: transparent; color: var(--paper); border: 4px dashed rgba(244, 242, 250, 0.5); box-shadow: none; }
.lvl__head { display: flex; align-items: center; gap: 12px; }
.lvl h4 { margin: 0; font: 900 17px 'Unbounded', sans-serif; letter-spacing: -0.03em; text-transform: lowercase; line-height: 1.2; }
.lvl .tag { justify-self: start; }
.lvl p { margin: 0; font-size: 15px; line-height: 1.45; color: #4a4470; }
.lvl .lvl__facts { font-size: 13.5px; font-weight: 700; color: #6b6496; }
.lvl--later p, .lvl--later .lvl__facts { color: var(--muted); }
.lvl--later .org__lvl { background: transparent; color: var(--paper); border-color: rgba(244, 242, 250, 0.55); }
.lvl__go { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; color: inherit; border-bottom: 3px solid var(--c); }
.lvl--next .lvl__go { border-color: var(--pink); }
@media (hover: hover) { .lvl__go:hover { color: var(--blue); } .lvl--later .lvl__go:hover { color: var(--yellow); } }
/* numbers at a glance (course pages) and the unit list of a course that is coming */
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.facts li { display: grid; gap: 2px; padding: 14px 14px 12px; background: #fff; color: var(--ink); border: 4px solid var(--ink); box-shadow: 6px 6px 0 var(--c); }
.facts b { font: 900 26px 'Unbounded', sans-serif; letter-spacing: -0.03em; }
.facts span { font-size: 13.5px; font-weight: 700; color: #4a4470; }
.unitlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 8px 24px; margin: 26px 0 0; padding: 0; list-style: none; color: var(--paper); }
.unitlist li { display: flex; align-items: baseline; gap: 10px; min-height: 32px; border-bottom: 2px dashed rgba(244, 242, 250, 0.25); }
.unitlist b { flex: none; font: 800 13px 'Unbounded', sans-serif; color: var(--yellow); }
.unitlist small { margin-left: auto; color: var(--muted); font-weight: 700; }
@media (max-width: 720px) { .lvl, .facts li { box-shadow: 5px 5px 0 var(--c); } .lvl--later { box-shadow: none; } .lvl--next { box-shadow: 5px 5px 0 var(--pink); } }
/* the hero and its highlight side by side on wide screens: the right half of the page is used, not left empty */
.intro-row { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 0 clamp(28px, 3.5vw, 52px); }
.intro-row > .section, .intro-row > .intro-aside { margin-top: 0 !important; }
.intro-aside { display: grid; gap: 14px; align-content: center; padding-bottom: 12px; }
.intro-aside .section-sub { margin: 0; }
.intro-aside .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.intro-row .cats, .intro-row .units { grid-template-columns: minmax(0, 1fr) !important; gap: 18px !important; }
/* a long word in the wordmark (languages) shrinks to fit its column */
.intro-row > :first-child { container-type: inline-size; }
.intro-row > :first-child .wordmark { font-size: min(clamp(29px, 5.6vw, 83px), var(--wm-fit, 15cqi)); }
@media (min-width: 1100px) { .intro-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* ===== end learning language styles ===== */