/*
 * モバイル表示(ベータ)。ユーザーページでオンにした端末でだけ効く(header.html が
 * <html data-mobile-beta="on"> と viewport を足す)。狭い画面ではサイドバーを隠し、
 * メニューボタンで開く。オフの端末と広い画面の見た目は変えない。
 */
#mobile-nav-toggle,
#mobile-nav-button,
#mobile-nav-backdrop,
#tabs-menu-button {
    display: none;
}

@media (max-width: 767.98px) {
    :root[data-mobile-beta="on"] body {
        min-width: 0;
    }

    :root[data-mobile-beta="on"] #mobile-nav-toggle {
        display: block;
        position: fixed;
        top: 4px;
        left: 4px;
        width: 44px;
        height: 44px;
        margin: 0;
        opacity: 0;
        z-index: 1042;
        cursor: pointer;
    }

    :root[data-mobile-beta="on"] #mobile-nav-button {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 4px;
        left: 4px;
        width: 44px;
        height: 44px;
        margin: 0;
        font-size: 20px;
        color: var(--yk-text);
        background: var(--bs-body-bg);
        border: 1px solid var(--yk-frame);
        border-radius: 6px;
        z-index: 1041;
    }

    :root[data-mobile-beta="on"] #mobile-nav-toggle:focus-visible + #mobile-nav-button {
        outline: 2px solid var(--bs-primary);
        outline-offset: 1px;
    }

    :root[data-mobile-beta="on"] #mobile-nav-toggle:checked ~ #mobile-nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        margin: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1039;
    }

    :root[data-mobile-beta="on"] #sidebar {
        top: 0;
        left: 0;
        bottom: 0;
        width: 240px;
        max-height: none;
        padding-top: 48px;
        background: var(--bs-body-bg);
        visibility: hidden;
        transform: translateX(-100%);
        z-index: 1040;
    }

    :root[data-mobile-beta="on"] #mobile-nav-toggle:checked ~ #sidebar {
        visibility: visible;
        transform: none;
        overscroll-behavior: contain;
    }

    /* 開いている間は裏の本文をスクロールさせない */
    :root[data-mobile-beta="on"] body:has(#mobile-nav-toggle:checked) {
        overflow: hidden;
    }

    :root[data-mobile-beta="on"] #sidelinks > a {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* サイドバーの広告は出さない */
    :root[data-mobile-beta="on"] #side_ads {
        display: none;
    }

    :root[data-mobile-beta="on"] #main {
        margin-left: 0;
        padding-top: 52px;
    }

    /* 幅の広い表・式・コードは、ページ全体ではなくその要素を横にスクロールさせる */
    /* 中に絶対配置のポップアップがある表は、切れないので除く */
    :root[data-mobile-beta="on"] #content table:not(:has(.record-help-popup)) {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        /* 問題番号などの英数字を途中で折り返さない。入らない分は表の中で横にスクロールする */
        word-break: normal;
    }

    /*
     * 問題一覧は <table> のまま、1 問を 1 枚のカードのように並べる。
     * 1 行目: 番号・問題名・レベル / 2 行目: タグ(あるときだけ) / 3 行目: 作問者・Solved・Fav
     */
    :root[data-mobile-beta="on"] #content table.problems-table {
        overflow-x: visible;
    }

    :root[data-mobile-beta="on"] #content table.problems-table thead {
        display: none;
    }

    :root[data-mobile-beta="on"] #content table.problems-table tbody {
        display: block;
    }

    :root[data-mobile-beta="on"] #content table.problems-table tr {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px 10px;
        padding: 8px 4px;
        border-bottom: 1px solid var(--yk-frame);
    }

    :root[data-mobile-beta="on"] #content table.problems-table td {
        display: block;
        padding: 0;
        border: 0;
        white-space: normal;
    }

    :root[data-mobile-beta="on"] #content table.problems-table td[data-label]::before {
        content: attr(data-label) " ";
        color: var(--yk-text-muted);
        font-size: 0.85em;
    }

    :root[data-mobile-beta="on"] #content table.problems-table td.col-no {
        flex: none;
    }

    :root[data-mobile-beta="on"] #content table.problems-table td.col-title {
        flex: 1 1 60%;
        font-weight: bold;
    }

    :root[data-mobile-beta="on"] #content table.problems-table td.col-level {
        flex: none;
    }

    :root[data-mobile-beta="on"] #content table.problems-table td.col-tags {
        flex: 1 1 100%;
        font-size: 0.9em;
    }

    :root[data-mobile-beta="on"] #content table.problems-table td.col-tags:not(:has(a)) {
        display: none;
    }

    :root[data-mobile-beta="on"] #content table.problems-table td.col-author {
        flex: 1 1 auto;
        min-width: 0;
    }

    :root[data-mobile-beta="on"] #content pre,
    :root[data-mobile-beta="on"] #content .katex-display {
        max-width: 100%;
        overflow-x: auto;
    }

    :root[data-mobile-beta="on"] #content img,
    :root[data-mobile-beta="on"] #content iframe {
        max-width: 100%;
    }

    /* 長い URL などの折り返せない文字列でページが広がらないようにする */
    :root[data-mobile-beta="on"] #content {
        border-left: 0;
        overflow-wrap: break-word;
    }

    /* 左右に並べている本文と検索欄は、幅を取り合わないよう上から順に並べる */
    :root[data-mobile-beta="on"] #content > div.left,
    :root[data-mobile-beta="on"] #content > div.right {
        float: none;
        width: auto;
        height: auto;
        padding-right: 0;
        margin-left: 0;
        margin-bottom: 10px;
    }

    /* 提出の詳細は submissions.show.ts が float・width・margin-left をインラインで入れるので !important が要る */
    :root[data-mobile-beta="on"] #content:has(#code) > div.left,
    :root[data-mobile-beta="on"] #content:has(#code) > div.right {
        float: none !important;
        width: auto !important;
        margin-left: 0 !important;
    }

    :root[data-mobile-beta="on"] #content .pagination {
        flex-wrap: wrap;
    }
}

