/* Annotate PDF — multilingual blog (approved design, 26 Oct 2026).
   Loaded last, after the page's own styles (blog: tokens → article → blog.css; article: tokens → article → article-v2 → site-header → article-v3).
   Only design-system tokens; no new colours. Languages: en, de, fr, it, ja, ko. */

/* ============ 1. Fonts per language ============
   Latin glyphs keep Montserrat (UI, headings) and Atlassian Sans (reading text); CJK glyphs fall through to system fonts,
   then to Noto Sans JP / KR. The first font that has the glyph wins, so mixed text ("Chrome に追加") stays consistent. */
:root{
  --font-ja:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Noto Sans CJK JP","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
  --font-ko:"Apple SD Gothic Neo","Noto Sans KR","Noto Sans CJK KR","Malgun Gothic",sans-serif;
}
:lang(ja){
  --font-ui:"Montserrat",var(--font-ja);
  --font-read:"Atlassian Sans",var(--font-ja);
}
:lang(ko){
  --font-ui:"Montserrat",var(--font-ko);
  --font-read:"Atlassian Sans",var(--font-ko);
}
/* elements that carry their own lang (switcher items, markers) re-read the font */
[lang]{font-family:var(--font-ui)}
html[lang] body{font-family:var(--font-read)}

/* ============ 2. Japanese and Korean: size, leading, line breaks ============ */
html:lang(ja) body,html:lang(ko) body,[lang="ja"],[lang="ko"]{line-break:strict;overflow-wrap:break-word}
html:lang(ja) body,[lang="ja"]{word-break:normal}          /* break between any two characters, punctuation rules by line-break:strict */
html:lang(ko) body,[lang="ko"]{word-break:keep-all}        /* Korean breaks at spaces, like Latin text */
/* headings: no break inside a phrase (Chrome 119+; others fall back to normal breaking) */
:lang(ja) :is(h1,h2,h3,.card-title,.rcard a,.step-title,.toc a,.disclosure summary,.promo-title,.ext-card-title,.empty-title){word-break:auto-phrase}
/* Montserrat's negative tracking is for Latin only */
:lang(ja) :is(h1,h2,h3,.article-title,.blog-title),:lang(ko) :is(h1,h2,h3,.article-title,.blog-title){letter-spacing:0}
/* reading text: 17/30 instead of 18/30 — CJK glyphs fill the whole em box and look larger; the 30 px rhythm is kept */
:lang(ja) .article-body,:lang(ko) .article-body,
:lang(ja) .article-intro,:lang(ko) .article-intro{font-size:17px;line-height:30px}
/* headings: +4 px leading for CJK */
:lang(ja) .site-v3 .article-title,:lang(ko) .site-v3 .article-title{line-height:48px}
:lang(ja) .article-body h2,:lang(ko) .article-body h2{line-height:36px}
:lang(ja) .blog-title,:lang(ko) .blog-title{line-height:48px}
:lang(ja) .card-title,:lang(ko) .card-title{line-height:28px}
:lang(ja) .site-v3 .rcard a,:lang(ko) .site-v3 .rcard a{line-height:24px}
/* no italics in CJK: emphasis is weight */
:lang(ja) :is(em,i),:lang(ko) :is(em,i){font-style:normal;font-weight:600}

/* ============ 3. German (and French, Italian): long words ============
   Running text hyphenates (lang must be set on <html>); headings hyphenate only very long words;
   controls never hyphenate or wrap — their rows wrap instead. */
:lang(de) :is(.article-body p,.article-body li,.article-intro,figcaption,.disclosure-body,.card-desc,.blog-lead,.promo-text,.empty-text),
:lang(fr) :is(.article-body p,.article-body li,.article-intro,figcaption,.disclosure-body,.card-desc,.blog-lead,.promo-text,.empty-text),
:lang(it) :is(.article-body p,.article-body li,.article-intro,figcaption,.disclosure-body,.card-desc,.blog-lead,.promo-text,.empty-text){hyphens:auto;-webkit-hyphens:auto}
:lang(de) :is(h1,h2,h3,.card-title,.rcard a,.step-title,.ext-card-title,.promo-title){hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:12 5 5}
:is(.btn,.tag,.cat,.pg,.lang-btn,.site-nav a,.share-link,.share-tile,.footer-links a,.btn-copy){hyphens:manual;white-space:nowrap}
.site-v3 .meta-actions{flex:none;flex-wrap:nowrap}   /* desktop: buttons stay on one line; the author text wraps instead */
@media (max-width:960px){.site-v3 .meta-actions{flex:1 1 100%;flex-wrap:wrap;row-gap:8px}}

/* ============ 4. Language switcher ============
   Header: brand · Getting started · Blog · [🌐 Deutsch ▾] · Add to Chrome. Same 36 px ghost style as the header links.
   Menu: a list of links (navigation, not a form control). Native names, each item in its own language. */
