/* The static study library (/grammar/<locale>/…), written by build-library.py.
   Built on design.css and jlpt-pages.css (crumbs, level tabs, the level
   stack): the head of each page is a printed leaf, the entries are set like
   the columns of a dictionary, one kana group after another. */

/* ---------------------------------------------------------------- the leaf: words, 版心, ledger */
.lib-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) 52px minmax(0, 4fr);
  grid-template-areas: "copy hs ledger";
  align-items: center;
}
.lib-head .jlpt-hero-copy { grid-area: copy; padding-right: clamp(28px, 3.6vw, 56px); }
.lib-head .hanshin { grid-area: hs; align-self: stretch; margin-block: var(--bleed); }
.lib-head .level-tabs { margin-bottom: 20px; }
.lib-head .lead { max-width: 36em; }
.lib-hub .lead { max-width: 30em; }

/* The ledger: the level's glyph and four counts, ruled like a colophon. */
.lib-ledger { grid-area: ledger; display: grid; justify-items: start; gap: 18px; padding-left: clamp(28px, 3.6vw, 56px); }
.lib-glyph { font-size: clamp(96px, 10vw, 152px); line-height: .9; color: var(--pine); }
.lib-ledger .kicker { font-family: var(--text); font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--muted); }
.lib-stats { position: relative; display: grid; width: 100%; margin: 0; padding: 8px 0; }
.lib-stats::before, .lib-stats::after { content: ""; position: absolute; left: 0; right: 0; height: 6px; }
.lib-stats::before { top: 0; box-shadow: inset 0 2px var(--frame-ink), inset 0 -1px var(--frame-ink-2); }
.lib-stats::after { bottom: 0; box-shadow: inset 0 -2px var(--frame-ink), inset 0 1px var(--frame-ink-2); }
.lib-stats div { display: grid; grid-template-columns: auto minmax(16px, 1fr) auto; align-items: baseline; padding: 11px 0; }
.lib-stats div + div { box-shadow: inset 0 1px var(--hairline); }
.lib-stats div::after { content: ""; grid-column: 2; grid-row: 1; height: 4px; margin: 0 12px; background-image: radial-gradient(circle, rgba(31, 42, 37, .32) 1px, transparent 1.4px); background-size: 8px 4px; background-repeat: repeat-x; background-position: left center; }
.lib-stats dt { grid-column: 1; grid-row: 1; font-size: 15px; color: #3A4640; }
.lib-stats dd { grid-column: 3; grid-row: 1; margin: 0; font-size: 24px; color: var(--ink); }

/* ---------------------------------------------------------------- the kana index */
/* One floating pill that stays in view under the navigation; the only
   blurred surface besides the navigation itself. */
.lib-index {
  position: sticky;
  top: 88px;
  z-index: calc(var(--z-nav) - 1);
  width: fit-content;
  max-width: calc(100% - 2 * var(--gutter));
  margin: clamp(56px, 6vw, 88px) auto 0;
  border-radius: 999px;
  isolation: isolate;
}
.lib-index::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(250, 247, 240, .82);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 0 0 1px rgba(31, 42, 37, .09), 0 12px 28px -18px rgba(31, 42, 37, .16);
}
.lib-index ol { display: flex; gap: 2px; margin: 0; padding: 5px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.lib-index ol::-webkit-scrollbar { display: none; }
.lib-index a {
  display: grid;
  place-items: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--display);
  font-size: 17px;
  white-space: nowrap;
  text-decoration: none;
  transition-property: background-color, color, transform;
  transition-duration: var(--t-micro);
  transition-timing-function: var(--ease-enter);
}
.lib-index a:not(:lang(ja)) { font-family: var(--text); font-size: 14px; font-weight: 600; }
.lib-index a:hover { background: rgba(43, 76, 64, .08); color: var(--pine); }
.lib-index a:active { transform: scale(.96); }
.lib-index a:focus-visible { outline: 2px solid var(--vermilion); outline-offset: -2px; }

