/* =====================================================================
 * 3 段目（CH-716）：サイトの詳細（画面案 Site）・サイトの追加とまとめて登録（画面案 Add）・止まっていた時間・ステータスについて
 * - 詳細の画面は plus.css を読まない（前の site-monitors-view.css は CH-899 で消した）ので、前の部品の名前（sb-badge・sb-muted・console-heading など。JS が付ける名前もある）も、
 *   新しい形の画面（.sb-page-new）の中だけここで白地向けに決める
 * - 共通の CSS（base.css の input { width: 100% }・style.min.css の th の灰色の地）は、この画面の中だけ打ち消す
 * ===================================================================== */

/* hidden の要素は、下の display の指定より強く隠す（JS が hidden を外して出す欄がある） */
.sb-page-new [hidden] {
    display: none !important;
}

.sb-page-new .sb-muted {
    color: var(--sb-text-muted);
}

/* 一覧へ・詳細へ 戻るリンク */
.sb-back {
    align-self: flex-start;
    font-size: 14px;
    text-decoration: none;
}

/* --- 詳細：名前と今の状態 --- */
.sb-site-head {
    padding: 24px 28px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.sb-site-head-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1 1 320px;
}

.sb-site-head-state {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    font-size: 14px;
}

/* 詳細の頭の状態の札：色で塗った大きめの丸い札（文字と点は白・CH-881 の案 A）。一覧の表の .sb-state は変えない */
.sb-site-head .sb-state {
    font-size: 16px;
    line-height: 1;
    color: #fff;
    padding: 7px 14px 7px 12px;
    border-radius: 999px;
    gap: 8px;
}

.sb-site-head .sb-state .sb-dot {
    width: 9px;
    height: 9px;
    background: #fff;
}

.sb-site-head .sb-state-ok { background: var(--sb-ok); }
.sb-site-head .sb-state-warn,
.sb-site-head .sb-state-caution { background: var(--sb-caution); }
.sb-site-head .sb-state-danger { background: var(--sb-danger); }
.sb-site-head .sb-state-maint { background: var(--sb-maint); }
.sb-site-head .sb-state-stopped,
.sb-site-head .sb-state-none { background: var(--sb-text-muted); }

.sb-site-head-detail,
.sb-site-head-ago {
    font-size: 13px;
    color: var(--sb-text-muted);
    overflow-wrap: anywhere;
}

/* 頭の状態の理由：2 行まで出し、それより長いときだけ …（全文は title・CH-942） */
.sb-site-head-detail {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.5;
    min-width: 0;
    overflow: hidden;
}

.sb-site-head h1 {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--sb-text);
    overflow-wrap: anywhere;
}

.sb-site-head-url {
    font-size: 14px;
    word-break: break-all;
}

.sb-site-head-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sb-site-head-note {
    flex: 1 0 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--sb-line-soft);
}

.sb-page-new .sb-btn:disabled {
    background: #F0F2F4;
    border-color: transparent;
    color: var(--sb-text-muted) !important;
    cursor: not-allowed;
}

/* 説明を開く「？」（.sb-q）は、下の「説明のモーダル」の所に 1 か所でまとめた（CH-875） */

/* --- 詳細：要の数字 --- */
.sb-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 12px;
}

.sb-stat {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-radius: 14px;
    min-width: 0;
}

.sb-stat-label,
.sb-stat-sub {
    font-size: 13px;
    color: var(--sb-text-muted);
    overflow-wrap: anywhere;
}

.sb-stat-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--sb-text);
}

.sb-stat-value.sb-mono {
    font-weight: 500;
}

/* 「いま確認する」のあとに書き換えた応答の速さの下の 1 行（CH-1059） */
.sb-stat-sub.is-fresh {
    color: var(--sb-accent-dark);
    font-weight: 700;
}

/* 「いま確認する」の結果の見出し「いま確認した結果（H:i）」（CH-1059） */
.sb-recheck-head {
    margin: 8px 0 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--sb-text);
}

.sb-recheck-head[hidden] {
    display: none;
}

.sb-stat.is-caution {
    border-color: var(--sb-caution-line);
    background: var(--sb-caution-soft);
}

.sb-stat.is-caution .sb-stat-value {
    color: var(--sb-caution);
}

