/* --- 確認の枠（「保存しますか？」など・4 段目・#8643） ---
 * 枠は共通の app-confirm.js が body の直下に作る（.sb-page-new の外）ので、siteb のレイアウトの body の印 body.sb-app の下だけで上書きする。
 * 共通の app-confirm.css（暗い形）は変えない。ほかのサービス（/base・poster など）は body.sb-app がないので今の暗い形のまま。
 * キーボード（Enter・Esc・Tab）とボタンの目印（data-app-confirm）は JS のまま。取り消せない操作（.is-danger）の OK は赤のまま。
 */
body.sb-app .app-confirm {
    background: rgba(22, 32, 43, .38);
}

body.sb-app .app-confirm-box {
    max-width: 440px;
    padding: 22px 24px 20px;
    border: 1px solid var(--sb-line);
    border-top: 1px solid var(--sb-line);
    border-radius: 12px;
    background: #fff;
    color: var(--sb-text);
    font-family: var(--sb-font);
    box-shadow: 0 10px 30px rgba(22, 32, 43, .14);
}

body.sb-app .app-confirm-title {
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--sb-text-sub);
}

body.sb-app .app-confirm-box.is-danger .app-confirm-title {
    color: var(--sb-danger);
}

body.sb-app .app-confirm-message {
    margin-bottom: 20px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--sb-text);
}

body.sb-app .app-confirm-input {
    border: 1px solid var(--sb-line);
    border-radius: 8px;
    background: #fff;
    color: var(--sb-text);
    font-size: 15px;
}

body.sb-app .app-confirm-input:focus {
    outline: 3px solid var(--sb-accent-soft);
    border-color: var(--sb-accent);
}

body.sb-app .app-confirm-btn {
    min-width: 104px;
    padding: 10px 18px;
    border: 1px solid;
    border-radius: 8px;
    font-family: var(--sb-font);
    font-size: 14px;
    font-weight: 700;
}

body.sb-app .app-confirm-btn-cancel {
    border-color: var(--sb-line);
    background: #fff;
    color: var(--sb-text);
}

body.sb-app .app-confirm-btn-cancel:hover {
    background: var(--sb-bg);
}

body.sb-app .app-confirm-btn-ok {
    border-color: var(--sb-accent);
    background: var(--sb-accent);
    color: #fff;
}

body.sb-app .app-confirm-btn-ok:hover {
    border-color: var(--sb-accent-dark);
    background: var(--sb-accent-dark);
}

body.sb-app .app-confirm-box.is-danger .app-confirm-btn-ok {
    border-color: var(--sb-danger);
    background: var(--sb-danger);
    color: #fff;
}

/* 共通の CSS はマウスを乗せたときにもネオンの線を出すので、乗せたときは線を消し（色で分かる）、キーボードのフォーカスだけ青緑の線にする */
body.sb-app .app-confirm-btn:hover {
    outline: none;
}

body.sb-app .app-confirm-btn:focus-visible {
    outline: 3px solid var(--sb-accent);
    outline-offset: 2px;
}

body.sb-app .app-confirm-box.is-danger .app-confirm-btn-ok:focus-visible {
    outline-color: var(--sb-danger);
}

/* --- 説明のモーダル（CH-875）・説明を開く「？」（#10270） ---
 * 枠は共通の info-modal.js が body の直下に作る（.sb-page-new の外）ので、確認の枠と同じく body.sb-app の下だけで上書きする。
 * 共通の info-modal.css（暗い形）は変えない。
 * 「？」（.sb-q）は、リンク（a）でもボタン（button）でも同じ見た目：押せる範囲は 32px 四方・見た目の丸は 22px・字と枠はアクセントの色。
 */
body.sb-app .sb-q {
    position: relative;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-family: var(--sb-font);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    vertical-align: middle;
    color: var(--sb-accent) !important;
    cursor: pointer;
}

