/*
GENAI-RON structured publishing component styles
ページ作成日時：2026-07-23 10:28 JST
最終更新日時：2026-07-23 13:26 JST

Deployed mirror for pages that reference /publishing/design/components.css.
Source counterpart: publishing/design/components.css
*/

.reading-preferences {
  border-bottom: 1px solid var(--theme-line, var(--gr-color-line));
  background: color-mix(
    in srgb,
    var(--theme-bg, var(--gr-color-paper)) 96%,
    transparent
  );
  color: var(--theme-muted, var(--gr-color-muted));
  font-family: var(--gr-font-ui);
}

.reading-preferences-inner {
  width: min(1120px, calc(100% - 32px));
  min-height: 48px;
  margin: 0 auto;
  padding: 6px 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.reading-preferences-label {
  flex: 0 0 auto;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.reading-preferences-slot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.reading-preferences .appearance-switcher,
.reading-preferences .article-text-size-control {
  position: static;
  inset: auto;
  z-index: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  margin: 0;
  padding: 3px 6px;
  border: 1px solid color-mix(in srgb, var(--theme-line, var(--gr-color-line)) 76%, transparent);
  border-radius: 999px;
  background: color-mix(
    in srgb,
    var(--theme-card, var(--gr-color-card)) 72%,
    transparent
  );
  box-shadow: none;
}

.reading-preferences .appearance-switcher::before {
  content: "モード";
  flex: 0 0 auto;
  color: var(--theme-muted, var(--gr-color-muted));
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
}

.reading-preferences .article-text-size-label {
  flex: 0 0 auto;
  color: var(--theme-muted, var(--gr-color-muted));
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
}

.reading-preferences .article-text-size-options {
  display: flex;
  align-items: center;
  gap: 4px;
}

.reading-preferences .appearance-switcher button,
.reading-preferences .article-text-size-button {
  appearance: none;
  min-height: 28px;
  margin: 0;
  padding: 4px 8px;
  border: 1px solid var(--theme-line, var(--gr-color-line));
  border-radius: 999px;
  background: transparent;
  color: var(--theme-muted, var(--gr-color-muted));
  font: 500 11px/1 var(--gr-font-ui);
  letter-spacing: 0.02em;
  cursor: pointer;
}

.reading-preferences .appearance-switcher button:hover,
.reading-preferences .article-text-size-button:hover {
  border-color: var(--theme-accent, var(--gr-color-accent));
  color: var(--theme-accent, var(--gr-color-accent));
}

.reading-preferences .appearance-switcher button[aria-pressed="true"],
.reading-preferences .article-text-size-button[aria-pressed="true"] {
  border-color: var(--theme-accent, var(--gr-color-accent));
  background: var(--theme-accent, var(--gr-color-accent));
  color: var(--theme-button-text, #fffdf8);
}

html[data-reading-size] body.series-page-compact .series-main > article.note-box,
html[data-article-text-size] body.series-page-compact .series-main > article.note-box {
  font-size: var(--gr-reading-size) !important;
  line-height: var(--gr-reading-line-height) !important;
}

html[data-reading-size] body.series-page-compact .series-main > article.note-box p,
html[data-reading-size] body.series-page-compact .series-main > article.note-box li,
html[data-article-text-size] body.series-page-compact .series-main > article.note-box p,
html[data-article-text-size] body.series-page-compact .series-main > article.note-box li {
  font-size: var(--gr-reading-size) !important;
  line-height: var(--gr-reading-line-height) !important;
}

html[data-appearance] body.series-page-compact .series-main > article.note-box table {
  border-color: var(--theme-line, var(--gr-color-line)) !important;
  background: var(--theme-card, var(--gr-color-card)) !important;
  color: var(--theme-text, var(--gr-color-ink)) !important;
}

html[data-appearance] body.series-page-compact .series-main > article.note-box th,
html[data-appearance] body.series-page-compact .series-main > article.note-box td {
  border-color: var(--theme-line, var(--gr-color-line)) !important;
  color: var(--theme-text, var(--gr-color-ink)) !important;
}

html[data-appearance] body.series-page-compact .series-main > article.note-box th {
  background: color-mix(
    in srgb,
    var(--theme-soft, var(--gr-color-paper-secondary)) 78%,
    var(--theme-card, var(--gr-color-card)) 22%
  ) !important;
}

html[data-appearance] body.series-page-compact .series-main > article.note-box td {
  background: color-mix(
    in srgb,
    var(--theme-card, var(--gr-color-card)) 92%,
    var(--theme-bg, var(--gr-color-paper)) 8%
  ) !important;
}

html[data-appearance] body.series-page-compact .series-main > article.note-box tr:nth-child(even) td {
  background: color-mix(
    in srgb,
    var(--theme-card, var(--gr-color-card)) 84%,
    var(--theme-soft, var(--gr-color-paper-secondary)) 16%
  ) !important;
}

html[data-appearance] body.series-page-compact .series-main > article.note-box blockquote,
html[data-appearance] body.series-page-compact .series-main > article.note-box .annotation-accordion,
html[data-appearance] body.series-page-compact .series-main > article.note-box .notion-toggle {
  border-color: var(--theme-line, var(--gr-color-line)) !important;
  background: var(--theme-soft, var(--gr-color-paper-secondary)) !important;
  color: var(--theme-text, var(--gr-color-ink)) !important;
}

html[data-appearance] body.series-page-compact .series-main > article.note-box blockquote *,
html[data-appearance] body.series-page-compact .series-main > article.note-box .annotation-accordion *,
html[data-appearance] body.series-page-compact .series-main > article.note-box .notion-toggle * {
  color: inherit !important;
}

html[data-appearance="reading"] body.series-page-compact .series-main > article.note-box pre,
html[data-appearance="reading"] body.series-page-compact .series-main > article.note-box .code-block {
  border: 1px solid color-mix(in srgb, var(--theme-line) 76%, transparent) !important;
  border-radius: 10px !important;
  background: color-mix(
    in srgb,
    var(--theme-card, #1d211e) 82%,
    var(--theme-bg, #111412) 18%
  ) !important;
  color: var(--theme-text, #f0eee7) !important;
  box-shadow: none !important;
}

html[data-appearance="reading"] body.series-page-compact .series-main > article.note-box pre code,
html[data-appearance="reading"] body.series-page-compact .series-main > article.note-box .code-block code {
  background: transparent !important;
  color: inherit !important;
}

html[data-appearance="reading"] body.series-page-compact .series-main > article.note-box :not(pre) > code {
  border: 1px solid color-mix(in srgb, var(--theme-line) 70%, transparent) !important;
  background: color-mix(
    in srgb,
    var(--theme-card, #1d211e) 86%,
    var(--theme-bg, #111412) 14%
  ) !important;
  color: color-mix(
    in srgb,
    var(--theme-accent, #79b59a) 70%,
    var(--theme-text, #f0eee7) 30%
  ) !important;
}

html[data-appearance="reading"] body.series-page-compact .series-main > article.note-box table {
  background: color-mix(
    in srgb,
    var(--theme-card, #1d211e) 80%,
    var(--theme-bg, #111412) 20%
  ) !important;
}

html[data-appearance="reading"] body.series-page-compact .series-main > article.note-box th {
  background: color-mix(
    in srgb,
    var(--theme-card, #1d211e) 70%,
    var(--theme-soft, #242820) 30%
  ) !important;
}

html[data-appearance="reading"] body.series-page-compact .series-main > article.note-box td {
  background: color-mix(
    in srgb,
    var(--theme-card, #1d211e) 86%,
    var(--theme-bg, #111412) 14%
  ) !important;
}

html[data-appearance="reading"] body.series-page-compact .series-main > article.note-box tr:nth-child(even) td {
  background: color-mix(
    in srgb,
    var(--theme-card, #1d211e) 78%,
    var(--theme-soft, #242820) 22%
  ) !important;
}

html[data-appearance="reading"] body.series-page-compact .series-main > article.note-box blockquote,
html[data-appearance="reading"] body.series-page-compact .series-main > article.note-box .annotation-accordion,
html[data-appearance="reading"] body.series-page-compact .series-main > article.note-box .notion-toggle {
  border-color: color-mix(in srgb, var(--theme-accent, #79b59a) 42%, var(--theme-line, rgba(214,205,188,.26)) 58%) !important;
  background: color-mix(
    in srgb,
    var(--theme-soft, #242820) 66%,
    var(--theme-bg, #111412) 34%
  ) !important;
  color: var(--theme-text, #f0eee7) !important;
}

@media (max-width: 640px) {
  .reading-preferences-inner {
    min-height: 0;
    align-items: flex-start;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .reading-preferences-slot {
    justify-content: flex-start;
    flex-wrap: nowrap;
    flex: 0 0 auto;
  }

  .reading-preferences .appearance-switcher,
  .reading-preferences .article-text-size-control {
    flex: 0 0 auto;
  }
}


/* AI dialogue intro presentation repair
   ページ作成日時：2026-07-24 12:09 JST
   最終更新日時：2026-07-24 12:09 JST
*/
html[data-series="ai-dialogue-intro"] body.series-page {
  font-family: var(--gr-font-body, "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif) !important;
}

html[data-series="ai-dialogue-intro"] .series-hero h1,
html[data-series="ai-dialogue-intro"] .series-subtitle,
html[data-series="ai-dialogue-intro"] .series-main > article.note-box,
html[data-series="ai-dialogue-intro"] .series-main > article.note-box h2,
html[data-series="ai-dialogue-intro"] .series-main > article.note-box p,
html[data-series="ai-dialogue-intro"] .series-main > article.note-box li {
  font-family: var(--gr-font-body, "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif) !important;
}

html[data-series="ai-dialogue-intro"] .series-hero h1 {
  font-weight: 600;
  letter-spacing: -0.025em;
}

html[data-series="ai-dialogue-intro"] .series-main > article.note-box {
  max-width: 44rem;
  margin-inline: auto;
}

html[data-series="ai-dialogue-intro"] .series-header,
html[data-series="ai-dialogue-intro"] .series-nav,
html[data-series="ai-dialogue-intro"] .reading-preferences,
html[data-series="ai-dialogue-intro"] .article-link {
  font-family: var(--gr-font-ui, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
}

html[data-series="ai-dialogue-intro"][data-appearance="reading"] {
  --theme-bg: #0f1412;
  --theme-surface: #151a17;
  --theme-card: #151a17;
  --theme-card-soft: #151a17;
  --theme-text: #f6f1e8;
  --theme-muted: #d8cebf;
  --theme-subtle: #b4aa9d;
  --theme-line: rgba(226, 214, 196, .28);
  --theme-soft: #202721;
  --theme-link: #a9d7bf;
}

html[data-series="ai-dialogue-intro"][data-appearance="reading"] body.series-page,
html[data-series="ai-dialogue-intro"][data-appearance="reading"] .series-main,
html[data-series="ai-dialogue-intro"][data-appearance="reading"] .series-hero h1,
html[data-series="ai-dialogue-intro"][data-appearance="reading"] .series-main > article.note-box,
html[data-series="ai-dialogue-intro"][data-appearance="reading"] .series-main > article.note-box h2,
html[data-series="ai-dialogue-intro"][data-appearance="reading"] .series-main > article.note-box p,
html[data-series="ai-dialogue-intro"][data-appearance="reading"] .series-main > article.note-box li {
  color: var(--theme-text) !important;
}

html[data-series="ai-dialogue-intro"][data-appearance="reading"] .series-subtitle,
html[data-series="ai-dialogue-intro"][data-appearance="reading"] .series-kicker {
  color: var(--theme-muted) !important;
}


/* AI dialogue intro navigation typography
   ページ作成日時：2026-07-24 12:29 JST
   最終更新日時：2026-07-24 12:29 JST
*/
html[data-series="ai-dialogue-intro"] .series-header .series-nav,
html[data-series="ai-dialogue-intro"] .series-header .series-nav a,
html[data-series="ai-dialogue-intro"] article.note-box nav.article-link,
html[data-series="ai-dialogue-intro"] article.note-box nav.article-link a {
  font-family: var(--gr-font-body, "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif) !important;
  font-weight: 400;
  letter-spacing: 0.03em;
}

html[data-series="ai-dialogue-intro"] .reading-preferences,
html[data-series="ai-dialogue-intro"] .reading-preferences *,
html[data-series="ai-dialogue-intro"] .appearance-switcher,
html[data-series="ai-dialogue-intro"] .appearance-switcher *,
html[data-series="ai-dialogue-intro"] .article-text-size-control,
html[data-series="ai-dialogue-intro"] .article-text-size-control * {
  font-family: var(--gr-font-ui, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
}