/* Readability overrides: self-hosted Noto Sans, SIL OFL 1.1. See fonts/OFL.txt. */
/* cyrillic */
@font-face {
  font-family: 'Watch Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  font-display: swap;
  src: url(./fonts/noto-sans-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'Watch Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  font-display: swap;
  src: url(./fonts/noto-sans-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Watch Noto Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: normal;
  font-display: swap;
  src: url(./fonts/noto-sans-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'Watch Noto Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: normal;
  font-display: swap;
  src: url(./fonts/noto-sans-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Watch Noto Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
  font-display: swap;
  src: url(./fonts/noto-sans-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'Watch Noto Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
  font-display: swap;
  src: url(./fonts/noto-sans-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The family also covers original Russian metadata while the interface is English. */
:root { --reading-font: 'Watch Noto Sans', 'Segoe UI', Arial, sans-serif; }
html:lang(ru) body, [dir="auto"], .original-text { font-family: var(--reading-font); }
html:lang(ru) button, html:lang(ru) input, html:lang(ru) textarea, html:lang(ru) select { font-family: inherit; }
html:lang(ru) h1, html:lang(ru) h2, html:lang(ru) h3, html:lang(ru) h4,
#featured-title, #detail-title { font-family: var(--reading-font); letter-spacing: -.25px; }
#featured-title, #detail-title { font-weight: 700; }

/* Metadata is content, not fine print. Keep its hierarchy without shrinking it. */
.card-body .card-title, .rail-items .card-title, .ai-card .card-title { font-size: 14px; font-weight: 500; line-height: 1.5; min-height: 21px; }
.card-body .card-meta, .rail-items .card-meta { font-size: 12px; line-height: 1.5; color: #b5b8c2; }
.card-body .card-reason, .rail-items .card-reason, .card-body .card-note, .ai-card .ai-reason { font-size: 12px; line-height: 1.6; color: #bfb4c8; }
.card-poster .card-badge, .card-poster .card-quality, .card-poster .card-rating { font-size: 11px; line-height: 1.45; }
.card-poster.has-personal-rating .card-quality { max-width: calc(100% - 91px); }
#featured-description { font-size: 15px; line-height: 1.75; color: #d0cbd5; }
.featured-reason>p { font-size: 12px; line-height: 1.6; color: #bbb5c5; }
#detail-description { font-size: 16px; line-height: 1.8; color: #d3ced9; }
#detail-original { font-size: 14px; line-height: 1.6; color: #bfb7cb; }
.detail-extra-row { font-size: 13px; line-height: 1.7; }
.detail-extra-row dd { color: #cbc6d3; }
#rating-note { font-size: 15px; line-height: 1.7; }
.history-entry-title, .job-copy .job-title { font-size: 15px; line-height: 1.5; }
.history-note { font-size: 14px; line-height: 1.65; }

/* Russian UI: readable labels and controls at normal desktop and TV scale. */
html:lang(ru) .sidebar nav .nav-item { font-size: 13px; line-height: 1.45; color: #b9bdc7; }
html:lang(ru) .sidebar nav .nav-item.active { color: #faf8fc; }
html:lang(ru) .sidebar-bottom { font-size: 11px; line-height: 1.6; }
html:lang(ru) .sidebar-bottom strong { font-size: 13px; }
html:lang(ru) .nav-count { font-size: 11px; }
html:lang(ru) .topbar-search input, html:lang(ru) .search-box input { font-size: 14px; }
html:lang(ru) input::placeholder, html:lang(ru) textarea::placeholder { color: #a4a7b3; }
html:lang(ru) .language-picker button { font-size: 12px; }
html:lang(ru) .button, html:lang(ru) .catalog-tools .button, html:lang(ru) .text-button { font-size: 13px; line-height: 1.5; }
html:lang(ru) .main-content>.breadcrumb, html:lang(ru) .remote-hint { font-size: 12px; color: #acb0bb; }
html:lang(ru) .eyebrow, html:lang(ru) .page-heading .eyebrow, html:lang(ru) .detail-topbar>.eyebrow,
html:lang(ru) .feature-eyebrow, html:lang(ru) .featured-reason>span { font-size: 11px; line-height: 1.5; letter-spacing: 1px; color: #bdb3c7; }
html:lang(ru) .page-heading p, html:lang(ru) .device-details>p,
html:lang(ru) .device-ai p, html:lang(ru) .device-benefits p,
html:lang(ru) .device-export p, html:lang(ru) .device-language .muted,
html:lang(ru) .device-access p { font-size: 14px; line-height: 1.7; color: #bcb7c7; }
html:lang(ru) .device-benefits strong { font-size: 14px; line-height: 1.5; }
html:lang(ru) .device-settings-grid .eyebrow, html:lang(ru) .device-settings-grid .field-label,
html:lang(ru) #device-form label { font-size: 12px; line-height: 1.5; color: #c0b2cb; }
html:lang(ru) .device-identifiers, html:lang(ru) .device-identifiers code, html:lang(ru) .device-identifiers>span:last-child { font-size: 12px; line-height: 1.7; }
/* Russian labels need their own row inside the narrow information panel. */
html:lang(ru) .device-identifiers { grid-template-columns: minmax(0, 1fr); gap: 4px; }
html:lang(ru) .device-identifiers>span:nth-child(3) { margin-top: 8px; }
html:lang(ru) .device-identifiers>* { min-width: 0; overflow-wrap: anywhere; }
html:lang(ru) .featured-facts, html:lang(ru) .detail-kicker, html:lang(ru) .detail-facts,
html:lang(ru) .page-counter, html:lang(ru) .metadata-state, html:lang(ru) .artwork-credit { font-size: 12px; line-height: 1.65; }
html:lang(ru) .featured-categories .category-tag, html:lang(ru) .category-tag { font-size: 12px; line-height: 1.5; }
html:lang(ru) #category-directory .category-name, html:lang(ru) #category-modal-list .category-name { font-size: 14px!important; line-height: 1.45; }
html:lang(ru) #category-directory .category-tile small { font-size: 12px; color: #e0dce7; }
html:lang(ru) .category-modal-content>input { font-size: 14px; }
html:lang(ru) .recommendation-note strong { font-size: 13px; line-height: 1.5; }
html:lang(ru) .recommendation-note p, html:lang(ru) .ai-section-heading p,
html:lang(ru) .ai-disclaimer, html:lang(ru) .ai-controls>span,
html:lang(ru) .ai-estimate, html:lang(ru) .rail-heading p { font-size: 12px; line-height: 1.65; color: #b9b1c3; }
html:lang(ru) .ai-estimate strong { font-size: 14px; }
html:lang(ru) .ai-section-heading>div:first-child { flex-wrap: wrap; }
html:lang(ru) .ai-section-heading h2 { white-space: normal; }
html:lang(ru) .rating-section label, html:lang(ru) .rating-current, html:lang(ru) .score-scale,
html:lang(ru) .rating-actions p, html:lang(ru) .detail-taste>p, html:lang(ru) .taste-tag,
html:lang(ru) .taste-tag-group h4 { font-size: 13px; line-height: 1.6; }
html:lang(ru) .score-button { font-size: 16px; }
html:lang(ru) .history-action, html:lang(ru) .history-time, html:lang(ru) .history-entry-facts,
html:lang(ru) .history-score, html:lang(ru) .history-day-heading h2, html:lang(ru) .ratings-tools>p { font-size: 12px; line-height: 1.6; }
html:lang(ru) .empty-state p, html:lang(ru) .history-message p { font-size: 14px; line-height: 1.7; }
html:lang(ru) .processing-command-copy>p, html:lang(ru) .processing-jobs-header h2,
html:lang(ru) .processing-counter>span, html:lang(ru) .processing-current-card p,
html:lang(ru) .processing-progress-card p, html:lang(ru) .processing-session-facts,
html:lang(ru) .processing-retry-control p, html:lang(ru) .job-facts,
html:lang(ru) .job-missing, html:lang(ru) .job-field, html:lang(ru) .job-error,
html:lang(ru) .status-pill, html:lang(ru) .tagging-overview>p,
html:lang(ru) .tagging-counter span, html:lang(ru) .artwork-overview p,
html:lang(ru) .artwork-facts { font-size: 12px; line-height: 1.65; }
html:lang(ru) .section-label { font-size: 12px; line-height: 1.5; }
html:lang(ru) .page-footer { font-size: 11px; line-height: 1.6; color: #aaa6b5; }
html:lang(ru) .access-description, html:lang(ru) .access-card label { font-size: 15px; line-height: 1.65; }
html:lang(ru) .access-status, html:lang(ru) .access-profile-copy { font-size: 13px; line-height: 1.7; }
html:lang(ru) .access-intro h1 { letter-spacing: -.6px; line-height: 1.18; }
html:lang(ru) .access-card h2 { font-size: 26px; line-height: 1.3; letter-spacing: 0; }
html:lang(ru) .access-languages button { font-size: 13px; }
html:lang(ru) .access-footer { font-size: 12px; }
@media(min-width:1600px){html:lang(ru) .sidebar nav .nav-item{font-size:14px}.card-body .card-title,.rail-items .card-title,.ai-card .card-title{font-size:15px}}
@media(max-width:900px){html:lang(ru) .page-heading p{font-size:13px}html:lang(ru) .page-heading h1{line-height:1.25}html:lang(ru) .catalog-tools{flex-wrap:wrap}html:lang(ru) .catalog-tools .search-box{flex:1 1 100%}}
@media(max-width:640px){
  #detail-description{font-size:15px;line-height:1.8}
  #featured-description{font-size:14px;line-height:1.75}
  html:lang(ru) .topbar-search input{font-size:12px}
  html:lang(ru) .detail-extra-row{grid-template-columns:88px minmax(0,1fr)}
  html:lang(ru) .detail-actions .button{padding-left:12px;padding-right:12px}
  html:lang(ru) .rail-heading{flex-wrap:wrap}
  html:lang(ru) .rail-heading>div:first-child{min-width:0}
  html:lang(ru) .ai-section-heading{flex-wrap:wrap}
  html:lang(ru) .ai-section-heading>div:first-child{display:block;flex:1 1 100%}
  html:lang(ru) #category-directory .category-name,html:lang(ru) #category-modal-list .category-name{font-size:13px!important}
  html:lang(ru) .access-card h2{font-size:23px}
  html:lang(ru) .access-intro h1{font-size:35px}
  html:lang(ru) .access-footer{font-size:11px}
}

/* A single legible genre tile fits the phone content column beside the navigation. */
@media(max-width:440px){html:lang(ru) #category-directory{grid-template-columns:minmax(0,1fr)}html:lang(ru) #category-directory .category-tile{min-width:0}}

/* Larger, comfortably spaced tags inside title details, in both interface languages. */
#detail-modal .taste-tags,
#detail-modal .detail-categories { gap: 10px; }
#detail-modal .taste-tag,
#detail-modal .category-tag {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  padding: 9px 14px;
  border-radius: 6px;
  max-width: 100%;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
#detail-modal .taste-tag-group { min-width: 0; }
#detail-modal .taste-tag-group h4 { font-size: 14px; line-height: 1.6; margin-bottom: 12px; }
#detail-modal #detail-tags-toggle { font-size: 15px; line-height: 1.5; min-height: 48px; max-width: 100%; white-space: normal; padding: 11px 15px; }
@media(max-width:640px){
  #detail-modal .taste-tag,
  #detail-modal .category-tag { font-size: 15px; padding: 8px 12px; }
}

/* Preserve the catalog width while the detail dialog locks page scrolling. */
html { scrollbar-gutter: stable; }
