/**
 * uaplus.css version 0.2.0
 */

/**
 * 異なるボックスモデル
 *
 * 私たちは従来のボックスモデルを使用しています。このモデルでは、要素のパディングとボーダーは、指定された幅と高さの内側に描画され、外側には描画されません。
 * これにより、inline-size や block-size のようなプロパティで、相対単位と絶対単位を組み合わせることが容易になります。
 *
 * 参照：https://en.wikipedia.org/wiki/CSS_box_model
 */
*,
*::after,
*::before {
  box-sizing: border-box;
}

/**
  * フォーカススタイルを改善
  *
  * コンテンツとそのフォーカスアウトラインの間にスペースを追加します。
  */
:where(:focus-visible) {
  outline-offset: 3px;
}

/**
  * テキストサイズ調整を無効化
  * 
  * 非モバイル最適化ウェブサイトでの可読性を向上させるため、モバイル Safari のようなブラウザは、
  * ウェブサイトをポートレート（縦向き）からランドスケープ（横向き）に切り替えるときに、デフォルトのフォントサイズを大きくします。
  * 最適化されたサイトでは、私たちはこれを望みません。
  *
  * 参照：https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/
  */
:where(html) {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/**
  * 行の高さを増やす
  *
  * 長い段落は、行の高さを高くすると読みやすくなります。
  */
:where(html) {
  line-height: 1.5;
}

/**
  * スクロールバーのガター（余白）を追加
  *
  * 長いページから短いページに切り替えるときに、ページが『ジャンプ』するのを防ぎます。
  */
:where(html) {
  scrollbar-gutter: stable;
}

/**
  * セクショニングコンテンツ内にネストされた h1 の UA スタイルを削除
  *
  * section や article などの中に h1 をネストしても、ネストはセマンティクス（意味）に影響を与えないため、見出しのスタイリングにも影響を与えるべきではありません。
  * 
  * 参照：https://github.com/whatwg/html/issues/7867#issuecomment-2632395167
  * 参照：https://github.com/whatwg/html/pull/11102
  * 参照：https://html.spec.whatwg.org/#sections-and-headings
  */
:where(h1) {
  font-size: 2em;
  margin-block: 0.67em;
}

/**
  * タイトル付きの略語を改善
  * 
  * title 属性を持つ abbr 要素は、サポートが一貫しておらず、一部のユーザーにしかアクセスできないため、アクセシビリティに関して有用ではありません。
  * それでも、この要素は一般的に使用されています。
  * このルールは、すべてのブラウザで略語に点線の下線を表示し（Safariにバグがあります）、カーソルを変更します。
  * 
  * 参照：https://adrianroselli.com/2024/01/using-abbr-element-with-title-attribute.html
  */
:where(abbr[title]) {
  cursor: help;
  text-decoration-line: underline;
  text-decoration-style: dotted;
}

/**
  * 強制配色モード (Forced Colors Mode) で `mark` 要素を最適化
  *
  * mark 要素の色は、強制配色モードで変更されないため、問題となる可能性があります。代わりにシステムカラーを使用します。
  * 
  * 参照：https://adrianroselli.com/2017/12/tweaking-text-level-styles.html#MarkWHCM
  */
@media (forced-colors: active) {
  :where(mark) {
    color: HighlightText;
    background-color: Highlight;
  }
}

/**
  * 埋め込みコンテンツによるオーバーフローを回避
  * 
  * 埋め込みコンテンツ（オーディオ、ビデオ、画像など）が、そのコンテナからオーバーフローしないようにします。
  */
:where(audio, iframe, img, svg, video) {
  max-block-size: 100%;
  max-inline-size: 100%;
}

/**
  * `fieldset` がオーバーフローを引き起こすのを防ぐ
  *
  * デフォルトの min-inline-size: min-content をリセットすることで、子要素が fieldset を引き延ばすのを防ぎます。
  *
  * 参照：https://github.com/twbs/bootstrap/issues/12359
  * 参照：https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
  */
:where(fieldset) {
  min-inline-size: 0;
}

/**
  * ラベルをブロック要素にする
  * 
  * input、select、textarea のラベルはブロック要素であるべきです。
  */
:where(label):has(+ :where(input:not([type="radio"], [type="checkbox"]), select, textarea)) {
  display: block;
}

/**
  * `textarea` のブロックサイズを増やす
  *
  * `textarea` のデフォルトの高さは小さいです。少し大きくします。
  */
:where(textarea:not([rows])) {
  min-block-size: 6em;
}

/**
  * フォーム要素でフォントのスタイルを継承
  * 
  * button、input、select、および textarea は、ページ全体と同じフォントファミリーとサイズを持つべきです。
  */
:where(button, input, select, textarea) {
  font-family: inherit;
  font-size: inherit;
}

/**
  * 検索入力のスタイルを正規化
  * 
  * macOS および iOS の検索入力欄の角丸を削除し、背景色を正規化します。
  */
:where([type="search"]) {
  -webkit-appearance: textfield;
}

/* iOS のみ */
@supports (-webkit-touch-callout: none) {
  :where([type="search"]) {
    border: 1px solid -apple-system-secondary-label;
    background-color: canvas;
  }
}

/**
  * 一部の入力タイプで方向を維持
  * 
  * 一部の入力タイプは、右から左に記述する言語でも左揃えを維持するべきですが、これは値が空でない場合に限ります。
  * なぜなら、プレースホルダーは右揃えであるべきだからです。
  *
  * 参照：https://rtlstyling.com/posts/rtl-styling#form-inputs
  */
:where(input):where([type="tel"], [type="url"], [type="email"], [type="number"]):not( :placeholder-shown) {
  direction: ltr;
}

/**
  * テーブルのスタイルを改善
  * 
  * デフォルトのスタイリングでは、テーブルはスキャンしにくいです。
  * これらのルールは、パディングと境界線の統合（collapsed borders）を追加します。
  */
:where(table) {
  border-collapse: collapse;
  border: 1px solid;
}

:where(th, td) {
  border: 1px solid;
  padding: 0.25em 0.5em;
  vertical-align: top;
}

/**
  * フェードするダイアログ
  * 
  * dialog 要素と背景に、フェードインおよびフェードアウトのトランジションを追加します。
  */
:where(dialog)::backdrop {
  background: oklch(0% 0 0 / 0.3);
}

:where(dialog, [popover]),
:where(dialog)::backdrop {
  opacity: 0;
  transition: opacity 150ms ease-out, display 150ms allow-discrete,
    overlay 150ms allow-discrete;
}

:where(dialog[open], :popover-open),
:where(dialog[open])::backdrop {
  opacity: 1;
}

@starting-style {
  :where(dialog[open], :popover-open),
  :where(dialog[open])::backdrop {
    opacity: 0;
  }
}

/**
  * `[hidden]` の詳細度を上げる
  * 
  *[hidden] 属性を持つ要素が誤って再表示されるのを難しくしつつ、until-found 機能は維持します。
  */
[hidden]:not([hidden="until-found"]) {
  display: none !important;
}

/**
  * 画像をブロック要素にする
  */

:where(img) {
  display: block;
}

/**
  * `<summary>` のカーソルを変更
  *
  * デフォルトでは、summary 要素の内部にある ::marker のみがデフォルトのカーソルを使用します。
  */
:where(summary) {
  cursor: default;
}

/**
  * `iframe` からデフォルトの境界線を削除
  */
:where(iframe) {
  border: none;
}