/* Japonnow 2.2 · Aprender japonés. Loaded only on the front page, singular views,
 * the glossary and learning-path/level archives (see inc/learning.php). */

/* Japanese text and furigana */
:lang(ja) { font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, var(--md-ref-typeface-plain); letter-spacing: .02em; }
ruby { ruby-position: over; }
rt { font-size: .55em; color: var(--md-sys-color-on-surface-variant); letter-spacing: 0; }
html[data-furigana=off] rt, html[data-furigana=off] rp { visibility: hidden; }
.jn-furigana-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin: 0 0 16px; padding: 8px 16px; border: 0; border-radius: var(--md-sys-shape-corner-small); color: var(--md-sys-color-on-surface-variant); background: transparent; box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant); font: var(--md-sys-typescale-label-large); cursor: pointer; }
.jn-furigana-toggle[aria-pressed=true] { color: var(--md-sys-color-on-secondary-container); background: var(--md-sys-color-secondary-container); box-shadow: none; }
.jn-furigana-toggle [lang=ja] { font-size: 1.1em; }

/* Breadcrumbs and article tools aligned with the article head/body columns */
.jn-article .jn-breadcrumbs { max-width: 900px; margin-inline: auto; }
.jn-article .jn-furigana-toggle { display: flex; width: fit-content; margin-left: max(0px, calc((100% - 780px) / 2)); }
/* Breadcrumbs */
.jn-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 16px; padding: 0; list-style: none; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-small); }
.jn-breadcrumbs li + li::before { content: "/"; margin-right: 8px; color: var(--md-sys-color-outline); }
.jn-breadcrumbs a { text-decoration: underline; text-decoration-color: var(--md-sys-color-outline-variant); text-underline-offset: 3px; }
.jn-breadcrumbs a:hover { color: var(--md-sys-color-primary); }

/* Level badge */
.jn-level { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 8px; border-radius: var(--md-sys-shape-corner-small); color: var(--md-sys-color-on-tertiary-container); background: var(--md-sys-color-tertiary-container); font: var(--md-sys-typescale-label-medium); white-space: nowrap; vertical-align: middle; }
.jn-card .jn-level { margin-left: 6px; }

/* Table of contents */
.jn-toc { margin: 0 0 2em; padding: 16px 20px; border-radius: var(--md-sys-shape-corner-large); background: var(--md-sys-color-surface-container); font-size: .95rem; line-height: 1.5; }
.jn-toc summary { cursor: pointer; font: var(--md-sys-typescale-title-small); font-family: var(--md-ref-typeface-brand); }
.jn-toc ol { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: jn-toc; }
.jn-toc li { margin: 6px 0; }
.jn-toc__item--h2 { counter-increment: jn-toc; }
.jn-toc__item--h2::before { content: counter(jn-toc) "."; display: inline-block; min-width: 1.6em; color: var(--md-sys-color-primary); font-weight: 600; }
.jn-toc__item--h3 { padding-left: 2.2em; }
.jn-toc__item--h3::before { content: "–"; margin-right: .5em; color: var(--md-sys-color-outline); }
.jn-toc a { color: var(--md-sys-color-on-surface) !important; text-decoration: none !important; }
.jn-toc a:hover { color: var(--md-sys-color-primary) !important; text-decoration: underline !important; }
.jn-article__body :is(h2, h3)[id] { scroll-margin-top: 96px; }

