/* 今のサイトのガイドのページを、新しいサイトへ移したときの直し（scripts/export_port.py）。
   元の見た目（common.css・app.css）はそのまま。ここには、新しいサイトの list.css とぶつかる所と、元から崩れていた所だけを書く */

/* 色を新しいサイトに合わせて黒い地にしたので、スクロールバーなども暗い色のまま（list.css の color-scheme:dark を使う） */
/* list.css は文字の大きさ 14px・リンクの下線なしを全体に当てるので、元のページの値に戻す */
body[data-quest-guides]{font-size:16px}
body[data-quest-guides] main a{color:inherit}
/* 固定のヘッダー（61px）に隠れない */
body[data-quest-guides] [id]{scroll-margin-top:calc(var(--hh,61px) + 16px)}

/* 新しいサイトのヘッダー・メニューは暗い色。元のページの文字の色（濃い紺）が入ってロゴが見えなくなるので戻す */
body[data-quest-guides] header,body[data-quest-guides] .menupanel{color:var(--ink)}

/* 元から崩れていた所: スマホの幅で「できること」の3項目が、左の 30px の列（番号を置く前提の列）に見出しを入れてしまい、1文字ずつ縦に折れていた。番号はないので、普通の縦並びにする */
@media (max-width:760px){
  .qg-app .qa-features>section{display:block}
  .qg-app .qa-features p{margin-top:6px}
}

