/* WEBチェッカー だけの部品。土台は design-template の style.css (クラスは wc-) */
.wc-dash { color: var(--color-text-faint); }
.table td:has(> .wc-dash:only-child) { text-align: center; }
.wc-center { text-align: center; }
.wc-nowrap { white-space: nowrap; }
.wc-nowrap .badge, .wc-nowrap a, .wc-nowrap .btn { white-space: nowrap; }
.wc-mt { margin-top: 14px; }
.wc-mono { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: calc(12px * var(--font-scale)); }
/* 長い文の列だけ折り返す (.table tbody td の既定は nowrap) */
.table tbody td.wc-wrap { white-space: normal; word-break: break-word; line-height: 1.6; }
/* 対象の URL は 1 行のまま、はみ出しは … (title で全文) */
.table tbody td.wc-url { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.wc-wrap { overflow-wrap: anywhere; white-space: normal; }

.badge-error { background: #fce8e6; color: #c5221f; }
:root.dark .badge-error { background: rgba(229, 83, 75, 0.2); color: #f28b82; }
.badge.wc-kind { display: inline-flex; align-items: center; gap: 4px; }
.badge.wc-kind svg { width: 12px; height: 12px; }

/* サイドメニュー: 種別の絞り込み (nav-children の外に置く nav-child) */
.wc-nav-kind span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wc-nav-kind-icon { width: 13px; height: 13px; flex-shrink: 0; }
.app.is-collapsed .wc-nav-kind { display: none; }

/* ホームの数字のカード */
.card-grid.wc-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
a.metric.wc-metric-link { color: inherit; text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s; }
a.metric.wc-metric-link:hover { border-color: var(--color-primary); box-shadow: var(--shadow-2); }
a.metric.wc-metric-link:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.metric-value.wc-metric-red { color: #c5221f; }
.metric-value.wc-metric-warn { color: #b06000; }
.metric-value.wc-metric-ok { color: #137333; }
:root.dark .metric-value.wc-metric-red { color: #f28b82; }
:root.dark .metric-value.wc-metric-warn { color: #f0b878; }
:root.dark .metric-value.wc-metric-ok { color: #6fd296; }

/* 絞り込み (リンクのタブ) */
.wc-filter { margin-bottom: 4px; }
.tabs.wc-tabs { flex-wrap: wrap; }
.tabs.wc-tabs .tab { text-decoration: none; }

/* 詳細の表 (項目名の列を少し広く) */
.def-list.wc-def { grid-template-columns: 120px 1fr; }
.def-list.wc-def dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* 差分 (行番号なしの 2 列。.diff-row の 3 列を上書き) */
.diff.wc-diff .diff-row { grid-template-columns: 20px minmax(0, 1fr); }
.diff.wc-diff .diff-content { white-space: pre-wrap; word-break: break-all; overflow-x: visible; }
.diff.wc-diff .diff-row.info { background: var(--color-surface-2); color: var(--color-text-muted); }
.diff.wc-diff { max-height: 480px; overflow-y: auto; }
:root.dark .diff.wc-diff .diff-row.add { background: rgba(45, 165, 91, 0.18); }
:root.dark .diff.wc-diff .diff-row.remove { background: rgba(229, 83, 75, 0.18); }

/* 取得した内容 */
.wc-pre { margin: 0; padding: 12px 14px; max-height: 480px; overflow: auto; white-space: pre-wrap; word-break: break-all;
  background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  font-family: "SF Mono", Menlo, Consolas, monospace; font-size: calc(12px * var(--font-scale)); line-height: 1.6; color: var(--color-text); }

/* 入力の画面 (モーダルと道具) */
.modal.wc-modal-wide { max-width: 860px; }
.modal.wc-modal-wide .modal-body { max-height: calc(100vh - 180px); overflow-y: auto; }
.wc-form-grid { gap: 14px 20px; }
.wc-form-grid .field { gap: 4px; }
.wc-time-range { display: flex; align-items: center; gap: 8px; }
.wc-time-range .input { width: 90px; text-align: center; }
.wc-form-error { margin: 10px 0 0; color: #c5221f; font-size: calc(12.5px * var(--font-scale)); }
:root.dark .wc-form-error { color: #f28b82; }
.wc-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.wc-tool-form { max-width: 960px; }
.wc-login-error { margin-bottom: 4px; }
.alert.wc-login-error[hidden] { display: none; }   /* .alert の display:flex が hidden を打ち消すため */
.dl-hero-actions { flex-wrap: wrap; }
.dl-hero-actions .btn { white-space: nowrap; }

/* 開発中のログイン (ID を押すだけ) */
.wc-dev-login { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-border); }
.wc-dev-login-title { font-size: calc(12px * var(--font-scale)); color: var(--color-text-sub); margin-bottom: 8px; }
.wc-dev-login-list { display: grid; gap: 6px; }
.wc-dev-user { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px;
  border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text);
  font-size: calc(13px * var(--font-scale)); cursor: pointer; text-align: left; }
.wc-dev-user:hover { background: var(--color-surface-hover); border-color: var(--color-primary); }
.wc-dev-login-empty { font-size: calc(12.5px * var(--font-scale)); color: var(--color-text-sub); }

/* 確認のモーダル (ブラウザ標準のダイアログは使わない) */
.wc-confirm-text { line-height: 1.7; }

/* スマホ幅 (767px 以下) は一覧の表を縦のカードに積む。項目は data-label の見出しつきで全部出す */
@media (max-width: 767px) {
  .card-grid.wc-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wc-form-actions .btn { flex: 1 1 auto; }
  /* モーダルの下のボタン列 (.btn の min-width 96px が 2 つで収まらない) */
  .modal-footer .btn { flex: 1 1 0; min-width: 0; }
  .modal.wc-modal-wide .modal-body { max-height: calc(100vh - 150px); }
  .wc-time-range { flex-wrap: wrap; }
  .def-list.wc-def { grid-template-columns: 1fr; gap: 2px 0; }
  .def-list.wc-def dt { margin-top: 8px; }
  .table-wrap.wc-stack { overflow-x: visible; border: 0; background: transparent; }
  .wc-stack .table, .wc-stack .table tbody, .wc-stack .table tr { display: block; width: 100%; }
  .wc-stack .table thead { display: none; }
  .wc-stack .table tbody tr { border: 1px solid var(--color-border); border-radius: var(--radius-md);
    background: var(--color-surface); margin-bottom: 10px; padding: 8px 12px; }
  .wc-stack .table tbody td { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 8px;
    align-items: start; padding: 5px 0; border-bottom: 0; background: transparent; text-align: left; white-space: normal; word-break: break-word; }
  .wc-stack .table tbody tr:hover td, .wc-stack .table tbody tr:nth-child(even) td { background: transparent; }
  .wc-stack .table tbody td::before { content: attr(data-label); color: var(--color-text-sub); font-size: calc(12px * var(--font-scale)); font-weight: 600; }
  .wc-stack .table tbody td.wc-stack-first { font-weight: 700; padding-bottom: 7px; border-bottom: 1px solid var(--color-border); margin-bottom: 3px; }
  .wc-stack .table tbody td.wc-url { max-width: none; overflow: visible; text-overflow: clip; }
  .wc-stack .table tbody td.actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
  .wc-stack .table tbody td.actions::before { content: none; }
  .wc-stack .table tbody td .wc-dash { text-align: left; }
  .table td:has(> .wc-dash:only-child) { text-align: left; }
}