/* ==========================================================
   components/box.css
   ----------------------------------------------------------
   箱・折りたたみ・コード・点数の棒・差分
   （public/css/blogos.css の同じ class を上書きする）。
   ========================================================== */

/* 枠線のある箱 */
.bordered {
    border-color: var(--im-line);
}

/* 白い下地（画像・WordPress のプレビュー）は、中身が見えるよう白いままにする */
.bg-surface {
    background: #f4f8fa;
}

/* 薄い下地（画像の置き場所） */
.bg-subtle {
    background: rgba(102, 217, 255, 0.05);
}

/* コード・JSON */
pre,
.code-block {
    color: var(--im-text);
    background: var(--im-bg-code);
}

pre.bordered,
pre.code-block {
    border: 1px solid var(--im-line);
}

.mono {
    font-family: var(--im-font-mono);
}


/* ==========================================================
   折りたたみ（details）
   ========================================================== */

details {
    margin: 8px 0;
    padding: 6px 12px;
    background: var(--im-bg-panel);
    border: 1px solid var(--im-line);
    border-radius: 2px;
}

details[open] {
    border-color: var(--im-line-strong);
}

summary {
    font-family: var(--im-font-hud);
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--im-cyan);
    cursor: pointer;
}

summary:hover {
    color: var(--im-cyan-bright);
}


/* ==========================================================
   点数の棒（評価の観点）
   ========================================================== */

.bar-track { background: rgba(255, 255, 255, 0.08); }
.bar-good { background: var(--im-cyan); box-shadow: 0 0 6px var(--im-cyan-glow); }
.bar-mid { background: var(--im-gold); }
.bar-bad { background: var(--im-red); }

/* 品質評価の点数の円グラフ（色は点数の棒と同じ。D-79-06） */
/* 線の色は、どちらのテーマでもアークリアクターのコイルの色（public/css/blogos.css。D-79-09）。暗い背景で下地が沈まないよう、少し濃くする */
.score-gauge svg { --gauge-line: currentColor; }
.score-gauge-faint { opacity: 0.35; }
.score-gauge-dim { opacity: 0.6; }
.score-gauge-track { opacity: 0.18; }
.score-gauge-good .score-gauge-label { color: var(--im-cyan); }
.score-gauge-mid .score-gauge-label { color: var(--im-gold); }
.score-gauge-bad .score-gauge-label { color: var(--im-red); }


/* ==========================================================
   行ごとの差分
   ========================================================== */

.diff-added { background: rgba(95, 240, 181, 0.14); }
.diff-removed { background: rgba(255, 90, 82, 0.16); }
.diff-skip { color: var(--im-text-faint); }


/* ==========================================================
   説明のツールチップ（D-61-02）：HUD の線の「?」と、パネルと同じ透ける青の説明の枠
   ========================================================== */

.tip {
    color: var(--im-cyan);
    background: rgba(102, 217, 255, 0.06);
    border-color: var(--im-line-strong);
}

.tip:hover,
.tip:focus-visible {
    color: var(--im-cyan-bright);
    background: rgba(102, 217, 255, 0.16);
    box-shadow: var(--im-glow);
}

.tip-box {
    color: var(--im-text);
    background: linear-gradient(180deg, rgba(102, 217, 255, 0.16), rgba(102, 217, 255, 0.08)), rgba(4, 12, 22, 0.75);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--im-line-strong);
    border-radius: 2px;
    box-shadow: 0 0 18px rgba(102, 217, 255, 0.2);
}