/* Learning path: header chip, navigation and overview page */
.jn-series-chip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; font: var(--md-sys-typescale-label-large); }
.jn-series-chip a { color: var(--md-sys-color-primary); }
.jn-series-chip span:last-child { color: var(--md-sys-color-on-surface-variant); }
.jn-series { max-width: 780px; margin: 2.5em auto 0; padding: 24px; border-radius: var(--md-sys-shape-corner-extra-large); background: var(--md-sys-color-surface-container-low); box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant); font-size: 1rem; line-height: 1.5; }
.jn-series__head h2 { margin: 4px 0 12px; font: var(--md-sys-typescale-title-large); font-weight: 600; }
.jn-series__head h2 a { color: inherit !important; text-decoration: none !important; }
.jn-progress { height: 8px; margin: 0 0 16px; overflow: hidden; border-radius: var(--md-sys-shape-corner-full); background: var(--md-sys-color-surface-container-highest); }
.jn-progress span { display: block; height: 100%; border-radius: inherit; background: var(--md-sys-color-primary); }
.jn-progress--large { height: 12px; margin-bottom: 24px; }
.jn-series__list { margin: 0; padding: 0; list-style: none; }
.jn-series__list li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--md-sys-color-outline-variant); }
.jn-series__list a { color: var(--md-sys-color-on-surface) !important; text-decoration: none !important; }
.jn-series__list a:hover { color: var(--md-sys-color-primary) !important; }
.jn-series__list .is-current { font-weight: 600; }
.jn-series__num, .jn-path-steps__num { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: var(--md-sys-shape-corner-full); color: var(--md-sys-color-on-surface-variant); background: var(--md-sys-color-surface-container-highest); font: var(--md-sys-typescale-label-medium); }
.is-current .jn-series__num { color: var(--md-sys-color-on-primary); background: var(--md-sys-color-primary); }
.is-read .jn-series__num, .is-read .jn-path-steps__num { color: var(--md-sys-color-on-tertiary-container); background: var(--md-sys-color-tertiary-container); }
.jn-series__pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 16px; }
.jn-series__pager .jn-btn { text-decoration: none !important; }
.jn-series__pager [rel=next] { margin-left: auto; }
.jn-path-page .jn-section__heading--category { align-items: end; }
.jn-path-steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.jn-path-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 20px; border-radius: var(--md-sys-shape-corner-large); background: var(--md-sys-color-surface-container-low); box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant); }
.jn-path-steps__num { width: 40px; height: 40px; font: var(--md-sys-typescale-title-medium); }
.jn-path-steps h2 { margin: 0 0 6px; font: var(--md-sys-typescale-title-large); font-weight: 600; }
.jn-path-steps h2 a:hover { color: var(--md-sys-color-primary); }
.jn-path-steps p { margin: 0 0 8px; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-medium); }
.jn-path-steps__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.jn-path-page__hint { margin-top: 24px; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-medium); }
.jn-path-page__hint a { color: var(--md-sys-color-primary); text-decoration: underline; }

/* Word cards (glossary, word of the day, single word) */
.jn-word { position: relative; display: grid; align-content: start; gap: 4px; min-width: 0; padding: 20px; border-radius: var(--md-sys-shape-corner-large); background: var(--md-sys-color-surface-container-low); box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant); }
.jn-word--card:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 5%, var(--md-sys-color-surface-container-low)); }
.jn-word--card .jn-word__term a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.jn-word--card:focus-within { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; }
.jn-word--card .jn-word__term a { outline: 0; }
.jn-word__label { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--md-sys-color-primary); font: var(--md-sys-typescale-label-large); }
.jn-word__term { margin: 0; font: 700 2rem/1.2 "Noto Sans JP", var(--md-ref-typeface-brand); overflow-wrap: anywhere; }
.jn-word--today .jn-word__term { font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.jn-word--single .jn-word__term { font-size: clamp(3rem, 2.4rem + 3vw, 5rem); }
.jn-word__reading { margin: 0; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-title-medium); }
.jn-word__romaji { margin-left: 6px; font-style: italic; font-family: var(--md-ref-typeface-plain); }
.jn-word__meaning { margin: 8px 0 0; font: var(--md-sys-typescale-title-large); font-weight: 600; }
.jn-word--card .jn-word__meaning { font: var(--md-sys-typescale-title-medium); }
.jn-word__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-small); }
.jn-word__meta .jn-level { position: relative; z-index: 1; }
.jn-word__example { margin: 16px 0 0; padding: 16px 20px; border-left: 4px solid var(--md-sys-color-primary); border-radius: var(--md-sys-shape-corner-medium); background: var(--md-sys-color-surface-container); }
.jn-word__example p { margin: 0; }
.jn-word__example p[lang=ja] { font-size: 1.25rem; line-height: 2; }
.jn-word__example p + p { margin-top: 4px; color: var(--md-sys-color-on-surface-variant); }
.jn-word__audio { width: 100%; max-width: 360px; margin-top: 16px; }
.jn-word--today { padding: clamp(24px, 3vw, 36px); background: var(--md-sys-color-surface-container-lowest); }
.jn-word--today .jn-text-link { justify-self: start; margin-top: 12px; }
.jn-word--single { padding: 0; background: none; box-shadow: none; }
.jn-word-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.jn-word-page .jn-article__editorial { max-width: 900px; margin-inline: auto; }
.jn-related-words { max-width: 900px; margin: 40px auto; }
.jn-related-words h2 { font: var(--md-sys-typescale-title-large); font-weight: 600; }
.jn-glossary__today { margin-bottom: 24px; }
.jn-glossary__search { max-width: 640px; margin-bottom: 16px; }

