/* © 2026 PassQuest Team (https://passquest.jp). All rights reserved. 無断複製・転載・改変を禁じます。 */
/* =========================================================
   PassQuest - 合格可能性 «くわしく» シート
   （js/pass_detail.js が作る #pass-detail-screen の見た目）
   ・グラフは純SVG。外部の読み込みには頼っていません。
   ・状態の色は 色だけに頼らず、必ず印（⚠ ・ ✓ —）と
     文字と数字を添えています（色の見分けがつきにくい方むけ）。
   ========================================================= */

#pass-detail-screen {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    flex-direction: column;
    background:
        radial-gradient(120% 90% at 50% 0%, #241d33 0%, #16121f 55%, #0c0a13 100%);
    color: #fff;
    font-family: "Noto Sans JP", "Segoe UI", system-ui, sans-serif;
}

/* ── 見出しの帯 ─────────────────────────────────
   左上に他の画面と同じ «◀ 戻る»、見出しは «画面の中央»。
   （見出しを本当の中央に置くため、戻るボタンは絶対配置にして
     帯の幅を占有させていません。） */
#pass-detail-screen .pd-head {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 12px 96px 10px;
    border-bottom: 1px solid rgba(255, 210, 122, 0.28);
    background: linear-gradient(180deg, rgba(255, 214, 122, 0.08), transparent);
}
#pass-detail-screen .pd-title {
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #ffd77a;
    text-align: center;
    min-width: 0;
    overflow-wrap: anywhere;
}
/* 他の画面の «◀ 戻る» と同じ見た目。位置だけこの帯の左上に固定する
   （.unified-back-btn は position:fixed なので、ここで上書きします） */
#pass-detail-screen .pd-back.unified-back-btn {
    position: absolute !important;
    top: 50% !important;
    left: 12px !important;
    right: auto !important;
    transform: translateY(-50%) !important;
    z-index: 2 !important;
    display: inline-flex !important;
    padding: 8px 14px !important;
    font-size: 0.86rem !important;
    max-width: 84px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    touch-action: manipulation;
}

/* ── 中身（ここだけが縦にスクロールする）───────────── */
#pass-detail-screen .pd-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* 下のすき間を他モード（過去問・模擬試験）と同じ26pxにする。
       画面852px・言語バーの上端784px なので 余白は 852-784+26 = 94px。 */
    padding: 14px 14px calc(94px + env(safe-area-inset-bottom, 0px));
}

#pass-detail-screen .pd-hero { margin: 0 auto 16px; max-width: 340px; }
#pass-detail-screen .pd-empty {
    padding: 28px 6px;
    text-align: center;
    line-height: 1.9;
    color: #dfe0ea;
    font-size: 0.95rem;
}

/* ── 節 ───────────────────────────────────────── */
#pass-detail-screen .pd-sec {
    margin: 0 0 18px;
    padding: 14px 12px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 210, 122, 0.22);
}
#pass-detail-screen .pd-sec-t {
    margin: 0 0 10px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffd77a;
    letter-spacing: 0.04em;
    text-align: center;
    overflow-wrap: anywhere;
}

/* ── 5角形レーダー ─────────────────────────────── */
#pass-detail-screen .pd-radar {
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
    margin: 0 auto;
}
#pass-detail-screen .pd-alegend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px 10px;
    margin-top: 6px;
}
#pass-detail-screen .pd-alg {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.76rem;
    line-height: 1.3;
    color: #dcd6ea;
    min-width: 0;
    overflow-wrap: anywhere;
}
#pass-detail-screen .pd-alg-i { font-size: 0.9rem; }

/* ── 科目バー ─────────────────────────────────── */
#pass-detail-screen .pd-scale {
    display: flex;
    justify-content: flex-end;
    margin: -4px 0 8px;
}
#pass-detail-screen .pd-scale-l {
    font-size: 0.7rem;
    color: #9a93ad;
    border-left: 2px solid rgba(255, 255, 255, 0.35);
    padding-left: 6px;
}
#pass-detail-screen .pd-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#pass-detail-screen .pd-row {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    padding: 8px 10px 7px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
#pass-detail-screen .pd-row:active { background: rgba(255, 255, 255, 0.1); }
@media (hover: hover) and (pointer: fine) {
    #pass-detail-screen .pd-row:hover { background: rgba(255, 255, 255, 0.09); }
}

#pass-detail-screen .pd-row-1 {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
#pass-detail-screen .pd-ic { flex: 0 0 auto; font-size: 1rem; }
#pass-detail-screen .pd-nm {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
    color: #f2eefb;
}
#pass-detail-screen .pd-chip {
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid;
    background: rgba(0, 0, 0, 0.25);
    white-space: nowrap;
}
#pass-detail-screen .pd-pct {
    flex: 0 0 auto;
    min-width: 38px;
    text-align: right;
    font-size: 0.9rem;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

