/* 公開専用ビューのスタイル（要件定義書 §4.4）。
   編集用の app.css とは独立させています——編集用クロームの分岐や状態クラスを
   持ち込まないことが、この体裁の目的そのものだからです。
   本文に出てくる要素（見出し・段落・表・定義リスト・画像・計算ビュー）だけを整えます。 */

:root {
    --pub-text: #1f2937;
    --pub-muted: #6b7280;
    --pub-border: #e5e7eb;
    --pub-link: #1d4ed8;
    --pub-bg: #ffffff;
    --pub-radius: 6px;
}

* { box-sizing: border-box; }

body.public {
    margin: 0;
    background: var(--pub-bg);
    color: var(--pub-text);
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    line-height: 1.8;
    font-size: 16px;
}

.public-content {
    max-width: 46rem;
    margin: 0 auto;
    padding: 32px 20px 64px;
}

.public-content h1 {
    font-size: 1.9rem;
    line-height: 1.35;
    margin: 0 0 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pub-border);
}
.public-content h2 { font-size: 1.45rem; margin: 40px 0 12px; }
.public-content h3 { font-size: 1.2rem; margin: 32px 0 10px; }

.public-content p { margin: 0 0 16px; }
.public-content ul,
.public-content ol { margin: 0 0 16px; padding-left: 1.5em; }
.public-content li { margin: 4px 0; }

.public-content a { color: var(--pub-link); }

/* 画像は原寸のまま出すと横スクロールが起きるので枠に収める（縦横比は保つ）。 */
.public-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--pub-radius);
}

