/* ba-result-card.css — 分析機の結果カード＋等倍表示モーダル
 *
 * ★**barcodes/ui/bc-result-card.css とは共有しない**（T018 の判断・2026-09-05）。
 *   あちらは MCP サーバーと共有している唯一の正で、変更に3経路の反映が要る。
 *   分析機のカードは中身の構造が違う（層1 の定義リスト・層2 の内訳テーブル・折りたたみ）ため、
 *   共有すると**分析機だけで使う CSS が MCP 側へ流れ込む**。見た目の一貫性はデザイントークン
 *   （--rl-*）を使うことで担保する。
 *
 * ★**画像は等倍で表示する**（生成機の T226 と同じ原則）。拡大はせず、収まらないときだけ縮める。
 */

.ba-result-head {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem;
}
.ba-result-count { font-weight: 700; color: var(--rl-text); font-size: .92rem; }

.ba-empty {
    border: 1px dashed var(--rl-border); border-radius: var(--rl-radius);
    padding: 2.2rem 1rem; text-align: center;
    color: var(--rl-text-sub); font-size: .88rem; background: var(--color-bg-panel);
}
.ba-empty i { display: block; font-size: 2rem; margin-bottom: .5rem; color: var(--rl-border); }

/* ---- カード ---- */
.ba-card {
    border: 1px solid var(--rl-border);
    border-left: 4px solid var(--rl-primary);
    border-radius: var(--rl-radius);
    background: var(--rl-surface);
    box-shadow: var(--rl-shadow);
    margin-bottom: .85rem;
    overflow: hidden;
}
.ba-card-head {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    padding: .5rem .8rem;
    background: var(--color-bg-panel);
    border-bottom: 1px solid var(--rl-border);
}
.ba-card-no {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--rl-primary); color: #fff; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .74rem; font-weight: 700;
}
.ba-card-fmt { font-weight: 700; color: var(--rl-text); font-size: .9rem; }
.ba-card-time { margin-left: auto; font-size: .72rem; color: var(--rl-text-sub); }
.ba-card-body { padding: .75rem .8rem; }