body.sb-app .sb-q::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 5px;
    border: 1.5px solid var(--sb-accent);
    border-radius: 50%;
    background: #fff;
}

body.sb-app .sb-q:hover::before,
body.sb-app .sb-q:focus-visible::before {
    background: var(--sb-accent-soft);
}

body.sb-app .sb-q:focus {
    outline: none;
}

body.sb-app .sb-q:focus-visible {
    outline: 2px solid var(--sb-accent);
    outline-offset: 0;
}

/* 入力欄の見出しの横に「？」を置く行（サイトを追加・一括登録・CH-878） */
body.sb-app .sb-label-row {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* 「？」の押せる範囲（32px）で行の高さが変わらないように、上下を詰める */
body.sb-app .sb-label-row .sb-q {
    margin: -6px 0;
}

body.sb-app .info-modal {
    background: rgba(22, 32, 43, .38);
}

body.sb-app .info-modal-box {
    border: 1px solid var(--sb-line);
    border-top: 1px solid var(--sb-line);
    border-radius: 12px;
    background: #fff;
    color: var(--sb-text);
    font-family: var(--sb-font);
    box-shadow: 0 10px 30px rgba(22, 32, 43, .14);
}

body.sb-app .info-modal-head,
body.sb-app .info-modal-foot {
    border-color: var(--sb-line);
}

body.sb-app .info-modal-title {
    color: var(--sb-text);
    font-size: 17px;
}

body.sb-app .info-modal-x {
    color: var(--sb-text-sub);
}

body.sb-app .info-modal-x:hover {
    border-color: var(--sb-line);
    background: var(--sb-bg);
}

body.sb-app .info-modal-newtab {
    color: var(--sb-accent);
}

body.sb-app .info-modal-btn {
    border: 1px solid var(--sb-line);
    background: #fff;
    color: var(--sb-text);
    font-weight: 700;
}

body.sb-app .info-modal-btn:hover {
    background: var(--sb-bg);
}

body.sb-app .info-modal-x:focus-visible,
body.sb-app .info-modal-btn:focus-visible,
body.sb-app .info-modal-newtab:focus-visible,
body.sb-app .info-modal-title:focus-visible {
    outline: 3px solid var(--sb-accent);
    outline-offset: 2px;
}

@media (max-width: 600px) {
    body.sb-app .info-modal-box {
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }
}

/* --- 画面の見出しの行の右の「この画面の使い方」（本のアイコンつき・CH-1010 の 12）。部品は element SitebPlus.page_help（ヘルプが無効なら出ない）
 * 前の見出し・文の横の小さな「説明」のリンク（CH-825）は、これに替えた。
 * - .sb-page-head-row：h1 と「この画面の使い方」を 1 行に並べる（狭い幅で入らなければ、h1 の下に回る）
 * - 一覧（まとめの右上・.sb-summary-actions）と詳細（名前の枠の右上・.sb-site-head-actions）は、ボタンの並びの頭に置く
 */
.sb-page-head-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 16px;
}

.sb-page-head-row h1 {
    min-width: 0;
}

.sb-page-help {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--sb-accent);
    text-decoration: none;
    white-space: nowrap;
}

.sb-page-help:hover,
.sb-page-help:focus-visible {
    color: var(--sb-accent-dark);
    text-decoration: underline;
}

.sb-page-help-icon {
    flex: 0 0 auto;
}

.sb-summary-actions .sb-page-help,
.sb-site-head-actions .sb-page-help {
    align-self: center;
    margin-right: 6px;
}

