/**
 * ポッカキット コメント連携（本体側）
 *
 * ⚠️⚠️ **既存の見た目を変えないこと。**
 *    指定してよいのは、**このプラグインが足した `.pokka-*` を含むもの**だけ。
 *    ⚠️ `.comment` や `.fn` だけを狙って書かない。
 *
 * ⚠️ **目印の無いコメントの見た目は、一切変えない**（D-43）。
 *    そのために、すべての指定に `.pokka-avatar` などの条件を付ける。
 */

/* ───────────────────────────────────────────────
   アバター
   ─────────────────────────────────────────────── */

/*
 * ⚠️ **幅と高さは HTML 側で指定している**（D-30）。
 *    ここでは触らない。触ると、読み込みの途中で高さが変わり、
 *    **iframe の高さが合わなくなる。**
 */
.pokka-avatar {
    /* ⚠️ 後ろの色（D-41）。背景のパーツを持たないアバターは透明 */
    background-color: #3A3A3A;

    border-radius: 4px;
    vertical-align: top;

    /* ⚠️ 縦に伸び縮みさせない */
    flex: none;

    /* ⚠️ テーマの img の指定に負けないように */
    max-width: none;
    box-shadow: none;
    border: 0;
}

/* 名前の入れ物（⚠️ JavaScript が中だけを書き換える） */
.pokka-name {
    /* ⚠️ テーマの見た目を引き継ぐ。ここで字体や色を変えない */
    display: inline;
}

/* ───────────────────────────────────────────────
   ⚠️ 置き方（D-42）
   アバターを左、その右に「名前・日付・返信」と「本文」
   ─────────────────────────────────────────────── */

/*
 * ⚠️⚠️ **名前の行の名前を、条件にしないこと。**
 *
 *    ⚠️ テーマによって、名前の行の要素が違う。
 *      パソコン用      … `<header class="comment-meta comment-author vcard">`
 *      スマートフォン用 … `<footer class="comment-meta">`
 *                        その中の `<div class="comment-author vcard">`
 *
 *    ⚠️ `> header` を条件にしていたため、**スマートフォンでは
 *    指定が1つも当たらず、アバターが名前の前に並ぶだけだった**
 *    （2026-10-12 に実際に起きた）。
 *
 *    ✅ **アバターそのものだけを条件にする。**
 *    ⚠️ 返信は `<article>` の外（`<ul class="children">`）にあるので、
 *    親が返信のアバターを拾うことはない。
 */

/*
 * ⚠️⚠️ **基準は、必ずこちらで作ること。**
 *
 *    ⚠️ テーマの `position: relative` を当てにしてはいけない。
 *    **コメント一覧ページは `.commentlist` で囲まれていない**ので、
 *    テーマの `.commentlist .children li.comment { position: relative }`
 *    が効かず、**浮かせたアバターがページの上に飛んだ**
 *    （2026-10-12 に実際に起きた）。
 *
 * ⚠️ **当てるのは内側の `article.comment` だけ。**
 *    外側にも `class="comment"` の付いた `<li>` があるため、
 *    `.comment` だけで狙うと**二重に効く。**
 */
article.comment:has(.pokka-avatar) {
    position: relative;
}

/*
 * ⚠️⚠️ **アバターは、箱の左上に浮かせる。**
 *    浮かせるので**高さを持たない。**
 *    下の `min-height` と必ず組にすること。
 */
article.comment:has(.pokka-avatar) .pokka-avatar {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
}

/*
 * ⚠️⚠️ **`min-height` は「アバターの高さ ＋ 10px」。**
 *
 *    ⚠️ 無いと、本文が1行だけのとき（「あけおめ」など）
 *    **アバターが箱の下にはみ出し、次のアバターに重なる。**
 *    ⚠️ 10px は、**アバター同士がくっついて見えない**ための余白
 *    （D-45・2026-10-12）。
 *
 * ⚠️ **本文が長いコメントの見た目は変わらない**（最低の高さなので）。
 */

/* ── パソコン用：親 64px ───────────────────── */
article.comment:has(.pokka-avatar[width="64"]) {
    padding-left: 76px;
    min-height: 74px;
}

/* ── パソコン用：返信 48px ──────────────────── */
article.comment:has(.pokka-avatar[width="48"]) {
    padding-left: 60px;
    min-height: 58px;
}

