/* 解説記事のページ（記事 articles/<カテゴリ>/<記事>/ と、一覧 articles/・articles/<カテゴリ>/）の CSS。
   Lism CSS（public/css/lism.css）の上に、テンプレート blog-astro-techlog の形（ヘッダー・パンくず・一覧・記事ページ）を組む。
   読む順は app.css → lism.css → この CSS（Lism の外枠を使うページで読む）。

   app.css はレイヤーの外にあるので、Lism の層（lism-base など）の指定には app.css が勝つ。
   後半の「記事の外を元に保つ」指定は、Lism の reset と base が、Lism で組んだ所（.c--lismRoot・.c--articleRoot）の外
   （いつもの形のヘッダーとパンくず・フッター・フッターの前の広告・サイトのモーダル）へ効かないようにするためのもの。 */

/* === トークン（テンプレートの global.css と同じ置き方。色はサイトに合わせる） === */
@layer lism-base {
  :root {
    --brand: #1955c0;              /* app.css の --accent と同じ色 */
    --link: #1955c0;
    --base: #f5f5f5;               /* app.css の --bg（記事を置く地の色） */
    --base-2: #e9eaec;
    --sz--toc: 240px;
    --sz--l: calc(var(--sz--m) + var(--sz--toc) + var(--s40));
    /* app.css の --shadow は box-shadow の一式で、Lism の影の色（--shc）に入れると影が消える。色だけを渡す */
    --shc: rgba(10, 10, 10, 0.08);
  }

  a {
    text-decoration-thickness: 1.5px;
    text-decoration-color: var(--link);
    text-underline-offset: 0.2em;
  }
  a:where(:hover, :focus-visible) {
    text-decoration-thickness: 3px;
    text-decoration-skip-ink: none;
  }

}

@layer lism-custom {
  /* === 本文（テンプレートの .c--content と同じ） === */
  .c--content {
    > h2,
    > section > h2 {
      padding-block: var(--s5);
      padding-inline-start: calc(4px + 0.375em);
      border-inline-start: 4px solid;
    }

    :not(pre) > code {
      --hl: 1px;
      display: inline-flex;
      background-color: var(--base-2);
      font-size: 0.925em;
      padding: 3px 0.25em;
      margin-inline: 0.125em;
      border-radius: var(--bdrs--10);
    }

    table {
      font-size: var(--fz--s);
      border-collapse: collapse;
      border-spacing: 0;
      isolation: isolate;
    }
    :is(td, th) {
      border-block: 1px solid var(--divider);
      vertical-align: top;
      /* 狭い画面で語の途中で縦に折らない（auto-phrase は Chromium 系だけ） */
      word-break: auto-phrase;
    }
    thead {
      border-block-end: solid 2px;
    }

    .c--headingAnchor {
      color: var(--text-2);
      font-family: var(--ff--mono);
      font-weight: 400;
      text-decoration: none;
      margin-inline-start: 0.25em;
      opacity: 0;
      transition: opacity 0.15s;
    }
    .c--headingAnchor::after {
      content: '#';
    }
    *:hover > .c--headingAnchor,
    .c--headingAnchor:focus-visible {
      opacity: 1;
    }
  }
}