/* --- ヘルプの一覧と 1 ページ（本体の Help を siteb のときだけこのレイアウトで出す・CH-825）。本文の中は css/backlog.css の .backlog-md --- */
.sb-help-list {
    margin: 0;
    padding-left: 1.4em;
    list-style: disc;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sb-help-body {
    overflow-wrap: anywhere;
}

/* --- アカウントのメニュー：開いている画面（お知らせ・ヘルプ・お問い合わせ・パスワードの変更・CH-847） --- */
.sb-account-panel a[aria-current="page"] {
    background: var(--sb-bg);
    font-weight: 700;
}

/* --- お知らせの一覧と詳細（本体の News を siteb のときだけこのレイアウトで出す・CH-847） --- */
.sb-news-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.sb-news-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sb-news-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sb-news-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--sb-line-soft);
}

.sb-news-item:last-child {
    border-bottom: 0;
}

.sb-news-date {
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    color: var(--sb-text-muted);
    white-space: nowrap;
}

.sb-news-title {
    flex: 1 1 260px;
    min-width: 0;
    font-size: 15px;
    overflow-wrap: anywhere;
}

.sb-news-unread {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--sb-danger);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    vertical-align: middle;
}

.sb-news-kind {
    margin-left: 8px;
    font-size: 12px;
    color: var(--sb-text-muted);
}

.sb-news-body {
    font-size: 15px;
    line-height: 1.8;
    color: var(--sb-text);
    overflow-wrap: anywhere;
}

.sb-news-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.sb-news-like-count {
    font-variant-numeric: tabular-nums;
}

/* --- お問い合わせの本文（sb-textarea は貼り付け用の等幅。文を書く欄はふつうの字・CH-847） --- */
.sb-page-new .sb-textarea.sb-textarea-text {
    font-family: inherit;
    font-size: 15px;
}

/* --- お知らせ：「サイトの知らせ」｜「運営から」のタブと、サイトの知らせの一覧（CH-848 の段 1） --- */
.sb-notice-tabs {
    margin-bottom: 16px;
}

.sb-notice-tabs .sb-news-unread {
    margin-left: 6px;
}

.sb-notice-note {
    margin: 0 0 8px;
}

.sb-notice-unread-count {
    font-size: 14px;
    color: var(--sb-text-sub);
}

.sb-notice-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sb-notice-item {
    border-bottom: 1px solid var(--sb-line-soft);
}

.sb-notice-item:last-child {
    border-bottom: 0;
}

/* 行全体を押せる（a か button）。button も a と同じ見た目にする */
.sb-notice-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 12px 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--sb-text) !important;
    font: inherit;
    text-align: left;
    text-decoration: none !important;
    cursor: pointer;
}

.sb-notice-row:hover,
.sb-notice-row:focus-visible {
    background: var(--sb-bg);
}

.sb-notice-row:disabled {
    cursor: default;
}

.sb-notice-row:disabled:hover {
    background: transparent;
}

.sb-notice-row.is-unread .sb-notice-site {
    font-weight: 700;
}

.sb-notice-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.sb-notice-head .sb-news-unread {
    margin-left: 0;
}

.sb-notice-site {
    font-size: 15px;
    overflow-wrap: anywhere;
}

.sb-notice-summary {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.6;
    color: var(--sb-text-sub);
    overflow-wrap: anywhere;
}

.sb-notice-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 12px;
}

.sb-notice-mail {
    font-size: 12px;
    color: var(--sb-text-muted);
}

.sb-notice-mail-failed {
    color: var(--sb-danger);
}

.sb-notice-mail-quiet {
    color: var(--sb-caution);
}

/* どの行も右下にそろえる（メールの印が長くて折り返したときも・CH-942） */
.sb-notice-go {
    margin-left: auto;
    font-size: 13px;
    font-weight: 700;
    color: var(--sb-accent);
    white-space: nowrap;
}

/* --- 詳細：表示の速さ（毎日・PageSpeed Insights のスコア・CH-840）。色は PSI と同じ 3 段（0〜49 赤・50〜89 橙・90〜100 緑） --- */
.sb-psi {
    --sb-psi-good: #1E7A45;
    --sb-psi-average: #B45309;
    --sb-psi-poor: #B42318;
}

