/*!
 * AITUNE 記事の図表（表・図）の CSS — 編集図版 v2
 *
 * このファイルは scripts/dev/build_visual_css.py が作る（手で書き換えない）。元：config/visual-table.css・config/visual-figures.css
 * 読み込み：記事の詳細ページだけ（is_singular('post')）・theme-x-style のあと（site-maintenance/visual-css/functions-snippet.php）
 * 範囲：.p-single-content の中の .c-aitune-table・.c-aitune-fig・.aitune-visual-placeholder だけ。既存の記事の要素には効かない
 */

/* ==== config/visual-table.css ==== */

/*
 * 記事本文の表の CSS 案（theme-x には未適用。テーマへの追加は運営者の判断）
 *
 * デザインの方針（v2・編集図版）：縦の罫線と見出しの塗りをやめ、横の罫線だけで区切る。強調は最小限
 * - 色：白（地）、文字 #242d29、罫線 #d6d9d2、補足 #5f645d（visual-figures.css と同じ）。アクセントの色は使わない
 * - グラデーション・影・しま模様は使わない
 * - theme-x の既存のスタイル（scss/object/project/_single.scss）：.wp-block-table { overflow-x: auto }、
 *   table { width: 100%; border-collapse: collapse; font-size: 14px }、th, td { padding: 12px; border: 1px solid #dce4d7 }、th { background: #edf0e8 }
 * - この案は、visual-build が出力する表（figure.wp-block-table.c-aitune-table）にだけ効く。既存の記事の表の見た目は変えない
 * - 追加先の候補・影響範囲：site-maintenance/visual-css-proposal.md
 */

.p-single-content .wp-block-table.c-aitune-table {
    margin: 32px 0;
    padding-top: 2px;
    border-top: 2px solid #242d29;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.p-single-content .c-aitune-table table {
    min-width: 100%;
    line-height: 1.7;
}

.p-single-content .c-aitune-table th,
.p-single-content .c-aitune-table td {
    min-width: 6em;          /* 列が潰れて1文字ずつ折り返すのを防ぐ */
    padding: 10px 12px 10px 0;
    border: 0;
    border-bottom: 1px solid #d6d9d2;
    background: #fff;
    text-align: left;
    vertical-align: top;
    overflow-wrap: break-word; /* 英字のメソッド名を途中で切らない（空白で折り返す） */
    word-break: keep-all;      /* 「50ユニット」のような語を途中で切らない（空白・句読点で折り返し、収まらないときだけ途中で切る） */
}

