/* Walilock — Japanese typography.
   Loaded ONLY by /ja/ pages, after walilock.css and each page's own <style>.
   The English site never requests this file.

   FONTS: no web font is downloaded for Japanese. Inter still draws Latin
   letters and digits; kana and kanji fall through to the Japanese face the
   visitor's OS already has (Hiragino on Apple, Yu Gothic UI or Meiryo on
   Windows, Noto Sans CJK on Android and Linux). That costs zero bytes, keeps
   every font first-party, and passes scripts/verify-site-fonts-self-hosted.sh
   unchanged. */

html:lang(ja) {
  --font: 'Inter', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Meiryo',
          'Noto Sans JP', 'Noto Sans CJK JP', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Japanese body text needs more leading than Latin; 1.6 packs kanji lines. */
html:lang(ja) body {
  line-height: 1.85;
  /* Adds the thin gap between Japanese and Latin/numbers ("Walilockの保管庫").
     Ignored by browsers without support, which simply render no gap. */
  text-autospace: normal;
  line-break: strict;
}

/* Negative tracking tuned for Inter crushes kanji together, and 1.05 leading
   collides stacked lines. Japanese display type also reads larger per glyph,
   so the largest sizes step down. */
html:lang(ja) h1.hero-title {
  font-size: clamp(34px, 5.2vw, 62px);
  letter-spacing: 0;
  line-height: 1.3;
}
html:lang(ja) h2.section-title {
  font-size: clamp(24px, 3vw, 38px);
  letter-spacing: 0;
  line-height: 1.4;
}
html:lang(ja) :is(h1, h2, h3, h4, h3.card-title, .pricing-amount) {
  letter-spacing: 0;
}
html:lang(ja) :is(h3, h4) { line-height: 1.5; }

/* Short, prominent strings break between phrases, never inside a word.
   i18n/build.mjs inserts <wbr> at BudouX phrase boundaries; keep-all makes
   those the only break points, and overflow-wrap is the safety net for a
   phrase longer than its box. Body paragraphs keep the normal Japanese rule
   (break between any two characters), which is correct for running text. */
html:lang(ja) :is(h1, h2, h3, h4, .section-label, .hero-badge,
                  .tier-name, .feat-head, .card-title, .faq-question, label,
                  .docs-toc a) {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* Running text breaks between phrases too, where the browser can find them
   (word-break: auto-phrase, Chrome 119+). Before this, body text broke between
   any two characters, which split fixed terms (サイン／インパスワード) and words
   (できま／す). A browser without it keeps the normal Japanese rule, so nothing
   gets worse there. line-break: strict above still applies. word-break is
   inherited: the headings set their own keep-all above, which applies to those
   elements directly, so they do not take this inherited value. The built pages
   also carry BudouX <wbr> hints in body text (none inside a fixed term), which
   the normal rule ignores. */
html:lang(ja) body { word-break: auto-phrase; }

/* Nav items are single short labels: never wrap them. Without this a flex
   item may shrink below one word, which split 「製品」 into 製 / 品 at 800px.
   Scoped to the nav on purpose: long page buttons (「アカウントを作成して…」) must
   still wrap, or they widen the whole page on a phone. */
html:lang(ja) :is(.nav-links .nav-link, .nav-actions .btn) { white-space: nowrap; }

/* Except on a phone, in the minimal nav of the sign-in pages: there the bar
   has no room left, and a label that cannot wrap widens the whole page
   (walilock.css, .nav-min). */
@media (max-width: 768px) {
  html:lang(ja) .nav-min > .nav-actions .btn { white-space: normal; }
}

/* walilock.css makes every .btn nowrap. English labels are short enough; a
   Japanese call to action such as 「アカウントを作成して14日間の無料トライアルを開始」
   is ~400px and pushed the sign-up page past a 375px phone screen. Outside the
   nav, Japanese buttons may wrap onto a second centred line. */
html:lang(ja) .btn:not(.nav-actions .btn) { white-space: normal; text-align: center; }

/* Japanese nav labels run longer than English ("エンタープライズ",
   "ダウンロード"), and the glyphs come from the visitor's own system font, so
   their width varies by OS. Where walilock.css tightens the bar (1024-1199px,
   "Nav width"), Japanese also steps its nav text down a size. Measured
   2026-10-06 on Windows: 959px with this rule (968 on /enterprise) against
   1024 available, which leaves room for a wider face such as Hiragino. Below
   1024px the hamburger has taken over, so nothing here applies. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  html:lang(ja) .nav-link { font-size: 13px; }
  html:lang(ja) .nav-actions .btn { padding-inline: 12px; font-size: 13px; }
}

/* Uppercase letter-spaced labels were designed for Latin; tracking spreads
   kana apart. text-transform has no effect on Japanese. */
html:lang(ja) :is(.section-label, .footer-col h4) { letter-spacing: 0.04em; }

/* Pricing cards. The 「人気」 badge used to share the パーソナルプラス title's
   row; Japanese moved it to a tab on the card's top edge first, and since
   2026-10-06 every language does (pricing.html). What stays here is the
   tracking: Latin-tuned letter-spacing spreads kana apart. */
html:lang(ja) .pricing-card .tier-name { white-space: nowrap; letter-spacing: 0.02em; }
html:lang(ja) .pricing-card .badge { letter-spacing: 0.04em; }
/* Five cards in a row leave the narrowest buttons ~155px between 1200px
   (where the grid becomes five columns, pricing.html) and ~1220px; tighten
   them so each label stays on one line. */
@media (min-width: 1200px) and (max-width: 1220px) {
  html:lang(ja) .pricing-card .btn { padding-inline: 8px; font-size: 13px; }
}

/* Japanese has no italic; synthesized oblique kanji looks broken. */
html:lang(ja) :is(em, i) { font-style: normal; font-weight: 700; }