/* # ユニットのHTML出力のスタイル */

/*
 * `shared/socculus-html5.xsl`が出力するマークアップに対するスタイルを定める．
 * LaTeXMLによる`LaTeXML.css`と`ltx-article.css`のあとに読み込まれ，それらを上書きする．
 *
 * `site/assets/css/main.css`に対応する設定があるものは，それに合わせる．
 *
 * TODO: `site/assets/css/main.css`と統合して一つのCSSファイルを共有する．
 */

/* ## デザイントークン */

/* `site/assets/css/main.css`から必要な分を写したもの */

:root {
  color-scheme: light;

  /* ### 色 */

  --color-bg: oklch(95.57% 0.003 286.35);             /* `--uchu-gray-1` */
  --color-surface: oklch(99.4% 0 0);                  /* `--uchu-yang` */
  --color-text: oklch(25.11% 0.006 258.36);           /* `--uchu-yin-9` */
  --color-text-muted: oklch(43.87% 0.005 271.3);      /* `--uchu-yin-7` */
  --color-border: oklch(88.28% 0.003 286.34);         /* `--uchu-gray-3` */
  --color-border-strong: oklch(69.01% 0.003 286.32);  /* `--uchu-gray-7` */
  --color-accent: oklch(43.48% 0.17 260.2);           /* `--uchu-blue-8` */

  /* ### 書体 */

  --font-base: "Noto Sans", "Noto Sans JP", sans-serif;
  --font-mono: "Noto Sans Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-display: "Montserrat", sans-serif;
  --font-math: "STIX Two Math", "Latin Modern Math", "Cambria Math", math;

  /* ### 文字サイズ */

  --text-sm: 0.8125rem;
  --text-base: 1rem;
  --text-md: 1.1875rem;
  --text-lg: 1.4375rem;
  --text-xl: 1.75rem;

  /* ### 字間 */

  --tracking-base: 0.02em;
  --tracking-display: 0.12em;

  /* ### 行送り */

  --leading-ui: 1.7;
  --leading-prose: 1.9;    /* 文書中（広めに取る） */
  --leading-heading: 1.4;  /* 見出し */
  --leading-list: 1.7;     /* リスト */

  /* ### ウェイト */

  --weight-display: 500;
  --weight-strong: 700;

  /* ### 寸法 */

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;

  /* 本文の縦のリズムを作る余白は，`rem`ではなく`em`で指定し，適用先の要素の文字サイズに比例させる． */
  --space-para: 1.5em;            /* 段落と段落の間 */
  --space-heading-before: 2.3em;  /* 見出しの前 */
  --space-heading-after: 0.5em;   /* 見出し（subsection見出しを除く）の後 */

  --measure: 52rem;     /* 本文の最大幅 */
  --radius: 0.25rem;
  --icon-size: 1.5rem;
}

/* ## フォント */

/*
 * ローカルに STIX Two Math がない場合，BookMLでは数式フォントが読み込まれなかったが，ここでは Google Fonts から読み込むようにする．
 *
 * ```css:style.gitbook,plain.css
 * @font-face{font-family:'STIX Two Math';src:local("STIX Two Math")}
 * ```
 */
@font-face {
  font-family: 'STIX Two Math';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('STIX Two Math'),
       url(https://fonts.gstatic.com/s/stixtwomath/v12/pONg1hwwL_6M9EkZySr_yteUi18.woff2) format('woff2');
}

/* ## 設定 */

/* ### 全体 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-base);
  line-height: var(--leading-ui);
  letter-spacing: var(--tracking-base);
  text-autospace: normal;
}

a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.container {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--space-sm);
}

/* ### header */

.site-header {
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-md);
}

.site-header__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
}

.site-header__link {
  color: inherit;
  text-decoration: none;
  transition: color 150ms ease;
}

.site-header__link:hover {
  color: var(--color-accent);
}

.site-nav {
  display: flex;
  gap: var(--space-md);
}

.site-nav__link {
  display: flex;
  padding: var(--space-xs);
  margin: calc(-1 * var(--space-xs));
  border-radius: var(--radius);
  color: var(--color-text-muted);
  transition: color 150ms ease;
}

.site-nav__link:hover {
  color: var(--color-accent);
}

