/* paper_shell.css — 論文ページの共通シェル
   PC: 左右2ペイン（各ペインが独立したタブと独立スクロールを持つ）
   スマホ: 1ペイン（タブ・進捗・目次・続きから読む・対訳モード）
   閲覧と編集は「ペインのモード」の違いであって別ページではない。 */

:root { --ps-font: 1rem; --ps-head-h: 44px; }

/* 本文の読み幅。1カラム1258pxのような間延びを防ぐ */
.ps-content .md { font-size: var(--ps-font); max-width: 76ch; }
.ps-content .md.md-wide { max-width: none; }

/* 機械的な前置き（「翻訳対象の本文全体を…」）は畳む */
.ps-preamble {
    font-size: .75rem;
    color: #9aa0a6;
    background: #f6f6f8;
    border-radius: 6px;
    padding: 4px 8px;
    margin-bottom: 10px;
}

/* ── シェル本体 ───────────────────────────────── */
/* 組み立て前の旧レイアウトを見せない（JSが無ければクラスが付かず通常表示） */
html.ps-boot .container { visibility: hidden; }

body.ps-on { padding: 0; overflow: hidden; }
body.ps-on .container { max-width: none; padding: 0; }

.ps-root {
    display: flex;
    flex-direction: column;
    height: 100vh;
    box-sizing: border-box;
    padding-bottom: var(--ps-ad-h, 0px);   /* 下部固定の広告ぶんを確保 */
}