@layer lism-custom {
  /* === 本文の文字：18px（スマホ 17px）。Lism の本文の基本の大きさ（--fz--base）で持ち、
         Lism のブレークポイント sm（コンテナの幅 480px）で切り替える。記事の下の「ほかの解説記事」も同じ === */
  :is(.c--article, .c--relatedArticles) {
    --fz--base: 1.0625rem;
    /* 画面の文字の下限（14px）。Lism の xs・2xs は本文の 0.8・0.73 倍で、17px の本文では 14px を割る */
    --fz--xs: max(14px, calc(1em * var(--fz-mol) / (var(--fz-mol) + 2)));
    --fz--2xs: max(14px, calc(1em * var(--fz-mol) / (var(--fz-mol) + 3)));
    /* s は本文の 0.89 倍。表（s）の中の題（さらに s）で 14px を割るので、同じく下限を付ける */
    --fz--s: max(14px, calc(1em * var(--fz-mol) / (var(--fz-mol) + 1)));
  }
  @container (min-width: 480px) {
    :is(.c--article, .c--relatedArticles) {
      --fz--base: 1.125rem;
    }
  }

  /* 字体は游ゴシック体を先頭に置く並び。文字色はサイトの本文の色（app.css の --text）にそろえる */
  :is(.c--articleRoot, .c--lismRoot) {
    --ff--base: "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    --c: var(--text);
    /* 太字（strong・見出し）の太さ。Lism の既定（600）だと、太い形を持たない字体（Android の日本語の字体など）で
       太く描かれず、ふつうの太さに見える。ブラウザの既定の太字と同じ 700 にする */
    --fw--bold: 700;
  }
  /* 游ゴシック体で描く根（-ff:base を付けた、記事のページと解説記事の一覧の根）は、ふつうの太さを 500 にする。
     Windows の游ゴシック体は、400 だと細い形（Regular）で描かれて字が細く薄く見える。500 で中くらいの太さ（Medium）の形になる */
  :is(.c--articleRoot, .c--lismRoot).-ff\:base {
    --fw--normal: 500;
    font-weight: var(--fw--normal);
  }

  /* === テンプレートの枠（ヘッダー・検索とメニューのモーダル・パンくず・一覧） ===
         地は白（いつもの形の本文の入れ物と同じ）。画面の字の下限（14px）は記事と同じ付け方 */
  .c--lismRoot {
    --base: #fff;
    --fz--xs: max(14px, calc(1em * var(--fz-mol) / (var(--fz-mol) + 2)));
    --fz--2xs: max(14px, calc(1em * var(--fz-mol) / (var(--fz-mol) + 3)));
    --fz--s: max(14px, calc(1em * var(--fz-mol) / (var(--fz-mol) + 1)));
  }
  /* 狭い画面の左右の余白は、いつもの形の本文の入れ物（app.css の .app-content。600px 以下で 16px）と同じにする。
     Lism の既定（24px）のままだと、表が枠に収まる幅が前の形より狭くなり、横に送る表が増える */
  @media (max-width: 600px) {
    .c--lismRoot {
      --gutter--base: var(--s20);
    }
  }
  /* ヘッダーは下を透かしてぼかす（テンプレートの Header） */
  .c--siteHeader {
    backdrop-filter: blur(0.5em);
  }

  /* 表は語の途中で折らない（Lism の html の overflow-wrap: anywhere を表の中だけ戻す。
     収まらない表は外側の c--tableScroll で横に送る）。見出しの行も折らない */
  .c--content table {
    overflow-wrap: normal;
    font-size: var(--fz--xs);
  }
  .c--content thead th {
    white-space: nowrap;
  }
  @container (min-width: 480px) {
    .c--content table {
      font-size: var(--fz--s);
    }
  }
  /* 枠に収まらない表の詰め方。public/js/article.js が、収まるまで枠の data-fit に段を書く
     （1 余白を詰める → 2 余白をさらに詰める → 3 見出しの行も語の切れ目で折る → 4 本文のセルは語の途中でも折る
     → 5 見出しのセルも語の途中で折る） */
  .c--tableScroll[data-fit="1"] {
    --cells-p: 0.625em 0.375em;
  }
  .c--tableScroll:is([data-fit="2"], [data-fit="3"], [data-fit="4"], [data-fit="5"]) {
    --cells-p: 0.625em 3px;
  }
  .c--tableScroll:is([data-fit="3"], [data-fit="4"], [data-fit="5"]) thead th {
    white-space: normal;
  }
  .c--tableScroll[data-fit="4"] td,
  .c--tableScroll[data-fit="5"] :is(td, th) {
    word-break: normal;
    overflow-wrap: anywhere;
  }

  /* 横スクロールする表の枠。public/js/table-scroll.js が is-scroll-left / is-scroll-right を付け外しし、
     まだ続く側にだけ影を出す。影は box-shadow で出す（背景のグラデーションにすると、
     文字の濃さの検査が枠の中の文字を測らなくなる） */
  .c--tableScroll:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
  }
  .c--tableScroll.is-scroll-left {
    box-shadow: inset 16px 0 13px -13px rgba(16, 24, 40, 0.35);
  }
  .c--tableScroll.is-scroll-right {
    box-shadow: inset -16px 0 13px -13px rgba(16, 24, 40, 0.35);
  }
  .c--tableScroll.is-scroll-left.is-scroll-right {
    box-shadow: inset 16px 0 13px -13px rgba(16, 24, 40, 0.35),
                inset -16px 0 13px -13px rgba(16, 24, 40, 0.35);
  }

  /* 本文の後ろの節（参考にした基準・資料、関連するアプリ）は、見出しで始まるので見出しと同じだけ空ける */
  .c--content > section {
    --mbs: calc(var(--flow) * 1.5 + 0.5em);
  }

  /* 見出しへ飛んだときに、上の固定物（開発環境の管理バー）に隠れないようにする */
  .c--content :is(h2, h3) {
    scroll-margin-top: calc(var(--fixed-top, 0px) + var(--s20));
  }

  /* 目次（テンプレートの TableOfContents） */
  .c--toc_list [data-is-active] {
    color: var(--brand);
    font-weight: var(--fw--bold);
    border-inline-start-color: var(--brand);
  }

  /* シェア（テンプレートの ShareButtons） */
  .c--shareBtn[data-is-copied] {
    color: var(--brand);
    --bdc: var(--brand);
  }
  .c--shareBtn svg {
    flex-shrink: 0;
  }

  /* リンクカード（テンプレートの linkCard.css） */
  .c--linkCard_title,
  .c--linkCard_desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ほかの解説記事（Lism のパターン PageLinks01）。パターンは説明文と「View More」を透明度で薄めるが、
     透明度で薄めた字は地との濃さの比が足りなくなるので、色（--text-2）で出す。
     「View More」はカードに乗るまで --text-2 で、乗ると本文の色になる（パターンの -hov:in:solid と同じ動き。
     --_notHov は Lism の set--hov が、乗っているあいだだけ空にする変数） */
  @media (any-hover: hover) {
    .c--relatedArticles_more {
      color: var(--_notHov, var(--text-2));
    }
  }
}