.sb-stat.is-danger {
    border-color: #F5C2BC;
    background: var(--sb-danger-soft);
}

.sb-stat.is-danger .sb-stat-value {
    color: var(--sb-danger);
}

/* 問題なし（緑）。色を決めるのは SiteStatBoxes（CH-1010 の 10） */
.sb-stat.is-ok {
    border-color: #BFE3CC;
    background: var(--sb-ok-soft);
}

.sb-stat.is-ok .sb-stat-value {
    color: var(--sb-ok);
}

/* 見出しの行：左に見出し・右に短い言葉（問題なし・注意・要確認。色だけに頼らないため） */
.sb-stat-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 8px;
}

.sb-stat-word {
    flex: none;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--sb-text-sub);
}

.sb-stat.is-ok .sb-stat-word { color: var(--sb-ok); }
.sb-stat.is-caution .sb-stat-word { color: var(--sb-caution); }
.sb-stat.is-danger .sb-stat-word { color: var(--sb-danger); }

/* --- 枠の中の見出しの行（見出し＋右に小さな説明） --- */
.sb-section.sb-section-tight {
    padding: 22px 24px;
    gap: 14px;
}

.sb-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

/* --- 詳細：この 24 時間の様子（1 時間 1 本） --- */
.sb-trend {
    display: grid;
    grid-template-columns: repeat(24, minmax(0, 1fr));
    gap: 4px;
    height: 44px;
}

.sb-trend-bar {
    border-radius: 3px;
    background: #2E8B57;
}

.sb-trend-bar.is-slow { background: #D69E2E; }
.sb-trend-bar.is-down { background: #C2410C; }
.sb-trend-bar.is-none { background: #E1E5EA; }

.sb-trend-axis {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--sb-text-muted);
}

/* 新しい時間を左にするとき（詳細の切り替え・CH-881）。棒と時刻の並びだけを逆にする（HTML は古い順のまま） */
.sb-trend-box.is-latest-left .sb-trend { direction: rtl; }
.sb-trend-box.is-latest-left .sb-trend-axis { flex-direction: row-reverse; }

/* 「新しい時間［右｜左］」の切り替え（見出しの右・スマホでは見出しの下） */
.sb-trend-dir {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--sb-text-muted);
}

.sb-trend-dir-sw {
    display: inline-flex;
    border: 1px solid var(--sb-line);
    border-radius: 999px;
    overflow: hidden;
}

.sb-trend-dir-sw button {
    font-size: 13px;
    border: 0;
    background: #fff;
    color: var(--sb-text-muted);
    padding: 3px 12px;
    cursor: pointer;
}

.sb-trend-dir-sw button[aria-pressed="true"] {
    background: var(--sb-accent);
    color: #fff;
    font-weight: 700;
}

.sb-trend-dir-sw button:disabled { cursor: wait; }

.sb-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    font-size: 13px;
    color: var(--sb-text-sub);
}

.sb-legend > span,
.sb-legend-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sb-legend-mark {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: #2E8B57;
}

