/* MudBlazor が全体のスタイルを持つため、ここにはアプリ固有の最小限だけを置く */

/*
   公開画面は静的 SSR で、遷移のたびにページ全体を読み込む。その間に出る白い画面をクロスフェードに変える。
   未対応のブラウザでは普通に切り替わるだけで、JavaScript は要らない。
*/
@view-transition {
    navigation: auto;
}

/* アプリバーは遷移の前後で同じ位置にあるため、クロスフェードの対象から外して動かさない */
.app-bar {
    view-transition-name: app-bar;
}

:root {
    /*
       アプリバー（MudAppBar の Dense）の高さ。本文・ドロワー・進捗バーをその下端に揃えるために使う。
       MudBlazor は Dense の高さを --mud-appbar-height の 3/4 として描くため、同じ式で求める。
    */
    --arts-app-bar-height: calc(var(--mud-appbar-height) * 3 / 4);
}

/*
   共有ボタン（js/app.js）が URL をコピーしたときの通知。
   公開画面には回線が無く MudSnackbar を使えないため、スクリプトが body の末尾に置く素の要素として描く。
*/
.arts-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 2000;
    max-width: calc(100vw - 32px);
    padding: 10px 16px;
    border-radius: var(--mud-default-borderradius);
    color: #fff;
    background-color: rgba(33, 33, 33, 0.92);
    box-shadow: var(--mud-elevation-6);
    font-size: 0.875rem;
    transform: translateX(-50%);
}

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0.8rem 1.2rem;
    background: #ffecb3;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/*
   画面遷移のたびに FocusOnNavigate が h1 へフォーカスを移す。読み上げの開始位置を伝えるための動作だが、
   Chrome はこのフォーカスも :focus-visible とみなすため、マウス操作でも見出しが枠線で囲まれてしまう。
   対象を tabindex="-1"（FocusOnNavigate が付ける値）に限れば、Tab で辿り着ける要素の枠線は残る。
   読み上げはフォーカスの移動そのもので伝わるため、枠線を消しても支援技術の利用者は影響を受けない。
*/
h1[tabindex="-1"]:focus {
    outline: none;
}

/*
   ゲームモードの色。設計上の意味を持つ値なので、画面ごとに書かず1か所で定める。
   いずれも白地に載せてコントラスト比 4.5:1 を満たす濃さにしている。
*/
:root {
    /* エアライド・リレー・グランプリ。いずれもエアライドのコースを走るため同じ色にする */
    --arts-mode-air: #c62828;
    /* ウエライド。#e65100 は白地で 3.8:1 しかないため、1段濃い値にしている */
    --arts-mode-top: #bf360c;
    /* シティトライアル */
    --arts-mode-city: #2e7d32;
}

/*
   表示領域の幅を3段階の固定値にする。ウィンドウ幅に合わせて連続的に伸縮させると、
   1行の文字数とカードの寸法が閲覧環境ごとに変わり、確認した見え方を保てないため。
   段階の境目はドロワーの扱いと揃える（大だけドロワーを本文の横へ常時表示する）。
*/
.page-shell {
    width: 100%;
    margin: 0 auto;
    padding: 16px 16px 64px;
}

/* 中。ドロワーはコンテンツへ重ねて表示する */
@media (min-width: 700px) {
    .page-shell {
        width: 656px;
        padding: 24px 0 64px;
    }
}

/* 大。ドロワー 240px を除いた残りに、3列のタイルがちょうど収まる幅 */
@media (min-width: 1280px) {
    .page-shell {
        width: 992px;
    }
}

/*
   チップとバッジの書体。MudBlazor が描く要素のため、コンポーネント側の CSS 分離では届かない。
*/
.mud-chip,
.rank-badge {
    font-family: "M PLUS Rounded 1c", "M PLUS 2", sans-serif;
    font-weight: 700;
}

/* 利用規約に付ける。読み手に落ち着いて目を通してもらう箇所だけに限る */
.arts-serif {
    font-family: "Noto Serif JP", serif;
}

/*
   大会タイトルなど、見出し扱いではないが視線を集めたい箇所に付ける。
   読み込む字形は 700 と 900 だけなので、ほかの太さを指定すると
   ブラウザが疑似的な太字を合成して字面が崩れる。ArtsTheme の見出しと同じ太さで固定する。
*/
.arts-display {
    font-family: "M PLUS Rounded 1c", "M PLUS 2", sans-serif;
    font-weight: 900;
}

/*
   ゲームモードのチップ。地を白のままにし、文字と枠線だけを種目の色にする。
   状態を塗りつぶしで示す箇所と同じ画面に置くため、種目まで塗ると色面どうしがぶつかり、
   どれが大会の状態かを読み取りにくくなる。
   枠線は MudBlazor の Variant.Outlined が引くので、ここでは色だけを差し替える。
   大会一覧（SCR-001）は種目を出さなくなったため、現在の利用箇所は無い。
   種目の色は設計上の意味を持つ値であり、大会詳細などで使うため定義は残す。
*/
.mode-chip {
    background-color: var(--mud-palette-surface) !important;
    color: var(--arts-mode-color) !important;
    border-color: currentColor !important;
}

.mode-chip--air {
    --arts-mode-color: var(--arts-mode-air);
}

.mode-chip--top {
    --arts-mode-color: var(--arts-mode-top);
}

.mode-chip--city {
    --arts-mode-color: var(--arts-mode-city);
}