/* Front: Aprende japonés */
.jn-learn { display: grid; gap: 24px; }
.jn-learn__title { margin: 0 0 12px; font: var(--md-sys-typescale-title-medium); font-family: var(--md-ref-typeface-brand); font-weight: 600; }
.jn-learn__side { display: grid; align-content: start; gap: 8px; }
.jn-paths { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.jn-path { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 56px; padding: 12px 16px; border-radius: var(--md-sys-shape-corner-large); background: var(--md-sys-color-surface-container); transition: background-color var(--control-motion); }
.jn-path:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 6%, var(--md-sys-color-surface-container)); }
.jn-path__name { font: var(--md-sys-typescale-title-medium); }
.jn-path__count { color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-small); }
.jn-learn__posts { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.jn-learn__posts li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 12px 0; border-top: 1px solid var(--md-sys-color-outline-variant); font: var(--md-sys-typescale-body-large); }
.jn-learn__posts a:not(.jn-level):hover { color: var(--md-sys-color-primary); }

/* Newsletter */
.jn-newsletter { display: grid; gap: 20px; padding: clamp(24px, 4vw, 40px); border-radius: var(--md-sys-shape-corner-extra-large); color: var(--md-sys-color-on-primary-container); background: var(--md-sys-color-primary-container); }
.jn-newsletter h2 { display: flex; align-items: center; gap: 12px; margin: 4px 0 8px; font: var(--md-sys-typescale-headline-medium); font-weight: 600; }
.jn-newsletter p { margin: 0; font: var(--md-sys-typescale-body-large); }
.jn-newsletter .jn-eyebrow { color: inherit; }
.jn-newsletter__form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.jn-newsletter__form .jn-search-field { flex: 1 1 240px; background: var(--md-sys-color-surface-container-lowest); }
.jn-newsletter__consent { display: flex; gap: 8px; align-items: flex-start; flex-basis: 100%; font: var(--md-sys-typescale-body-small); }
.jn-newsletter__consent input { width: 18px; height: 18px; margin-top: 0; accent-color: var(--md-sys-color-primary); }
.jn-newsletter__consent a { text-decoration: underline; }

/* Comment reports */
.jn-report { margin-top: 8px; font: var(--md-sys-typescale-body-small); }
.jn-report summary { display: inline-flex; min-height: 32px; align-items: center; padding: 4px 10px; border-radius: var(--md-sys-shape-corner-full); color: var(--md-sys-color-on-surface-variant); cursor: pointer; list-style: none; }
.jn-report summary::-webkit-details-marker { display: none; }
.jn-report summary:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.jn-report form { display: grid; gap: 12px; margin-top: 8px; padding: 12px 16px; border-radius: var(--md-sys-shape-corner-medium); background: var(--md-sys-color-surface-container); }
.jn-report fieldset { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; }
.jn-report legend { margin-bottom: 6px; font: var(--md-sys-typescale-label-large); }
.jn-report label { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.jn-report .jn-btn { justify-self: start; min-height: 36px; }

/* Vocabulary block and writing patterns (front end) */
.jn-vocab { margin: 1.5em 0; padding: 20px 24px; border-radius: var(--md-sys-shape-corner-large); background: var(--md-sys-color-surface-container); font-size: 1rem; line-height: 1.5; }
.jn-vocab__label { display: inline-flex; align-items: center; gap: 8px; color: var(--md-sys-color-primary); font: var(--md-sys-typescale-label-large); }
.jn-vocab__term { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 8px 0 0 !important; }
.jn-vocab__term > [lang=ja]:first-child { font: 700 1.75rem/1.3 "Noto Sans JP", sans-serif; }
.jn-vocab__reading { color: var(--md-sys-color-on-surface-variant); font-size: 1.1rem; }
.jn-vocab__romaji { color: var(--md-sys-color-on-surface-variant); font-style: italic; }
.jn-vocab__meaning { margin: 4px 0 0 !important; font: var(--md-sys-typescale-title-medium) !important; }
.jn-vocab__example { margin-top: 12px; padding-left: 12px; border-left: 3px solid var(--md-sys-color-primary); }
.jn-vocab__example p { margin: 0 !important; }
.jn-vocab__example p[lang=ja] { font-size: 1.15rem; line-height: 2; }
.jn-vocab__example p + p { color: var(--md-sys-color-on-surface-variant); }
.jn-vocab__note { margin: 12px 0 0 !important; color: var(--md-sys-color-on-surface-variant); font-size: .9rem; }
.jn-box { margin: 1.5em 0; padding: 4px 24px; border-radius: var(--md-sys-shape-corner-large); background: var(--md-sys-color-surface-container); }
.jn-box :is(h3, h4) { margin-top: 16px !important; }
.jn-box--essentials { border-left: 4px solid var(--md-sys-color-primary); }
.jn-box--tip { color: var(--md-sys-color-on-tertiary-container); background: var(--md-sys-color-tertiary-container); }
.jn-box--travel { box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant); background: var(--md-sys-color-surface-container-low); }
.jn-box--easy p { font-size: 1.15rem; line-height: 2; }
.jn-box__translation { color: var(--md-sys-color-on-surface-variant); font-size: 1rem !important; }
.jn-price-table table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.jn-price-table :is(th, td) { padding: 10px 12px; border-bottom: 1px solid var(--md-sys-color-outline-variant); text-align: left; }
.jn-price-table th { background: var(--md-sys-color-surface-container); }
.jn-faq { margin: 8px 0; padding: 12px 16px; border-radius: var(--md-sys-shape-corner-medium); background: var(--md-sys-color-surface-container-low); box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant); }
.jn-faq summary { cursor: pointer; font-weight: 600; }

