/* ============================================================
   POEM — 読み物用の縦フルシェル
   左：カテゴリ付きのタイトル索引 / 右：本文（文字サイズ可変）
   色・ボタン・パネルの基本は theme.css に従う。ここには
   このページにしかない部品だけを書く。
   ============================================================ */

:root {
    /* 本文専用の日本語ゴシック。実体は theme.css の --font-read（POLICY と共通） */
    --font-poem: var(--font-read);

    /* 作品タイトルと INDEX 用。本文以外はマルミーニャに揃える。
       マルミーニャと PixelMplus12 に無い文字だけ本文フォントへ逃がしたいので、
       theme.css の --font-body（フォールバックが等幅）ではなくここで組み直す。
       マルミーニャは 12px 設計なので、使う側の font-size は 12 の倍数だけにすること。 */
    --font-ui-jp: 'MaruMinya', 'PixelMplus12', 'M PLUS 2', 'Noto Sans JP', sans-serif;
    /* 選択中のポエムのテーマカラー。JS が #poem-content-side に上書きする */
    --c: var(--border);
    /* 未選択のカラーボックスの色。形は保ったまま色だけ抜く */
    --swatch-off: #a4adb8;
    /* 本文の文字サイズ。S/M/L ボタンが切り替える */
    --poem-fs: 18px;
}

/* ── 画面いっぱいのシェル ──
   body の直の子は [topbar(menu.js) / mobile-nav(menu.js) / site-header /
   page-content / script]。page-content だけを伸ばして中でスクロールさせる。 */
body.poem-app {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
body.poem-app > * { flex: none; }

body.poem-app .page-content.wide {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: 1600px;
    padding: 14px 20px 18px;
    display: flex;
}

#poem-container {
    flex: 1;
    display: flex;
    gap: 16px;
    min-height: 0;
}

/* ── 左：索引 ── */
#poem-list-side {
    width: 290px;
    flex: none;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    background: var(--panel);
    border-radius: var(--radius);
    overflow: hidden;
}

.side-head {
    flex: none;
    font-family: var(--font-heading);
    font-size: 8px;
    letter-spacing: 2px;
    color: var(--accent);
    background: var(--panel2);
    border-bottom: 1px solid var(--border);
    padding: 6px 10px;
}

#poem-index {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 6px 10px;
}

/* ── カテゴリ（開閉） ── */
.cat { border-bottom: 1px dotted var(--border2); }
.cat:last-child { border-bottom: none; }

.cat-summary {
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding: 7px 6px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.cat-summary::-webkit-details-marker { display: none; }
.cat-summary:hover { background: var(--hover); }

/* font-weight は付けない。マルミーニャはビットマップ調なので
   中間ウェイトを指定すると合成ボールドがかかって輪郭が滲む */
.cat-ja  { font-family: var(--font-ui-jp); font-size: 12px; color: var(--text); }
.cat-en  { font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: 1px; color: var(--sub); }
.cat-count { font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--sub); margin-left: auto; }

/* 開閉の目印。FOLDER.png は 16x16 の等倍ドット絵なので、そのまま 1 倍の
   16px で出す。回転させるとドットが崩れるので、閉じている側を薄くして示す。 */
.cat-folder {
    width: 16px;
    height: 16px;
    flex: none;
    align-self: center;
    image-rendering: pixelated;
    opacity: 0.5;
    transition: opacity 0.12s;
}
.cat[open] > .cat-summary .cat-folder { opacity: 1; }

.cat-body { padding: 2px 0 6px; }

/* ── タイトル1件 ──
   未選択はカラーボックスをグレーに落とす。ホバーと選択中だけ本来の色が戻る。
   色が点くこと自体を「いま触れている／選んでいる」の合図にしている。 */
.poem-link {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-left: 8px;
    padding: 5px 6px 5px 8px;
    border-left: 2px solid transparent;
    font-family: var(--font-ui-jp);
    font-size: 12px;
    line-height: 20px;
    color: var(--sub);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    /* JS が入れるのは --theme のほう。描画に使う --c はここで差し替える */
    --c: var(--swatch-off);
}
.poem-link:hover {
    --c: var(--theme);
    background: var(--hover);
    color: var(--text);
}
.poem-link.active {
    --c: var(--theme);
    background: var(--hover);
    color: var(--text);
    border-left-color: var(--c);
}

/* ── テーマカラーのボックス（PIXEL INSET GEM +GLINT） ──
   外周1pxの枠＋内側に「左上=影／右下=光」の1pxバンドで窪んで見せ、
   右下に 2x2 の底光りを置く。ハードストップだけで作ってあるので
   アンチエイリアスが一切かからず、サイトのドット絵素材と語彙が揃う。

   --px を必ず整数pxに保つため、--size は 12 の倍数だけにすること。
   半端な値にするとバンドが小数pxになって滲む。

   色は --c だけから決まる。transition は付けない
   （--c が変わったとき background が古い値で固まって色が戻らなくなる）。 */