/* 圧縮ヘッダ（1行） */
.ps-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: #fff;
    border-bottom: 1px solid #dee2e6;
    flex-shrink: 0;
    min-height: var(--ps-head-h);
}
.ps-head .ps-back { flex: 0 0 auto; text-decoration: none; font-size: .9rem; }
.ps-head .ps-title {
    flex: 1;
    min-width: 0;
    font-size: .98rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.ps-head .ps-headacts { flex: 0 0 auto; display: flex; gap: 6px; align-items: center; }
.ps-head .ps-headacts a, .ps-head .ps-headacts button {
    border: 1px solid #ced4da;
    background: #fff;
    border-radius: 999px;
    padding: 4px 11px;
    font-size: .78rem;
    color: #333;
    text-decoration: none;
    line-height: 1.5;
    white-space: nowrap;
}
.ps-head .ps-headacts button:hover, .ps-head .ps-headacts a:hover { background: #eef1ff; }
.ps-more.ps-active { background: #e7e0ff; border-color: #b9a6ff; }

/* 詳細（サムネ・全ボタン・ステータス）は既定で畳む */
#paperHeadExtra {
    display: none;
    padding: 10px 14px;
    background: #fff;
    border-bottom: 1px solid #dee2e6;
    max-height: 46vh;
    overflow-y: auto;
}
#paperHeadExtra.ps-open { display: block; }

/* ペイン領域 */
.ps-body { flex: 1; display: flex; min-height: 0; background: #f7f7f9; }
.ps-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; flex: 1 1 50%; }
.ps-pane.ps-collapsed { display: none; }

/* ペインヘッダ＝タブ＋そのペインへの操作 */
.ps-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    background: #f0f0f3;
    border-bottom: 1px solid #dee2e6;
    overflow-x: auto;
    white-space: nowrap;
    flex-shrink: 0;
}
.ps-tab {
    flex: 0 0 auto;
    font-size: .82rem;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid #ced4da;
    background: #fff;
    color: #333;
    cursor: pointer;
}
.ps-tab:hover { background: #e9ecef; }
.ps-tab.active { background: #0d6efd; color: #fff; border-color: #0d6efd; }
.ps-tab.ps-locked { color: #999; border-style: dashed; cursor: pointer; }
.ps-tab[disabled] { opacity: .45; cursor: not-allowed; }
.ps-acts {
    position: sticky;
    right: 0;
    margin-left: auto;
    flex: 0 0 auto;
    display: flex;
    gap: 4px;
    align-items: center;
    background: #f0f0f3;
    padding-left: 6px;
    box-shadow: -8px 0 8px -6px rgba(0,0,0,.12);
}
.ps-acts button, .ps-acts a {
    border: 1px solid #ced4da;
    background: #fff;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: .78rem;
    color: #333;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.5;
}
.ps-acts .ps-edit { border-color: #0d6efd; color: #0d6efd; }
.ps-acts .ps-save { background: #198754; border-color: #198754; color: #fff; }
.ps-acts .ps-save[disabled] { opacity: .5; }

/* ペイン本文（独立スクロール） */
.ps-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 18px 40px;
    background: #fff;
    position: relative;
}
.ps-pane[data-side="right"] .ps-content { border-left: 1px solid #dee2e6; }

/* PDFのように中身が自前でスクロールする場合は、ペインの高さいっぱいに広げる。
   details > .sec-body > .qa-pdf-viewer と入れ子が深いので、途中も全部伸ばす。
   スマホはページ全体が伸びる作り（.ps-root が height:auto）で高さが確定しない
   ため対象外。あちらは .qa-pdf-pages の 74vh をそのまま使う。 */
@media (min-width: 769px) {
    .ps-content.ps-content-fill { padding: 0; overflow: hidden; }
    /* details の中を flex で伸ばす手は使えない。Chrome 131以降の <details> は
       中身が ::details-content という箱に包まれ、そこで flex の連鎖が切れるため。
       .ps-content(position:relative) に対する絶対配置で確実に埋める。 */
    .ps-content.ps-content-fill .qa-pdf-viewer {
        position: absolute; inset: 0; display: flex; flex-direction: column;
    }
    .ps-content.ps-content-fill .qa-pdf-pages { flex: 1; min-height: 0; height: auto; }
}
.ps-content > details { border: none; background: transparent; margin: 0; }
.ps-content > details > summary { display: none; }
.ps-content .sec-body { padding: 0; }
.ps-empty { color: #999; font-size: .88rem; padding: 30px 6px; }

/* リサイザ */
.ps-resizer {
    flex: 0 0 6px;
    cursor: col-resize;
    background: #e6e6ea;
    border-left: 1px solid #dcdce2;
    border-right: 1px solid #dcdce2;
}
.ps-resizer:hover, body.ps-resizing .ps-resizer { background: #b9a6ff; }
body.ps-resizing { user-select: none; cursor: col-resize; }
body.ps-resizing iframe, body.ps-resizing canvas { pointer-events: none; }

/* 編集モード */
.ps-editor {
    width: 100%;
    height: 100%;
    min-height: 300px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    padding: 12px 14px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .88rem;
    line-height: 1.7;
    resize: none;
}
.ps-pane.ps-editing .ps-content { padding: 10px 12px; display: flex; flex-direction: column; }
.ps-editstate { font-size: .75rem; color: #888; margin-top: 6px; min-height: 1.2em; flex-shrink: 0; }
.ps-editstate.ps-dirty { color: #b45309; }
.ps-editstate.ps-saved { color: #198754; }
.ps-editstate.ps-error { color: #dc3545; }

/* 広告（非ログインのみ）。シェルの外＝bodyの直下に固定配置する。
   AdSenseは祖先に height:auto !important を差し込むので、シェルの中に
   入れるとペインの内部スクロールが壊れる。 */
.ps-ad {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    background: #f7f7f9;
    border-top: 1px solid #dee2e6;
    padding: 6px 10px 8px;
    text-align: center;
}
.ps-ad-label { font-size: .7rem; color: #999; margin-bottom: 2px; }

/* ── スマホ（1ペイン＋読書支援） ───────────────────── */
.pm-tools, .pm-footnav, .pm-sheet, .pm-resume, .ps-splitbar { display: none; }

@media (max-width: 768px) {
    body.ps-on { overflow: auto; }
    .ps-root { padding-bottom: 0; }
    .ps-ad { position: static; }        /* スマホは本文の後ろに置く */
    .ps-root { height: auto; min-height: 100vh; }
    .ps-head { position: sticky; top: 0; z-index: 30; }
    .ps-head .ps-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2;
                         -webkit-box-orient: vertical; overflow: hidden; font-size: .9rem; }
    .ps-head .ps-title.ps-expanded { -webkit-line-clamp: unset; }
    .ps-body { display: block; }
    .ps-pane { display: block; }
    .ps-pane[data-side="right"] { display: none; }        /* スマホは1ペイン */
    .ps-resizer { display: none; }
    .ps-tabs { position: sticky; top: var(--ps-head-h); z-index: 25; }
    .ps-content { overflow: visible; padding: 12px 14px 30px; }
    .ps-pane[data-side="right"] .ps-content { border-left: none; }

    /* 対訳モード: 上下2分割（和訳↔原文/PDF） */
    body.ps-pair .ps-body { display: flex; flex-direction: column; }
    body.ps-pair .ps-pane { display: flex; flex-direction: column; }
    body.ps-pair .ps-pane[data-side="right"] { display: flex; }
    body.ps-pair .ps-pane .ps-content { overflow-y: auto; }
    body.ps-pair .ps-pane[data-side="left"] { height: 45vh; }
    body.ps-pair .ps-pane[data-side="right"] { flex: 1; min-height: 30vh; }
    body.ps-pair .ps-splitbar {
        display: block;
        height: 8px;
        background: #b9a6ff;
        cursor: row-resize;
        touch-action: none;
        flex-shrink: 0;
    }

    /* 読書支援 */
    .pm-tools {
        display: flex;
        position: sticky;
        right: 0;
        margin-left: auto;
        flex: 0 0 auto;
        align-items: center;
        gap: 4px;
        background: #f0f0f3;
        padding-left: 6px;
        box-shadow: -8px 0 8px -6px rgba(0,0,0,.12);
    }
    .pm-tools button {
        border: 1px solid #ced4da;
        background: #fff;
        border-radius: 999px;
        padding: 5px 9px;
        font-size: .8rem;
        line-height: 1.4;
    }
    #readBar { height: 3px; background: #e3e3e8; position: sticky;
               top: calc(var(--ps-head-h) + 40px); z-index: 24; }
    #readProgress { height: 100%; width: 0; background: #0d6efd; transition: width .1s linear; }

    .pm-footnav { display: flex; gap: 8px; justify-content: space-between;
                  align-items: center; padding: 16px 4px 28px; }
    .pm-footnav button { border: 1px solid #ced4da; background: #fff; border-radius: 999px;
                         padding: 9px 16px; font-size: .85rem; color: #333; }
    .pm-footnav .pm-next { background: #0d6efd; border-color: #0d6efd; color: #fff; }

    .pm-sheet {
        display: block;
        position: fixed; left: 0; right: 0; bottom: 0;
        max-height: 70vh; overflow-y: auto;
        background: #fff; border-radius: 14px 14px 0 0;
        box-shadow: 0 -6px 24px rgba(0,0,0,.25);
        z-index: 3500;
        padding: 8px 0 calc(env(safe-area-inset-bottom, 0px) + 12px);
        transform: translateY(101%); transition: transform .2s ease;
    }
    .pm-sheet.pm-open { transform: translateY(0); }
    .pm-sheet-head { display: flex; align-items: center; justify-content: space-between;
                     padding: 8px 16px; font-weight: 700; font-size: .9rem; border-bottom: 1px solid #eee; }
    .pm-sheet-head button { border: none; background: transparent; font-size: 20px; }
    .pm-sheet-font { display: flex; align-items: center; gap: 2px; }
    .pm-sheet-font .pm-font-dec, .pm-sheet-font .pm-font-inc {
        border: 1px solid #ced4da; border-radius: 999px; padding: 3px 10px; font-size: .8rem; background: #fff; }
    .pm-sheet-item { display: block; width: 100%; text-align: left; border: none; background: transparent;
                     padding: 11px 16px; font-size: .88rem; color: #222; border-bottom: 1px solid #f2f2f4; }
    .pm-sheet-item.lv2 { padding-left: 30px; font-size: .84rem; color: #444; }
    .pm-sheet-item.lv3 { padding-left: 44px; font-size: .8rem; color: #666; }
    .pm-sheet-empty { padding: 14px 16px; font-size: .82rem; color: #888; }
    .pm-sheet-jump { display: flex; gap: 6px; padding: 10px 16px; flex-wrap: wrap; }
    .pm-sheet-jump button { flex: 1 1 auto; border: 1px solid #ced4da; background: #fff;
                            border-radius: 999px; padding: 8px 4px; font-size: .82rem; color: #333; }

    .pm-resume {
        display: flex;
        position: fixed; left: 10px; right: 10px;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 76px);
        z-index: 3050; align-items: center; gap: 10px;
        background: #212529; color: #fff; border-radius: 10px;
        padding: 10px 12px; font-size: .84rem; box-shadow: 0 6px 20px rgba(0,0,0,.3);
    }
    .pm-resume button { border: none; border-radius: 6px; padding: 6px 12px; font-size: .82rem;
                        background: #0d6efd; color: #fff; }
    .pm-resume .pm-resume-x { background: transparent; color: #aaa; padding: 6px 4px; }

    body.ps-on #qaToggle { transition: opacity .2s; }
    body.ps-on.pm-scrolling #qaToggle { opacity: .35; }
    .ps-editor { min-height: 60vh; }
}

/* スマホ: ペイン操作を ⋮ メニューへ（タブ列の幅を奪わない） */
.ps-actsmenu-wrap { position: relative; display: inline-block; }
.ps-actsmenu-btn {
    border: 1px solid #ced4da; background: #fff; border-radius: 999px;
    padding: 5px 9px; font-size: .85rem; line-height: 1.4;
}
.ps-actsmenu {
    display: none;
    position: absolute; right: 0; top: 110%;
    background: #fff; border: 1px solid #dee2e6; border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,.2); padding: 6px; z-index: 40;
    min-width: 150px;
}
.ps-actsmenu.ps-open { display: flex; flex-direction: column; gap: 4px; }
.ps-actsmenu > * {
    display: block; width: 100%; text-align: left;
    border: 1px solid #e5e5ea; background: #fff; border-radius: 6px;
    padding: 8px 10px; font-size: .85rem; color: #333; text-decoration: none; white-space: nowrap;
}

/* ── 見出しナビ（現在地バー＋前後移動＋一覧） ───────────── */
.ps-hnav {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 8px;
}
.ps-hnav button {
    border: 1px solid #ced4da;
    background: #fff;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: .76rem;
    color: #444;
    cursor: pointer;
    line-height: 1.5;
}
.ps-hnav button:hover { background: #eef1ff; }
.ps-hnav .ps-hcur {
    max-width: 15em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 4px 11px;
}
.ps-hmenu {
    position: fixed;
    z-index: 3600;
    max-height: 60vh;
    overflow-y: auto;
    min-width: 240px;
    max-width: min(420px, 92vw);
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.22);
    padding: 6px;
}
.ps-hmenu-item {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: .85rem;
    color: #222;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ps-hmenu-item:hover { background: #f1f3f9; }
.ps-hmenu-item.ps-now { background: #e7f1ff; font-weight: 600; }
.ps-hmenu-empty { padding: 10px 12px; font-size: .8rem; color: #888; }
.ps-hmenu-jump { display: flex; gap: 6px; padding: 6px; flex-wrap: wrap; }
.ps-hmenu-jump button {
    flex: 1 1 auto; border: 1px solid #ced4da; background: #fff;
    border-radius: 999px; padding: 7px 4px; font-size: .8rem; color: #333; cursor: pointer;
}
/* ジャンプ先の着地点を短く光らせる */
.ps-heading { scroll-margin-top: 8px; }
.ps-heading.ps-hflash {
    background: #fff3cd;
    border-radius: 4px;
    transition: background .4s;
}

/* ── ブラウザズーム時の固定UIの追従（--vv-* は paper_shell.js が更新） ── */
.qa-selbar.touch,
#qaToggle,
.qa-popover,
.pm-resume {
    transform: translate(var(--vv-dx, 0px), var(--vv-dy-bottom, 0px));
}
/* シートは開閉自体を transform で行うので、追従分を合成して指定する */
.pm-sheet, .ps-sheet {
    transform: translate(var(--vv-dx, 0px), calc(var(--vv-dy-bottom, 0px) + 101%));
}
.pm-sheet.pm-open, .ps-sheet.pm-open {
    transform: translate(var(--vv-dx, 0px), var(--vv-dy-bottom, 0px));
}
.qa-popover { transform-origin: bottom left; }

@media (max-width: 768px) {
    /* ── 指で押せる大きさ（44px）を確保する。見た目は小さいまま当たり判定を広げる ── */
    body.ps-on .ps-tab,
    body.ps-on .pm-tools button,
    body.ps-on .ps-actsmenu-btn,
    body.ps-on .ps-head .ps-headacts a,
    body.ps-on .ps-head .ps-headacts button,
    body.ps-on .ps-acts button,
    body.ps-on .ps-acts a,
    body.ps-on .ps-hnav button {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    body.ps-on .ps-tabs { padding: 4px 8px; }
    body.ps-on .qa-pdf-toolbar button,
    body.ps-on .qa-pdf-toolbar .qa-pdf-open {
        min-height: 40px;
        min-width: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* D-1: スマホは現在地チップだけ出す（タブ列の横スクロールを廃止） */
@media (max-width: 768px) {
    body.ps-on .ps-hnav .ps-hcur { max-width: 5.5em; padding: 4px 8px; }
    body.ps-on .ps-hnav { gap: 0; margin-left: 4px; }
    body.ps-on .ps-tabs { gap: 2px; }
    body.ps-on .ps-secchip {
        font-size: .9rem;
        font-weight: 600;
        padding: 6px 14px;
        max-width: 58vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    body.ps-on .ps-tabs { overflow: visible; }
    .ps-sheet .pm-sheet-item.ps-now { background: #e7f1ff; font-weight: 700; }
    .ps-sheet .pm-sheet-item { padding: 14px 18px; font-size: .92rem; }
}