/* 棒（トラック）。合格ラインを 60% のところに細い線で入れる */
#pass-detail-screen .pd-track {
    position: relative;
    display: block;
    height: 8px;
    margin: 6px 0 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
    overflow: hidden;
}
#pass-detail-screen .pd-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    min-width: 0;
}
#pass-detail-screen .pd-line60 {
    position: absolute;
    left: 60%;
    top: -2px;
    bottom: -2px;
    width: 2px;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 2px;
}
/* 未着手は «塗らない» ことでも区別する（色だけに頼らない） */
#pass-detail-screen .pd-blind .pd-track {
    background: repeating-linear-gradient(90deg,
        rgba(255, 255, 255, 0.10) 0 5px, transparent 5px 10px);
}

#pass-detail-screen .pd-row-2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
#pass-detail-screen .pd-cnt {
    font-size: 0.72rem;
    color: #a9a2bd;
    font-variant-numeric: tabular-nums;
}
#pass-detail-screen .pd-go { font-size: 0.72rem; color: #ffd77a; }

#pass-detail-screen .pd-hint {
    margin: 10px 2px 0;
    font-size: 0.75rem;
    line-height: 1.6;
    color: #a9a2bd;
    text-align: center;
    overflow-wrap: anywhere;
}

/* ── パソコン画面では 中央に落ち着いた幅で ─────────── */
@media (min-width: 601px) {
    #pass-detail-screen .pd-scroll {
        padding: 20px 20px 40px;
    }
    #pass-detail-screen .pd-scroll > * { max-width: 560px; margin-left: auto; margin-right: auto; }
    #pass-detail-screen .pd-radar { max-width: 340px; }
}

/* 大きなメーターは既存の pass_meter.css の作りをそのまま使うため、
   中身を入れた時点で class が pm-card に置きかわります。
   そのため «.pd-hero» ではなく «#pd-hero» で指定します。 */
/* シートの見出しに «合格可能性» と出ているので、中の見出しは重複 → 隠す */
#pass-detail-screen #pd-hero .pm-title { display: none !important; }
#pass-detail-screen #pd-hero { padding-top: 14px; }
/* 円は少し小さく。1画面目にレーダーの頭が見えるようにして
   «下にもっとある» ことが分かるようにします（200px → 156px）。 */
#pass-detail-screen #pd-hero .pm-gauge { width: 156px; height: 156px; max-width: 52vw; }


/* ── 📣 報告ボタンを このシートでも出す ───────────────────
   #feedback-fab は body.is-title-screen のとき隠れる作りです。
   このシートはトップから開くので目印が残ったままになり、
   報告ボタンが出ていませんでした。開いている間は必ず出します。 */
html body.pd-open #feedback-fab {
    display: flex !important;
}

/* いちばん下の節の «下マージン18px» が余分に効いて、
   言語バーとのすき間が 26px → 44px になっていたので打ち消す。 */
#pass-detail-screen .pd-scroll > *:last-child { margin-bottom: 0 !important; }

/* ============================================================
   2026-08-19 追加：①ふりがな(rt)の視認性 ②モード選択ダイアログ
   （ふりがな・選択機能はPC/スマホ共通。文字サイズの拡大は
     mobile_v1.css の m77 でスマホのみ）
   ============================================================ */
#pass-detail-screen rt,
#pd-choose rt {
    font-size: 0.52em;
    color: #ffe9b0;
    font-weight: 700;
    opacity: 1;
    letter-spacing: 0;
}
#pass-detail-screen ruby,
#pd-choose ruby { ruby-position: over; }

#pd-choose {
    position: fixed;
    inset: 0;
    z-index: 100010;
    background: rgba(6, 4, 16, 0.62);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
#pd-choose .pd-choose-card {
    width: min(340px, 92vw);
    background: radial-gradient(120% 120% at 50% 0%, #241d33 0%, #16121f 60%, #0e0b16 100%);
    border: 1.5px solid rgba(255, 210, 122, 0.55);
    border-radius: 18px;
    padding: 18px 16px 14px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.6);
    text-align: center;
}
#pd-choose .pd-choose-subj {
    font-size: 1.05rem;
    font-weight: 800;
    color: #ffe6a8;
    margin-bottom: 6px;
    line-height: 1.7;
}
#pd-choose .pd-choose-t {
    font-size: 0.92rem;
    color: #d9cfe8;
    margin-bottom: 12px;
    line-height: 1.7;
}
#pd-choose .pd-choose-btn {
    display: block;
    width: 100%;
    margin: 8px 0;
    padding: 13px 10px;
    border-radius: 12px;
    border: 1.5px solid #3b82f6;
    background: linear-gradient(180deg, #1e3a8a, #172a63);
    color: #fff;
    font-size: 1.06rem;
    font-weight: 800;
    cursor: pointer;
    line-height: 1.6;
}
#pd-choose .pd-choose-btn.pd-choose-rpg {
    border-color: #d9a94a;
    background: linear-gradient(180deg, #6d28d9, #4c1d95);
}
#pd-choose .pd-choose-cancel {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 9px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: transparent;
    color: #bdb3cf;
    font-size: 0.9rem;
    cursor: pointer;
}