/* 色を新しいサイトに合わせたときの直し: ボタンはカタログと同じ白い地・黒い字（元は青緑の地・白い字） */
body[data-quest-guides] .qg-btn,body[data-quest-guides] .qa-download-button{background:#fff!important;border-color:#fff!important;color:#000!important;box-shadow:none!important}
body[data-quest-guides] .qg-btn:hover,body[data-quest-guides] .qa-download-button:hover{background:#e6e7ea!important}
body[data-quest-guides] .qg-btn-secondary{background:transparent!important;border-color:#5b606a!important;color:#eeeff2!important}
/* 枠だけのボタンに指を乗せたとき: 上の .qg-btn:hover の明るい灰色の地が当たると白い字が見えなくなるので、地はうっすら明るくするだけにする（一番下の帯の「セットアップ手順」） */
body[data-quest-guides] .qg-btn-secondary:hover{background:rgba(255,255,255,.12)!important;border-color:#eeeff2!important;color:#eeeff2!important}
body[data-quest-guides] :where(a,button,summary):focus-visible{outline-color:#fff}

/* ダウンロードの部分: 元の淡い青緑の面を、黒の上で淡い青みのある面にして目立たせる */
body[data-quest-guides] .qg-app .qa-download{background:linear-gradient(120deg,#0c1628,#0f1b31)!important;border-color:#1d2c48!important}

/* セクションの切れ目: 新しい色は足さず、地を「黒」と「少し明るい黒」の交互にする（ダウンロードは青みの面のまま） */
body[data-quest-guides] .qg-app #requirements,body[data-quest-guides] .qg-app #app-faq{background:#1a1c22}

/* 幅を変えたときの崩れ（元のページから）。元の切り替えは 1020px・760px・390px の3つだけで、その間は列が縮むだけだったため、
   760〜900px あたりで題名・表・公開日が細かく折れていた。列の数を減らす幅を中身に合わせて早める */

/* 見出しは文の切れ目（読点・英語の前後）で折る。Chrome は文節で折る（auto-phrase）。どちらも入らないときだけ、どこでも折る */
body[data-quest-guides] :is(h1,h2,h3,.qa-hero-message,.qa-faq summary>span,.qa-flow-source>div,.qa-flow-connector strong,.qa-flow-device){word-break:keep-all;word-break:auto-phrase;overflow-wrap:anywhere}
body[data-quest-guides] .qa-download-note a{white-space:nowrap}

/* 一番上: 2列のままだと「AVScript Connector」が2行に割れる幅（900px 以下）では、スマホと同じ縦並びにする */
@media (min-width:761px) and (max-width:900px){
  .qg-app .qa-hero-grid{grid-template-columns:1fr;gap:36px}
  .qg-app .qa-hero-copy{max-width:600px}
  .qg-app .qa-preview{width:100%;max-width:440px;margin-inline:auto}
}
/* できること: 3列だと見出しが1文字だけ次の行に落ちる幅では、1列にする */
@media (min-width:761px) and (max-width:900px){
  .qg-app .qa-features{grid-template-columns:1fr;gap:24px}
  .qg-app .qa-features>section{border-right:0;padding-right:0}
  .qg-app .qa-features p{margin-top:6px}
}
/* 動作環境と機器の確認状況: 2つの表を横に並べると項目名が折れる幅（960px 以下）では、上下に並べる */
@media (min-width:761px) and (max-width:960px){
  .qg-app .qa-environment-grid{grid-template-columns:1fr;gap:40px}
  .qg-app .qa-specs>div{grid-template-columns:126px 1fr}
}
/* ダウンロード: 4つの項目（バージョン・公開日・サイズ・形式）は、入れ物の幅で並べ方を決める。
   1行に4つ入らないときは 2×2 に。公開日は折らない */
.qg-app .qa-download-grid>div:first-child{container-type:inline-size;min-width:0}
.qg-app .qa-release-specs{grid-template-columns:repeat(4,minmax(max-content,1fr))}
.qg-app .qa-release-specs dd{white-space:nowrap}
@container (max-width:620px){
  .qg-app .qa-release-specs{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 0;padding:16px 8px}
  .qg-app .qa-release-specs>div:nth-child(2n){border-right:0}
  .qg-app .qa-release-specs dd{font-size:20px}
}
@media (min-width:761px) and (max-width:900px){
  .qg-app .qa-download-grid{grid-template-columns:1fr;gap:20px}
  .qg-app .qa-download-action .qa-download-button{width:auto;min-width:280px}
}
/* 一番狭い幅（390px 以下）: 題名が「AVScript / Connector」に割れないよう、幅に合わせて少し小さくする */
@media (max-width:390px){
  .qg-app .qa-hero h1{font-size:clamp(28px,9.4vw,34px)}
}
/* 動作環境の表の項目名の欄: 7文字の項目名（「動作対象の端末」など）が2行に折れないよう、元の幅（1020px 以下 106px・390px 以下 97px）を少し広げる */
@media (min-width:961px) and (max-width:1020px){.qg-app .qa-specs>div{grid-template-columns:116px 1fr}}
@media (max-width:390px){.qg-app .qa-specs>div{grid-template-columns:106px 1fr}}
/* 一番上のダウンロードボタンの下の「ダウンロードと利用には、利用規約が適用されます。」（v4）。版の情報と同じ小ささ・色。リンクは下線で分かるように */
.qg-app .qa-hero-terms{margin-top:6px;font-size:12px;line-height:1.7;color:#a3a7b0}
.qg-app .qa-hero-terms a,.qg-app .qa-download-action>p a{color:#eeeff2;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#6b707a}
/* 一番下の帯の一言: 最後の1〜2字だけが次の行に落ちないよう、文節で折り、行の長さをならす */
body[data-quest-guides] .qa-next p{word-break:keep-all;word-break:auto-phrase;overflow-wrap:anywhere;text-wrap:pretty}
/* 一番下の帯の下の段: Meta Quest で始める3つのページの並び（1 必要な機材 → 2 連動アプリ → 3 セットアップ）。今のページはリンクにしない */
body[data-quest-guides] .qa-next>.qg-container{flex-wrap:wrap}
.qs-steps{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;margin-top:6px;padding-top:20px;border-top:1px solid rgba(238,239,242,.18)}
.qs-steps p{margin:0;font-size:13px;font-weight:700;color:#c9ccd3}
.qs-steps ol{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;padding:0;list-style:none}
.qs-steps li{display:flex;align-items:center;font-size:15px;font-weight:700;color:#eeeff2}
.qs-steps a{display:inline-flex;align-items:center;color:#eeeff2;text-decoration:underline;text-decoration-color:rgba(238,239,242,.45);text-underline-offset:4px}
.qs-steps a:hover{text-decoration-color:currentColor}
.qs-n{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-right:8px;border-radius:50%;border:1px solid rgba(238,239,242,.6);font-size:12px;font-weight:700;text-decoration:none}
.qs-steps li[aria-current] .qs-n{background:#eeeff2;color:#16264a;border-color:#eeeff2}
.qs-steps small{margin-left:8px;font-size:12px;font-weight:500;color:#c9ccd3}
@media (max-width:760px){
  .qs-steps{flex-direction:column;align-items:flex-start;gap:10px;align-self:stretch}
  .qs-steps ol{flex-direction:column;gap:10px}
}
/* 更新履歴の中の箇条書き（PC版は1つの版で変わった点が多い） */
.qg-app .qa-release-entry dd ul{margin:0;padding-left:1.2em}
.qg-app .qa-release-entry dd li+li{margin-top:4px}
/* PC版の一番上の画面写真は横長（PC のウィンドウ） */
.qg-app .qa-pc-preview{max-width:520px}
.qg-app .qa-preview.qa-real-preview.qa-pc-preview{max-width:520px;width:100%}
@media (max-width:760px){.qg-app .qa-preview.qa-real-preview.qa-pc-preview{max-width:440px}}