.ba-tag {
    font-size: .68rem; font-weight: 600; border-radius: 4px; padding: .05rem .4rem;
    background: var(--rl-primary-light); color: var(--rl-primary-dark);
}
.ba-tag.warn { background: #fff3cd; color: #8a5a00; }

/* 読み取った文字列 */
.ba-decoded {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .84rem; line-height: 1.55;
    background: #0f1720; color: #d6e6ff;
    border-radius: 6px; padding: .55rem .7rem;
    word-break: break-all; white-space: pre-wrap;
}
.ba-decoded .fnc  { color: #ffcc66; font-weight: 700; }
.ba-decoded .ctrl { color: #ff9d9d; }

/* ---- 縦積みの折りたたみ（★タブは使わない＝生成機↔分析機の切替専用に予約） ---- */
.ba-section { border-top: 1px solid var(--rl-border); }
.ba-section-head {
    display: flex; align-items: center; gap: .4rem;
    padding: .55rem .1rem; cursor: pointer; user-select: none;
    font-weight: 600; font-size: .88rem; color: var(--rl-text);
    background: none; border: 0; width: 100%; text-align: left;
}
.ba-section-head .chev { color: var(--rl-text-sub); font-size: .8rem; transition: transform .15s; flex: none; }
.ba-section.closed .ba-section-head .chev { transform: rotate(-90deg); }
.ba-section-sum { margin-left: auto; font-size: .78rem; color: var(--rl-text-sub); font-weight: 400; }
.ba-section-body { padding: 0 .1rem .75rem; }
.ba-section.closed .ba-section-body { display: none; }
.ba-section.na .ba-section-head { color: #b6bfcc; cursor: not-allowed; }

/* 層1 の定義リスト */
.ba-spec { display: grid; grid-template-columns: max-content 1fr; gap: .3rem .8rem; font-size: .85rem; }
.ba-spec dt { color: var(--rl-text-sub); font-weight: 500; }
.ba-spec dd { margin: 0; color: var(--rl-text); }
.ba-spec dd.warn { color: #8a5a00; font-weight: 600; }

/* 層2 の内訳テーブル */
.ba-parts { width: 100%; font-size: .84rem; border-collapse: collapse; }
.ba-parts th, .ba-parts td {
    border-bottom: 1px solid var(--rl-border);
    padding: .4rem .5rem; text-align: left; vertical-align: top;
}
.ba-parts th { background: var(--color-bg-panel); color: var(--rl-text-sub); font-weight: 600; white-space: nowrap; }
.ba-parts code { font-size: .82rem; color: var(--rl-primary-dark); }

/* 層2 の内訳ブロック（「内容」欄・復号文字列の下） */
.ba-l2 { margin-top: .7rem; }
.ba-l2-title {
    font-size: .82rem; font-weight: 700; color: var(--rl-text);
    margin-bottom: .35rem;
}
.ba-l2 .ba-parts th { width: 40%; }
.ba-l2-val { word-break: break-all; }
.ba-l2-note {
    font-size: .74rem; color: var(--rl-text-sub);
    margin-top: .15rem; line-height: 1.55;
}
.ba-parts .ba-ok { color: #2e7d32; margin-left: .35rem; font-size: .8rem; }
.ba-parts .ba-ng { color: #b8860b; margin-left: .35rem; font-size: .8rem; }
.ba-parts tr.ba-row-ng th { background: #fff8e6; }

/* 伏字（Wi-Fi のパスワード等）。★実値は押したときだけ出す */
.ba-reveal {
    margin-left: .4rem; border: 1px solid var(--rl-border);
    background: var(--rl-surface); color: var(--rl-text-sub);
    border-radius: 4px; padding: 0 .35rem; font-size: .72rem; line-height: 1.5;
    cursor: pointer;
}
.ba-reveal:hover { background: var(--color-bg-panel); }

/* 確定できないときの両論併記（JAN の事業者コード桁数など） */
.ba-l2-alts { display: grid; gap: .5rem; margin-top: .5rem; }
.ba-l2-alt {
    border: 1px dashed var(--rl-border); border-radius: 8px;
    padding: .45rem .55rem; background: var(--color-bg-panel);
}
.ba-l2-alt-title { font-size: .78rem; font-weight: 600; margin-bottom: .3rem; color: var(--rl-text-sub); }
.ba-l2-alt .ba-parts { background: var(--rl-surface); border-radius: 6px; }

.ba-l2-notes {
    font-size: .74rem; color: var(--rl-text-sub);
    margin: .5rem 0 0; padding-left: 1.1rem; line-height: 1.6;
}
.ba-l2-notes strong { color: var(--rl-text); }

@media (min-width: 576px) {
    .ba-l2-alts { grid-template-columns: 1fr 1fr; }
}

/* シンボロジー識別子の読み解き（もっと詳しく の中） */
.ba-symid {
    margin-top: .7rem;
    border: 1px solid var(--rl-border);
    border-radius: 8px;
    background: var(--color-bg-panel);
    padding: .55rem .65rem;
}
.ba-symid-title { font-size: .82rem; font-weight: 700; margin-bottom: .35rem; }
.ba-symid-title code { font-size: .9rem; color: var(--rl-primary-dark); }
.ba-symid .ba-parts { background: var(--rl-surface); border-radius: 6px; }
.ba-symid-ch { width: 2.5rem; text-align: center; }
.ba-symid-ch code {
    display: inline-block; min-width: 1.6rem;
    background: var(--rl-primary-dark); color: #fff;
    border-radius: 4px; padding: .05rem .3rem; font-size: .85rem;
}
.ba-symid-note {
    font-size: .74rem; color: var(--rl-text-sub);
    margin: .45rem 0 0; line-height: 1.6;
}

/* 読み取り耐性メーター（★いまは使っていない。B-05 でチューニングしてから復帰させる） */
.ba-level { display: inline-flex; gap: 3px; align-items: center; vertical-align: middle; }
.ba-level i { width: 18px; height: 7px; border-radius: 2px; background: var(--rl-border); display: block; }
.ba-level i.on { background: var(--color-success); }
.ba-level i.warn { background: #f39c12; }

.ba-card-actions {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    border-top: 1px solid var(--rl-border); margin-top: .2rem; padding-top: .6rem;
}

/* 読めなかったとき */
.ba-fail {
    border: 1px solid #f0c987; border-left: 4px solid #f39c12;
    background: #fff8ec; border-radius: var(--rl-radius);
    padding: .9rem 1rem; margin-bottom: .85rem;
}
.ba-fail h2 { font-size: .95rem; margin-bottom: .2rem; }
.ba-fail ul { margin: .6rem 0 0; padding-left: 1.1rem; font-size: .86rem; }
.ba-fail li { margin-bottom: .25rem; }

/* ---- 等倍表示モーダル ---- */
.ba-modal {
    display: none; position: fixed; inset: 0; z-index: 9998;
    background: rgba(0,0,0,.55); align-items: center; justify-content: center;
}
.ba-modal.open { display: flex; }
.ba-modal-dialog {
    background: #fff; border-radius: 10px; overflow: hidden;
    width: auto; max-width: min(96vw, 960px);
    box-shadow: 0 8px 32px rgba(0,0,0,.25);
}
.ba-modal-header {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 8px 12px; border-bottom: 1px solid var(--rl-border);
    font-size: .8rem; font-weight: 700; color: var(--rl-text);
}
.ba-modal-close {
    background: none; border: none; cursor: pointer; font-size: 1.1rem;
    color: var(--rl-text-sub); line-height: 1; padding: 2px 6px;
}
.ba-modal-body { padding: 8px; text-align: center; max-height: 80vh; overflow: auto; }
/* ★等倍。拡大はしない＝収まらないときだけ縮む（生成機 T226 と同じ原則） */
#baModalCanvas { max-width: 100%; width: auto; height: auto; display: block; margin: 0 auto; }