.icon {
  display: block;
  width: var(--icon-size);
  height: var(--icon-size);
}

/* ### main全体のレイアウト */

.page {
  padding-block: var(--space-lg);
}

.page > :first-child {
  margin-block-start: 0;
}

.page > :last-child {
  margin-block-end: 0;
}

/* ### main上部（ページ見出しなど） */

.unit-meta {
  margin-block: 0 var(--space-xs);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.unit-meta__link {
  color: inherit;
  text-decoration: none;
}

.unit-meta__link:hover {
  color: var(--color-accent);
}

.unit-meta__label {
  margin-inline-end: 0.125em;
}

.unit-meta__at {
  margin-inline: 0.125em;
}

.page-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
}

/* アイコンの指定は，headerの`.site-nav__link`と揃える． */
.pdf-link {
  flex: none;  /* 見出しが長いときに，アイコンが縮まないようにする． */
  display: flex;
  padding: var(--space-xs);
  margin: calc(-1 * var(--space-xs));
  border-radius: var(--radius);
  color: var(--color-text-muted);
  transition: color 150ms ease;
}

.pdf-link:hover {
  color: var(--color-accent);
}

.page-title {
  margin-block: 0 var(--space-md);
  font-size: var(--text-xl);
  font-weight: var(--weight-strong);
  line-height: var(--leading-heading);
}

/* ### main下部（ページャ） */

.unit-pager {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-block-start: var(--space-md);
  font-size: var(--text-sm);
}

@media (width <= 36rem) {
  .unit-pager {
    padding-inline: var(--space-sm);
  }
}

.unit-pager__link {
  display: flex;
  align-items: center;
  gap: 0.25em;
  max-width: 45%;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 150ms ease;
}

.unit-pager__link:hover {
  color: var(--color-accent);
}

.unit-pager__link--next {
  margin-inline-start: auto;
  text-align: end;
}

.unit-pager__icon {
  flex: none;
  display: block;
  width: 1.5em;
  height: 1.5em;
}

/* ### 文書記述領域 */

