/* ===== Shared reset & header controls ===== */

:root {
  & {
    --jis-sans: 'Diantenjeom Sans JIS', 'Hiragino Sans', 'Hiragino Sans GB',
      'Hiragino Sans CNS', 'PingFang TC', 'PingFang SC',
      'Nanum Gothic', system-ui, sans-serif;
    --moe-sans: 'Diantenjeom Sans MOE', 'Diantenjeom Sans MOE Fullstop', 'Hiragino Sans', 'Hiragino Sans GB',
      'Hiragino Sans CNS', 'PingFang TC', 'PingFang SC',
      'Nanum Gothic', system-ui, sans-serif;
    --gb-sans: 'Diantenjeom Sans GB', 'Hiragino Sans', 'Hiragino Sans GB',
      'Hiragino Sans CNS', 'PingFang TC', 'PingFang SC',
      'Nanum Gothic', system-ui, sans-serif;
    --klr-sans: 'Diantenjeom Sans KLR', 'Hiragino Sans', 'Hiragino Sans GB',
      'Hiragino Sans CNS', 'PingFang TC', 'PingFang SC',
      'Nanum Gothic', system-ui, sans-serif;
    --jis-serif: 'Diantenjeom Serif JIS', 'Hiragino Mincho ProN',
      'Songti TC', 'Songti SC',
      'AppleMyungjo', 'Nanum Myeongjo', serif;
    --moe-serif: 'Diantenjeom Serif MOE', 'Diantenjeom Serif MOE Fullstop', 'Hiragino Mincho ProN',
      'Songti TC', 'Songti SC',
      'AppleMyungjo', 'Nanum Myeongjo', serif;
    --gb-serif: 'Diantenjeom Serif GB', 'Hiragino Mincho ProN',
      'Songti TC', 'Songti SC',
      'AppleMyungjo', 'Nanum Myeongjo', serif;
    --klr-serif: 'Diantenjeom Serif KLR', 'Hiragino Mincho ProN',
      'Songti TC', 'Songti SC',
      'AppleMyungjo', 'Nanum Myeongjo', serif;

    /* article.html uses --sans/--serif; default to MOE */
    --sans: var(--moe-sans);
    --serif: var(--moe-serif);

    box-sizing: border-box;
    margin: 0;
    padding-block-end: 20rem;
    font-size: 16px;
    text-spacing-trim: trim-start;
  }

  *,
  *::before,
  &::after {
    box-sizing: inherit;
  }
}

body > header {
  & {
    position: fixed;
    inset: 0 auto auto 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    padding: .5rem 1.5rem;
    min-block-size: 3rem;
    inline-size: 100%;
    line-height: 1;
    background-color: #f3f3f3;
    border-block-end: 1px solid #cccccc;
    z-index: 10;
    font-size: 13px;
  }

  fieldset {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: .75rem;
  }

  label {
    display: flex;
    align-items: center;
    gap: .5rem;
  }

  input {
    margin: 0;
  }

  strong {
    & {
      font-weight: 600;
      color: #555;
      margin-inline-end: .15rem;
    }

    &:not(:first-child) {
      margin-inline-start: 1.5rem;
    }
  }

}

/* Punctuation variant — flip --sans/--serif per radio selection.
   Used by article.html; index.html has per-variant columns instead. */
body:has(input[name="punct"][value="jis"]:checked) {
  --sans: var(--jis-sans);
  --serif: var(--jis-serif);
}

body:has(input[name="punct"][value="moe"]:checked) {
  --sans: var(--moe-sans);
  --serif: var(--moe-serif);
}

body:has(input[name="punct"][value="gb"]:checked) {
  --sans: var(--gb-sans);
  --serif: var(--gb-serif);
}

body:has(input[name="punct"][value="klr"]:checked) {
  --sans: var(--klr-sans);
  --serif: var(--klr-serif);
}


/* ===== index.html — punctuation chart ===== */

/* Shared side nav — used by both pages */
nav.page-nav,
.lang-toc {
  & {
    position: fixed;
    top: 3rem;
    left: 0;
    block-size: calc(100dvh - 3rem);
    writing-mode: horizontal-tb;
    display: flex;
    max-inline-size: 6rem;
    flex-direction: column;
    gap: .15em;
    padding: 1rem .75rem 1rem 1rem;
    font-size: 12px;
    z-index: 5;
    background-color: rgba(243, 243, 243, .6);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    border-inline-end: 1px solid rgba(0, 0, 0, .06);
  }

  a {
    & {
      color: #888;
      text-decoration: none;
      padding: .25em .75em;
      border-inline-start: 2px solid transparent;
      transition: color .15s, border-color .15s, font-weight .15s;
    }

    &:hover {
      color: #333;
    }

    &[aria-current="true"] {
      color: #000;
      border-inline-start-color: #000;
      font-weight: 600;
    }
  }

  hr {
    border: none;
    border-block-start: 1px solid rgba(0, 0, 0, .1);
    margin: .4em .75em;
    inline-size: auto;
  }
}