.swatch {
    --size: 12px;
    --px: calc(var(--size) / 12);
    position: relative;
    width: var(--size);
    height: var(--size);
    flex: none;
    background: color-mix(in srgb, var(--c) 34%, #000);
}
.swatch::before {
    content: '';
    position: absolute;
    inset: var(--px);
    background: var(--c);
    box-shadow:
        /* 左上：落ち込みの影 */
        inset var(--px) var(--px) 0 0 color-mix(in srgb, var(--c) 72%, #000),
        /* 右下：底から返ってくる光 */
        inset calc(var(--px) * -1) calc(var(--px) * -1) 0 0 color-mix(in srgb, var(--c) 46%, #fff);
}
.swatch::after {
    /* 窪みの底に溜まる 2x2 の光 */
    content: '';
    position: absolute;
    right: calc(var(--px) * 2);
    bottom: calc(var(--px) * 2);
    width: calc(var(--px) * 2);
    height: calc(var(--px) * 2);
    background: color-mix(in srgb, var(--c) 12%, #fff);
}

/* 索引の行では文字のベースラインに合わせて少し下げる */
.poem-link .swatch { margin-top: 3px; }

/* ── 右：本文 ── */
#poem-content-side {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    padding: 12px 18px 0;
}

#poem-toolbar {
    flex: none;
    display: flex;
    align-items: flex-end;
    gap: 20px;
    padding-bottom: 9px;
    /* 選択中のポエムのテーマカラーが一本線として出る */
    border-bottom: 2px solid var(--c);
    transition: border-color 0.15s;
}

#poem-heading {
    display: flex;
    /* 長いタイトルは折り返すので、ボックスは中央ではなく1行目に揃える */
    align-items: flex-start;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
/* 見出し側も同じボックス。実寸のちょうど2倍にして 1px バンドを 2px で出す
   （16px のような半端な倍率だとバンドが小数pxになって滲む）。
   margin-top は 24px/32px の行ボックスの中でボックスを1行目の中心に置く分。 */
.swatch-lg { --size: 24px; margin-top: 4px; }
.heading-text { min-width: 0; }
.t-ja {
    font-family: var(--font-ui-jp);
    /* マルミーニャは 12px 設計。16px だと 1.33 倍になってドットが潰れるので、
       ちょうど2倍の 24px にする。24px の .swatch-lg とも高さが揃う。 */
    font-size: 24px;
    line-height: 32px;
    color: var(--text);
}
.t-en {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 1px;
    color: var(--sub);
    margin-top: 3px;
}

/* ── S / M / L ── */
.size-ctrl {
    flex: none;
    display: flex;
    align-items: center;
    gap: 4px;
}
.size-label {
    font-family: var(--font-heading);
    font-size: 8px;
    letter-spacing: 2px;
    color: var(--sub);
    margin-right: 4px;
}
.size-btn {
    width: 28px;
    height: 24px;
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 16px;
    cursor: pointer;
    transition: background 0.1s;
}
.size-btn:hover { background: var(--hover); }
.size-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent2);
}

/* ── 本文 ── */
#poem-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 26px 0 64px;
}

#poem-display {
    /* 画面は広く取るが、行長そのものは em で頭打ちにする。
       幅いっぱいに文字を流すと目が行を見失って逆に読めなくなる。
       em 指定なので S/M/L を変えても1行の文字数は変わらない。 */
    max-width: 38em;
    margin: 0 auto;
    font-family: var(--font-poem);
    font-size: var(--poem-fs);
    font-weight: 400;
    line-height: 2.05;
    letter-spacing: 0.04em;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    color: var(--text);
}

.placeholder {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 24px;
    letter-spacing: 1px;
    color: var(--sub);
}

/* ── モバイル ──
   100vh 固定を解いて素直に縦スクロールさせる。
   スマホの動的アドレスバーで下が切れるのを避けるため。 */
@media (max-width: 720px) {
    body.poem-app { height: auto; display: block; overflow: visible; }
    body.poem-app .page-content.wide { display: block; padding: 12px; }

    #poem-container { flex-direction: column; gap: 12px; }
    #poem-list-side { width: 100%; max-height: 42vh; }
    #poem-content-side { padding: 12px 14px 0; }

    #poem-toolbar { flex-wrap: wrap; gap: 10px; }
    #poem-heading { flex-basis: 100%; }
    .size-ctrl { margin-left: auto; }

    #poem-scroll { overflow: visible; padding: 18px 0 24px; }
    #poem-display { max-width: 100%; }
}