.prose {
  padding: var(--space-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  line-height: var(--leading-prose);
}

@media (width <= 36rem) {
  .prose {
    margin-inline: calc(-1 * var(--space-sm));
    padding: var(--space-md);
    border-inline: 0;
    border-radius: 0;
  }
}

.prose > :first-child {
  margin-block-start: 0;
}

.prose > :last-child {
  margin-block-end: 0;
}

.prose a {
  color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.prose :is(h1, h2, h3, h4, h5, h6) {
  line-height: var(--leading-heading);
  font-weight: var(--weight-strong);
}

/*
 * LaTeXMLは，段落を`<div class="ltx_para">`として出力する．
 * （その中に`<p class="ltx_p">`や別行立て数式が並列される．）
 */
.prose .ltx_para + .ltx_para {
  margin-block-start: var(--space-para);
}

/*
 * 段落冒頭の字下げを行わない．
 * `ltx-article.css`の設定を，詳細度が上回るようにして上書きする．
 *
 * ```css:ltx-article.css
 * .ltx_para > .ltx_p:first-child,
 * section.ltx_pruned_first > .ltx_title + .ltx_para > .ltx_p,
 * section.ltx_indent_first > .ltx_title + .ltx_para > .ltx_p { text-indent:2em; }
 * ```
 */
.prose .ltx_p,
.prose .ltx_para > .ltx_p:first-child {
  text-indent: 0;
}

/*
 * リスト（`.prose ul`, `.prose ol`, `.prose :is(ul, ol) :is(ul, ol)`に合わせる）
 *
 * ```css:ltx-article.css
 * .ltx_itemize,
 * .ltx_enumerate { margin-left:1em; }
 * ```
 */
.prose :is(.ltx_itemize, .ltx_enumerate, .ltx_description) {
  margin-block: var(--space-md);
  margin-inline-start: 0;  /* `ltx-article.css`の設定を上書き */
  padding-inline-start: var(--space-md);
  line-height: var(--leading-list);
}

.prose :is(.ltx_itemize, .ltx_enumerate) :is(.ltx_itemize, .ltx_enumerate) {
  margin-block: var(--space-xs);
}

.prose .ltx_item + .ltx_item {
  margin-block-start: var(--space-xs);
}

.prose .ltx_item::marker {
  color: var(--color-text-muted);
}

.prose .ltx_font_bold {
  font-weight: var(--weight-strong);
}

/*
 * subsectionなどの見出し（`.prose h2`に合わせる） 
 *
 * ```css:ltx-article.css
 * .ltx_title_abstract      { text-align:center; font-size: 100%; font-weight:bold; }
 * ```
 */
.ltx_title_subsection,
.ltx_title_abstract,
.ltx_title_contents {
  margin-block: var(--space-heading-before) var(--space-sm);
  padding-block-end: 0.3em;
  border-block-end: 1px solid var(--color-border);
  font-size: var(--text-lg);
  text-align: start;  /* `ltx-article.css`の設定を上書き */
}

/*
 * abstractの左右マージンをなくす．
 *
 * ```css:ltx-article.css
 * .ltx_abstract {
 * margin-left:clamp(1em, 6%, 4em);
 * margin-right:clamp(1em, 6%, 4em); }
 * ```
 */
.prose .ltx_abstract {
  margin-inline: 0;
}

.prose .ltx_subsection:first-child > .ltx_title_subsection,
.prose .ltx_abstract:first-child > .ltx_title_abstract {
  margin-block-start: 0;
}

/* subsubsectionの見出し（`.prose h3`に合わせる） */
.ltx_title_subsubsection {
  margin-block: var(--space-heading-before) var(--space-heading-after);
  font-size: var(--text-md);
}

/*
 * 上記のとおり，垂直方向のスペースは，`.ltx_title_subsection`や`.ltx_para + .ltx_para`などの`margin`によって与える．
 * 一方で，`ltx-article.css`は，sectionなどの区分（`.ltx_subsection`）に対して`margin`を設定している．
 * スペースが重複しないように，`ltx-article.css`の設定を上書きする．
 *
 * ```css:ltx-article.css
 * .ltx_appendix,
 * .ltx_part,
 * .ltx_section,
 * .ltx_subsection,
 * .ltx_subsubsection { margin-top:1.5em; }
 * .ltx_paragraph,
 * .ltx_subparagraph   { margin-top:1.0em; }
 * ```
 */
.prose :is(.ltx_part, .ltx_section, .ltx_subsection, .ltx_subsubsection,
           .ltx_paragraph, .ltx_subparagraph, .ltx_appendix) {
  margin-block-start: 0;
}

/* ### 見出しにおける番号・タイトル間のスペース */

/*
 * LaTeXMLは，番号・タイトル間に半角スペース一つを置く．
 * 番号部分（`.ltx_tag_section`など）を`inline-block`にすると，`<span>`の中身が独立した行ボックスを作り，その行末となった半角スペースが取り除かれるため，スペースは`margin`の値だけになる．
 *
 * `inline-block`の副作用として，目次のリンクにおいて，番号とスペースの部分には下線が引かれない．
 */
.ltx_tag_section,
.ltx_tag_subsection,
.ltx_tag_subsubsection,
.ltx_tag_ref {
  display: inline-block;
  margin-inline-end: 0.5em;
}

/* ### 定理などの見出し直後のスペース */

/*
 * ```css:LaTeXML.css
 * .ltx_runin { display: inline; }
 * .ltx_runin::after { content: " "; }
 * ```
 */
.ltx_runin::after {
  content: "";
  margin-right: 0.5em;
}

/* ### 数式 */

math {
  font-family: var(--font-math);
  font-size: 1.05em;
}

/*
 * インライン数式の両側にマージンをとる．
 * CSSでは隣接する文字が和文か欧文かを判別できないため，常に両側にスペースが入ることになるが，いったん妥協する．
 */
math:not([display="block"]) {
  margin-inline: 0.125em;
}

/* ### はみ出す内容 */

/*
 * 幅の広い表・図・数式が，面からはみ出さないようにする．
 *
 * TODO: 本来は，はみ出しうる要素を個別に横スクロールさせるべきである
 * （BookMLは，XSLTで`.bml-overflow-wrapper`という包みを与えていた）．
 * ここでは暫定的に，面そのものを横スクロールさせる．
 */
.prose {
  overflow-x: auto;
}

.ltx_picture,
.ltx_graphics {
  max-width: 100%;
}