/* === サイトの CSS（app.css。レイヤーの外）との橋渡し === */
/* app.css の a（下線なし・サイトの色）がレイヤーの外で勝つので、記事の中（記事の下の「ほかの解説記事」も）のリンクは
   Lism の指定へ戻す。:where() で詳細度を a と同じにし、Lism の Property Class（-hov:-c など。レイヤーの外）には負けるようにする。
   サイトの部品のリンク（参考資料の .ref-buy など。class に「--」を含まない）は app.css のまま */
:where(.c--articleRoot, .c--lismRoot) a:where(:not([class]), [class*="--"]):not(:where([data-site-content] *)),
:where(.c--toolUi) a:where(:not(.ref-buy)),
:where(.c--homePosts .c--toc_list) a,
a:where(.btn.b--button) {
  color: revert-layer;
  text-decoration: revert-layer;
}
/* テンプレートの枠では、ヘッダーが画面の上に貼り付く。貼り付く物の下端（--fixed-top。目次の追従と、見出しへ飛んだときの余白が使う）に、
   ヘッダーの高さ（--header-h。ヘッダーのすぐ下の台本が測って html に置く）を足す。body の上の余白は管理バーの分だけ */
body.has-lism-header {
  --fixed-top: calc(var(--admin-bar-height) + var(--header-h, 0px));
  padding-top: var(--admin-bar-height);
}
/* 本文の検索欄（検索のモーダルと 404 ページの .site-search-inline）。幅を枠いっぱいにし、候補は欄の下へ流す */
.c--siteSearch .site-search-results {
  position: static;
  margin-top: var(--s10);
}
/* 広告の枠（app.css の .ad-slot-article 系）は、前後の余白を本文の流れ（l--flow）にそろえる */
.c--content > :is(.ad-slot-article, .slot-preview-article) {
  margin-block: var(--s40) 0;
}

/* === 記事の外（ヘッダー・パンくず・フッター・広告・サイトのモーダル）を、Lism を読まないページと同じに保つ ===
   Lism の reset と base（レイヤー lism-base）は要素へ直接かかるので、記事の外の要素では元へ戻す。
   :where() で詳細度を 0 にしてあり、app.css のクラスの指定（レイヤーの外）には負ける。
   revert はブラウザの既定へ戻す（Lism も app.css も無いときと同じ）。高さ（block-size）と枠（iframe の border）は
   HTML の属性（width・height・frameborder）まで消すので戻さない。
   公式の部品の中に置いたフォーム（ご報告の欄、折り畳みの中の入力欄 [data-tool-details-form]）も、中身は同じに戻す。 */
