/*
 * Firefox のリーダービュー (Reader View) のライトテーマを再現したスタイル。
 *
 * 値の出典:
 *   toolkit/themes/shared/aboutReader.css
 *   toolkit/components/reader/AboutReader.sys.mjs  (--font-size = 10 + 2 * reader.font_size)
 * いずれも mozilla-central より。公式CSSのコピーではなく、about:reader の
 * ツールバー等を除いた記事表示部分だけを同じ値で書き直したもの。
 */

:root {
  /* light テーマの配色 */
  --main-background: #fff;
  --main-foreground: rgb(21, 20, 26);
  --link-foreground: rgb(0, 97, 224);
  --visited-link-foreground: #b5007f;

  /* 版面。リーダービューでユーザーが調整できる値のデフォルト */
  --body-padding: 64px;
  --font-size: 20px; /* reader.font_size の初期値 5 → 10 + 2 * 5 */
  --content-width: 22em;
  --line-height: 1.6em;
  --font-family: sans-serif;
}

/*
 * 本家は body(padding: 64px) の内側に .container(max-width: 22em; margin: 0 auto)
 * を置く二重構造。ラッパー要素のない素の HTML なので body に両方の役割を持たせる。
 * border-box + パディング込みの max-width にすることで、広い画面では内容幅が
 * ちょうど 22em になり、22em に満たない狭い画面では内容側が縮んではみ出さない。
 * 左右のパディングも狭い画面では詰める (本家は常に 64px)。
 */
body {
  box-sizing: border-box;
  margin-inline: auto;
  padding: var(--body-padding);
  max-width: calc(var(--content-width) + 2 * var(--body-padding));
  background-color: var(--main-background);
  color: var(--main-foreground);
  font-family: var(--font-family);
  font-size: var(--font-size);
  line-height: var(--line-height);
  text-align: start;
}

/* 22em + 左右 64px が収まらない画面では余白を詰める (本家は常に 64px) */
@media (max-width: 599px) {
  :root {
    --body-padding: 24px;
  }
}

/*
 * 段落と各ブロック要素の下マージン。
 * 本家は選択ハイライトのために margin: -10px -10px calc(8px + var(--line-height) * 0.4)
 * と padding: 10px を相殺させている。ここでは同じ実効間隔になる下マージンだけを書く
 * (10px + calc(8px + 0.4行) - 10px + 10px = calc(18px + 0.4行))。
 */
p,
code,
pre,
blockquote,
ul,
ol,
li,
figure {
  margin: 0 0 calc(18px + var(--line-height) * 0.4);
  padding: 0;
}

li {
  margin-bottom: 0;
}

li > ul,
li > ol {
  margin-bottom: 0;
}

/* 見出し。h1 のみ本家では記事タイトル (.header > h1) 相当の余白が付く */
h1,
h2,
h3 {
  font-weight: bold;
}

h1 {
  font-size: 1.6em;
  line-height: 1.25em;
  margin: 30px 0;
  padding: 0;
}

h2 {
  font-size: 1.2em;
  line-height: 1.51em;
}

h3 {
  font-size: 1em;
  line-height: 1.66em;
}

a:link {
  text-decoration: underline;
  font-weight: normal;
  color: var(--link-foreground);
}

a:visited {
  color: var(--visited-link-foreground);
}

img {
  max-width: 100%;
  height: auto;
}

figcaption,
.caption {
  font-size: 0.9em;
  line-height: 1.48em;
  font-style: italic;
}

blockquote {
  border-inline-start: 2px solid var(--main-foreground);
  padding-inline-start: 16px;
}

ul,
ol {
  padding-inline-start: 30px;
}

ul {
  list-style: disc;
}

pre {
  font-family: monospace;
  white-space: pre-wrap;
}

pre code {
  background-color: var(--main-background);
  border: 1px solid var(--main-foreground);
  display: block;
  overflow: auto;
}

table,
th,
td {
  border: 1px solid currentColor;
  border-collapse: collapse;
  padding: 6px;
  vertical-align: top;
}

table {
  margin: 5px;
}

/* 本家は hr にスタイルを当てておらずブラウザ既定の立体枠線のまま。
   ここだけは版面に馴染むよう控えめな一本線にしている。 */
hr {
  border: 0;
  border-top: 1px solid var(--main-foreground);
  opacity: 0.2;
  margin: calc(18px + var(--line-height) * 0.4) 0;
}