.p-single-content .c-aitune-table thead th {
    border-bottom: 1px solid #242d29;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

/* 1列目（項目名）は横スクロールしても見えるように固定する（地の白で下の列を隠す） */
.p-single-content .c-aitune-table tbody th {
    position: sticky;
    left: 0;
    z-index: 1;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;     /* メソッド名は1行で読む（表は横スクロール） */
}

.p-single-content .c-aitune-table figcaption {
    margin-top: 8px;
    color: #5f645d;
    font-size: 12px;
    line-height: 1.7;
}

@media (max-width: 599px) {
    .p-single-content .c-aitune-table table {
        font-size: 13px;
    }
    .p-single-content .c-aitune-table th,
    .p-single-content .c-aitune-table td {
        padding: 8px 10px 8px 0;
    }
}

/* 図表のプレースホルダ（[FIGURE: …]・[TABLE: …]）。公開前にすべて差し替えるため、残っていたら目立たせる */
.p-single-content .aitune-visual-placeholder {
    padding: 16px;
    border: 1px dashed #5f645d;
    color: #242d29;
    font-weight: 700;
    text-align: center;
}

/* ==== config/visual-figures.css ==== */

/*
 * 記事本文の図（figure.c-aitune-fig）の CSS 案（theme-x には未適用。テーマへの追加は運営者の判断）
 *
 * デザインの方針（v2・編集図版）：業務資料・専門メディアの解説図のように、装飾より情報の整理を優先する
 * - 色は4つだけ：白（地）、文字 #242d29、罫線 #d6d9d2、アクセント #42603a（theme-x の見出しの緑。番号・上の罫線にだけ使う）
 *   補足の文字は文字色を薄くした #5f645d（濃いグレー）
 * - グラデーション・影・塗りの背景・丸い札・アイコンは使わない。角丸は 2px まで
 * - 図は「上の太い罫線＋見出し＋本体＋注＋キャプション」の形にそろえる
 * - 対象は visual-build が出力する図だけ（.c-aitune-fig）。既存の記事の要素には効かない
 * - theme-x の `.p-single-content figure:not(.wp-block-table)`（最大幅 560px・中央寄せ）と、本文の表の罫線・見出しの背景より強い指定で上書きする
 * - 並びは図の幅（コンテナクエリ）で変える。対応しないブラウザでは縦に並んだまま読める
 * - 追加先の候補・影響範囲：site-maintenance/visual-css-proposal.md
 */

.p-single-content figure.c-aitune-fig:not(.wp-block-table) {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin: 36px 0;
    padding: 12px 0 0;
    border-top: 2px solid #242d29;
    background: #fff;
    color: #242d29;
    font-size: 14px;
    line-height: 1.7;
    container-type: inline-size;
}

.p-single-content .c-aitune-fig__title {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
}

/* 図の説明（alt に当たる文）。画面には出さず、支援技術で読める（aria-describedby） */
.p-single-content .c-aitune-fig__desc {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.p-single-content figure.c-aitune-fig:not(.wp-block-table) figcaption.c-aitune-fig__caption {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #d6d9d2;
    color: #5f645d;
    font-size: 12px;
    line-height: 1.7;
}

.p-single-content .c-aitune-fig__label {
    font-weight: 700;
}

.p-single-content .c-aitune-fig__detail {
    color: #5f645d;
    font-size: 13px;
}

/* 注（図の下の補足）。罫線も色も付けず、小さな文字で並べる */
.p-single-content .c-aitune-fig__notes {
    margin-top: 10px;
}

.p-single-content .c-aitune-fig__note {
    position: relative;
    padding-left: 1.2em;
    color: #242d29;
    font-size: 13px;
}

.p-single-content .c-aitune-fig__note::before {
    content: "注";
    position: absolute;
    left: 0;
    color: #5f645d;
    font-size: 11px;
    line-height: 2;
}

/* --- 図の中の表（compare・flow の計算例）。縦の罫線を引かず、横の罫線だけで区切る --- */

.p-single-content .c-aitune-fig .wp-block-table {
    margin: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.p-single-content .c-aitune-fig table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    line-height: 1.6;
}

.p-single-content .c-aitune-fig th,
.p-single-content .c-aitune-fig td {
    padding: 8px 10px 8px 0;
    border: 0;
    border-bottom: 1px solid #d6d9d2;
    background: none;
    text-align: left;
    vertical-align: top;
    overflow-wrap: break-word; /* 英字のメソッド名を途中で切らない（空白で折り返す） */
}

/* 見出し・行の見出し（「1日の上限」など）は語の途中で折り返さない。本文のセルは長いので通常どおり折り返す（表の幅を広げない） */
.p-single-content .c-aitune-fig th {
    word-break: keep-all;
}

.p-single-content .c-aitune-fig thead th {
    border-bottom: 1px solid #242d29;
    font-size: 12px;
    font-weight: 700;
}

.p-single-content .c-aitune-fig tbody th {
    width: 5em;
    color: #5f645d;
    font-weight: 400;
}

/* compare：比べる2つの列の見出しだけ、アクセントの色の文字にする */
.p-single-content .c-aitune-fig__compare thead th[scope="col"] {
    color: #42603a;
    font-size: 14px;
}

.p-single-content .c-aitune-fig__compare td {
    font-size: 14px;
}

/* --- 番号付きの手順（flow）。常に上から下へ読む --- */

.p-single-content .c-aitune-fig__steps {
    counter-reset: aitune-step;
}

.p-single-content .c-aitune-fig__step {
    position: relative;
    padding: 0 0 14px 40px;
    counter-increment: aitune-step;
}

/* 番号 */
.p-single-content .c-aitune-fig__step::before {
    content: counter(aitune-step);
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    border: 1px solid #42603a;
    border-radius: 2px;
    color: #42603a;
    font-size: 13px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}

/* 番号をつなぐ細い線（最後の手順には引かない） */
.p-single-content .c-aitune-fig__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 28px;
    bottom: 4px;
    left: 12px;
    width: 1px;
    background: #d6d9d2;
}

.p-single-content .c-aitune-fig__step .c-aitune-fig__label {
    line-height: 24px;
}

.p-single-content .c-aitune-fig__examples-label {
    margin: 8px 0 4px;
    padding-top: 10px;
    border-top: 1px solid #d6d9d2;
    font-size: 13px;
    font-weight: 700;
}

.p-single-content .c-aitune-fig__examples table {
    min-width: 520px;
}

/* --- 期間（timeline）。グレーの線と目盛りだけの静かな表現 --- */

.p-single-content .c-aitune-fig__timeline {
    position: relative;
    margin-left: 6px;
    padding-left: 20px;
    border-left: 1px solid #242d29;
}

.p-single-content .c-aitune-fig__segment {
    position: relative;
    padding: 0 0 14px;
}

/* 目盛り */
.p-single-content .c-aitune-fig__segment::before {
    content: "";
    position: absolute;
    top: 11px;
    left: -20px;
    width: 10px;
    height: 1px;
    background: #242d29;
}

/* 区切り（limit）の目盛りだけ少し長く・太くする。色は付けない */
.p-single-content .c-aitune-fig__segment--limit::before {
    left: -26px;
    width: 16px;
    height: 2px;
}

@container (min-width: 560px) {
    .p-single-content .c-aitune-fig__timeline {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: 16px;
        margin: 8px 0 0;
        padding: 14px 0 0;
        border-top: 1px solid #242d29;
        border-left: 0;
    }
    .p-single-content .c-aitune-fig__segment {
        padding: 0;
    }
    .p-single-content .c-aitune-fig__segment::before,
    .p-single-content .c-aitune-fig__segment--limit::before {
        top: -14px;
        left: 0;
        width: 1px;
        height: 8px;
    }
    .p-single-content .c-aitune-fig__segment--limit::before {
        width: 2px;
        height: 12px;
    }
}

/* --- 枠の並び（buckets。v1 のテンプレート。今は使っていない） --- */

.p-single-content .c-aitune-fig__grid {
    display: grid;
    gap: 0;
}

.p-single-content .c-aitune-fig__box {
    padding: 10px 0;
    border-bottom: 1px solid #d6d9d2;
}

.p-single-content .c-aitune-fig__value {
    font-size: 18px;
    font-weight: 700;
}

.p-single-content .c-aitune-fig__members {
    color: #5f645d;
    font-size: 12px;
}

.p-single-content .c-aitune-fig__chip + .c-aitune-fig__chip::before {
    content: "、";
}

@container (min-width: 520px) {
    .p-single-content .c-aitune-fig--buckets .c-aitune-fig__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
}