/* ---------------------------------------------------------------- the entries */
/* Hundreds of Japanese titles and sentences would pull in most of the
   self-hosted Japanese font shards (about 1 MB measured on the N3 page), so
   the Japanese of the entries, titles and sentences alike, is set in the
   reader's system Mincho (plan §13); Shippori stays for the page head (版心,
   level glyph). Japanese inside interface sentences elsewhere on the page
   uses the system Gothic. */
.lib-body :lang(ja), .lib-index :lang(ja) {
  --display: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif CJK JP", "Source Han Serif JP", serif;
  --text: var(--display);
}
.library .lead :lang(ja), .lib-about :lang(ja), .lib-unleveled-head :lang(ja), .level-sub :lang(ja), .lib-source :lang(ja) {
  --text: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Noto Sans CJK JP", "Meiryo", sans-serif;
}
/* A group per kana row: the kana stands in the margin like a thumb index and
   stays beside its entries while they scroll past. Long pages render a group
   only as it nears the screen (content-visibility). */
.lib-body { margin-top: clamp(32px, 4vw, 56px); }
.lib-group {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 0 clamp(24px, 4vw, 64px);
  padding-top: 8px;
  box-shadow: inset 0 2px var(--frame-ink), inset 0 6px var(--paper), inset 0 7px var(--frame-ink-2);
  scroll-margin-top: 150px;
  content-visibility: auto;
  contain-intrinsic-size: auto 1600px;
}
.lib-group + .lib-group { margin-top: clamp(48px, 5vw, 72px); }
.lib-group-head { position: sticky; top: 152px; align-self: start; display: grid; justify-items: start; gap: 6px; padding-top: 24px; }
.lib-group-head span { font-size: clamp(48px, 5vw, 72px); line-height: 1; color: var(--vermilion-text); }
.lib-group-head span:not(:lang(ja)) { font-size: clamp(24px, 2.4vw, 32px); color: var(--ink); }
.lib-group-head small { font-family: var(--text); font-size: 13px; color: var(--muted); }
.lib-entries { display: grid; }

.g-entry { display: grid; gap: 10px; padding: 26px 0 28px; scroll-margin-top: 150px; }
.g-entry + .g-entry { box-shadow: inset 0 1px var(--hairline); }
.g-entry:target { animation: lib-mark 1.6s var(--ease-enter) both; }
/* A jump from the kana bar lands smoothly and the group's kana is set again,
   ink rising into it, so the eye finds where it arrived. */
