/* Compact kanji actions and unobstructed stroke diagrams. */
.full-kanji-card { min-width: 0; }
.full-kanji-card .kanji-info { min-width: 0; overflow-wrap: anywhere; }
.full-kanji-card > .kanji-card-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 6px; margin-top: 0; white-space: normal; }
.full-kanji-card .kanji-card-actions button { flex: 0 1 auto; min-width: 0; max-width: 100%; min-height: 32px; padding: 5px 9px; font-size: 12px; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
.full-kanji-card > .kanji-visual { height: auto; min-height: 112px; overflow: visible; gap: 12px; padding-block: 6px; }
.full-kanji-card .kanji-frequency { position: static; display: block; max-width: 100%; min-height: 0; padding: 0; border-radius: 0; background: transparent; color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.4; white-space: normal; text-align: center; }
@media (pointer: coarse) { .full-kanji-card .kanji-card-actions button { min-height: 44px; } }

/* Compact cards: explicit reading choice and a corner learned check. */
.full-kanji-grid { align-items: start; }
.full-kanji-card { position: relative; min-height: 0; padding: 12px; gap: 10px 12px; align-content: start; }
.full-kanji-card .kanji-info h3 { margin: 0 90px 4px 0; line-height: 1.15; }
.full-kanji-card .kanji-meaning { min-height: 0; margin: 0 0 6px; line-height: 1.35; }
.full-kanji-card .kanji-reading { margin: 2px 0; line-height: 1.35; }
.full-kanji-card .kanji-context { margin: 6px 0 0; line-height: 1.35; }
.full-kanji-card .kanji-known-toggle { position: absolute; right: 8px; top: 8px; display: grid; place-items: center; width: auto; min-width: 76px; height: 28px; padding: 0 8px; border: 1px solid var(--line); border-radius: 99px; background: #fff; color: var(--muted); font-size: 11px; font-weight: 800; cursor: pointer; }
.full-kanji-card .kanji-known-toggle[aria-pressed="true"] { color: #fff; background: var(--pink-dark); border-color: var(--pink-dark); }
.full-kanji-card .kanji-pronunciation { flex: 0 1 6rem; min-width: 0; max-width: 100%; min-height: 32px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); font: inherit; font-size: 12px; }
.full-kanji-card :is(button,select):focus-visible { outline: 2px solid var(--pink-dark); outline-offset: 2px; }
@media (pointer: coarse) { .full-kanji-card .kanji-known-toggle { min-width: 76px; height: 44px; } .full-kanji-card .kanji-info h3 { margin-right: 90px; } .full-kanji-card .kanji-pronunciation { min-height: 44px; } }

/* Native dropdown opens above the page without changing card dimensions. */
.full-kanji-card .kanji-pronunciation { flex: 0 1 auto; width: auto; max-width: 100%; min-width: 0; padding: 5px 8px; }

/* Visible desktop navigation, compact mobile dropdown, and current section. */
.site-header { display: flex; align-items: center; isolation: isolate; gap: 16px; }
.site-header .brand { flex: 0 0 auto; }
.site-header .account-open { position: static; order: 3; flex: 0 0 auto; margin: 0 0 0 auto; }
.site-header .menu-toggle { display: none; }
.site-header #primary-nav { position: static; display: flex; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; justify-content: center; align-content: center; gap: 4px 13px; margin: 0; padding: 0; }
.site-header #primary-nav a { position: relative; flex: 0 0 auto; padding: 5px 0; font-size: 14px; white-space: nowrap; line-height: 1.4; }
.site-header #primary-nav a[aria-current="location"] { color: var(--pink-dark); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

@media (max-width: 900px) {
  .site-header { gap: 8px; padding: 10px 12px; flex-wrap: nowrap; }
  .site-header .brand { margin-right: auto; }
  .site-header .account-open { order: 3; margin: 0; min-height: 40px; }
  .site-header .menu-toggle { display: block; position: static; order: 2; flex: 0 0 auto; min-height: 40px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font-size: 12px; font-weight: 800; }
  .site-header #primary-nav { display: none; position: absolute; top: 100%; left: auto; right: 12px; width: min(300px,calc(100vw - 24px)); box-sizing: border-box; margin: 5px 0 0; padding: 8px; gap: 2px 12px; grid-template-columns: repeat(2,minmax(0,1fr)); max-height: calc(100dvh - 90px); overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
  .site-header #primary-nav.open { display: grid; }
  .site-header #primary-nav a { min-width: 0; padding: 8px 6px; font-size: 13px; white-space: normal; }
}

/* Word audio keeps the sentence appearance and wraps within each phrase card. */
.phrase-japanese .phrase-part { display: inline; width: auto; min-width: 0; max-width: 100%; padding: 2px 1px; margin: 0 2px 0 0; border: 0; border-radius: 4px; background: transparent; color: inherit; font: inherit; line-height: inherit; text-align: inherit; cursor: pointer; overflow-wrap: anywhere; }
.phrase-japanese .phrase-part:hover { background: #f8e8ee; }
.phrase-japanese .phrase-part:focus-visible { outline: 2px solid var(--pink-dark); outline-offset: 2px; }
.phrase-japanese .phrase-part rt { color: var(--pink-dark); font-size: .5em; }
.phrase-hiragana,.phrase-romaji { overflow-wrap: anywhere; }

html { scroll-padding-top: calc(var(--hikari-header-height, 90px) + 12px); }

/* Use one header offset, rather than adding section and document offsets. */
main [id] { scroll-margin-top: 0; }

/* Equal card heights within each row, without fixed-height text clipping. */
.jlpt-phrase-grid, .word-grid, .phrase-grid { align-items: stretch; }
.jlpt-phrase-grid > .jlpt-phrase-card { display: flex; flex-direction: column; align-self: stretch; min-width: 0; height: auto; box-sizing: border-box; }
.jlpt-phrase-card > .phrase-card-actions { margin-top: auto; }
.jlpt-phrase-card > .phrase-translation { margin-bottom: 14px; }
.word-grid > .word-card { align-self: stretch; height: auto; min-width: 0; box-sizing: border-box; }
.phrase-grid > .phrase-card { align-self: stretch; height: auto; min-width: 0; box-sizing: border-box; }

/* Four balanced quick-practice answers on every screen size. */
.quiz-options { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: stretch; }
.quiz-option { min-width: 0; overflow-wrap: anywhere; white-space: normal; }

.contact-topic-picker { position: relative; min-width: 0; }
.contact-topic-native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; }
#contact .contact-topic-trigger { width: 100%; padding: 14px 36px 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.contact-topic-trigger::after { content: '⌄'; position: absolute; right: 16px; }
.contact-topic-options { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; padding: 6px; overflow-y: auto; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 10px 28px #55304426; }
.contact-topic-options[hidden] { display: none; }
.opens-up .contact-topic-options { top: auto; bottom: calc(100% + 6px); }
#contact .contact-topic-options button { display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
#contact .contact-topic-options button:hover,#contact .contact-topic-options button[aria-selected="true"] { background: #f8e8ee; color: var(--pink-dark); }
#contact .contact-topic-picker button:focus-visible { outline: 2px solid var(--pink-dark); outline-offset: -2px; }

.review-invitation { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 28px; margin-bottom: 24px; border: 1px solid var(--line); border-radius: 24px; background: #fff7fa; }
.review-invitation h3 { margin: 0 0 8px; font-size: 23px; }
.review-invitation p { margin: 0; color: var(--muted); }
.review-invitation .review-eligibility-note { flex-basis: 100%; font-size: 13px; line-height: 1.6; }
.verified-review-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr)); gap: 20px; }
.verified-review-grid .verified-review-empty { grid-column: 1 / -1; display: grid; place-items: center; min-height: 160px; margin: 0; padding: 28px; text-align: center; border: 1px dashed var(--line); border-radius: 24px; background: #fff; font-size: 18px; }
.verified-review-grid .verified-review-public-card { padding: 28px; border-radius: 24px; font-size: 16px; line-height: 1.7; }

/* Focused lessons: one readable activity at a time. */
#n5-dashboard[hidden],.lesson-reader [hidden]{display:none!important}
.lesson-reader{max-width:860px;margin:24px auto;scroll-margin-top:calc(var(--hikari-header-height,80px) + 12px)}
.lesson-reader .n5-activity-grid{display:block}
.lesson-reader .n5-activity-card{width:100%;box-sizing:border-box;padding:clamp(20px,4vw,36px);min-width:0}
.lesson-reader .n5-lesson-head{display:block;padding:24px;margin-bottom:16px}
.lesson-reader .n5-lesson-head h3{font-size:clamp(24px,3vw,32px);line-height:1.3}
.lesson-reader p,.lesson-reader .lesson-guide-points span,.lesson-reader .lesson-guide-examples span{font-size:17px;line-height:1.7}
.lesson-reader .quick-prompt{font-size:clamp(24px,3vw,32px);line-height:1.65}
.lesson-reader .quick-option{font-size:19px;line-height:1.6;min-height:48px;white-space:normal;overflow-wrap:anywhere}
.lesson-reader .lesson-guide h4{font-size:28px;line-height:1.4}
.lesson-reader .lesson-guide{padding:clamp(20px,4vw,36px)}
.lesson-reader .lesson-feedback{font-size:16px;line-height:1.6}
.lesson-reader-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.lesson-reader-nav>div{display:flex;gap:8px}
.lesson-reader-nav button{border:1px solid #e4cbd5;border-radius:999px;background:#fff;padding:10px 16px;color:#a74067;font:inherit;font-weight:700;cursor:pointer;min-height:44px}
.lesson-reader-nav button:disabled{opacity:.45;cursor:default}
.lesson-reader-nav button:focus-visible{outline:2px solid #a74067;outline-offset:3px}
.lesson-reader-nav [role=status]{font-size:16px;color:#65535e}
@media(max-width:600px){.lesson-reader .lesson-guide-points,.lesson-reader .lesson-guide-examples{grid-template-columns:1fr}.lesson-reader-nav>div{margin-left:auto}.lesson-reader .n5-lesson-head{padding:20px}.lesson-reader .quick-options{gap:8px}}
body[data-lesson-page] main> :not(#lessons){display:none!important}
body[data-lesson-page] #lessons{padding-top:32px}
body[data-lesson-page] #lessons>.container>.section-heading{margin-bottom:24px}
body[data-lesson-page] #n5-dashboard{font-size:17px}
body[data-lesson-page] #n5-dashboard p{font-size:16px;line-height:1.65}
body[data-lesson-page] #n5-dashboard h3{font-size:24px;line-height:1.35}
body[data-lesson-page] .n5-welcome{grid-column:1/-1}
#lessons .lesson-tabs[hidden]{display:none!important}
body[data-lesson-page] #lessons>.shell>.section-heading{margin-bottom:24px}
body[data-lesson-page] #lessons:has(.lesson-reader)>.shell>.section-heading,body[data-lesson-page] #lessons:has(.lesson-reader)>.shell>.lesson-tabs{display:none}
body[data-lesson-page] .site-header a[href="/lessons"]{text-decoration:underline;text-underline-offset:8px;color:#b04c72}
.lesson-reader .n5-lesson-head .lesson-head-copy p{font-size:17px;line-height:1.6}
.lesson-reader .lesson-guide-examples p{margin:0}

/* Fixed-size links; only excess links move into More. */
.site-header{flex-wrap:nowrap;gap:12px}
.site-header #primary-nav,.site-header #primary-nav.open{display:flex;position:static;order:0;flex:1 1 0;min-width:0;flex-wrap:nowrap;justify-content:center;gap:12px;width:auto;margin:0;padding:0;border:0;background:transparent;box-shadow:none;overflow:visible}
.site-header #primary-nav a,.site-header #header-overflow a{font-size:14px;white-space:nowrap;line-height:1.4}
.site-header .menu-toggle{display:block;position:static;order:2;flex:0 0 auto;font-size:14px;padding:8px 12px;border-radius:12px;min-height:40px;background:#fff;border:1px solid var(--line)}
.site-header .menu-toggle[hidden],.site-header #header-overflow[hidden]{display:none!important}
.site-header .account-open{order:3;margin:0;flex:0 0 auto}
.site-header #header-overflow{position:absolute;top:100%;right:max(20px,calc((100% - 1240px)/2));display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:min(320px,calc(100vw - 32px));max-height:calc(100dvh - 100px);overflow:auto;gap:4px;padding:10px;margin-top:6px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.site-header #header-overflow a{padding:10px 8px;text-decoration:none;color:var(--muted);font-weight:700}
.site-header #header-overflow a[aria-current]{color:var(--pink-dark);text-decoration:underline;text-underline-offset:5px}
@media(max-width:680px){.site-header #primary-nav{display:none}.site-header .brand{margin-right:auto}.site-header #header-overflow{right:12px}}