@media (max-width: 767.98px) {
    /* 上部: メニューボタンとログイン情報を 1 行にまとめる */
    :root[data-mobile-beta="on"] #main {
        padding-top: 0;
    }

    :root[data-mobile-beta="on"] #header {
        float: none;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        min-height: 52px;
        margin: 0;
        padding: 4px 8px 4px 56px;
    }

    /* タブは折り返さず 1 段にして、横にスクロールする(:has() が使えないブラウザの形。使えるなら下のメニューにする) */
    :root[data-mobile-beta="on"] #toplinks {
        display: block;
        width: 100%;
        height: auto;
    }

    :root[data-mobile-beta="on"] #toplinks > div {
        float: none;
        display: flex;
        width: 100%;
        margin: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }

    :root[data-mobile-beta="on"] #toplinks > div::-webkit-scrollbar {
        display: none;
    }

    :root[data-mobile-beta="on"] #toplinks > div > a {
        flex: none;
        float: none;
        white-space: nowrap;
    }

    /* タブは今いるタブの名前だけを出し、押すとページの中に一覧を開く。横スクロールだと続きがあると
       分からない。ボタンは header.html が #toplinks の先頭に足す */
    :root[data-mobile-beta="on"] #toplinks:has(> #tabs-menu-button) {
        display: flex;
        flex-wrap: wrap;
    }

    :root[data-mobile-beta="on"] #toplinks:has(> #tabs-menu-button) > div {
        flex: none;
        flex-wrap: wrap;
        width: 100%;
        overflow-x: visible;
    }

    /* ボタンを足す前に全部のタブが一瞬見えないよう、今いるタブ以外は「開いていない」で隠す */
    :root[data-mobile-beta="on"] #toplinks:not(:has(#tabs-menu-toggle:checked)) > div > a:not(.active) {
        display: none;
    }

    /* 名前はボタンに出るので、閉じている間は今いるタブも隠す */
    :root[data-mobile-beta="on"] #toplinks:has(#tabs-menu-toggle:not(:checked)) > div > a {
        display: none;
    }

    :root[data-mobile-beta="on"] #toplinks:has(#tabs-menu-toggle:checked) > div > a {
        flex: 0 0 100%;
        margin: 0;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    :root[data-mobile-beta="on"] #tabs-menu-button {
        display: flex;
        flex: none;
        position: relative;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        margin: 0;
        padding: 0 12px;
        color: var(--yk-tab-active-text);
        background: var(--yk-surface);
        border-bottom: 1px solid var(--yk-surface);
    }

    /* 読み上げで触って探せるよう、実体の input をボタン全体に重ねる */
    :root[data-mobile-beta="on"] #tabs-menu-toggle {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        opacity: 0;
        cursor: pointer;
    }

    :root[data-mobile-beta="on"] #tabs-menu-toggle:checked ~ i {
        transform: rotate(180deg);
    }

    :root[data-mobile-beta="on"] #tabs-menu-button:has(#tabs-menu-toggle:focus-visible) {
        outline: 2px solid var(--bs-primary);
        outline-offset: -2px;
    }

    /* 入力欄は画面の幅を超えない。16px 未満だと iOS で入力時に拡大される */
    :root[data-mobile-beta="on"] #content input:not([type="checkbox"]):not([type="radio"]),
    :root[data-mobile-beta="on"] #content select,
    :root[data-mobile-beta="on"] #content textarea {
        max-width: 100%;
        font-size: 16px;
    }

    /* 質問のボタンは本文を隠しにくい大きさと位置にする */
    :root[data-mobile-beta="on"] #clarification-floating-indicator {
        right: 12px !important;
        bottom: 12px !important;
        width: 44px !important;
        height: 44px !important;
    }

    /* トップページ */
    :root[data-mobile-beta="on"] #content #daily_problems,
    :root[data-mobile-beta="on"] #content #support_links {
        float: none;
        width: auto;
        min-width: 0;
        margin: 0 0 16px;
    }

    /* 提出ページ: 項目名を上に置き、エディタを画面幅いっぱいに使う */
    :root[data-mobile-beta="on"] #content > div.horizon {
        display: block;
    }

    :root[data-mobile-beta="on"] #content > div.horizon > form > div.line > div.left {
        float: none;
        width: auto;
        padding: 0 0 4px;
        text-align: left;
        font-weight: bold;
    }

    :root[data-mobile-beta="on"] #content > div.horizon > form > div.line > div.right {
        margin-left: 0;
    }

    :root[data-mobile-beta="on"] #content > div.horizon > form > div.line > div.right > textarea#source {
        width: 100%;
    }

    :root[data-mobile-beta="on"] #toggle_source_editor {
        white-space: nowrap;
    }

    :root[data-mobile-beta="on"] #source_tab_number {
        width: 5em !important;
    }

    /* 提出一覧: 1 行目に結果と問題、2 行目に提出者と言語、3 行目にそのほか */
    :root[data-mobile-beta="on"] #content table.submissions-table {
        overflow-x: visible;
    }

    :root[data-mobile-beta="on"] #content table.submissions-table thead {
        display: none;
    }

    :root[data-mobile-beta="on"] #content table.submissions-table tbody {
        display: block;
    }

    :root[data-mobile-beta="on"] #content table.submissions-table tr {
        display: grid;
        grid-template-columns: auto auto 1fr auto auto;
        gap: 2px 8px;
        align-items: center;
        padding: 8px 4px;
        border-bottom: 1px solid var(--yk-frame);
    }

    :root[data-mobile-beta="on"] #content table.submissions-table td {
        display: block;
        padding: 0;
        border: 0;
    }

    :root[data-mobile-beta="on"] #content table.submissions-table td.col-status {
        grid-column: 1;
        grid-row: 1;
    }

    /* 再判定で結果が 2 つあるときも縦に伸ばさない */
    :root[data-mobile-beta="on"] #content table.submissions-table td.col-status {
        white-space: nowrap;
    }

    :root[data-mobile-beta="on"] #content table.submissions-table td.col-status br {
        display: none;
    }

    :root[data-mobile-beta="on"] #content table.submissions-table td.col-problem {
        grid-column: 2 / -1;
        grid-row: 1;
        font-weight: bold;
    }

    :root[data-mobile-beta="on"] #content table.submissions-table td.col-user {
        grid-column: 1 / 4;
        grid-row: 2;
    }

    :root[data-mobile-beta="on"] #content table.submissions-table td.col-filter {
        grid-column: 4;
        grid-row: 2;
    }

    :root[data-mobile-beta="on"] #content table.submissions-table td.col-lang {
        grid-column: 5;
        grid-row: 2;
        text-align: right;
    }

    :root[data-mobile-beta="on"] #content table.submissions-table td.col-id {
        grid-column: 1;
        grid-row: 3;
    }

    :root[data-mobile-beta="on"] #content table.submissions-table td.col-date {
        grid-column: 2 / 4;
        grid-row: 3;
    }

    :root[data-mobile-beta="on"] #content table.submissions-table td.col-runtime {
        grid-column: 4;
        grid-row: 3;
    }

    :root[data-mobile-beta="on"] #content table.submissions-table td.col-size {
        grid-column: 5;
        grid-row: 3;
        text-align: right;
    }

    :root[data-mobile-beta="on"] #content table.submissions-table td.col-id,
    :root[data-mobile-beta="on"] #content table.submissions-table td.col-date,
    :root[data-mobile-beta="on"] #content table.submissions-table td.col-runtime,
    :root[data-mobile-beta="on"] #content table.submissions-table td.col-size {
        font-size: 0.85em;
    }

    :root[data-mobile-beta="on"] #content table.submissions-table td.col-score {
        grid-column: 1 / -1;
        text-align: left !important;
    }

    :root[data-mobile-beta="on"] #content table.submissions-table td.col-score::before {
        content: attr(data-label) " ";
        color: var(--yk-text-muted);
        font-size: 0.85em;
    }

    /* コンテストの問題一覧: 問題一覧と同じくカードにする */
    :root[data-mobile-beta="on"] #content table.contest-problems-table {
        overflow-x: visible;
    }

    :root[data-mobile-beta="on"] #content table.contest-problems-table thead {
        display: none;
    }

    :root[data-mobile-beta="on"] #content table.contest-problems-table tbody {
        display: block;
    }

    :root[data-mobile-beta="on"] #content table.contest-problems-table tr {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px 10px;
        padding: 8px 4px;
        border-bottom: 1px solid var(--yk-frame);
    }

    :root[data-mobile-beta="on"] #content table.contest-problems-table td {
        display: block;
        padding: 0;
        border: 0;
    }

    :root[data-mobile-beta="on"] #content table.contest-problems-table td[data-label]::before {
        content: attr(data-label) " ";
        color: var(--yk-text-muted);
        font-size: 0.85em;
    }

    :root[data-mobile-beta="on"] #content table.contest-problems-table td.col-index {
        flex: none;
        font-weight: bold;
    }

    :root[data-mobile-beta="on"] #content table.contest-problems-table td.col-no {
        display: none;
    }

    :root[data-mobile-beta="on"] #content table.contest-problems-table td.col-title {
        flex: 1 1 60%;
        font-weight: bold;
    }

    :root[data-mobile-beta="on"] #content table.contest-problems-table td.col-author,
    :root[data-mobile-beta="on"] #content table.contest-problems-table td.col-testers {
        flex: 1 1 100%;
    }

    :root[data-mobile-beta="on"] #content table.contest-problems-table td.col-testers:not(:has(a)) {
        display: none;
    }

    :root[data-mobile-beta="on"] #content table.contest-problems-table td.col-solved {
        flex: 1 1 auto;
    }

    /* コンテスト一覧: 1 行目に名前、2 行目に日時、3 行目に作問者とそのほか */
    :root[data-mobile-beta="on"] #content table.contest-list-table {
        overflow-x: visible;
    }

    :root[data-mobile-beta="on"] #content table.contest-list-table thead {
        display: none;
    }

    :root[data-mobile-beta="on"] #content table.contest-list-table tbody {
        display: block;
    }

    :root[data-mobile-beta="on"] #content table.contest-list-table tr {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px 12px;
        padding: 10px 4px;
        border-bottom: 1px solid var(--yk-frame);
    }

    :root[data-mobile-beta="on"] #content table.contest-list-table td {
        display: block;
        padding: 0;
        border: 0;
    }

    :root[data-mobile-beta="on"] #content table.contest-list-table td.col-name,
    :root[data-mobile-beta="on"] #content table.contest-list-table td.col-date {
        flex: 1 1 100%;
    }

    :root[data-mobile-beta="on"] #content table.contest-list-table td.col-name {
        font-weight: bold;
    }

    :root[data-mobile-beta="on"] #content table.contest-list-table td.col-date {
        font-size: 0.85em;
    }

    :root[data-mobile-beta="on"] #content table.contest-list-table td.col-date br,
    :root[data-mobile-beta="on"] #content table.contest-list-table td.col-editors br {
        display: none;
    }

    :root[data-mobile-beta="on"] #content table.contest-list-table td.col-ranking {
        margin-left: auto;
    }

    /* サイドバーのロゴは文字だけにして、メニューボタンの横に置く */
    :root[data-mobile-beta="on"] #sidebar {
        padding-top: 0;
    }

    :root[data-mobile-beta="on"] #home {
        min-height: 52px;
        margin-bottom: 4px;
        padding: 14px 0 0 60px;
        text-align: left;
    }

    :root[data-mobile-beta="on"] #home > a > i {
        display: none;
    }

    :root[data-mobile-beta="on"] #home > a > h3 {
        margin: 0;
        font-size: 20px;
    }

    /* 問題の絞り込みなど、横に長い行は折り返す */
    :root[data-mobile-beta="on"] #content .graph-filter {
        display: flex;
        flex-wrap: wrap;
        white-space: normal;
    }

    /*
     * 順位表。列が問題数だけあるのでカードにせず、順位・ユーザー名と見出しを固定して問題の列を動かす。
     * 縦に動かしても見出しが残るよう、表の中でスクロールさせる(overflow を持つ要素の中では
     * ページ基準の sticky が効かない)。
     */
    :root[data-mobile-beta="on"] #content table.ranking-table {
        max-height: calc(100dvh - 60px);
        overflow: auto;
        border-collapse: separate;
        border-spacing: 0;
        font-size: 12px;
        line-height: 1.35;
    }

    :root[data-mobile-beta="on"] #content table.ranking-table th,
    :root[data-mobile-beta="on"] #content table.ranking-table td {
        min-width: 64px;
        padding: 4px 6px;
        background: var(--bs-body-bg);
        white-space: nowrap;
    }

    :root[data-mobile-beta="on"] #content table.ranking-table thead th {
        position: sticky;
        top: 0;
        z-index: 2;
    }

    :root[data-mobile-beta="on"] #content table.ranking-table th:nth-child(-n+2),
    :root[data-mobile-beta="on"] #content table.ranking-table td:nth-child(-n+2) {
        position: sticky;
        z-index: 1;
    }

    :root[data-mobile-beta="on"] #content table.ranking-table thead th:nth-child(-n+2) {
        z-index: 3;
    }

    :root[data-mobile-beta="on"] #content table.ranking-table th:nth-child(1),
    :root[data-mobile-beta="on"] #content table.ranking-table td:nth-child(1) {
        left: 0;
        width: 50px;
        min-width: 50px;
        max-width: 50px;
        padding-inline: 0;
    }

    :root[data-mobile-beta="on"] #content table.ranking-table th:nth-child(1) small {
        font-size: 10px;
    }

    :root[data-mobile-beta="on"] #content table.ranking-table th:nth-child(2),
    :root[data-mobile-beta="on"] #content table.ranking-table td:nth-child(2) {
        left: 50px;
        width: 92px;
        min-width: 92px;
        max-width: 92px;
    }

    /* 更新の強調は背景を透明まで変えるので、固定列では後ろの列が透ける。固定列には付けない */
    :root[data-mobile-beta="on"] #content table.ranking-table td.cell-updated:nth-child(-n+2) {
        animation: none;
    }

    /*
     * 提出の詳細。情報の表はポップアップがあるので横スクロールにできない(切れる)。
     * 列の幅を固定して中で折り返し、長い選択肢にページごと広げられないようにする。
     */
    :root[data-mobile-beta="on"] #content table.submission-info-table {
        table-layout: fixed;
        width: 100%;
    }

    :root[data-mobile-beta="on"] #content table.submission-info-table > tbody > tr > td {
        overflow-wrap: break-word;
    }

    :root[data-mobile-beta="on"] #content table.submission-info-table > tbody > tr > td:first-child {
        width: 96px;
        padding-inline: 4px;
    }

    :root[data-mobile-beta="on"] #content table.submission-info-table #contest-problem-selector-wrapper {
        display: block;
    }

    :root[data-mobile-beta="on"] #content table.submission-info-table #contest-problem-selector {
        max-width: 100%;
    }

    /* テストケースは 1 件を 2 行に詰める。件数が多いとソースコードまで遠くなるため */
    :root[data-mobile-beta="on"] #content table.submission-test-table thead {
        display: none;
    }

    :root[data-mobile-beta="on"] #content table.submission-test-table,
    :root[data-mobile-beta="on"] #content table.submission-test-table tbody {
        display: block;
    }

    :root[data-mobile-beta="on"] #content table.submission-test-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 2px 8px;
        padding: 6px 0;
        border-bottom: 1px solid var(--bs-border-color);
    }

    :root[data-mobile-beta="on"] #content table.submission-test-table td {
        padding: 0;
        border: 0;
        min-width: 0;
    }

    :root[data-mobile-beta="on"] #content table.submission-test-table td br {
        display: none;
    }

    /* 入力: ファイル名とコピー */
    :root[data-mobile-beta="on"] #content table.submission-test-table td:first-child {
        overflow-wrap: anywhere;
    }

    /* 結果を右上へ */
    :root[data-mobile-beta="on"] #content table.submission-test-table td:nth-last-child(2) {
        grid-column: 2;
        grid-row: 1;
        text-align: right;
    }

    :root[data-mobile-beta="on"] #content table.submission-test-table td:nth-last-child(2) br {
        display: inline;
    }

    /* 実行時間とメモリを 2 行目の右へ */
    :root[data-mobile-beta="on"] #content table.submission-test-table td:last-child {
        grid-column: 2;
        grid-row: 2;
        text-align: right;
        white-space: nowrap;
        font-size: 12px;
    }

    /* 出力へのリンク(権限があるときだけある列)を 2 行目の左へ */
    :root[data-mobile-beta="on"] #content table.submission-test-table td:nth-child(2):nth-last-child(3) {
        grid-column: 1;
        grid-row: 2;
    }

    :root[data-mobile-beta="on"] #content table.submission-test-table td:nth-child(2):nth-last-child(3) > div {
        line-height: 1.4 !important;
    }

    /* ボタンの float の横に入り込んで幅が狭くならないように */
    :root[data-mobile-beta="on"] #code {
        clear: both;
    }

    /* 新順位表のリプレイの見出し。横に並べると 1 文字ずつ折り返すので、段を分ける */
    :root[data-mobile-beta="on"] #replay-container > div:first-child,
    :root[data-mobile-beta="on"] #replay-container > div:first-child > div {
        flex-wrap: wrap;
    }

    :root[data-mobile-beta="on"] #replay-container > div:first-child > div > p {
        order: 1;
        flex-basis: 100%;
    }

    :root[data-mobile-beta="on"] #replay-container > div:first-child a,
    :root[data-mobile-beta="on"] #replay-container > div:first-child h5,
    :root[data-mobile-beta="on"] #replay-container > div:first-child button {
        white-space: nowrap;
    }

    /* 問題名は長いので 1 行で切る。全文は問題のページで読める */
    :root[data-mobile-beta="on"] #content table.ranking-table .ranking-problem-title {
        display: block;
        max-width: 72px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}