.sb-psi-tabs .sb-psi-tab {
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

/* 選んでいるタブは白い地・太字・アクセントの色と下の線（上の transparent が .sb-tab.is-current の白を消していた・CH-874）。
   .sb-tab の色は !important なので、ここも !important で上書きする */
.sb-psi-tabs .sb-psi-tab.is-current {
    background: #fff;
    color: #11727A !important;
    font-weight: 700;
    box-shadow: inset 0 -3px 0 var(--sb-accent), 0 1px 3px rgba(0, 0, 0, .12);
}

.sb-psi-tabs .sb-psi-tab:not(.is-current) {
    color: #7a8591 !important;
}

/* パネルの頭：どちらで測った点か（左）と「最新の結果を見る」（右）・CH-874 */
.sb-psi-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
}

.sb-psi-now {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--sb-accent);
}

.sb-psi-latest {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
}

.sb-psi-latest-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--sb-accent);
    text-decoration: none;
}

.sb-psi-latest-link:hover {
    text-decoration: underline;
}

.sb-psi-latest-note {
    font-size: 12px;
    color: var(--sb-text-sub);
}

.sb-psi-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sb-psi-panel[hidden] {
    display: none;
}

.sb-psi-drop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid var(--sb-caution-line);
    border-radius: 10px;
    background: var(--sb-caution-soft);
    font-size: 14px;
    color: var(--sb-caution);
}

.sb-psi-scores {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.sb-psi-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    border: 1px solid var(--sb-line);
    border-radius: 12px;
    text-align: center;
}

.sb-psi-score-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 4px solid var(--sb-line);
    font-size: 20px;
    color: var(--sb-text);
}

.sb-psi-score-label {
    font-size: 13px;
    color: var(--sb-text-sub);
}

.sb-psi-score.is-good .sb-psi-score-value { border-color: var(--sb-psi-good); color: var(--sb-psi-good); }
.sb-psi-score.is-average .sb-psi-score-value { border-color: var(--sb-psi-average); color: var(--sb-psi-average); }
.sb-psi-score.is-poor .sb-psi-score-value { border-color: var(--sb-psi-poor); color: var(--sb-psi-poor); }

.sb-psi-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 0;
    font-size: 13px;
}

.sb-psi-metrics > div {
    display: inline-flex;
    gap: 6px;
    align-items: baseline;
}

.sb-psi-metrics dt {
    font-weight: 700;
    color: var(--sb-text-muted);
}

.sb-psi-metrics dd {
    margin: 0;
    color: var(--sb-text);
}

.sb-psi-chart svg {
    display: block;
    width: 100%;
    height: auto;
}

.sb-psi-band.is-good { fill: #EEF7F1; }
.sb-psi-band.is-average { fill: #FDF6EC; }
.sb-psi-band.is-poor { fill: #FDF1F0; }

.sb-psi-grid {
    stroke: var(--sb-line);
    stroke-width: 1;
    stroke-dasharray: 4 4;
}

.sb-psi-line {
    fill: none;
    stroke: var(--sb-accent);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.sb-psi-dot {
    stroke: #fff;
    stroke-width: 1.5;
}

.sb-psi-dot.is-good { fill: var(--sb-psi-good); }
.sb-psi-dot.is-average { fill: var(--sb-psi-average); }
.sb-psi-dot.is-poor { fill: var(--sb-psi-poor); }

.sb-legend-mark.sb-psi-mark.is-good { background: var(--sb-psi-good); }
.sb-legend-mark.sb-psi-mark.is-average { background: var(--sb-psi-average); }
.sb-legend-mark.sb-psi-mark.is-poor { background: var(--sb-psi-poor); }

@media (max-width: 760px) {
    .sb-psi-scores {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* 狭い画面では「最新の結果を見る」を左にそろえる（折り返したとき・CH-874） */
    .sb-psi-latest {
        align-items: flex-start;
        text-align: left;
    }
}