:where(body *:not([data-tool-modal-frame], .c--articleRoot, .c--articleRoot *, .c--lismRoot, .c--lismRoot *, [data-tool-history], [data-tool-history] *), [data-site-content], [data-site-content] *:not(:where([data-tool-modal-frame], .c--homePosts, .c--homePosts *, .c--pickupLinks, .c--pickupLinks *, .c--fixedUi, .c--fixedUi *, .c--toolVersion, .c--toolVersion *, .c--toolUi, .c--toolUi *, .btn.b--button, .btn.b--button *))),
:where(#swl-feedback .feedback-form, #swl-feedback .feedback-form :not(.b--button, .b--button *), #swl-feedback .contact-copy textarea, [data-tool-details-form] :not(.b--button, .b--button *)) {
  line-height: revert;
  margin: revert;
  padding: revert;
  list-style: revert;
  vertical-align: revert;
  max-inline-size: revert;
  outline-offset: revert;
}
:where(body :is(h1, h2, h3, h4, h5, h6, b, strong, dt, code, kbd, samp, var, blockquote, q, caption, figcaption, hr, abbr, pre, textarea, fieldset):not(.c--articleRoot *, .c--lismRoot *, [data-tool-history] *), [data-site-content] :is(h1, h2, h3, h4, h5, h6, b, strong, dt, code, kbd, samp, var, blockquote, q, caption, figcaption, hr, abbr, pre, textarea, fieldset):not(:where(.c--homePosts *, .c--pickupLinks *, .c--fixedUi *, .c--toolVersion *, .c--toolUi *, .btn.b--button, .btn.b--button *))),
:where(#swl-feedback :is(.feedback-form, .contact-copy) :is(textarea, fieldset), [data-tool-details-form] :is(h1, h2, h3, h4, h5, h6, b, strong, dt, code, kbd, samp, var, blockquote, q, caption, figcaption, hr, abbr, pre, textarea, fieldset)) {
  font-family: revert;
  font-weight: revert;
  font-size: revert;
  font-style: revert;
  letter-spacing: revert;
  background-color: revert;
  border: revert;
  block-size: revert;
  text-decoration: revert;
  overflow-x: revert;
  resize: revert;
  min-inline-size: revert;
}
:where(body :is(button, input, select, textarea, label[for], summary, [role=button], [role=option], [role=tab], :disabled):not(.c--articleRoot *, .c--lismRoot *, [data-tool-history] *)),
:where([data-site-content] :is(button, input, select, textarea, label[for], summary, [role=button], [role=option], [role=tab], :disabled):not(.c--fixedUi *, .c--toolVersion *, .c--toolUi *, .btn.b--button, .btn.b--button *)),
:where(#swl-feedback .feedback-form :is(input, select, textarea, label[for], :disabled):not(.b--button), #swl-feedback-copy-text),
:where([data-tool-details-form] :is(button, input, select, textarea, label[for], summary, [role=button], [role=option], [role=tab], :disabled):not(.b--button)),
:where(body :not(.c--articleRoot *, .c--lismRoot *, [data-tool-history] *), [data-site-content] *)::file-selector-button {
  color: revert;
  font: revert;
  letter-spacing: revert;
  background-color: revert;
  border: revert;
  cursor: revert;
  touch-action: revert;
  opacity: revert;
}
/* html に付く文字の折り返し（Lism の reset）は継承するので、body で元へ戻し、Lism で組んだ所の中だけ Lism の値にする */
body {
  overflow-wrap: normal;
  line-break: auto;
  -webkit-text-size-adjust: auto;
  text-size-adjust: auto;
}
:is(.c--articleRoot, .c--lismRoot) {
  overflow-wrap: anywhere;
  line-break: strict;
}

/* 外枠だけを使うページの本文は、サイト本来の折り返しを継承する。 */
@layer lism-custom {
  [data-site-frame] {
    color: inherit;
    font-family: inherit;
    line-height: inherit;
  }
  [data-site-content] {
    overflow-wrap: normal;
    line-break: auto;
  }
  :where([data-site-content] :is(.report-sheet, .report-paged) :is(sup, sub)) {
    font-size: revert;
  }
  @media print {
    [data-site-frame] > :is(.c--siteHeader, .b--modal) {
      display: none !important;
    }
    [data-site-frame] {
      display: block;
      min-height: 0;
    }
  }
}


@layer lism-custom {
  [data-site-frame] > main,
  [data-report-layout] {
    line-height: inherit;
  }
  [data-report-body] .report-toc-panel {
    display: none;
  }
  @media print {
    [data-report-layout] {
      display: block;
    }
    [data-report-layout] > aside {
      display: none !important;
    }
  }
}

/* トップのPageLinks01の状態切り替え。通常の配置・装飾は公式のProperty Class。 */
@layer lism-custom {
  .c--homePosts [data-filter="available"] [data-available="0"] { display: none; }
  .c--homePosts [data-view="list"] .l--columns { grid-template-columns: minmax(0, 1fr); }
}

@layer lism-custom {
  /* 元のタイルと同じく、長い題と説明は本文の先頭を示す。字を小さくせず比率を保つ。 */
  .c--toolPost > :is(h2, h3, p) {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@layer lism-custom {
  .c--homePosts [data-view="list"] .c--toolPost {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--s20);
  }
  .c--homePosts [data-view="list"] .c--toolPost > figure { grid-area: 1 / 1 / 4 / 2; }
  .c--homePosts [data-view="list"] .c--toolPost > :not(figure) { grid-column: 2; }
}

@layer lism-custom {
  /* 固定ページの本文へ共通のFlowを適用し、表はセルをそろえて読む。 */

  [data-fixed-page] :is(ul, ol):not([class]) { padding-inline-start: var(--s30); }
  .c--fixedUi [hidden] { display: none; }
  [data-fixed-page] table { width: 100%; border-collapse: collapse; }
  [data-fixed-page] :is(th, td) { border-block-end: 1px solid var(--divider); padding: var(--s15); vertical-align: top; }
}

@layer lism-custom {
  [data-home-updates] p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* PageLinks06公式の親hoverに連動する矢印反転。zoomはLism配布済み。 */
@layer lism-custom {
  @media (any-hover: hover) {
    .c--pickupLinks .-hov\:in\:reverse {
      background-color: var(--_isHov, var(--white));
      color: var(--_isHov, var(--black));
    }
  }
}

/* PageLinks07公式の親hoverに連動する題の色。 */
@layer lism-custom {
  /* 狭い画面で題を語の途中（「構｜造計算」など）で折らず、文節で折る（auto-phrase は Chromium 系だけ。ほかは字の区切りで折れる） */
  .c--popularTools .-hov\:in\:cLink {
    word-break: auto-phrase;
  }
  @media (any-hover: hover) {
    .c--popularTools .-hov\:in\:cLink {
      color: var(--_isHov, var(--link));
    }
  }
}

/* トップのカテゴリの写真のタイル（PageLinks02）。親hoverで名前の色を変える形はPageLinks07と同じ。 */
@layer lism-custom {
  /* 名前は「・」「（」の前後（wbr）でだけ折る。auto-phrase は「その｜他構造物」で折った。収まらない語だけ字の区切りで折る */
  .c--categoryPhotos_label {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
  @media (any-hover: hover) {
    .c--categoryPhotos .-hov\:in\:cLink {
      color: var(--_isHov, var(--link));
    }
  }
}

/* トップのアプリの一覧は Lism の lg で、右に追従のカテゴリを置いて 4 列にする。カードの幅が 195px まで狭まるので、1:1 より縦に長い比にして、
   題 2 行・説明 2 行・「アプリを開く」を収める。レイヤーの外の -ar:1/1 に勝つよう、レイヤーの外に置く（一覧の表示では -ar:1/1 が外れるので掛からない）。 */
@container (min-width: 1120px) {
  .c--homeTools > .c--toolPost.-ar\:1\/1 {
    aspect-ratio: 6 / 7;
  }
}

@layer lism-custom {
  /* 共通UI内の本文。入力フォームと図・帳票の紙面は対象にしない。 */
  .c--toolUi {
    :is(ul, ol) { padding-inline-start: var(--s25); }
    li + li, li > p + p { margin-block-start: var(--s5); }
  }
}

@layer lism-custom {
  .btn.b--button[hidden] { display: none; }
  .btn.b--button:not(.b--button--outline) {
    --bgc: var(--brand);
    --c: var(--base);
  }
  .btn.b--button:disabled {
    --c: var(--text-2);
    --bgc: var(--base-2);
    --bdc: var(--divider);
    cursor: not-allowed;
  }
}

@layer lism-custom {
  .b--alert[hidden] { display: none; }
  .b--tabs_list[hidden] { display: none; }
  .b--alert[data-notice-lines] > [data-notice-body] { white-space: pre-line; }
  [data-feedback-alert]:has([hidden]) { display: none; }
  .back-to-top.b--button.is-visible { --back-to-top-opacity: 1; }
}

/* 入力欄の説明（ラベルの横の「？」。public/js/field-help.js が公式の Tooltip・Popover で組む）。
   Popover は画面の左右の端から離し、長い注釈は画面の高さに収めて中で送る（公式がアンカー位置を使えないときと同じ上限）。
   アンカー位置を使うときだけの指定なので、公式と同じ条件で囲む。 */
@layer lism-custom {
  @supports (anchor-name: --a) and (anchor-scope: all) and (position-area: inline-start span-block-end) and (position-try-fallbacks: flip-block) {
    .c--fieldHelp > .b--popover_popup {
      margin-inline: var(--s10);
      max-block-size: calc(100dvh - var(--s20) * 2);
    }
  }
}