/* ── スマートフォン用：親 40px ─────────────── */
article.comment:has(.pokka-avatar[width="40"]) {
    padding-left: 50px;
    min-height: 50px;
}

/* ── スマートフォン用：返信 32px ────────────── */
article.comment:has(.pokka-avatar[width="32"]) {
    padding-left: 42px;
    min-height: 42px;
}

/* ── ⚠️ 例外：記事ページの返信 ───────────────── */

/*
 * ⚠️⚠️ **ここだけ、空きを足さない。**
 *
 *    記事ページの返信にかぎり、テーマが名前を 50px 右へ寄せて
 *    **自分のアバター（39px）の場所を空けている**
 *    （`.commentlist .children li.comment .comment-meta`）。
 *    ⚠️ **さらに足すと二重になる**
 *    （2026-10-12 に実際に起きた。約100px 空いた）。
 *
 * ⚠️ **コメント一覧ページには、この空きが無い。**
 *    一覧ページは `.commentlist` の外にあるため。
 *    だから `.commentlist` を条件に入れて見分ける。
 */
.commentlist .children article.comment:has(.pokka-avatar[width="32"]) {
    /* ⚠️ テーマが空けた 50px に、アバターを収める */
    padding-left: 0;
}

/*
 * ⚠️ **本文も、名前と同じだけ右へ送る**（D-42）。
 *    テーマは名前だけを寄せていて、本文は左端のままなので、
 *    そろえないと**本文がアバターの下に回り込む。**
 */
.commentlist .children article.comment:has(.pokka-avatar[width="32"]) > .comment-content {
    margin-left: 50px;
}

/*
 * ⚠️ `:has()` が使えない古いブラウザでは、
 *    上の指定が丸ごと無視され、**アバターが名前の前に並ぶ**
 *    （崩れはしない）。そのときの間だけ空ける。
 *
 * ⚠️⚠️ **`@supports` で囲むこと。**
 *    囲まないと、`:has()` が使える今のブラウザでも効いてしまい、
 *    **名前が会員以外より右へずれる。**
 */
@supports not selector(:has(*)) {
    .pokka-avatar + .pokka-name {
        margin-left: 8px;
    }
}

/* ───────────────────────────────────────────────
   ⚠️ 会員としてコメントする（D-53）
   ─────────────────────────────────────────────── */

/*
 * ⚠️⚠️ **テーマの `#respond input { width: 400px }` などが、
 *    こちらの部品にも効いてしまう**（twentyten style.css:1430）。
 *    ⚠️ テーマは **ID を使って指定している**ので、
 *    こちらを後に読み込んでも**強さで負ける。**
 *
 * ⚠️ **`!important` を使うのは、この欄の中だけ。**
 *    ⚠️ **既存の入力欄・コメントには一切届かない。**
 */

/* ── 欄そのもの ───────────────────────────── */

.pokka-comment-choice {
    /*
     * ⚠️ **いちばん上に出す。**
     *    テーマは `#commentform` を縦の flex にしていて、
     *    本文に `order: 1`、送信に `order: 2` を与えている。
     *    ⚠️ **ここを `-1` にしておけば、何より先に来る。**
     */
    order: -1;

    box-sizing: border-box !important;
    display: block;
    /* ⚠️ パソコン用は、本文の欄と同じ幅 */
    width: 100%;
    max-width: 426px;
    margin: 10px 0 12px !important;
    padding: 10px 12px !important;
    background: #353535;
    border: 0;
    border-left: 4px solid #ffa500;
    border-radius: 4px;
    text-align: left;
    line-height: 1.6;
}

/* ── チェックの行 ─────────────────────────── */

.pokka-comment-choice-row {
    display: flex;
    align-items: center;
    gap: 10px;
    /* ⚠️ 指で押せる高さ */
    min-height: 44px;
}

.pokka-comment-choice-label {
    display: flex !important;
    align-items: center;
    gap: 10px;
    /* ⚠️ 行いっぱいを押せるようにする（44px 以上） */
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 44px;
    cursor: pointer;
    font-weight: normal;
}

/*
 * ⚠️⚠️ **本物のチェックボックスを、見た目だけ作り替える。**
 *
 *    ⚠️ `appearance: none` を使う。
 *    ⚠️ **別の絵に置き換えて本物を隠してはいけない。**
 *    キーボードで操作でき、フォーカスも見えるようにするため。
 *
 * ⚠️ チェックの印は背景の画像で描く。
 *    `::after` は、入力部品では当てにならないブラウザがある。
 */