@media (min-width: 960px) {
    .jn-learn { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; gap: 32px; }
    .jn-newsletter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 32px; }
}
@media (forced-colors: active) {
    .jn-progress span { background: Highlight; }
    .jn-level, .jn-word, .jn-vocab, .jn-box, .jn-path { border: 1px solid CanvasText; }
}
@media print {
    .jn-furigana-toggle, .jn-report, .jn-series__pager { display: none; }
}
.jn-report input[type=radio] { width: 18px; height: 18px; margin: 0; accent-color: var(--md-sys-color-primary); }

/* Automatic glossary links: dotted underline + tooltip on hover/focus (dismiss with Escape). */
.jn-gloss { position: relative; display: inline; }
.jn-article__body .jn-gloss__link { color: inherit; text-decoration: underline dotted var(--md-sys-color-primary); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.jn-article__body .jn-gloss__link:hover { color: var(--md-sys-color-primary); text-decoration-style: solid; }
.jn-gloss__tip { position: absolute; z-index: 20; bottom: calc(100% + 8px); left: 50%; display: none; width: max-content; max-width: min(280px, 80vw); padding: 10px 14px; border-radius: var(--md-sys-shape-corner-medium); color: var(--md-sys-color-inverse-on-surface); background: var(--md-sys-color-inverse-surface); box-shadow: var(--md-sys-elevation-level2); font: var(--md-sys-typescale-body-medium); line-height: 1.5; text-align: left; white-space: normal; pointer-events: none; transform: translateX(calc(-50% + var(--jn-gloss-shift, 0px))); }
.jn-gloss__tip::after { content: ""; position: absolute; top: 100%; left: calc(50% - var(--jn-gloss-shift, 0px)); border: 6px solid transparent; border-top-color: var(--md-sys-color-inverse-surface); transform: translateX(-50%); }
.jn-gloss:is(:hover, :focus-within):not(.jn-gloss--dismissed) .jn-gloss__tip, .jn-gloss--open .jn-gloss__tip { display: block; }
@media (hover: none) { .jn-gloss:hover:not(.jn-gloss--open) .jn-gloss__tip { display: none; } }
.jn-gloss__word { font: 700 1.1rem/1.3 "Noto Sans JP", sans-serif; }
.jn-gloss__romaji { font-style: italic; opacity: .85; }
.jn-gloss__meaning { display: block; margin-top: 2px; }
@media (forced-colors: active) { .jn-gloss__tip { border: 1px solid CanvasText; } }
@media print { .jn-gloss__tip { display: none !important; } .jn-gloss__link { text-decoration: none; } }