.sb-legend-mark.is-slow { background: #D69E2E; }
.sb-legend-mark.is-down { background: #C2410C; }
.sb-legend-mark.is-none { background: #C3CBD3; }
.sb-legend-mark.is-limit { background: #EAB308; }
.sb-legend-mark.is-404 { background: #7C3AED; }
.sb-legend-mark.is-4xx { background: #DB2777; }

/* --- 詳細：起きたこと --- */
.sb-events {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.sb-event {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    padding: 12px 0;
    border-top: 1px solid var(--sb-line-soft);
    font-size: 14px;
}

.sb-event:first-child {
    border-top: 0;
    padding-top: 0;
}

.sb-event-time {
    min-width: 150px;
    color: var(--sb-text-muted);
}

.sb-event-body {
    min-width: 0;
    overflow-wrap: anywhere;
}

.sb-event-down {
    margin-right: 6px;
    color: #9A3412;
}

.sb-link-more {
    align-self: flex-start;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

/* --- 詳細：畳んだ中の区切り --- */
.sb-more-part.sb-more-part-first {
    padding-top: 0;
    border-top: 0;
}

.sb-part-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--sb-text);
}

/* 段の頭の「この機能で何ができるか」の 1 行（大きめ）と、そのあとの補足（CH-857・担当者さんの決まり） */
.sb-part-lead {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--sb-text);
}

.sb-part-lead-sub {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #3B4754;
}

.sb-part-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.sb-more-part .sb-form {
    gap: 12px;
}

.sb-page-new .sb-btn-danger {
    background: var(--sb-danger);
    color: #fff !important;
}

.sb-page-new .sb-btn-danger:hover {
    background: #912018;
}

/* 見出し（左）と入力（右）の表。共通の入力の部品（Form/text など）が出す tr をそのまま入れる */
.sb-kv {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.sb-kv th,
.sb-kv td {
    padding: 10px 0;
    border: 0;
    border-top: 1px solid var(--sb-line-soft);
    vertical-align: top;
    text-align: left;
    background: transparent;
    color: var(--sb-text);
}

.sb-kv tr:first-child th,
.sb-kv tr:first-child td {
    border-top: 0;
}

.sb-kv th {
    width: 11em;
    padding-right: 16px;
    padding-top: 20px;
    font-size: 14px;
    font-weight: 700;
    white-space: normal;
}

.sb-kv.sb-kv-compact th {
    padding-top: 10px;
    font-weight: 500;
    color: var(--sb-text-sub);
}

/* セキュリティのヘッダーの要確認の札の横の「？」（CH-883）・WordPress の状態の「エラー」の行の「？」（CH-878）。
   押せる範囲（32px）で行の高さが変わらないように、上下を詰める */
body.sb-app .sb-kv .sb-badge + .sb-q,
body.sb-app .sb-kv td > .sb-q {
    margin: -6px 0 -6px 2px;
}

.sb-kv-url {
    display: inline-block;
    padding-top: 10px;
    word-break: break-all;
}

.sb-kv-help {
    display: block;
    margin-top: 4px;
}

/* 共通の入力（form-control）を白地の形に（base.css・style.min.css の暗い地の形を打ち消す） */
.sb-page-new .form-control,
.sb-page-new .sb-kv input[type="password"] {
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid #C3CBD3;
    border-radius: 10px;
    background: #fff;
    color: var(--sb-text);
    font: inherit;
    font-size: 15px;
    box-shadow: none;
}

.sb-page-new textarea.form-control {
    min-height: 96px;
    line-height: 1.6;
}

.sb-page-new .form-control:focus,
.sb-page-new .sb-kv input[type="password"]:focus {
    outline: 3px solid var(--sb-accent);
    outline-offset: 1px;
    border-color: var(--sb-accent);
}

.sb-page-new .form-control[readonly] {
    background: var(--sb-bg);
    font-family: var(--sb-mono);
    font-size: 13px;
}

/* base.css の .form-control は地・枠・文字の色などに !important を付けているので、
   siteb の画面の中だけ同じ強さで白地の形に戻す（ほかのサービスの画面には効かない） */
.sb-page-new .form-control {
    background: #fff !important;
    border: 1px solid #C3CBD3 !important;
    color: var(--sb-text) !important;
    border-radius: 10px !important;
    padding: 8px 12px !important;
}

.sb-page-new .form-control[readonly] {
    background: var(--sb-bg) !important;
}

.sb-page-new .form-control:focus {
    border-color: var(--sb-accent) !important;
    box-shadow: none !important;
}

.sb-page-new .form-control::placeholder {
    color: #8A96A3;
}

.sb-page-new .sb-kv .text-red-600 {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--sb-danger);
}

.sb-unit-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sb-page-new .sb-rule-number {
    width: 7em;
}

.sb-page-new .sb-input-auto {
    width: auto;
    max-width: 100%;
}

.sb-rule-form {
    margin: 0;
}

.sb-rule-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
}

.sb-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    cursor: pointer;
}

/* base.css の input { width: 100% } を打ち消す */
.sb-page-new .sb-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    flex: 0 0 auto;
    accent-color: var(--sb-accent);
}

/* 今の結果の 1 行（名前・札・説明・日時） */
.sb-now {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    font-size: 14px;
}

.sb-now-label {
    min-width: 8em;
    font-size: 13px;
    font-weight: 700;
    color: var(--sb-text-sub);
}

.sb-issues {
    flex: 1 0 100%;
    margin: 0;
    padding-left: 1.2em;
    list-style: disc;
    font-size: 14px;
    color: var(--sb-caution);
    overflow-wrap: anywhere;
}

/* 札（前の plus.css の sb-badge を白地向けに。site-maintenance.js・public-status.js も同じ名前を付ける） */
.sb-page-new .sb-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 10px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
    color: var(--sb-text-sub);
    background: #fff;
}

.sb-page-new .sb-badge-ok { color: var(--sb-ok); background: var(--sb-ok-soft); border-color: #A7DDBC; }
.sb-page-new .sb-badge-caution,
.sb-page-new .sb-badge-warn { color: var(--sb-caution); background: var(--sb-caution-soft); border-color: var(--sb-caution-line); }
.sb-page-new .sb-badge-danger { color: #fff; background: var(--sb-danger); border-color: var(--sb-danger); }
.sb-page-new .sb-badge-none { color: var(--sb-text-muted); border-style: dashed; }
/* おすすめ（サイトの守り・要確認に数えない・CH-1010）：アクセントの色の薄い札 */
.sb-page-new .sb-badge-info { color: var(--sb-accent-dark); background: var(--sb-accent-soft); border-color: #A9D3D6; }
.sb-page-new .sb-badge-stopped { color: var(--sb-text-sub); background: #F0F2F4; border-color: #C3CBD3; }
.sb-page-new .sb-badge-maint { color: var(--sb-maint); background: #EFF4FF; border-color: #B7CBF9; }

/* 応答の速さの 24 時間の流れ（1 時間ごとの平均の棒・高さは sb-lv-0〜10 の段・CH-554） */
.sb-speed-trend {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 64px;
    padding: 6px;
    border: 1px solid var(--sb-line);
    border-radius: 10px;
    background: #FAFBFC;
}

.sb-speed-bar {
    flex: 1 1 0;
    min-width: 3px;
    border-radius: 2px 2px 0 0;
    background: var(--sb-accent);
}

.sb-speed-bar.is-slow { background: #D69E2E; }
.sb-speed-bar.is-down { background: #C2410C; }
.sb-speed-bar.sb-lv-0 { height: 2px; background: #C3CBD3; }
.sb-speed-bar.sb-lv-0.is-down { height: 100%; background: #C2410C; }
.sb-speed-bar.sb-lv-1 { height: 10%; }
.sb-speed-bar.sb-lv-2 { height: 20%; }
.sb-speed-bar.sb-lv-3 { height: 30%; }
.sb-speed-bar.sb-lv-4 { height: 40%; }
.sb-speed-bar.sb-lv-5 { height: 50%; }
.sb-speed-bar.sb-lv-6 { height: 60%; }
.sb-speed-bar.sb-lv-7 { height: 70%; }
.sb-speed-bar.sb-lv-8 { height: 80%; }
.sb-speed-bar.sb-lv-9 { height: 90%; }
.sb-speed-bar.sb-lv-10 { height: 100%; }

/* WHOIS・DNS と外のツール */
.sb-tool-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sb-tool-btns .sb-btn {
    white-space: normal;
    text-align: left;
}

.sb-page-new .sb-btn-ghost.sb-btn-small {
    border-color: var(--sb-line);
    color: var(--sb-accent-dark) !important;
}

/* 無料のプランの見本 */
.sb-locked {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border: 1px dashed #C3CBD3;
    border-radius: 12px;
    background: #FAFBFC;
}

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

.sb-locked-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--sb-text);
}

.sb-locked-caption {
    font-size: 12px;
    font-weight: 700;
    color: var(--sb-text-muted);
}

.sb-locked-sample {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--sb-line);
    border-radius: 8px;
    background: #fff;
    color: #3B4754;
    font-family: var(--sb-mono);
    font-size: 12px;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* WHOIS・DNS の箱（見出しは押したあとに site-analytics.js が is-open を付けて出す） */
.sb-page-new .console-heading {
    display: none;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--sb-text-sub);
}

.sb-page-new .console-heading.is-open {
    display: flex;
}

.sb-page-new .btn-console-copy {
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid #C5CDD5;
    border-radius: 8px;
    background: #fff;
    color: var(--sb-accent-dark);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.sb-page-new .btn-console-copy.is-copied {
    border-color: var(--sb-ok);
    color: var(--sb-ok);
}

.sb-page-new .sb-console {
    max-height: 400px;
    overflow-y: auto;
    padding: 12px 14px;
    border: 1px solid var(--sb-line);
    border-radius: 10px;
    background: #FAFBFC;
    color: var(--sb-text);
    font-family: var(--sb-mono);
    font-size: 12px;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.sb-page-new .sb-console-info { color: var(--sb-text-muted); }
.sb-page-new .sb-console-error { color: var(--sb-danger); }

/* WordPress のトークン・状態のページ */
.sb-wp-token,
.sb-ps {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sb-wp-token {
    padding-top: 12px;
    border-top: 1px dashed var(--sb-line);
}

.sb-wp-token-now,
.sb-ps-now {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    font-size: 14px;
}

/* 状態のページの見本（CH-885・element/site_view/public_status_sample.php）。公開していないときは大きく、公開したあとは小さいリンクだけ */
.sb-ps-sample {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px;
    border: 1px solid var(--sb-line);
    border-radius: 12px;
    background: var(--sb-accent-soft);
}

.sb-ps-sample-thumb {
    flex: 0 0 168px;
    display: block;
    border: 1px solid var(--sb-line);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    cursor: zoom-in;
}

.sb-ps-sample-thumb img {
    display: block;
    width: 100%;
    height: 120px;
    object-fit: cover;
    object-position: top center;
}

.sb-ps-sample-thumb:hover,
.sb-ps-sample-thumb:focus-visible {
    border-color: var(--sb-accent);
}

.sb-ps-sample-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.sb-ps-sample-lead {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--sb-text);
}

.sb-ps-sample-desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--sb-text-sub);
    overflow-wrap: anywhere;
}

.sb-ps-sample-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--sb-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sb-ps-sample-link:hover {
    color: var(--sb-accent-dark);
}

.sb-ps-sample-mini {
    margin: 0;
    text-align: right;
}

/* 1 回だけ出すトークン・URL の欄 */
.sb-secret-new {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--sb-caution-line);
    border-radius: 12px;
    background: var(--sb-caution-soft);
}

.sb-secret-new p {
    flex: 1 0 100%;
    font-size: 13px;
    font-weight: 700;
    color: #7A4B00;
}

.sb-page-new .sb-secret-new .form-control {
    flex: 1 1 260px;
    width: auto;
}

.sb-steps {
    margin: 0;
    padding-left: 1.4em;
    list-style: decimal;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    color: #3B4754;
    overflow-wrap: anywhere;
}

.sb-steps .sb-btn {
    margin-top: 4px;
}

/* つなぐまでの手順の ③：説明・今のトークン・発行と無効にするのボタン・発行したトークンの欄を縦に（CH-884） */
.sb-wp-step-token > p {
    margin: 0;
}

.sb-wp-step-token > * + * {
    margin-top: 8px;
}

/* 届いたあとは、手順とトークンを畳む（CH-884）。見た目は「要確認にするとき」のくわしく（sb-notes-more）と同じ */
.sb-wp-setup {
    padding-top: 10px;
    border-top: 1px solid var(--sb-line-soft);
}

.sb-wp-setup > summary {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--sb-accent);
    cursor: pointer;
}

.sb-wp-setup[open] > summary {
    margin-bottom: 8px;
}

.sb-wp-setup > .sb-wp-token {
    padding-top: 0;
    border-top: 0;
}

/* WordPress の状態の頭：専用のプラグインの紹介（CH-884）。まだ届いていないときは大きく、届いたあと（.is-compact）は小さい 1 行 */
.sb-wp-intro {
    display: flex;
    align-items: center;
    gap: 14px 16px;
    padding: 16px 18px;
    border: 1px solid var(--sb-accent);
    border-radius: 12px;
    background: var(--sb-accent-soft);
}

.sb-wp-intro-mark {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: #fff;
    color: var(--sb-accent);
}

.sb-wp-intro-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sb-wp-intro-name {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--sb-accent-dark);
}

.sb-wp-intro-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--sb-text);
    overflow-wrap: anywhere;
}

.sb-wp-intro-download {
    flex: 0 0 auto;
}

/* 紹介の枠と「今の結果」のあいだを少し空ける（担当者さん・CH-884 #12345 の A） */
.sb-wp-intro + .sb-now {
    margin-top: 16px;
}

.sb-wp-intro.is-compact + .sb-now {
    margin-top: 12px;
}

.sb-wp-intro.is-compact {
    gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
}

.sb-wp-intro.is-compact .sb-wp-intro-mark {
    width: 28px;
    height: 28px;
    border-radius: 8px;
}

.sb-wp-intro.is-compact .sb-wp-intro-text {
    font-size: 13px;
    line-height: 1.6;
    color: var(--sb-text-sub);
}

/* スマホ：マーク・文・ボタンを縦に並べ、ボタンを横いっぱいに（届いたあとは、マークと文を横に・ボタンをその下に） */
@media (max-width: 760px) {
    .sb-wp-intro {
        flex-direction: column;
        align-items: flex-start;
        padding: 14px;
    }

    .sb-wp-intro-download {
        width: 100%;
    }

    .sb-wp-intro.is-compact {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        padding: 8px 10px;
    }

    .sb-wp-intro.is-compact .sb-wp-intro-body {
        flex: 1 1 0;
    }

    .sb-wp-intro.is-compact .sb-wp-intro-download {
        flex-basis: 100%;
    }
}

.sb-page-new .sb-help-link {
    color: var(--sb-accent);
    text-decoration: underline;
}

/* --- 追加：1 件ずつ／まとめて のタブ（2 つの画面のあいだのリンク） --- */
.sb-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: #E7EBEF;
    border-radius: 12px;
    width: fit-content;
    max-width: 100%;
}

.sb-tab {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 18px;
    border-radius: 9px;
    color: #3B4754 !important;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}

.sb-tab:hover {
    background: rgba(255, 255, 255, .6);
}

.sb-tab.is-current {
    background: #fff;
    color: var(--sb-text) !important;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

/* サイトを追加：切り替えのタブと、すぐ下の一括登録への案内の 1 行（あいだを詰める・CH-878 #10267） */
.sb-add-switch {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sb-add-switch .sb-help {
    margin: 0;
}

.sb-page-new .sb-input-large {
    min-height: 52px;
    font-size: 17px;
}

.sb-page-new .sb-textarea {
    min-height: 200px;
    padding: 12px 14px;
    line-height: 1.6;
    font-family: var(--sb-mono);
    font-size: 14px;
}

.sb-page-new .sb-file {
    width: 100%;
    padding: 10px 12px;
    border: 1px dashed #C3CBD3;
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-size: 14px;
}

/* 説明の一覧（サイトを追加・一括登録・一覧の絞り込みの「？」のモーダルの中。前の下の枠の見出しと「くわしく見る」は CH-878 でやめた） */
.sb-notes-list {
    margin: 0;
    padding-left: 1.2em;
    list-style: disc;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    color: #3B4754;
}

/* --- 共通の部品（css/ui-parts.css・CH-712・713・715）を siteb の形に合わせる。色は --ui-* を替えるだけ --- */
.sb-app {
    --ui-text: #3B4754;
    --ui-text-sub: var(--sb-text-muted);
    --ui-accent: var(--sb-accent);
    --ui-accent-soft: var(--sb-accent-soft);
    --ui-line: var(--sb-line);
    --ui-notes-bg: var(--sb-bg);
    --ui-field-bg: #fff;
    --ui-radius: 10px;
}

/* 説明の枠：見出しは本文の見出しと同じ字の色 */
.sb-page-new .ui-notes-title {
    color: var(--sb-text);
}

/* 言葉の札の入力：枠は入力の欄（form-control）と同じ色。札は青緑の薄い地に濃い字 */
.sb-page-new .ui-tags-box {
    border-color: #C3CBD3;
}

.sb-page-new .ui-tag {
    color: var(--sb-accent-dark);
    font-weight: 500;
}

.sb-page-new .ui-tags-box .ui-tags-entry {
    font-size: 15px;
}

.sb-page-new .ui-tags-box .ui-tags-entry::placeholder {
    color: #8A96A3;
}

/* --- ふつうの表（まとめて登録の結果・止まっていた時間・ステータスについて）。一覧の .sb-table はスマホでカードになるので別の名前 --- */
.sb-table-scroll {
    overflow-x: auto;
}

.sb-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.sb-data-table th {
    padding: 10px 12px;
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    color: var(--sb-text-muted);
    white-space: nowrap;
    background: transparent;
    border: 0;
}

.sb-data-table td {
    padding: 12px;
    border: 0;
    border-top: 1px solid var(--sb-line-soft);
    vertical-align: top;
    color: var(--sb-text);
    background: transparent;
}

.sb-data-table th:first-child,
.sb-data-table td:first-child {
    padding-left: 0;
}

.sb-data-table .sb-th-num,
.sb-data-table .sb-td-num {
    text-align: right;
    white-space: nowrap;
}

/* --- サイト監視ステータスについて（status-about・CH-1059）：上は状態の表示の表、下の「くわしく」に HTTP の番号の表 --- */
.sb-data-table.sb-about-table th[scope="row"] {
    padding: 12px;
    border-top: 1px solid var(--sb-line-soft);
    vertical-align: top;
    font-size: 14px;
    font-weight: 500;
    color: var(--sb-text);
    white-space: nowrap;
}

.sb-data-table.sb-about-table th[scope="row"]:first-child {
    padding-left: 0;
}

.sb-about-states .sb-about-name {
    width: 10em;
}

.sb-about-more-head {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 15px;
    font-weight: 700;
    color: var(--sb-text);
    cursor: pointer;
}

.sb-about-more[open] .sb-about-more-head {
    margin-bottom: 8px;
}

/* スマホの幅：1 行を 1 枚のカードにする（見出しの行は隠し、項目の名前を値の上に出す） */
@media (max-width: 600px) {
    .sb-about-table thead {
        display: none;
    }

    .sb-about-table,
    .sb-about-table tbody,
    .sb-about-table tr,
    .sb-data-table.sb-about-table th[scope="row"],
    .sb-about-table td {
        display: block;
        width: 100%;
    }

    .sb-about-table tr {
        margin: 0 0 10px;
        padding: 10px 12px;
        border: 1px solid var(--sb-line);
        border-radius: 10px;
    }

    .sb-data-table.sb-about-table th[scope="row"],
    .sb-data-table.sb-about-table td {
        padding: 2px 0 !important;
        border: 0;
        white-space: normal;
    }

    .sb-data-table.sb-about-table th[scope="row"] {
        margin-bottom: 4px;
    }

    .sb-about-http td::before {
        content: attr(data-label);
        display: block;
        font-size: 12px;
        color: var(--sb-text-muted);
    }
}

/* 止まっていた時間の画面（前の plus.css の sb-dt-* を白地向けに） */
.sb-dt-url {
    word-break: break-all;
}

/* 上の説明の 1 行と「？」・記録が途中からのときの小さな 1 行（CH-882。前の「記録がある期間」の 2 行の dl はやめた） */
.sb-dt-lead {
    margin: 0;
    font-size: 14px;
}

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

.sb-dt-first {
    margin: 4px 0 0;
    font-size: 12px;
}

.sb-dt-time {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* 月（2026-11）は途中で折り返さない（CH-1059）。「10/2 から」は下の行でよい */
.sb-dt-month {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.sb-dt-month .sb-dt-month-from {
    white-space: normal;
}

.sb-dt-uptime-ok { color: var(--sb-ok); font-weight: 700; }
.sb-dt-uptime-low { color: var(--sb-caution); font-weight: 700; }

.sb-dt-cut,
.sb-dt-records,
.sb-dt-count {
    font-size: 12px;
    color: var(--sb-text-muted);
}

.sb-dt-cut {
    display: block;
}

.sb-dt-reason {
    overflow-wrap: anywhere;
    /* 表の自動の幅で 1 文字ぶんまで細くならないように（前の plus.css と同じ・CH-1032） */
    min-width: 12em;
}

/* スマホの幅：止まっていた時間の一覧と月ごとの稼働率の表は 1 件（1 か月）ずつの枠にし、項目の名前（data-label）を値の左に出す
   （前の plus.css の形を白地向けに・CH-1032。月ごとの表も枠にした・CH-1059） */
@media (max-width: 760px) {
    .sb-dt-spans thead,
    .sb-dt-months thead {
        display: none;
    }

    .sb-dt-spans,
    .sb-dt-spans tbody,
    .sb-dt-spans tr,
    .sb-dt-spans td,
    .sb-dt-months,
    .sb-dt-months tbody,
    .sb-dt-months tr,
    .sb-dt-months td {
        display: block;
        width: 100%;
    }

    .sb-dt-spans tr,
    .sb-dt-months tr {
        padding: 8px 0;
        border-bottom: 1px solid var(--sb-line);
    }

    .sb-dt-spans td,
    .sb-dt-months td {
        padding: 2px 4px;
        border: 0;
        text-align: left;
        white-space: normal;
    }

    .sb-dt-spans td.sb-dt-reason {
        min-width: 0;
    }

    /* 数字の欄の右寄せ（.sb-td-num）も、枠の形では左にそろえる */
    .sb-dt-spans td.sb-td-num,
    .sb-dt-months td.sb-td-num {
        text-align: left;
    }

    .sb-dt-spans td::before,
    .sb-dt-months td::before {
        content: attr(data-label) "：";
        display: inline-block;
        min-width: 4.5em;
        color: var(--sb-text-muted);
        font-size: 12px;
    }

    /* 月ごとの枠は、月を見出しにする（名前は出さない） */
    .sb-dt-months td.sb-dt-month {
        font-weight: 700;
        white-space: nowrap;
    }

    .sb-dt-months td.sb-dt-month::before {
        content: none;
    }

    .sb-dt-months td::before {
        min-width: 7em;
    }
}

.sb-pager .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sb-pager .page-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 12px !important;
    border-radius: 8px !important;
    border: 1px solid var(--sb-line) !important;
    background: #fff !important;
    color: #3B4754 !important;
    text-decoration: none;
}

.sb-pager .page-item.active .page-link {
    background: var(--sb-text) !important;
    border-color: var(--sb-text) !important;
    color: #fff !important;
}

/* --- スマホの幅（3 段目の画面） --- */
@media (max-width: 760px) {
    .sb-site-head {
        padding: 18px;
    }

    .sb-site-head h1 {
        font-size: 22px;
    }

    .sb-site-head-actions,
    .sb-site-head-actions .sb-btn {
        width: 100%;
    }

    .sb-site-head-actions .sb-btn {
        flex: 1 1 auto;
    }

    .sb-section.sb-section-tight {
        padding: 18px;
    }

    .sb-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sb-stat {
        padding: 14px;
    }

    .sb-stat-value {
        font-size: 22px;
    }

    /* 見本は縦に並べる（サムネイルを上に・幅いっぱい） */
    .sb-ps-sample {
        flex-direction: column;
        align-items: stretch;
    }

    .sb-ps-sample-thumb {
        flex: 0 0 auto;
    }

    .sb-ps-sample-thumb img {
        height: 160px;
    }

    .sb-trend {
        gap: 2px;
    }

    .sb-trend-dir {
        flex-basis: 100%;
    }

    /* 短い名前・値・説明は、語の途中で折り返さない（「チェッ／ク」「公開していませ／ん」など・CH-1059）。
       1 行に入らない長い語だけは、はみ出さないように途中で折る（overflow-wrap: anywhere）。長い文の段落は今までどおり */
    .sb-stat-label,
    .sb-stat-sub,
    .sb-cat-title,
    .sb-cat-now,
    .sb-kv th,
    .sb-site-head-ago,
    .sb-trend-dir {
        word-break: keep-all;
        overflow-wrap: anywhere;
    }

    /* チェックボックスは、指で押しやすい大きさに（CH-1059） */
    .sb-page-new .sb-check input[type="checkbox"] {
        width: 24px;
        height: 24px;
    }

    /* 見出しを上・入力を下に積む */
    .sb-kv,
    .sb-kv tbody,
    .sb-kv tr,
    .sb-kv th,
    .sb-kv td {
        display: block;
        width: 100%;
    }

    .sb-kv th {
        padding: 12px 0 4px;
        border-top: 0;
    }

    .sb-kv td {
        padding: 0 0 10px;
        border-top: 0;
    }

    .sb-kv tr {
        border-top: 1px solid var(--sb-line-soft);
    }

    .sb-kv tr:first-child {
        border-top: 0;
    }

    .sb-kv.sb-kv-compact th {
        padding-top: 10px;
    }

    .sb-tabs,
    .sb-tab {
        flex: 1 1 auto;
    }

    .sb-tabs {
        width: 100%;
    }

    .sb-tab {
        justify-content: center;
        padding: 0 10px;
    }
}