.page-chart {
  & {
    font-family: system-ui, sans-serif;
    font-weight: 300;
    padding-block-start: 4rem;
    padding-inline: 1.5rem 1.5rem;
    padding-inline-start: 7rem;
    line-height: 1.6;
    color: #222;
    background: #fafafa;
  }

  h1 {
    font-size: 1.3rem;
    font-weight: 500;
    margin: 1rem auto;
    max-width: 80rem;
  }

  table {
    border-collapse: collapse;
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
    font-size: .9rem;
  }

  th,
  td {
    border: 1px solid #ddd;
    padding: .4rem .6rem;
    vertical-align: top;
  }

  thead th {
    background: #f0f0f0;
    font-weight: 500;
    text-align: center;
  }

  tbody th {
    font-weight: 400;
    white-space: nowrap;
    text-align: left;
  }

  td.u {
    font-family: ui-monospace, monospace;
    font-size: .8rem;
    color: #666;
  }

  .d {
    vertical-align: baseline;
    background: rgba(0, 0, 0, .02);
    border: 1px solid rgba(0, 0, 0, .03);
    border-radius: 4px;
  }

  .sans,
  .serif {
    display: block;
  }

  .serif {
    margin-top: .15em;
  }

  .jis .sans .d {
    font-family: var(--jis-sans);
  }

  .jis .serif .d {
    font-family: var(--jis-serif);
  }

  .moe .sans .d {
    font-family: var(--moe-sans);
  }

  .moe .serif .d {
    font-family: var(--moe-serif);
  }

  .gb .sans .d {
    font-family: var(--gb-sans);
  }

  .gb .serif .d {
    font-family: var(--gb-serif);
  }

  .klr .sans .d {
    font-family: var(--klr-sans);
  }

  .klr .serif .d {
    font-family: var(--klr-serif);
  }

  .lbl {
    color: #999;
  }
  .lbl::after {
    content: ' ';
  }

  .note {
    font-size: .78rem;
    color: #888;
  }

}

.page-chart:has(input[name="vertical"]:checked) td.jis,
.page-chart:has(input[name="vertical"]:checked) td.moe,
.page-chart:has(input[name="vertical"]:checked) td.gb,
.page-chart:has(input[name="vertical"]:checked) td.klr {
  writing-mode: vertical-rl;
}


/* ===== article.html — multilingual article demo ===== */

html {
  overflow: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

html::-webkit-scrollbar {
  display: none;
}

.page-article {
  & {
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 4rem;
    padding-block: 5rem 1rem;
    padding-inline: 8rem;
    min-block-size: 100dvh;
  }

  article {
    & {
      flex: 0 0 auto;
      scroll-snap-align: center;
      scroll-snap-stop: always;
      padding: 1em .5em;
      columns: 3 auto;
      column-fill: balance;
      column-gap: 2em;
      /* --body-font, not --sans directly: `em` has to name the body face
         AFTER the mark font, and `font-family: 'X', inherit` is invalid —
         a CSS-wide keyword is only legal as the whole value, so that list
         would be dropped silently. One semantic var serves both. */
      font-family: var(--body-font, var(--sans));
      font-weight: 300;
      /* 2, not 1.75: 著重號畫在離基線 0.5em 的側欄裡，半行距要在行的兩側各蓋掉
         一次，門檻正好是 2 × (ascent + |descent|) / upem。低於此值，有著重號的
         那一行會比鄰行高——在三欄齊頭齊尾的版面上一眼就看得出來。
         見 docs/emphasis-marks.md §四。 */
      line-height: 2;
      text-align: justify;
    }

    h1 {
      & {
        display: flex;
        justify-content: center;
        flex-direction: column;
        column-span: all;
        font-size: 1.75em;
        font-weight: bolder;
        line-height: 1.5;
        block-size: 7rem;
      }

      .category {
        display: block;
        font-weight: 200;
        font-size: .875rem;
      }
    }

    :where(h1, h2, h3, h4, h5, h6, p) {
      margin: 0;
    }

    h2 {
      margin-block-start: 0.25rem;
      font-size: 1.125em;
      font-weight: bolder;
      line-height: 24px;
    }

    p {
      & {
        text-indent: 1em;
      }

      &:first-of-type {
        text-indent: 0;
      }
    }

    code {
      font-family: ui-monospace, monospace;
      font-size: .85em;
      background: rgba(0, 0, 0, .05);
      padding: 0 .3em;
      border-radius: 3px;
    }

    em {
      /* 標記字體排在**第一**，而且只掛在 em 上。瀏覽器挑標記字形時不做逐字回退，
         堆疊裡第一支沒有 U+25CF 就可能什麼都不畫；而 U+25CF 在 0.2.0 已經移出
         標點字體、獨立成 Diantenjeom Emphasis。不寫這一行，標記就是系統 fallback
         畫的——大小、離字距離各家不同，而且它的 hhea 會決定行高門檻。
         這支字體刻意不帶 unicode-range（帶了就永遠輪不到它被查詢），所以絕不能
         掛在 body 上，否則正文裡真的打出來的 ● • △ 也會被它接手。 */
      font-family: 'Diantenjeom Emphasis', var(--body-font, var(--sans));
      text-emphasis: filled circle;
      -webkit-text-emphasis: filled circle;
      /* 預設值三家不一樣：zh-Hant 下 Chromium 算 over、Firefox 與 Safari 算 under，
         後者才是教育部的橫式慣例。一個值兩種書寫方向都夠——over/under 只在橫排讀、
         right/left 只在直排讀。 */
      text-emphasis-position: under right;
      -webkit-text-emphasis-position: under right;
      font-style: inherit;
    }

    header:has(input[name="vertical"]:checked)~& {
      writing-mode: vertical-rl;
      block-size: 47rem;
      columns: auto 12em;
      column-fill: auto;
    }

    header:has(input[name="vertical"]:not(:checked))~& {
      inline-size: 52rem;
    }

    header:has(input[name="serif"]:checked)~& {
      --body-font: var(--serif);
    }
  }
}
/* landing intro under the h1 — what this page/project is, for first-time visitors */
.intro {
  max-width: 46em;
  line-height: 1.6;
  color: #444;
}