/* Shared font stacks follow each language's homepage. Manuals keep their own fonts. */
html[lang="ja"]:not([data-site-page="manual"]) body {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans JP",
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic,
    Meiryo, sans-serif;
}

html[lang="en"]:not([data-site-page="manual"]) body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* The original page styles remain the dark theme. */
:root { color-scheme: dark light; }

/* Accuracy labels share compact markers across both R18 products and languages. */
[data-product="automosaic-r18"],
[data-product="automosaic-video-r18"] {
  --benchmark-marker-blue: rgba(86, 180, 233, .43);
  --benchmark-marker-amber: rgba(230, 159, 0, .53);
  --benchmark-marker-purple: rgba(204, 121, 167, .38);
}
[data-product="automosaic-r18"] .benchmark-stat .benchmark-label,
[data-product="automosaic-video-r18"] .video-stat .video-stat-label {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  padding: .12rem .4rem;
  border-radius: .2rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--benchmark-marker-bg);
}
/* Preserve label text width and alignment while separating adjacent markers. */
[data-product="automosaic-r18"] .benchmark-stat .benchmark-label {
  max-width: calc(100% + .4rem);
  margin-inline: -.2rem;
  padding-inline: .2rem;
}
[data-product="automosaic-r18"] .benchmark-stat.is-success,
[data-product="automosaic-video-r18"] .video-stat.stat-ok {
  --benchmark-marker-bg: var(--benchmark-marker-blue);
}
[data-product="automosaic-r18"] .benchmark-stat.is-warning,
[data-product="automosaic-video-r18"] .video-stat.stat-missed {
  --benchmark-marker-bg: var(--benchmark-marker-amber);
}
[data-product="automosaic-r18"] .benchmark-stat.is-danger,
[data-product="automosaic-video-r18"] .video-stat.stat-extra {
  --benchmark-marker-bg: var(--benchmark-marker-purple);
}

/* Keep percentages prominent and counts alongside them when space allows. */
:is([data-product="automosaic-r18"], [data-product="automosaic-video-r18"]) :is(.benchmark-value, .video-stat-value) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  min-width: 0;
  gap: .1rem .35rem;
  margin-top: .2rem;
  padding-top: 0;
  line-height: 1.4;
  white-space: normal;
}
:is([data-product="automosaic-r18"], [data-product="automosaic-video-r18"]) .benchmark-percent {
  font-size: 1.4rem;
  font-weight: 750;
  line-height: 1.2;
  color: var(--text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
:is([data-product="automosaic-r18"], [data-product="automosaic-video-r18"]) .benchmark-percent-unit {
  font-size: .65em;
  font-weight: 650;
}
:is([data-product="automosaic-r18"], [data-product="automosaic-video-r18"]) .benchmark-count {
  font-size: .75rem;
  font-weight: 400;
  color: var(--muted);
  max-width: 100%;
  overflow-wrap: anywhere;
}
:is([data-product="automosaic-r18"], [data-product="automosaic-video-r18"]) .benchmark-note {
  margin-top: .75rem;
  font-size: .75rem;
  line-height: 1.6;
  color: var(--muted);
}
/* Modest cell padding leaves room for the percentage and count on one line. */
[data-product="automosaic-r18"] .benchmark-stat {
  padding: .45rem .35rem;
}
@media (max-width: 520px) {
  :is([data-product="automosaic-r18"], [data-product="automosaic-video-r18"]) .benchmark-percent {
    font-size: 1.25rem;
  }
}
/* Share label-row height so percentages line up even when a label wraps. */
@supports (grid-template-rows: subgrid) {
  [data-product="automosaic-r18"] .benchmark-stat {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
  }
  [data-product="automosaic-r18"] .benchmark-stat .benchmark-label {
    align-self: start;
  }
  [data-product="automosaic-r18"] .benchmark-value { align-self: start; }
  @media (min-width: 561px) {
    [data-product="automosaic-video-r18"] .video-stat {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 2;
    }
    [data-product="automosaic-video-r18"] .video-stat-label { align-self: start; }
    [data-product="automosaic-video-r18"] .video-stat-value { align-self: start; }
  }
}

/* Language and appearance controls share the upper-right utility row. */
.site-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
  margin-left: auto;
}
.site-controls .lang-switch {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: .5rem;
  width: auto;
  margin: 0;
}
.site-controls .small { white-space: nowrap; }
.site-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text, var(--text-primary));
  cursor: pointer;
}
.site-theme-toggle:hover {
  background: var(--card2, var(--bg-card));
  border-color: var(--accent);
}
.site-theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.site-theme-toggle[hidden] { display: none; }
.site-theme-toggle svg { width: 20px; height: 20px; }
/* The icon represents the current appearance; the label also explains the action. */
.site-theme-toggle .site-theme-sun,
[data-site-theme="light"] .site-theme-toggle .site-theme-moon { display: none; }
[data-site-theme="light"] .site-theme-toggle .site-theme-sun { display: block; }
[data-site-page="home"] header,
[data-site-page="legal"] header { padding-top: 1.25rem; }
[data-site-page="home"] header > .site-controls {
  max-width: 1152px;
  margin: 0 auto 1.5rem;
}
[data-site-page="legal"] header > .site-controls {
  max-width: 980px;
  margin: 0 auto 1.5rem;
}
[data-site-page="guide"] .top-nav { justify-content: space-between; flex-wrap: wrap; }
[data-site-page="guide"] .top-nav > .nav-links {
  justify-content: flex-start;
  width: auto;
}
@media (max-width: 640px) {
  [data-site-page="home"] header > .site-controls,
  [data-site-page="legal"] header > .site-controls { margin-bottom: 1rem; }
  .site-controls { gap: .5rem; }
}