.lang{position:relative}
.lang-btn{height:36px;padding:0 8px 0 10px;display:inline-flex;align-items:center;gap:6px;border:0;border-radius:var(--radius-8);background:transparent;color:var(--text);font:500 14px/20px var(--font-ui);cursor:pointer;transition:background-color 120ms cubic-bezier(.2,0,0,1),color 120ms cubic-bezier(.2,0,0,1)}
.lang-btn svg{width:18px;height:18px;flex:none}
.lang-btn .chev{width:16px;height:16px;transition:transform 160ms cubic-bezier(.2,0,0,1)}
.lang-btn:hover,.lang-btn.is-hover{background:var(--hover);color:var(--primary)}
.lang-btn:focus-visible,.lang-btn.is-focus{outline:2px solid var(--focus);outline-offset:2px}
.lang-btn[aria-expanded="true"]{background:var(--selected);color:var(--primary)}
.lang-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.lang-code{display:none}

.lang-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:var(--z-menu);width:var(--menu-width-wide);max-width:calc(100vw - 32px);padding:4px;border-radius:var(--radius-12);background:var(--surface);outline:1px solid var(--border);outline-offset:-1px;box-shadow:var(--shadow-medium);
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity 120ms,transform 120ms,visibility 0s linear 120ms}
.lang.is-open .lang-menu,.lang-menu.is-static{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.lang-menu-title{margin:0;padding:8px 10px 6px;font:600 12px/16px var(--font-ui);color:var(--text-secondary)}
.lang-menu ul{margin:0;padding:0;list-style:none}
.lang-item{min-height:36px;padding:8px 10px;display:grid;grid-template-columns:minmax(0,1fr) 16px;column-gap:8px;align-items:center;border-radius:var(--radius-8);color:var(--text);text-decoration:none;font:500 14px/20px var(--font-ui)}
.lang-item svg{width:16px;height:16px;grid-column:2;grid-row:1 / span 2;align-self:center;color:var(--primary)}
.lang-item:hover,.lang-item.is-hover{background:var(--hover);color:var(--primary)}
.lang-item:focus-visible,.lang-item.is-focus{outline:2px solid var(--focus);outline-offset:-2px}
.lang-item[aria-current="true"]{background:var(--selected);color:var(--primary);font-weight:600}
.lang-hint{grid-column:1;margin-top:2px;font:400 12px/16px var(--font-ui);color:var(--text-secondary);white-space:normal}
.lang-item.is-untranslated svg{color:var(--text-secondary)}
.lang-item.is-untranslated:hover svg,.lang-item.is-untranslated.is-hover svg{color:var(--primary)}
@media (prefers-reduced-motion:reduce){.lang-btn,.lang-btn .chev,.lang-menu{transition:none}}

/* Two-row header up to 860 px (approved header: ≤ 640). Longer labels ("Erste Schritte · English", "Zu Chrome hinzufügen") plus the switcher
   do not fit one row between 641 and 860 px (German needs 861+ to keep air between brand and links), so the approved phone header is used there too — same rules, copied from site-header.css.
   Row 1 — brand + Add to Chrome; row 2 — Getting started · Blog on the left, the switcher at the right end (same grid area, aligned to the end).
   The menu spans the header width. */
@media (max-width:860px){
  .site-header{position:relative;height:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand cta" "nav nav";align-items:center;column-gap:8px;row-gap:0;padding:8px 8px 4px 10px}
  .site-brand{grid-area:brand;font-size:15px;min-width:0;white-space:nowrap}
  .site-brand img{width:24px;height:24px}
  .site-header>.btn{grid-area:cta}
  .site-nav{grid-area:nav;margin:8px 0 0;padding-top:4px;padding-right:120px;border-top:1px solid var(--border)}
  .site-nav a{height:40px}
  .lang{grid-area:nav;justify-self:end;align-self:end;position:static}
  .lang-btn{height:40px}
  .lang-menu{left:0;right:0;width:auto;max-width:none;top:calc(100% + 8px)}
}
/* ≤ 400: tighter header links. Everything that names a language in the header switches from the name to the code:
   the closed switcher shows "DE", the English-only marker in the header shows "· EN" (the footer keeps "· English").
   Add to Chrome: languages with a long label use the short store wording (de "Hinzufügen", fr "Ajouter", it "Aggiungi"); the full label stays as aria-label. */
.cta-short,.lang-mark .code{display:none}
@media (max-width:400px){
  .site-nav{padding-right:72px}
  .site-nav a{padding:0 8px}
  .lang-btn .lang-name{display:none}
  .lang-btn .lang-code{display:inline}
  .lang-btn{padding:0 6px 0 8px;gap:4px}
  .cta-full{display:none}
  .cta-short{display:inline}
  .site-nav .lang-mark .name{display:none}
  .site-nav .lang-mark .code{display:inline}
}

/* ============ 5. Links to pages that exist only in English ============
   One pattern everywhere: the link text in the page language, then "· English" in the target language's own name,
   secondary colour, lang="en", hreflang="en" on the link. */
.to-lang .lang-mark{margin-left:4px;color:var(--text-secondary);font-weight:400}
.to-lang:hover .lang-mark,.to-lang.is-hover .lang-mark{color:inherit}

/* ============ 6. Notice after switching from an untranslated article ============ */
.lang-notice{margin:16px 0 0;padding:12px 14px;display:flex;gap:10px;align-items:flex-start;border-radius:var(--radius-12);background:var(--panel);outline:1px solid var(--border);outline-offset:-1px;font:400 14px/22px var(--font-ui);color:var(--text)}
.lang-notice svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--text-secondary)}
.lang-notice a{color:var(--primary);text-underline-offset:3px}
.lang-notice[hidden]{display:none}