.pokka-comment-choice input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    flex: none !important;
    box-sizing: border-box !important;
    width: 18px !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 2px solid #ffa500 !important;
    border-radius: 4px !important;
    background: transparent !important;
    float: none !important;
    cursor: pointer;
}

.pokka-comment-choice input[type="checkbox"]:checked {
    background-color: #ffa500 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 12px 12px !important;
}

/* ⚠️ フォーカスが見えること */
.pokka-comment-choice input[type="checkbox"]:focus-visible {
    outline: 2px solid #ffffff !important;
    outline-offset: 2px;
}

.pokka-comment-choice-text {
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.4;
}

.pokka-comment-choice .pokka-comment-login {
    flex: none;
    margin: 0;
    color: #ffa500 !important;
    font-weight: 700;
    font-size: 12px;
    white-space: nowrap;
    text-decoration: none !important;
}

/* ── ① チェックを入れていない ───────────────── */

.pokka-comment-hint {
    margin: 8px 0 0 !important;
    color: #a8a8a8;
    font-size: 11px;
    line-height: 1.6;
}

.pokka-comment-hint[hidden] {
    display: none !important;
}

/* ── ② 会員としてコメントする ───────────────── */

.pokka-comment-me[hidden] {
    display: none !important;
}

.pokka-comment-me {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    color: #ffffff;
    font-size: 12px;
}

/*
 * ⚠️ **幅と高さは HTML 側で指定している**（D-30）。
 *    読み込みの途中で高さが変わらないように。
 */
.pokka-comment-me-avatar {
    flex: none;
    background-color: #3A3A3A;
    border-radius: 5px;
    max-width: none;
    box-shadow: none;
    border: 0;
}

.pokka-comment-me-avatar:not([src]) {
    visibility: hidden;
}

.pokka-comment-me-name b {
    font-weight: 700;
}

/*
 * ⚠️⚠️ **会員として投稿するときは、名前の欄を隠す。**
 *    名前は `@ユーザーネーム` に決まるため。
 *    ⚠️ **チェックを外したら元どおり出す**（入力した値はそのまま）。
 */
.pokka-member-on .comment-form-author {
    display: none;
}

/* ── ③ 接続できなかった ─────────────────────── */

.pokka-comment-error[hidden] {
    display: none !important;
}

/*
 * ⚠️⚠️ **④ の案内（オレンジ）と、はっきり区別する。**
 *    こちらは**うまくいかなかったことの知らせ**なので赤系。
 */
.pokka-comment-error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 10px;
    background: #3b1f1f;
    border: 1px solid #c9473f;
    border-radius: 4px;
}

.pokka-comment-error-mark {
    flex: none;
    display: inline-flex;
    color: #ff8a80;
    margin-top: 1px;
}

.pokka-comment-error-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
    line-height: 1.6;
}

.pokka-comment-error-title {
    color: #ff8a80;
    font-size: 12px;
    font-weight: 700;
}

.pokka-comment-error-text {
    color: #e6c4c1;
}

/* ── ④ ログインしていない ─────────────────── */

.pokka-comment-login-box[hidden] {
    display: none !important;
}

.pokka-comment-login-box {
    display: block;
    margin: 8px 0 0;
    padding: 10px 12px;
    background: rgba(255, 165, 0, .10);
    border: 1px solid #ffa500;
    border-radius: 6px;
    line-height: 1.6;
    text-align: left;
}

.pokka-comment-login-title {
    display: block;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
}

.pokka-comment-login-lead {
    margin: 6px 0 0 !important;
    color: #e8e8e8;
    font-size: 11.5px;
    line-height: 1.7;
}

/* ⚠️ 強調するのは「名前とアバター付き」と「1日1回 ◯ポイント」だけ */
.pokka-comment-login-lead b {
    color: #ffa500;
    font-weight: 700;
}

.pokka-comment-login-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

/*
 * ⚠️ **高さはパソコン用 34px。**
 *    ⚠️ 狭い画面では 44px にする（指で押すため）。
 */