@media (prefers-reduced-motion: no-preference) {
  html:has(.library) { scroll-behavior: smooth; }
  .lib-group:target .lib-group-head span { animation: lib-ink var(--t-block) var(--ease-enter) both; }
}
@keyframes lib-ink { from { opacity: .2; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes lib-mark { from { background-color: rgba(198, 160, 102, .22); } to { background-color: transparent; } }
.g-title { font-size: clamp(22px, 2vw, 28px); line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.g-meaning, .g-senses { max-width: 40em; margin: 0; font-size: 17px; line-height: 1.75; color: var(--ink); }
.g-senses { display: grid; gap: 4px; padding-left: 1.4em; }
.g-senses li::marker { color: var(--muted); font-size: 14px; }
.g-example { display: grid; gap: 4px; max-width: 40em; margin: 4px 0 0; padding: 2px 0 2px 18px; box-shadow: inset 2px 0 var(--vermilion); }
.g-ja { font-size: 18px; line-height: 1.8; color: var(--ink); }
.g-tr { font-size: 15px; line-height: 1.65; color: #3A4640; }
.g-note { max-width: 40em; margin: 2px 0 0; font-size: 15px; line-height: 1.7; color: #3A4640; }
.g-note b { margin-right: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(43, 76, 64, .08); color: var(--pine); font-size: 12px; font-weight: 600; letter-spacing: .02em; }

/* A point already printed at a lower level: one line and a link back. */
.g-repeat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 16px 0; }
.g-repeat .g-title { font-size: 19px; color: #3A4640; }
.g-see { display: inline-flex; align-items: center; gap: 4px; color: var(--vermilion-text); font-size: 14px; font-weight: 600; text-decoration: none; }
.g-see .i { width: 14px; height: 14px; transition-property: transform; transition-duration: var(--t-micro); transition-timing-function: var(--ease-enter); }
.g-see:hover .i { transform: translate(2px, -2px); }

/* ---------------------------------------------------------------- section page */
.lib-about { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.lib-about-body { display: grid; gap: 18px; max-width: 38em; padding-top: 24px; box-shadow: inset 0 1px var(--hairline); }
.lib-about-body p { margin: 0; font-size: 17px; line-height: 1.8; color: #3A4640; }
.lib-unleveled-head { display: grid; justify-items: start; gap: 18px; }
.lib-unleveled-head p { max-width: 38em; margin: 0; font-size: 17px; line-height: 1.8; color: #3A4640; }

/* ---------------------------------------------------------------- turning the page */
.lib-turn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: clamp(64px, 7vw, 112px); box-shadow: inset 0 2px var(--frame-ink), inset 0 -1px var(--frame-ink-2); }
.lib-turn a { display: grid; gap: 4px; padding: 24px 4px; color: var(--ink); text-decoration: none; }
.lib-turn a strong { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; transition-property: color; transition-duration: var(--t-small); transition-timing-function: var(--ease-enter); }
.lib-turn a:hover strong { color: var(--vermilion-text); }
.lib-turn-all { justify-items: center; text-align: center; grid-column: 2; }
.lib-turn-prev { grid-column: 1; }
.lib-turn-next { grid-column: 3; justify-items: end; text-align: right; }
.lib-source { margin-top: 32px; text-align: center; }

@media (max-width: 1099px) {
  .lib-head { grid-template-columns: minmax(0, 1fr) 52px; grid-template-areas: "copy hs" "ledger hs"; row-gap: 40px; }
  .lib-head .jlpt-hero-copy { padding-right: 32px; }
  .lib-ledger { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 32px; padding: 0 32px 0 0; }
  .lib-ledger .kicker { grid-column: 2; grid-row: 1; align-self: end; }
  .lib-glyph { grid-row: 1 / span 2; }
  .lib-stats { grid-column: 2; }
}

@media (max-width: 767px) {
  /* Phones: the 版心 becomes the running head, the ledger folds under the
     words, the index is a row of kana that scrolls sideways under the menu. */
  .lib-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hs" "copy" "ledger"; row-gap: 0; }
  .lib-head .hanshin { margin: var(--bleed) var(--bleed) 24px; padding: 12px 16px; box-shadow: inset 0 -1px var(--frame-ink-2); }
  .lib-head .jlpt-hero-copy { padding-right: 0; }
  .lib-ledger { grid-template-columns: minmax(0, 1fr); padding: 32px 0 0; gap: 12px; }
  .lib-glyph { display: none; }
  .lib-ledger .kicker, .lib-stats { grid-column: 1; grid-row: auto; }
  .lib-stats dd { font-size: 20px; }
  .lib-index { top: 80px; width: auto; max-width: none; margin: 40px var(--gutter) 0; }
  /* Eleven tabs do not fit one phone line: they wrap to two, nothing hidden. */
  .lib-index { border-radius: 24px; }
  .lib-index ol { flex-wrap: wrap; justify-content: center; gap: 0; padding: 4px; overflow: visible; }
  .lib-index a { min-width: 0; min-height: 40px; padding: 0 11px; font-size: 16px; }
  .lib-group { grid-template-columns: minmax(0, 1fr); padding-top: 4px; scroll-margin-top: 140px; }
  .lib-group-head { position: static; grid-auto-flow: column; align-items: baseline; justify-content: start; gap: 12px; padding-top: 20px; }
  .lib-group-head span { font-size: 40px; }
  .g-entry { padding: 22px 0 24px; scroll-margin-top: 140px; }
  .g-title { font-size: 22px; }
  .g-meaning, .g-senses { font-size: 16px; }
  .g-ja { font-size: 17px; }
  .lib-about { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .lib-turn { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lib-turn-all { grid-column: 1 / -1; grid-row: 2; box-shadow: inset 0 1px var(--hairline); }
  .lib-turn-prev { grid-column: 1; grid-row: 1; }
  .lib-turn-next { grid-column: 2; grid-row: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .g-entry:target { animation: none; background-color: rgba(198, 160, 102, .16); }
  .lib-index a, .g-see .i, .lib-turn a strong { transition: none; }
}