/* ============ 7. Catalogue with few articles: no pager, no empty space ============ */
/* (no extra rule: the grid keeps 3 columns and simply ends; the pager is hidden when there is one page) */

/* ============ 8. Phone fixes found by the long-text check ============ */
@media (max-width:640px){
  /* promo card: picture under the text (in v2/v3 the fixed 168 px column pushed the card past 320–390 px with German text) */
  .promo{grid-template-columns:minmax(0,1fr)}
  .promo-art{order:2;max-width:320px}
  /* final install card: the long button label ("Zu Chrome hinzufügen") gets its own full-width row */
  .ext-card-final .btn{width:100%;justify-content:center}
  /* footer links: one column — "Politique de confidentialité · English" does not fit a 2-column grid at 320 */
  .site-footer .footer-links{grid-template-columns:minmax(0,1fr)}
}
.site-brand{white-space:nowrap}
.lang-mark abbr{text-decoration:none}

/* ============ 9. Separators that may wrap (dates, card meta) ============
   With longer translations these lines wrap; a line must not start with "·". The dot sits in the gap before each item
   and is clipped at the start of a line (same technique as the trust line of the install card). */
.site-v3 .dates{column-gap:12px;overflow:hidden}
.site-v3 .dates>div{position:relative}
.site-v3 .dates>div+div::before{position:absolute;left:-8px;margin:0}
.site-v3 .rcard-body{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px;row-gap:6px;overflow:hidden}
.site-v3 .rcard-body a{flex:1 0 100%}
.site-v3 .rcard-meta{position:relative}
.site-v3 .rcard-meta::before{position:absolute;left:-8px;margin:0}
@media (max-width:480px){.site-v3 .related-grid{grid-template-columns:minmax(0,1fr)}}

/* Empty search result ≤ 400 px: actions stacked, full width; the only buttons allowed to wrap
   ("Réinitialiser la recherche et la catégorie" is 304 px on one line). */
@media (max-width:400px){
  .empty-actions{flex-direction:column;align-items:stretch;width:100%}
  .empty-actions .btn{width:100%;height:auto;min-height:36px;padding:8px 12px;white-space:normal;text-align:center;justify-content:center;line-height:20px}
}
/* the counter may be long in de / fr / it ("Aucun article dans Notes et annotations pour « … »"): it wraps instead of widening the search row */
.result-count{white-space:normal;min-width:0;overflow-wrap:anywhere}
.result-count b{white-space:normal}
/* a long search word in the empty-state title ("Keine Treffer für „Unterschriftenfeldbeschriftung“") breaks instead of overflowing */
.empty-title,.empty-text{overflow-wrap:anywhere}

/* Production integration: native details keeps language links available without JavaScript. */
:root{--radius-12:12px;--menu-width-wide:270px;--z-menu:40}
.lang summary{list-style:none}
.lang summary::-webkit-details-marker{display:none}
.lang[open] .lang-menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.lang[open] .lang-btn{background:var(--selected);color:var(--primary)}
.lang[open] .chev{transform:rotate(180deg)}
.lang .lang-menu a{white-space:normal}
.site-header{position:relative;z-index:var(--z-menu)}
.card-meta{column-gap:12px;overflow:hidden}
.card-meta>*{position:relative}
.card-meta>*+*::before{position:absolute;left:-8px;margin:0}

.site-v3 [data-copy-status].is-success{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Latin-ext fallback for catalogue text, shared with the existing article font assets. */
@font-face{font-family:"Atlassian Sans Latin Ext";src:url("../how-to-add-a-text-box-to-pdf/assets/fonts/AtlassianSans-latin-ext.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
html:lang(de),html:lang(fr),html:lang(it){--font-read:"Atlassian Sans","Atlassian Sans Latin Ext",ui-sans-serif,system-ui,sans-serif}