.pokka-comment-login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    /*
     * ⚠️ **枠線を高さに含める。**
     *    含めないと、1px の枠が上下に足されて **36px** になる。
     */
    box-sizing: border-box;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

/*
 * ⚠️⚠️ **文字色に `!important` が要る。**
 *
 *    テーマが `#respond a { color: … }` のように
 *    **ID を使って色を決めている**ので、
 *    こちらを後に読み込んでも**強さで負ける。**
 *
 *    ⚠️ **実際に、塗りのボタンの文字が
 *    背景と同じオレンジになって消えた**（2026-10-12）。
 */
.pokka-comment-login-btn--fill,
.pokka-comment-login-btn--fill:hover,
.pokka-comment-login-btn--fill:focus,
.pokka-comment-login-btn--fill:visited {
    background: #ffa500 !important;
    color: #111 !important;
    border: 1px solid #ffa500 !important;
    text-decoration: none !important;
}

.pokka-comment-login-btn--line,
.pokka-comment-login-btn--line:hover,
.pokka-comment-login-btn--line:focus,
.pokka-comment-login-btn--line:visited {
    background: transparent !important;
    color: #ffa500 !important;
    border: 1px solid #ffa500 !important;
    text-decoration: none !important;
}

/* 外部リンクの印 */
.pokka-comment-ext {
    font-size: 12px;
}

.pokka-comment-login-note {
    margin: 10px 0 0 !important;
    color: #a8a8a8;
    font-size: 10.5px;
    line-height: 1.6;
}

/* ⚠️ 読み上げ用の控え。見た目には出さない */
.pokka-comment-state {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ───────────────────────────────────────────────
   ⚠️ 狭い画面（スマートフォン用）
   ⚠️ テーマは端末で切り替わるので、ここは画面の広さで見る
   ─────────────────────────────────────────────── */

@media (max-width: 650px) {
    .pokka-comment-choice {
        max-width: none;
        padding: 12px !important;
        background: #1c1c1c;
    }

    .pokka-comment-choice input[type="checkbox"] {
        width: 22px !important;
        height: 22px !important;
    }

    .pokka-comment-choice input[type="checkbox"]:checked {
        background-size: 16px 16px !important;
    }

    .pokka-comment-choice-text {
        font-size: 15px;
    }

    .pokka-comment-choice .pokka-comment-login {
        font-size: 14px;
    }

    .pokka-comment-hint {
        font-size: 13px;
    }

    .pokka-comment-me {
        font-size: 14px;
    }

    .pokka-comment-error-body {
        font-size: 13px;
    }

    .pokka-comment-error-title {
        font-size: 14px;
    }

    .pokka-comment-login-title {
        font-size: 15px;
    }

    .pokka-comment-login-lead {
        font-size: 13px;
    }

    .pokka-comment-login-note {
        font-size: 12px;
    }

    .pokka-comment-login-btn {
        height: 44px;
        padding: 0 18px;
        font-size: 14px;
        /* ⚠️ 2つ並べると窮屈なので、幅を分け合う */
        flex: 1 1 auto;
    }
}

/* ───────────────────────────────────────────────
   ⚠️ 送信ボタンの手前の「@名前 として投稿します」（D-51）
   ─────────────────────────────────────────────── */

/*
 * ⚠️⚠️ **押す直前に、誰として投稿するかが必ず目に入るようにする。**
 *
 *    本体のフォームは「お名前 → チェック → 本文 → 送信ボタン」の順で、
 *    ⚠️ **書いているうちにチェックの行が画面の外へ出る。**
 *
 * ⚠️ **`hidden` のときは出さない。**
 *    会員と確認できたときだけ JavaScript が外す。
 *    ⚠️ **会員以外の読者には、何も足さない。**
 */
.pokka-comment-as[hidden] {
    display: none !important;
}

.pokka-comment-as {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    /* ⚠️ テーマの文字色に任せない（暗くて読めなくなる） */
    color: #dddddd;
    font-size: 12px;
    font-weight: 700;
    /* ⚠️ 幅を決めない。テーマの入力欄と並んでも崩れないように */
    width: auto;
}

/*
 * ⚠️ **幅と高さは HTML 側で指定している**（D-30）。
 *    読み込みの途中で高さが変わらないように。
 */
.pokka-comment-as-avatar {
    background-color: #3A3A3A;
    border-radius: 4px;
    flex: none;
    max-width: none;
    box-shadow: none;
    border: 0;
}

/* ⚠️ 絵が無い間は、枠だけを出さない */
.pokka-comment-as-avatar:not([src]) {
    display: none;
}

/* ───────────────────────────────────────────────
   ⚠️ ログインしていないときの案内（D-52）
   ─────────────────────────────────────────────── */

/*
 * ⚠️⚠️ **赤い警告とは、はっきり違う見た目にする。**
 *    これは**失敗の知らせではなく、誘いの案内。**
 *    ⚠️ サイトのオレンジ（#ffa500）で出す。
 *
 * ⚠️ **`<p>` の中にあるので、中身はすべて `<span>`。**
 *    `display: block` は、ここで与える。
 */
.pokka-comment-login-box[hidden] {
    display: none !important;
}

.pokka-comment-login-box {
    display: block;
    margin: 10px 0 0;
    padding: 12px 14px;
    background: rgba(255, 165, 0, .10);
    border: 1px solid #ffa500;
    border-radius: 6px;
    /* ⚠️ テーマの文字の大きさに引きずられないように */
    line-height: 1.6;
    text-align: left;
}

.pokka-comment-login-title {
    display: block;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
}

.pokka-comment-login-lead {
    display: block;
    margin-top: 6px;
    color: #e8e8e8;
    font-size: 13px;
}

/* ⚠️ 強調するのは「名前とアバター付き」と「1日1回 ◯ポイント」だけ */
.pokka-comment-login-lead b {
    color: #ffa500;
    font-weight: 700;
}

.pokka-comment-login-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

/*
 * ⚠️ **高さはパソコン用 34px。**
 *    ⚠️ 狭い画面では 44px にする（指で押すため）。
 */
.pokka-comment-login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 34px;
    /*
     * ⚠️ **枠線を高さに含める。**
     *    含めないと、1px の枠が上下に足されて **36px** になる。
     */
    box-sizing: border-box;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    /* ⚠️ テーマの a の下線や色に負けないように */
    white-space: nowrap;
}

