/* Shared by the app landing page, reading indexes and every article template. */
/* Prefer phrase boundaries, falling back inside an over-wide phrase at 200% text. */
body[data-page="landing"] .site-title-phrase { display:inline-block; max-width:100%; vertical-align:top; overflow-wrap:break-word; font:inherit; letter-spacing:inherit; color:inherit; text-transform:inherit; }
body[data-page="landing"] h2,body[data-page="landing"] h3 { line-break:strict; text-wrap:pretty; }
body[data-page="landing"] #screens-title .title-phrase { max-width:100%; white-space:normal; overflow-wrap:break-word; }
html:has(.site-shell-header) { scroll-padding-top:calc(var(--site-shell-height,128px) + 16px); }
.site-shell-header,.site-shell-footer { font-family:"Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,ui-rounded,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:16px; line-height:1.75; color:#172238; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; }
.site-shell-header:lang(ru),.site-shell-header:lang(uk),.site-shell-footer:lang(ru),.site-shell-footer:lang(uk) { font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }
.site-shell-header:lang(vi),.site-shell-footer:lang(vi) { font-family:"Segoe UI",Arial,sans-serif; }
.site-shell-header { position:sticky; top:0; z-index:30; border-bottom:1px solid rgba(23,34,56,.08); background:rgba(250,247,242,.96); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
.site-shell-inner { width:min(calc(100% - 40px),1180px); min-height:72px; margin-inline:auto; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; column-gap:24px; }
.site-shell-header .brand { display:inline-flex; align-items:center; align-self:start; flex-wrap:nowrap; gap:10px; margin:15px 0; color:#011b46; font-size:16px; font-weight:900; letter-spacing:-.03em; line-height:1.75; text-decoration:none; }
.site-shell-header .brand img { display:block; flex:none; width:42px; height:42px; border-radius:12px; box-shadow:0 5px 14px rgba(1,27,70,.18); }
.site-shell-header .brand-name { font-size:inherit; font-weight:inherit; letter-spacing:inherit; line-height:1.75; }
.site-shell-header .brand small { display:block; margin-top:-4px; color:#687286; font-size:10px; font-weight:700; letter-spacing:.08em; }
.site-shell-nav { display:flex; flex-wrap:wrap; justify-content:flex-end; align-self:center; gap:2px; margin:0; min-width:0; padding:8px 0; }
.site-shell-nav a { min-height:44px; display:inline-flex; align-items:center; padding:9px 13px; border-radius:12px; color:#445066; font-size:.875rem; font-weight:750; line-height:1.65; text-decoration:none; overflow-wrap:anywhere; }
.site-shell-nav a:hover,.site-shell-nav a[aria-current] { background:rgba(18,200,181,.1); color:#197f72; }
.site-shell-nav a[aria-current] { text-decoration:underline; text-underline-offset:.3em; text-decoration-thickness:2px; }
.site-shell-header .language-control { position:relative; flex:none; margin:14px 0; max-width:100%; }
.site-shell-header .language-control::before { content:"A"; position:absolute; top:50%; left:13px; z-index:1; color:#197f72; font-size:12px; font-weight:900; transform:translateY(-52%); pointer-events:none; }
.site-shell-header .language-select { width:auto; min-width:116px; min-height:44px; max-width:210px; padding:8px 32px; border:1px solid #e9e2d8; border-radius:14px; appearance:none; background:linear-gradient(45deg,transparent 50%,#687286 50%) calc(100% - 15px) 19px/5px 5px no-repeat,linear-gradient(135deg,#687286 50%,transparent 50%) calc(100% - 10px) 19px/5px 5px no-repeat,#fff; color:#172238; font-family:inherit; font-size:13px; font-weight:800; line-height:normal; box-shadow:0 4px 14px rgba(23,34,56,.04); cursor:pointer; }
.site-shell-header a:focus-visible,.site-shell-footer a:focus-visible,.site-shell-header select:focus-visible,.site-shell-header summary:focus-visible { outline:3px solid #197f72; outline-offset:3px; }
.skip:focus { z-index:101; }
.site-shell-header .reading-language-fallback { display:flex; flex-wrap:wrap; gap:8px 18px; }
.site-shell-header .reading-language-fallback a { display:inline-flex; align-items:center; min-height:44px; color:#197f72; }
.site-shell-header .reading-language-details summary { min-height:44px; padding:10px 0; font-size:.875rem; cursor:pointer; }
.site-shell-header .language-control:has(noscript>*) .language-select,.site-shell-header .language-control:has(noscript>*)::before { display:none; }
.site-shell-inner:has(.reading-language-fallback) { display:flex; flex-wrap:wrap; }
.site-shell-inner:has(.reading-language-fallback) .site-shell-nav { flex:1; }
.site-shell-inner:has(.reading-language-fallback) .language-control { flex-basis:100%; margin:0; }
.site-shell-header:has(.reading-language-details[open]) { position:relative; }
.site-shell-language-static { display:inline-flex; min-height:44px; align-items:center; color:#687286; font-size:13px; }
.site-shell-footer { border-top:1px solid #e9e2d8; background:#fffdf9; }
.site-shell-footer .footer-inner { width:min(calc(100% - 40px),1180px); margin-inline:auto; padding-block:34px 40px; }
.site-shell-footer .footer-top { display:flex; align-items:flex-start; justify-content:space-between; gap:28px; }
.site-shell-footer .footer-brand { color:#011b46; font-size:17px; font-weight:950; flex:0 1 300px; }
.site-shell-footer .footer-brand span { display:block; margin-top:4px; color:#687286; font-size:.8125rem; font-weight:600; overflow-wrap:anywhere; }
.site-shell-footer .footer-links { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:2px 16px; max-width:760px; }
.site-shell-footer .footer-links a { min-height:44px; display:inline-flex; align-items:center; color:#586377; font-size:.875rem; font-weight:750; text-decoration:none; overflow-wrap:anywhere; }
.site-shell-footer .footer-links a:hover { color:#197f72; text-decoration:underline; text-underline-offset:4px; }
.site-shell-footer .footer-links a[aria-current] { color:#197f72; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:2px; }
.site-shell-footer .copyright { margin:20px 0 0; color:#687286; font-size:.75rem; }
/* Keep the brand and selector on the same row on every destination. */
@media(max-width:1000px) {
  .site-shell-inner { grid-template-columns:minmax(0,1fr) auto; column-gap:12px; }
  .site-shell-header .brand { grid-row:1; grid-column:1; justify-self:start; }
  .site-shell-header .language-control { grid-row:1; grid-column:2; }
  .site-shell-nav { grid-row:2; grid-column:1/-1; justify-content:flex-start; padding:0 0 8px; gap:2px 6px; }
  .site-shell-nav a { padding:7px 11px; }
  .site-shell-nav a:first-child { margin-left:-11px; }
  .site-shell-footer .footer-top { flex-direction:column; gap:18px; }
  .site-shell-footer .footer-brand { flex:auto; }
  .site-shell-footer .footer-links { justify-content:flex-start; }
}
@media(max-width:760px) {
  .site-shell-inner,.site-shell-footer .footer-inner { width:calc(100% - 28px); }
  .site-shell-inner { min-height:64px; }
  .site-shell-header .brand { margin-block:13px; }
  .site-shell-header .brand img { width:38px; height:38px; }
  .site-shell-header .brand-name { font-size:14px; }
  .site-shell-header .brand small { display:none; }
  .site-shell-header .language-control { margin:10px 0; }
  .site-shell-header .language-select { min-width:104px; max-width:min(190px,calc(100vw - 100px)); }
  .site-shell-nav .site-shell-screens { display:none; }
  .site-shell-nav a { font-size:.8125rem; }
}
@media(max-width:380px) {
  .site-shell-inner,.site-shell-footer .footer-inner { width:calc(100% - 20px); }
  .site-shell-header .brand-name { display:none; }
}
@media(max-height:600px) { .site-shell-header { position:relative; } }
@media print { .site-shell-header { position:static; } .site-shell-header .language-control { display:none; } }