/* Shared text roles across home, product, legal, and manual pages.
   Keep page-specific backgrounds, borders, and accent colors unchanged. */
:root[data-site-page][lang] {
  --site-text: #f1f5f9;
  --site-text-secondary: #cbd5e1;
  --text: var(--site-text);
  --text-primary: var(--site-text);
  --ink: var(--site-text);
  --text-color: var(--site-text);
  --text-secondary: var(--site-text-secondary);
  --text-muted: var(--site-text-secondary);
  --muted-color: var(--site-text-secondary);
}
/* Match the existing no-script theme fallback before manual theme selection. */
@media (prefers-color-scheme: light) {
  :root[data-site-page][lang]:not([data-site-theme="dark"]) {
    --site-text: #252b33;
    --site-text-secondary: #475569;
  }
}
:root[data-site-page][lang][data-site-theme="light"],
:root[data-site-page="home"][lang]:not([data-site-theme]) {
  --site-text: #252b33;
  --site-text-secondary: #475569;
}
/* Home also uses --muted for hover borders, so map its text separately. */
:root[data-site-page][lang]:not([data-site-page="home"]) {
  --muted: var(--site-text-secondary);
  --muted2: var(--site-text-secondary);
}

/* Descriptions, feature lists, and FAQ answers are primary reading content. */
[data-site-page="product"] :is(
  .hero p, .heroTitle .subtitle, ul, .trial-list, .faq dd,
  .companion-description, .review-excerpts li
) {
  color: var(--site-text);
}
[data-site-page="legal"] :is(p, ul) {
  color: var(--site-text);
}
[data-site-page="home"] :is(
  .hero-copy, .product-copy, .product-label, .feature-line,
  .edition-name small, .purpose small, .group-heading p,
  .intro-foot, .workflow p, .footer-top p
) {
  color: var(--site-text);
}
[data-site-page="home"] :is(
  .family-note, .product-note, .workflow-app small,
  .news time, .footer-bottom, .family-price small
) {
  color: var(--site-text-secondary);
}
[data-site-page="manual"] :is(h1, strong, .doc-version) {
  color: var(--site-text);
}