/*
 * ⚠️⚠️ **文字色に `!important` が要る。**
 *
 *    テーマが `#respond a { color: … }` のように
 *    **ID を使って色を決めている**ので、
 *    こちらを後に読み込んでも**強さで負ける。**
 *
 *    ⚠️ **実際に、塗りのボタンの文字が
 *    背景と同じオレンジになって消えた**（2026-10-12）。
 *
 * ⚠️ **使うのは、この案内の箱の中だけ。**
 */
.pokka-comment-login-btn--fill,
.pokka-comment-login-btn--fill:hover,
.pokka-comment-login-btn--fill:focus,
.pokka-comment-login-btn--fill:visited {
    background: #ffa500 !important;
    color: #111 !important;
    border: 1px solid #ffa500 !important;
    text-decoration: none !important;
}

.pokka-comment-login-btn--line,
.pokka-comment-login-btn--line:hover,
.pokka-comment-login-btn--line:focus,
.pokka-comment-login-btn--line:visited {
    background: transparent !important;
    color: #ffa500 !important;
    border: 1px solid #ffa500 !important;
    text-decoration: none !important;
}

/* 外部リンクの印 */
.pokka-comment-ext {
    font-size: 12px;
}

.pokka-comment-login-note {
    display: block;
    margin-top: 10px;
    color: #a8a8a8;
    font-size: 12px;
}

/*
 * ⚠️ 狭い画面では、指で押せる高さにする。
 *    ⚠️ スマートフォン用テーマは端末で切り替わるので、
 *    ここは**画面の広さ**で見ている（テーマの境目と同じ 650px）。
 */
@media (max-width: 650px) {
    /*
     * ⚠️ **ここは、普通の指定より後ろに置くこと。**
     *    前に置くと、後ろの `.pokka-comment-as` に負けて効かない
     *    （2026-10-12 に実際に起きた）。
     */
    .pokka-comment-as {
        color: #ffffff;
        font-size: 14px;
    }

    .pokka-comment-login-btn {
        height: 44px;
    }

    .pokka-comment-login-actions .pokka-comment-login-btn {
        /* ⚠️ 2つ並べると窮屈なので、幅を分け合う */
        flex: 1 1 auto;
    }
}

/* 会員の印（⚠️ U-20 が決まったら、ここに足す） */