/* 表は狭い画面で溢れるので、表だけを横スクロールさせる（ページ全体は揺らさない）。 */
.public-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 20px;
    display: block;
    overflow-x: auto;
}
.public-content th,
.public-content td {
    border: 1px solid var(--pub-border);
    padding: 6px 10px;
    text-align: left;
    vertical-align: top;
}
.public-content th { background: #f9fafb; font-weight: 600; }

.public-content dl { margin: 0 0 20px; }

/* 素の dl（名前：値）は対ごとに1行・名前と値は横並び（エディタ側と同じ見た目。2026-08-31）。 */
.public-content dl:not([data-type]) {
    display: grid;
    /* 値の列は minmax(0, …)（素の max-content/auto は縮まないので、折り返せない
       長い値が親をはみ出す。編集側 app.css と同じ手当て） */
    grid-template-columns: max-content minmax(0, auto);
    column-gap: 4px;
    row-gap: 4px;
    align-items: baseline;
    margin: 8px 0 20px;
}
.public-content dl:not([data-type]) dt {
    grid-column: 1;
    margin: 0;
    color: #64748b;
    font-weight: normal;
    font-size: 13px;
}
.public-content dl:not([data-type]) dt::after {
    content: '：';
}
.public-content dl:not([data-type]) dd {
    grid-column: 2;
    justify-self: start;
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.public-content dl:not([data-type]) dd:hover {
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
}
.public-content dt { font-weight: 600; color: var(--pub-muted); margin-top: 10px; }
.public-content dd { margin: 0 0 4px 1em; }

/* 可変タグはチップ表示（編集側 app.css と同じ見え方。名前：値で1つのタグ） */
.public-content dl[data-type="tags"] {
    display: flex;
    flex-wrap: wrap;
    row-gap: 6px;
}
.public-content dl[data-type="tags"] dt,
.public-content dl[data-type="tags"] dd {
    margin: 0;
    padding: 2px 10px;
    border: 1px solid var(--pub-border);
    line-height: 1.6;
}
.public-content dl[data-type="tags"] dt {
    background: #dbeafe;
    color: var(--pub-muted);
    border-radius: var(--pub-radius) 0 0 var(--pub-radius);
    border-right: none;
    font-weight: normal;
}
.public-content dl[data-type="tags"] dd {
    background: var(--pub-bg);
    border-radius: 0 var(--pub-radius) var(--pub-radius) 0;
    margin-right: 8px;
    /* 折り返せない長い値（Message-ID など。2026-10-09 まではタグの名前が「メッセージID」）は1行に収めて末尾を `…` にする。
       マウスを載せているあいだだけ折り返して全部見せる（2026-09-04）。 */
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.public-content dl[data-type="tags"] dd:hover {
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* 業務ブロック（発注書など）の枠。編集モードの破線枠は出さない（読む人には無関係）。 */
.public-content section[data-type] {
    margin: 0 0 24px;
}

/* サーバー事前描画の計算ビュー（子ページ一覧・手配集計）。
   contenteditable="false" が付いたまま届くが、公開側では意味を持たない。 */
.public-content .vocab-chrome { margin: 0 0 20px; }
.public-content .child-list { list-style: none; padding-left: 0; }
.public-content .child-list li { margin: 6px 0; }
.public-content .child-list-empty,
.public-content .w-view-empty,
.public-content .view-error { color: var(--pub-muted); }

.public-content blockquote {
    margin: 0 0 16px;
    padding: 4px 0 4px 16px;
    border-left: 3px solid var(--pub-border);
    color: var(--pub-muted);
}

.public-content pre,
.public-content code {
    font-family: Consolas, Menlo, monospace;
    font-size: 0.92em;
}
.public-content pre {
    background: #f9fafb;
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius);
    padding: 12px;
    /* 平文メールの本文が pre で入るので、**折り返す**（横スクロールにしない）。
       公開側は元から枠で囲んであるので、タグ・本文・添付の境目はこれで足ります。 */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.public-footer {
    max-width: 46rem;
    margin: 0 auto;
    padding: 16px 20px 40px;
    border-top: 1px solid var(--pub-border);
    color: var(--pub-muted);
    font-size: 0.85rem;
}
.public-footer a { color: var(--pub-muted); }

/* 一般の訪問者にも意味の分かるエラー画面（要件 §4.4）。 */
.public-error { text-align: center; padding: 48px 0; }
.public-error h1 { border: none; font-size: 1.5rem; }
.public-error p { color: var(--pub-muted); }

/* 参照タグ: 指す先の無い参照は薄い赤の背景（エディタ側と同じ意味。2026-08-31） */
.public-content .ref-missing {
    background: #fee2e2;
    border-radius: 4px;
    padding: 0 4px;
}

/* 見出し（th）は短いラベルなので折らない（エディタ側と同じ方針。2026-09-01） */
.public-content table th { white-space: nowrap; }

/* 狭い画面では表が自分の中で横スクロールする（エディタ側と同じ方針。2026-09-01） */
@media (max-width: 760px) {
    .public-content table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }
}

/* 発注書の検算（2026-09-20）。⚠ 印は本文に保存できないので鏡型で付く——
   人が数字を直せば、次に開いたときに消える。合っているときも黙らないのは、
   「検算して合った」と「そもそも検算していない」を見分けられるようにするため。 */
.public-content .order-checksum td {
    font-size: 0.9em;
    padding: 6px 8px;
}
.public-content .checksum-ng td { background: #fee2e2; }
/* 薄い緑＝確かめて合った（2026-09-21）。⚠ 赤と緑は赤緑色覚でいちばん近づく
   組み合わせなので、色だけに頼らず行の頭の `⚠`／`✓` で見分ける（app.css に実測値）。 */
.public-content .checksum-ok td { background: #dcfce7; color: #166534; }
.public-content .checksum-note td { color: var(--pub-muted); font-style: italic; }

/* カルーセル（2026-10-07）——公開ページにはスクリプトが無いので、横に払って1枚ずつ送れる形だけを CSS で作る
   （ログインした画面の送り方は assets/app.js の「カルーセル」）。 */
.public-content section[data-type="carousel"] {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 8px;
    align-items: center;
    gap: 8px;
    padding: 8px;
    margin: 0 0 20px;
    background: #f1f5f9;
    border-radius: var(--pub-radius);
}
/* 見せる幅が空いている限り次の画像も並べる（2026-10-12——編集画面の閲覧モードと同じ・app.css）。それまでは1枚ずつ（幅いっぱい）。 */
.public-content section[data-type="carousel"] > * {
    flex: 0 0 auto;
    max-width: 100%;
    scroll-snap-align: start;
    margin: 0;
}
.public-content section[data-type="carousel"] img { display: block; max-width: 100%; max-height: min(40vh, 260px); width: auto; height: auto; object-fit: contain; }
/* 画像の下のコメント（2026-10-30・本文は <p><img>コメント</p>・assets/app.css と同じ見せ方）。 */
.public-content p:has(> img:first-child) > img { display: block; }
.public-content section[data-type="carousel"] > p:has(> img:first-child) { width: min-content; min-width: 120px; overflow-wrap: anywhere; }
.public-content section[data-type="carousel"] > p:has(> img:first-child) > img { max-width: none; }

/* PDF を絵にして見せる枠（2026-10-27・internal/cms/pdf_pages.go）。公開ページでは高さを決めずに、ページの絵をそのまま縦に並べる。 */
.public-content .file-view-page { display: block; width: 100%; height: auto; border: 1px solid #ddd; margin-bottom: 8px; }
.public-content .file-view-pages-more { font-size: 0.85em; color: #666; }

/* パンくずリスト・目次・子ページの案内（internal/cms/public_nav.go・2026-11-04）。 */
.public-nav-top:empty { display: none; }
.public-breadcrumb {
    max-width: 46rem;
    margin: 0 auto;
    padding: 16px 20px 0;
    font-size: 0.85rem;
    color: var(--pub-muted);
}
.public-breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 0;
}
.public-breadcrumb li + li::before {
    content: "›";
    margin: 0 8px;
    color: var(--pub-muted);
}
.public-breadcrumb a { color: var(--pub-link); text-decoration: none; }
.public-breadcrumb a:hover { text-decoration: underline; }
.public-breadcrumb [aria-current="page"] { color: var(--pub-text); }
.public-content .public-breadcrumb + h1 { margin-top: 8px; }

.public-toc {
    margin: 0 0 28px;
    padding: 10px 16px;
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius);
    background: #f9fafb;
    font-size: 0.95rem;
}
.public-toc summary { cursor: pointer; font-weight: bold; }
.public-content .public-toc ol { margin: 8px 0 4px; padding-left: 1.4em; }
.public-content .public-toc li { margin: 2px 0; }
.public-content .public-toc li.toc-sub { margin-left: 1.2em; list-style-type: circle; }
.public-toc a { text-decoration: none; }
.public-toc a:hover { text-decoration: underline; }

.public-children {
    margin: 48px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--pub-border);
}
.public-content .public-children h2 { font-size: 1.1rem; margin: 0 0 8px; }
.public-content .public-children ul { padding-left: 1.2em; }