/**
 * Repo block — リポジトリURL＋コピーのカード。
 *
 * 旧: 各記事の wp:html に <style> 直書き。2026-08 にここへ一元化。
 * 記事側マークアップ: .repo-container > .repo-block（クラス名は据え置き）。
 * 色はテーマの Archive Steel トークン（tokens-nettoge.css）を参照し、
 * ライト/ダークとも1か所で追従する。フォールバックは旧直書き値。
 */

.repo-container {
    width: 100%;
    font-size: 14px;
}

.repo-block {
    margin-bottom: 20px;
    border: 1px solid var(--nettoge-retro-core-border, #e1e4e8);
    border-radius: var(--nettoge-retro-core-radius, 6px);
    background: var(--nettoge-retro-core-surface-solid, transparent);
    overflow: hidden;
}

.repo-block__header {
    background: var(--nettoge-retro-core-surface-soft, #f6f8fa);
    color: var(--nettoge-retro-core-title, inherit);
    padding: 10px 15px;
    font-weight: 700;
    border-bottom: 1px solid var(--nettoge-retro-core-border, #e1e4e8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.repo-block__title {
    display: flex;
    align-items: center;
    min-width: 0;
}

.repo-block__icon {
    width: 14px;
    height: 14px;
    margin-right: 10px;
    flex-shrink: 0;
}

.repo-block__content {
    padding: 15px;
}

.repo-block__url {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    background: var(--nettoge-retro-core-code-bg, #f6f8fa);
    color: var(--nettoge-retro-core-code-text, inherit);
    border: 1px solid var(--nettoge-retro-core-code-border, transparent);
    padding: 10px;
    border-radius: var(--nettoge-retro-core-radius, 4px);
    margin-bottom: 10px;
    word-break: break-all;
}

.repo-block__copy-btn {
    padding: 8px 14px;
    background: var(--nettoge-retro-core-accent-bg, #0366d6);
    color: var(--nettoge-retro-core-accent-fg, #fff);
    border: 1px solid var(--nettoge-retro-core-accent-border, transparent);
    border-radius: var(--nettoge-retro-core-radius, 4px);
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.2s ease;
}

.repo-block__copy-btn:hover {
    filter: brightness(1.08);
}

.repo-block__copy-btn:focus-visible {
    outline: 2px solid var(--ntg-focus, #2f7a72);
    outline-offset: 2px;
}

/* コピー結果の状態（JSがクラスを付け外しする） */
.repo-block__copy-btn.is-copied {
    background: var(--nettoge-retro-core-safe, #28a745);
    border-color: transparent;
}

.repo-block__copy-btn.is-error {
    background: var(--nettoge-retro-core-danger, #dc3545);
    border-color: transparent;
}

.repo-block__github-link {
    color: var(--ntg-link, #0366d6);
    text-decoration: none;
    font-size: 14px;
    flex-shrink: 0;
}

.repo-block__github-link:hover {
    text-decoration: underline;
}