/**
 * qr-dialog.css — ページ URL の QR コードを出すダイアログ (qr-dialog.js が作る DOM)。
 *
 * 共通ヘッダーの「QR」とショートの「QR」で共用する。使うページはこれを link する
 * こと (共通ヘッダーのページは site-nav.css の隣、mobile.css より前)。
 *
 * ショート (shorts.html) は真っ黒な全画面プレイヤーだが、ダイアログは白のまま
 * にする。QR は白地に黒でないと読み取れず、周囲も明るい方がカメラが拾いやすい。
 *
 * 閉じるボタンの大きさは --tap (指で押す端末では 44px = iOS HIG)。定義は
 * src/mobile.css だが、ショートはそれを読まないので html/shorts.html の :root が
 * 同じものを持っている。このダイアログを他ページで使うなら、どちらかが要る。
 */

/* QR ダイアログ。padding を持たせないこと (背景クリックで閉じる判定が
   ダイアログ自身の領域なので、余白があるとそこでも閉じてしまう)。 */
.qr-dialog {
    padding: 0;
    border: 0;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .3);
    /* 白地・濃い文字を明示する。既定のままだとブラウザ既定の配色に従うので、
       どこかのページが color-scheme: dark を宣言した途端に暗転して、
       QR が読めなくなる (黒地に黒のモジュール) */
    background: #fff;
    color: #333;
}

.qr-dialog::backdrop { background: rgba(0, 0, 0, .5); }

.qr-body { padding: 12px 16px 16px; }

.qr-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.qr-title { font-size: 16px; font-weight: bold; color: #333; }

/* 閉じるボタンはタップしやすいよう --tap 角を確保する。絵 (icons.js の close) の
   大きさは固定値で、mobile.css の拡大対象には入れていない。
   見出しは baseline 揃えだが、こちらは文字ではなく箱なので align-self で中央へ。
   負の margin は箱を広げたぶんの打ち消しで、上下は見出しの行の高さを保つため、
   右は .qr-body の padding (16px) のぶんダイアログの角へ寄せるため。 */
.qr-close {
    flex: none;
    align-self: center;
    box-sizing: border-box;
    width: var(--tap);
    height: var(--tap);
    margin: -6px -12px -6px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #666;
    background: none;
    border: 0;
    cursor: pointer;
}

.qr-close svg { width: 24px; height: 24px; display: block; }

/* 1 モジュール = 1px の PNG を拡大して表示する。必ず等倍以上へ引き伸ばすこと
   (縮小すると最近傍でモジュールが欠けて読み取れなくなる)。 */
.qr-image {
    display: block;
    width: min(64vw, 260px);
    height: auto;
    image-rendering: pixelated;
}

/* display 指定はブラウザ標準の [hidden] { display: none } に勝ってしまうので、
   生成前・失敗時に前回の QR が残らないよう明示的に消す (消し忘れると古い URL の
   QR をエラー文の上に出したままにしてしまう)。 */
.qr-image[hidden] { display: none; }

.qr-error { margin: 0; color: #c00; }

/* URL は QR の幅に合わせて折り返す (長いクエリでダイアログを広げない) */
.qr-url {
    max-width: min(64vw, 260px);
    margin: 10px 0 0;
    font-size: 14px;
    color: #666;
    word-break: break-all;
}

/* 画面が低い時 (横向きスマホ) は縦に詰める。既定のままだと中身がダイアログの
   高さを超え、URL の最終行が内部スクロールに隠れる。
   QR を縮めても 45px 前後の PNG に対しては十分な拡大なので読み取りに影響はない。
   逆に URL は広げる: 横向きは幅が余っており、広い方が折り返しが減って縦が縮む。 */
@media (max-height: 480px) {
    .qr-body { padding: 10px 14px 12px; }
    .qr-head { margin-bottom: 8px; }
    /* 幅は URL 側が決めるので、QR は中央に置かないと左に寄って余白が目立つ */
    .qr-image { width: min(64vw, 150px); margin-inline: auto; }
    .qr-url { max-width: min(80vw, 340px); margin-top: 8px; }
}

/* スマホ幅の文字サイズ。ページ側の mobile.css ではなくここが持つのは、
   ショート (mobile.css を読まない) でも同じ大きさで出すため。条件は
   mobile.css と揃える (横向きスマホも「小さい画面」として拾う)。 */
@media (max-width: 640px), (max-height: 480px) and (pointer: coarse) {
    .qr-title { font-size: 17px; }
    .qr-url { font-size: 15px; }
}