/* 意図的に上書きされる側のスタイルをレイヤーに置き、上書きする側は非レイヤー（常にレイヤーに勝つ）に置く。
   詳細は docs/adr/css_cascade_layer_policy.md を参照 */
@layer base, components;

:root {
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 28px;
    --color-text-secondary: #666;
    /* フォントサイズは以下の5段階に統一する。値が近いだけの独自指定を増やさないこと */
    --jig-font-size-2xs: 0.7rem;
    --jig-font-size-xs: 0.8rem;
    --jig-font-size-sm: 0.9rem;
    --jig-font-size-base: 1rem;
    --jig-font-size-lg: 1.125rem;
    /* 種別バッジ（kind-badge、サイドバーリンクの data-kind-char バッジ）共通の色 */
    --kind-color-package: #5a7a3a;
    --kind-color-class: #1b3a66;
    --kind-color-method: #6b3a8a;
    --kind-color-field: #a05a20;
    --settings-icon-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/></svg>");
}

body {
    margin: 0;
    height: 100vh;
}

/* split-view が直接の子のページ: body を flex column にして高さ計算不要に */

body:has(> .split-view) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

main, nav {
    padding: 0 1em;
}

@layer base {
    a {
        color: #000;
        text-decoration-line: none;
    }

    a:hover {
        text-decoration-line: underline;
    }
}

header.top {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 2em;
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0 0.5em;
    box-sizing: border-box;
    background-color: #243D1E;
    color: #FFF;
}

header.top a {
    color: #FFF;
    font-size: var(--jig-font-size-xs);
}

.jig-header-nav {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.jig-page-title,
.jig-header-nav__trigger {
    font-weight: bold;
    padding: 0 0.3em;
    border-radius: 3px;
}

.jig-header-nav__trigger {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.2em;
}

.jig-header-nav__trigger::after {
    content: "▾";
    font-size: var(--jig-font-size-xs);
    opacity: 0.7;
}

.jig-header-nav:hover .jig-header-nav__trigger {
    background-color: rgba(255, 255, 255, 0.12);
}

.jig-header-nav__dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    list-style: none;
    margin: 0;
    padding: 0.2em 0;
    background-color: #243D1E;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    min-width: 12em;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    z-index: 1001;
}

.jig-header-nav:hover .jig-header-nav__dropdown {
    display: block;
}

.jig-header-nav__item {
    padding: 0;
}

.jig-header-nav .jig-header-nav__item a,
.jig-header-nav__item span {
    display: block;
    padding: 0.35em 0.8em;
    font-size: var(--jig-font-size-sm);
    color: #FFF;
    text-decoration: none;
}

.jig-header-nav__item a:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.jig-header-nav__item--current span {
    font-weight: bold;
    color: rgba(255, 255, 255, 0.6);
    cursor: default;
}

.jig-lang-switcher {
    margin-left: auto;
    font-size: var(--jig-font-size-sm);
}

.jig-lang-switcher__dropdown {
    left: auto;
    right: 0;
    min-width: 8em;
}

/* header.top を持たないページ（index）では右上に固定配置 */

header:not(.top) > .jig-lang-switcher {
    position: fixed;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0.25em 0.5em;
    background-color: #243D1E;
    color: #FFF;
    border-bottom-left-radius: 4px;
    z-index: 1001;
}

header:not(.top) > .jig-lang-switcher .jig-header-nav__item a,
header:not(.top) > .jig-lang-switcher .jig-header-nav__item span {
    color: #FFF;
}

.jig-help-button {
    background: none;
    border: none;
    color: #FFF;
    cursor: pointer;
    padding: 0.2em;
    display: flex;
    align-items: center;
    border-radius: 4px;
    opacity: 0.8;
}

.jig-help-button:hover {
    background-color: rgba(255, 255, 255, 0.12);
    opacity: 1;
}

.jig-help-button svg {
    width: 1.2em;
    height: 1.2em;
}

#jig-document-help-panel {
    background: #fff;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 1em 2em;
    display: none;
    max-height: 70vh;
    overflow-y: auto;
}

#jig-document-help-panel.is-active {
    display: block;
}

#jig-document-help-panel h2 {
    margin-top: 0;
    font-size: var(--jig-font-size-lg);
    border-bottom: 2px solid #243D1E;
    padding-bottom: 0.3em;
}

#jig-document-help-panel .help-content {
    max-width: 1000px;
    margin: 0 auto;
}

aside.notice {
    background-color: #f9f9f9;
    border-left: 10px solid #ccc;
    padding: 0.5em 1em;
    margin: 1em 0;
}

/* 一般 */

.hidden {
    display: none;
}

.screen-reader-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
}

.weak {
    font-size: var(--jig-font-size-sm);
    color: gray;
}

.declaration,
.fully-qualified-name {
    font-size: var(--jig-font-size-xs);
    color: silver;
}

.meta-label {
    font-size: var(--jig-font-size-xs);
    color: silver;
    margin-right: 4px;
}

.meta-value {
    font-size: var(--jig-font-size-sm);
    color: gray;
}

.term-attributes-toggle {
    display: inline-block;
    font-size: var(--jig-font-size-xs);
    color: #aaa;
    cursor: pointer;
    user-select: none;
    padding: 2px 6px;
    margin-top: 4px;
    border-radius: 3px;
    list-style: none;
}

.term-attributes-toggle::-webkit-details-marker {
    display: none;
}

.term-attributes-toggle::before {
    content: "▸ ";
}

details[open] .term-attributes-toggle::before {
    content: "▾ ";
}

.deprecated {
    text-decoration: line-through !important;
}

/* メインコンテンツ */

/* テーブル */

main table {
    width: 80%;
    border-collapse: collapse;
    margin-bottom: 0.5em;
}

main table tr > * {
    border: #000 solid 1px;
    padding-left: 0.5em;
    text-align: left;
}

main table thead {
    color: #FFF;
    background-color: #465DAA;
}

/* markdown */

.markdown {
    margin: 0.5em;
    font-size: var(--jig-font-size-sm);
}

.markdown table thead {
    color: #000;
    background-color: #CCC;
}

.markdown p {
    margin: 0.1em;
}

/* サイドバー＋コンテンツの横並びコンテナ */

.split-view {
    display: flex;
    gap: 20px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.split-view > nav {
    width: var(--sidebar-width);
    flex-shrink: 0;
    overflow: hidden;
    box-sizing: border-box;
    transition: width 0.2s ease;
}

.split-view > nav.sidebar--collapsed {
    width: var(--sidebar-collapsed-width);
    padding: 0;
    cursor: pointer;
}

.sidebar--collapsed .sidebar-settings,
.sidebar--collapsed .sidebar-filter,
.sidebar--collapsed .in-page-sidebar__list {
    display: none;
}

.split-view > main,
.split-view > section {
    flex: 1;
    min-width: 0;
    overflow: auto;
}

@media (max-width: 900px) {
    body:has(> .split-view) {
        flex-direction: column;
    }

    .split-view {
        flex-direction: column;
    }

    .split-view > nav {
        width: 100%;
        max-height: 40vh;
    }

    /* 縦並び時は横でなく上方向に閉じ、幅いっぱいの薄いバーとして表示する */
    .split-view > nav.sidebar--collapsed {
        width: 100%;
        max-height: none;
    }

    .split-view > main,
    .split-view > section {
        width: 100%;
    }
}

.methods-section {
    display: grid;
    gap: 8px;
}

.method-item,
.field-item {
    padding: 8px 0;
    border-bottom: 1px solid #eef0f5;
}

.method-item:last-child,
.field-item:last-child {
    border-bottom: none;
}

.method-signature,
.field-signature {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px;
    font-size: var(--jig-font-size-sm);
}

.method-name {
    font-weight: bold;
    color: #1b3a66;
    white-space: nowrap;
}

.field-name {
    font-weight: bold;
    color: #1b3a66;
    white-space: nowrap;
}

.method-return-sep,
.field-type-sep {
    margin: 0 4px;
    color: #999;
}

/* 型参照リンク（メソッド引数・戻り値・フィールド型など）とパッケージ参照リンク:
   hoverせずともクリック可能と分かるよう常時薄い下線を付け、hoverで濃くする */
.type-ref-link,
.package-ref-link {
    text-decoration-line: underline;
    text-decoration-color: rgba(0, 0, 0, 0.45);
    text-underline-offset: 3px;
}

.type-ref-link:hover,
.package-ref-link:hover {
    text-decoration-color: currentColor;
}

.entrypoint-item {
    padding: 8px 0;
    border-bottom: 1px solid #eef0f5;
}

.entrypoint-item:last-child {
    border-bottom: none;
}

.entrypoint-section > h4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.simplified-toggle-btn {
    font-size: var(--jig-font-size-xs);
    padding: 2px 8px;
    cursor: pointer;
    border: 1px solid #1b3a66;
    border-radius: 3px;
    background: none;
    color: #1b3a66;
    font-weight: normal;
    line-height: 1.4;
    flex-shrink: 0;
}

.simplified-toggle-btn:hover {
    background-color: rgba(27, 58, 102, 0.08);
}

.simplified-toggle-btn[aria-pressed="true"] {
    background-color: #1b3a66;
    color: #fff;
}

.entrypoint-section--simplified .entrypoint-item__io {
    display: none;
}

.entrypoint-item__header {
    display: flex;
    gap: 12px;
    align-items: baseline;
    font-size: var(--jig-font-size-sm);
    margin-bottom: 4px;
}

.entrypoint-item__name {
    font-weight: bold;
    color: #1b3a66;
}

.entrypoint-item__path {
    color: #666;
    font-family: monospace;
    font-size: var(--jig-font-size-sm);
}

@layer components {
    .entrypoint-item__io {
        display: grid;
        grid-template-columns: 3em 1fr;
        gap: 2px 8px;
        font-size: var(--jig-font-size-sm);
        margin: 0;
        padding-left: 1em;
    }
}

.entrypoint-item__io dt {
    grid-column: 1;
    color: #888;
    padding-top: 1px;
}

.entrypoint-item__io dd {
    grid-column: 2;
    margin: 0;
}

.entrypoint-item__params {
    display: grid;
    grid-template-columns: max-content auto;
    column-gap: 8px;
    row-gap: 2px;
}

.entrypoint-item__param-name {
    color: #555;
}

.entrypoint-item__empty {
    color: #bbb;
}

main table.fields thead {
    color: #FFF;
    background-color: #009900;
}

td.fqn {
    white-space: nowrap;
    overflow: scroll;
    max-width: 20em;
    overflow-wrap: normal;
    word-break: normal;
}

/* カード形式 */

.jig-card-list {
    display: grid;
    gap: 20px;
    align-content: start;
}

.jig-card.jig-card--type {
    border: 1px solid #d4d9e5;
    border-radius: 8px;
    padding: 16px;
    background: linear-gradient(180deg, #f9fbff, #f3f6ff);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    scroll-margin-top: 7em; /* jump-bar + group-header の高さ分 */
}

.jig-card.jig-card--type > h3 {
    margin-top: 0;
    margin-bottom: 0.5em;
}

.jig-card.jig-card--type > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    font-size: var(--jig-font-size-lg);
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 0;
}

.jig-card.jig-card--type > summary::-webkit-details-marker {
    display: none;
}

.jig-card.jig-card--type[open] > summary {
    margin-bottom: 0.5em;
}

.jig-card--type h3 .card-title-anchor {
    color: inherit;
    text-decoration: none;
}

.jig-card--type h3 .card-title-anchor::after {
    content: " #";
    opacity: 0;
    font-size: var(--jig-font-size-xs);
    font-weight: normal;
    transition: opacity 0.15s;
    color: #5577aa;
}

.jig-card--type h3 .card-title-anchor:hover::after {
    opacity: 0.6;
}

.jig-card--type h3 .card-title-anchor:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.jig-card--type h3 .source-link {
    display: inline-flex;
    align-items: center;
    margin-left: 0.4em;
    color: #5577aa;
    opacity: 0.5;
    vertical-align: middle;
    transition: opacity 0.15s;
}

.jig-card--type h3 .source-link:hover {
    opacity: 1;
}

.jig-card--type > table {
    margin-top: 12px;
}

.jig-card.jig-card--item {
    border: 1px solid #e2e4ea;
    border-radius: 6px;
    padding: 12px;
    background-color: #fff;
    margin-top: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.jig-card--type > .jig-card--type + .jig-card--type {
    margin-top: 12px;
}

.io-type-card .field-item,
.io-type-nested .field-item {
    padding: 3px 0;
    border-bottom: none;
}

.io-type-usages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 4px 0;
}

.io-type-usages-label {
    font-size: var(--jig-font-size-xs);
    font-weight: 600;
    color: #666;
    white-space: nowrap;
}

.io-type-usage-link {
    font-size: var(--jig-font-size-sm);
    color: #2d5fa8;
    text-decoration: none;
    background-color: #ebf0fb;
    border-radius: 3px;
    padding: 1px 7px;
}

.io-type-usage-link:hover {
    text-decoration: underline;
}

.io-type-nested {
    margin-left: 1em;
    padding-left: 0.75em;
    border-left: 2px solid #c8d0e0;
    margin-top: 0.5em;
}

.io-type-nested-label {
    display: inline-block;
    font-size: var(--jig-font-size-xs);
    font-weight: 600;
    color: #2d5fa8;
    background-color: #ebf0fb;
    border-radius: 3px;
    padding: 1px 7px;
    margin-bottom: 4px;
}

.jig-card.jig-card--item > h4 {
    margin-top: 0;
    margin-bottom: 0.5em;
    color: #1b3a66;
    border-bottom: 1px solid #1b3a66;
}

.package-children-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 4px;
}

body.hide-usecase-members .tab-member-section {
    display: none;
}

.jig-card-section {
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-top: 12px;
    overflow: hidden;
}

/* 図が小さいとコンテキストメニューが .jig-card-section の overflow: hidden に
   はみ出し部分を切り取られてしまうため、ホバーで開いている間だけ解除する */
.jig-card-section:has(.mermaid-menu:hover) {
    overflow: visible;
}

.description,
.diagram-container {
    padding: 12px;
    background-color: #fff;
}

/* タブセクション */

.tab-content-section {
    border-color: #d4d9e5;
}

.tab-content-section .jig-tabs {
    background-color: #f3f6ff;
    border-bottom-color: #d4d9e5;
}

.tab-content-section .jig-tab {
    border-color: #d4d9e5;
    background-color: #e8eefc;
}

.tab-content-section .jig-tab.active {
    background-color: #fff;
    border-bottom-color: #fff;
}

.tab-content-section .jig-tab-panel {
    background-color: #fff;
    padding: 12px;
}

.tab-mutual-dependency .jig-tab-panel pre {
    white-space: pre-wrap;
    margin: 0;
}

.tab-mutual-dependency .jig-tabs {
    align-items: center;
}

.mutual-dependency-title {
    font-size: var(--jig-font-size-sm);
    font-weight: bold;
    white-space: nowrap;
    flex-shrink: 0;
    margin-right: 8px;
    align-self: flex-end;
    padding-bottom: 6px;
}

body.hide-usecase-descriptions .description,
body.hide-domain-descriptions .description {
    display: none;
}

body.hide-usecase-declarations .declaration {
    display: none;
}

body.hide-domain-diagrams .mermaid-diagram,
body.hide-domain-diagrams .diagram-heading,
body.hide-domain-diagrams .tab-diagram-section {
    display: none;
}

body.hide-usecase-diagrams .mermaid-diagram {
    display: none;
}

body.hide-usecase-diagrams .diagram-container {
    display: none;
}

body.hide-usecase-details .depends {
    display: none;
}

@layer components {
    .jig-tabs {
        display: flex;
        gap: 4px;
        padding: 8px 12px 0;
        background-color: #f5f5f5;
        border-bottom: 1px solid #ccc;
    }

    .jig-tab {
        padding: 4px 10px;
        border: 1px solid #ccc;
        border-radius: 4px 4px 0 0;
        background-color: #f0f0f0;
        cursor: pointer;
        font-size: var(--jig-font-size-sm);
        margin-bottom: -1px;
    }

    .jig-tab.active {
        background-color: #fff;
        border-bottom-color: #fff;
        font-weight: bold;
        position: relative;
        z-index: 1;
    }
}

.jig-tab:hover:not(.active) {
    background-color: #eaeaea;
}

.diagram-panel-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
    border: none;
    margin: 0;
}

.diagram-panel-options > legend {
    width: 100%;
    font-size: var(--jig-font-size-xs);
    color: var(--color-text-secondary, #666);
}

.diagram-panel-option {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--jig-font-size-sm);
    cursor: pointer;
}

/* Mermaidで画像が表示される前のテキストを表示しない */

pre.mermaid {
    font-size: 0;
}

/* stylelint-disable no-descending-specificity -- mermaid図内のsvgリンクとヘッダーの言語切替リンクは別のDOM subtreeで共存しないため実害はない */

.mermaid svg a:hover {
    text-decoration: none;
}

/* stylelint-enable no-descending-specificity */

@layer components {
    .mermaid-diagram {
        margin-top: 10px;
        position: relative;
    }
}

.mermaid-diagram.is-rendering {
    min-height: 2em;
}

.mermaid-diagram.is-rendering::after {
    content: "レンダリング中…";
    display: block;
    color: #888;
    font-size: var(--jig-font-size-xs);
    font-style: italic;
    padding: 8px 0;
}

.mermaid.too-large {
    font-size: var(--jig-font-size-sm);
    white-space: normal;
    background-color: #f7f7f7;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 12px 14px;
}

.mermaid.too-large * {
    font-size: var(--jig-font-size-sm);
}

.mermaid-too-large__message {
    margin: 0 0 8px 0;
    color: #333;
}

.mermaid-too-large__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mermaid-too-large__actions button {
    padding: 6px 10px;
    border: 1px solid #888;
    border-radius: 6px;
    background-color: #fff;
    cursor: pointer;
}

.mermaid-too-large__actions button:hover {
    background-color: #f0f0f0;
}

.mermaid-edge-warning {
    border: 1px solid #cc3333;
    background: #fff5f5;
    color: #222;
    padding: 8px 12px;
    margin: 12px 0;
    border-radius: 6px;
}

.mermaid-edge-warning__action {
    padding: 6px 10px;
    border: 1px solid #888;
    border-radius: 6px;
    background-color: #fff;
    cursor: pointer;
}

.mermaid-edge-warning__action:hover {
    background-color: #f0f0f0;
}

/* Mermaidのツールチップ表示を調整 */

/* ツールチップ自体がおまけ機能的な位置付けらしい。 */

.mermaidTooltip {
    position: absolute;
    z-index: 10;
    padding: 4px 8px;
    border: 1px solid #aaa;
    border-radius: 4px;
    background: #f2f2f2;
    color: #111;
    font-size: var(--jig-font-size-2xs);
    line-height: 1.4;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

label {
    cursor: pointer;
}

.checkbox-options label,
.radio-options label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.glossary-jump-bar {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 4px;
    margin-bottom: 1.5rem;
    padding: 10px;
    background-color: #f0f4f8;
    border-radius: 8px;
    position: sticky;
    top: 0;
    z-index: 20;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.glossary-jump-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2em;
    height: 2em;
    padding: 0 0.4em;
    background-color: #fff;
    border: 1px solid #d1d9e6;
    border-radius: 4px;
    font-size: var(--jig-font-size-sm);
    font-weight: bold;
    color: #1b3a66;
    text-decoration: none;
    transition: all 0.2s ease;
}

.glossary-jump-link:hover {
    background-color: #1b3a66;
    color: #fff;
    border-color: #1b3a66;
    text-decoration: none;
}

.glossary-group {
    margin-bottom: 2.5rem;
    scroll-margin-top: 4em; /* jump-bar の高さ分 */
}

/* 種類バッジ */

.kind-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4em;
    height: 1.4em;
    border-radius: 3px;
    font-size: var(--jig-font-size-2xs);
    font-weight: bold;
    line-height: 1;
    color: #fff;
    vertical-align: middle;
    flex-shrink: 0;
    background-color: #888;
    margin-right: 0.4em;
}

.kind-badge[data-kind="パッケージ"] {
    background-color: var(--kind-color-package);
}

.kind-badge[data-kind="クラス"] {
    background-color: var(--kind-color-class);
}

.kind-badge[data-kind="メソッド"] {
    background-color: var(--kind-color-method);
}

.kind-badge[data-kind="フィールド"] {
    background-color: var(--kind-color-field);
}

.jig-card--type h3 .kind-badge {
    font-size: var(--jig-font-size-2xs);
}

.glossary-group-header {
    position: sticky;
    top: 3.5em; /* jump-bar の下に来るように調整 */
    background: linear-gradient(90deg, #1b3a66, #31455f);
    color: #fff;
    padding: 0.4rem 1rem;
    margin: 0 0 1rem 0;
    border-radius: 4px;
    z-index: 15;
    font-size: var(--jig-font-size-lg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

@keyframes jig-card-type-highlight {
    0% {
        box-shadow: 0 0 0 3px #3b82f6, 0 4px 16px rgba(59, 130, 246, 0.25);
        background: #eff6ff;
    }
    100% {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        background: linear-gradient(180deg, #f9fbff, #f3f6ff);
    }
}

.jig-card.jig-card--type:target {
    animation: jig-card-type-highlight 2s ease-out;
}

@keyframes jig-card-item-highlight {
    0% {
        box-shadow: 0 0 0 3px #3b82f6, 0 2px 8px rgba(59, 130, 246, 0.2);
        background: #eff6ff;
    }
    100% {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
        background-color: #fff;
    }
}

.jig-card.jig-card--item:target {
    animation: jig-card-item-highlight 2s ease-out;
}

/* Glossaryのレイアウトは split-view / in-page-sidebar / jig-card を利用する */

#insight-section-nav {
    position: sticky;
    top: 2em;
    z-index: 100;
    display: flex;
    gap: 1em;
    padding: 0.3em 0.5em;
    background-color: #f0f0f0;
    border-bottom: 1px solid #ccc;
    font-size: var(--jig-font-size-sm);
}

#insight-section-nav a {
    color: #243D1E;
    text-decoration: none;
}

#insight-section-nav a:hover {
    text-decoration: underline;
}

#metric-definitions {
    margin-bottom: 2em;
}

#metric-definitions details {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 0.5em 1em;
    background-color: #f9f9f9;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

#metric-definitions summary {
    cursor: pointer;
    font-weight: bold;
    padding: 0.2em 0;
}

/* stylelint-disable no-descending-specificity -- insightページのmetric説明とglossaryカード見出しは別のDOM subtreeで共存しないため実害はない */

.metric-description h3 {
    margin-top: 1em;
    margin-bottom: 0.5em;
    font-size: var(--jig-font-size-lg);
    border-bottom: 1px solid #ddd;
}

/* stylelint-enable no-descending-specificity */

.metric-description ul {
    margin-top: 0;
    padding-left: 1.5em;
}

.metric-description li {
    margin-bottom: 0.5em;
}

/* テーブルの行をゼブラスタイルにする */

table.zebra tbody tr:nth-child(odd) {
    background-color: #f9f9f9;
}

table.zebra tbody tr:nth-child(even) {
    /* background-color: #ffffff; */
}

table td.number {
    text-align: right;
}

/* ページ内リンク用サイドバー */

.in-page-sidebar {
    background: linear-gradient(180deg, #fbfcff, #f4f7fb);
    border: 1px solid #d9e1ea;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(27, 58, 102, 0.08);
    padding: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

@layer components {
    .in-page-sidebar__list {
        display: grid;
        gap: 12px;
        flex: 1;
        min-height: 0;
        overflow: auto;
        scrollbar-gutter: stable;
        align-content: start;
    }
}

.in-page-sidebar__section {
    display: grid;
    gap: 8px;
}

/* 現状このクラス単体（--group修飾なし）で使われる見出しはなく、
   常に in-page-sidebar__title--group と併用されるため、
   font-weight/letter-spacing/margin 以外の見た目は --group 側の値が使われる */

.in-page-sidebar__title {
    margin: 0;
    font-weight: bold;
    letter-spacing: 0.04em;
}

/* 開閉トグル専用の見出し行。ページ内リンク（in-page-sidebar__link等）のホバーは
   ナビゲーションを示す青系背景にしているため、区別できるよう開閉操作はグレー系に統一する */

.in-page-sidebar__title--collapsible {
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.15s ease;
}

.in-page-sidebar__title--collapsible:hover {
    background-color: #dde3ea;
}

/* グループ見出しの sticky をスクロール領域（in-page-sidebar__list）基準にするため、
   sectionをレイアウト上フラット化する */

.in-page-sidebar__section--group {
    display: contents;
}

/* ツリーのルートグループ見出し（リクエストハンドラ等の大分類）。背景色で他の要素と区別する。
   スクロール範囲外に押し出された場合もスクロール領域の下部に積み重なって留まる。
   積み重ねオフセット（style.bottom）は renderTreeSection が設定する */

.in-page-sidebar__title--group {
    --group-title-height: 32px;
    display: flex;
    align-items: center;
    background-color: #eef1f5;
    border-bottom: none;
    border-left: 3px solid #a7b4c4;
    border-radius: 4px;
    padding: 6px 8px 6px 6px;
    box-sizing: border-box;
    height: var(--group-title-height);
    color: #4b5768;
    font-size: var(--jig-font-size-xs);
    position: sticky;
    bottom: 0;
    z-index: 1;
}

/* ツリーのパッケージノード行。リーフ（in-page-sidebar__link）と縦幅を揃える。
   renderTreeSection の showTitle:false（グループ見出しなし）や domain.js の
   独自ツリーなど、in-page-sidebar__section--group に包まれない場合もあるため、
   サイドバーのスクロール領域全体を基準にスコープする。
   padding はホバー／選択時の背景をリーフ（in-page-sidebar__link）と同じく
   行全体に効かせるため、item-header ではなく子要素（package-link/ラベル）側に持たせる */

.in-page-sidebar__list .in-page-sidebar__item-header {
    font-size: var(--jig-font-size-sm);
    line-height: 1.4;
}

/* stylelint-disable no-descending-specificity -- サイドバー項目とヘッダーの言語切替リンクは別のDOM subtreeで共存しないため実害はない */

.in-page-sidebar__item-header > .in-page-sidebar__package-link,
.in-page-sidebar__item-header > .in-page-sidebar__link,
.in-page-sidebar__item-header > span {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    padding: 6px 8px;
    border-radius: 6px;
}

/* stylelint-enable no-descending-specificity */

/* ツリーのパッケージノード。メインセクションへのリンク。
   レイアウトはjig-dom.jsで常に生成されるitem-header配下（非レイヤー）の指定が優先される */

@layer components {
    .in-page-sidebar__package-link {
        color: #31455f;
        text-decoration: none;
        overflow-wrap: break-word;
        white-space: nowrap;
        transition: background-color 0.2s ease, color 0.2s ease;
    }
}

.in-page-sidebar__package-link:hover,
.in-page-sidebar__package-link:focus-visible {
    background-color: #e8f0fb;
    color: #10253f;
    text-decoration: none;
}

.in-page-sidebar__title .in-page-sidebar__link {
    display: flex;
    align-items: center;
    flex: 1;
    align-self: stretch;
    font-size: inherit;
    padding: 0;
}

.in-page-sidebar__toggle,
.controller-group-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #5a7a9a;
}

/* トグルは常時薄く表示し、下位ノードを持つことがホバーなしでもわかるようにする。
   クリックしやすいよう当たり判定は行の高さいっぱいに拡げる（シェブロンの見た目は::beforeのサイズのまま） */

.in-page-sidebar__toggle {
    opacity: 0.45;
    position: sticky;
    right: 0;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    transition: opacity 0.15s, background-color 0.15s ease, color 0.15s ease;
}

/* トグル自体にカーソルが当たっている場合も見出し行と同じグレー系で開閉操作であることを示す */

.in-page-sidebar__toggle:hover {
    background-color: #dde3ea;
    color: #31455f;
}

.in-page-sidebar__toggle::before,
.controller-group-toggle::before {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s;
    margin-top: -3px;
}

.in-page-sidebar__toggle[aria-expanded="false"]::before,
.in-page-sidebar__title--pinned .in-page-sidebar__toggle::before {
    transform: rotate(-45deg);
    margin-top: 0;
    margin-right: -3px;
}

/* 下部に積み重なって内容が見えていないグループは閉じた見た目にする。
   クリックで展開位置までスクロールする（jig-dom.js の initGroupTitlePinning） */

.in-page-sidebar__title--pinned {
    cursor: pointer;
}

.in-page-sidebar__title--pinned .in-page-sidebar__toggle {
    opacity: 1;
}

.in-page-sidebar__title--collapsible:hover .in-page-sidebar__toggle,
.in-page-sidebar__item-header:hover .in-page-sidebar__toggle {
    opacity: 1;
}

/* Altキー押下中は、開くトグルにホバーすると配下もまとめて開くことを示す
   （jig-dom.js の initSidebarAltKeyIndicator が body.jig-alt-held を切り替える） */

body.jig-alt-held .in-page-sidebar__toggle[aria-expanded="false"]:hover {
    background-color: #ffe0a3;
    color: #7a4a00;
}

body.jig-alt-held .in-page-sidebar__toggle[aria-expanded="false"]:hover::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    margin-left: 2px;
    margin-right: -3px;
}

@layer components {
    .in-page-sidebar__item-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

.in-page-sidebar__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 4px;
}

.in-page-sidebar__item > .in-page-sidebar__links {
    padding-left: 12px;
}

.in-page-sidebar__links--hidden {
    display: none;
}

.in-page-sidebar__item {
    margin: 0;
}

@layer components {
    .in-page-sidebar__link {
        display: flex;
        align-items: center;
        padding: 6px 8px;
        border-radius: 6px;
        color: #1b3a66;
        text-decoration: none;
        font-size: var(--jig-font-size-sm);
        line-height: 1.4;
        overflow-wrap: break-word;
        white-space: nowrap;
        transition: background-color 0.2s ease, color 0.2s ease;
    }
}

.in-page-sidebar__link:hover,
.in-page-sidebar__link:focus-visible {
    background-color: #e8f0fb;
    color: #10253f;
    text-decoration: none;
}

/* ID付きリンクで開いた／ページ内移動した際の現在地ハイライト */

.in-page-sidebar__link--active {
    background-color: #d3e3f7;
    color: #10253f;
    font-weight: bold;
}

/* サイドバーリンクのバッジ（疑似要素）。本文中で使う .kind-badge（実要素）とは異なり、
   属性駆動でDOMノードを増やさずに描画する。サイドバーリンク用のバッジは常にこちらを使う */

.in-page-sidebar__link[data-kind-char]::before {
    content: attr(data-kind-char);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3em;
    height: 1.3em;
    border-radius: 3px;
    font-size: var(--jig-font-size-2xs);
    font-weight: bold;
    color: #fff;
    background-color: #888;
    margin-right: 0.4em;
    flex-shrink: 0;
    vertical-align: middle;
}

.in-page-sidebar__link[data-kind="パッケージ"]::before {
    background-color: var(--kind-color-package);
}

.in-page-sidebar__link[data-kind="クラス"]::before {
    background-color: var(--kind-color-class);
}

.in-page-sidebar__link[data-kind="メソッド"]::before {
    background-color: var(--kind-color-method);
}

.in-page-sidebar__link[data-kind="フィールド"]::before {
    background-color: var(--kind-color-field);
}

.in-page-sidebar__link--sub {
    padding-left: 20px;
    font-size: var(--jig-font-size-sm);
}

/* サイドバー ヘッダー（表示設定＋折りたたみボタン） */

.sidebar-header {
    display: flex;
    align-items: stretch;
    gap: 4px;
    flex-shrink: 0;
    margin-bottom: 8px;
}

/* サイドバー 折りたたみボタン */

.sidebar-collapse-btn {
    width: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid #d9e1ea;
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
    color: #5a7a9a;
    font-size: var(--jig-font-size-2xs);
}

.sidebar-collapse-btn:hover {
    background-color: #e8f0fb;
}

.sidebar-collapse-btn::after {
    content: "◀";
}

/* 折りたたみ時はボタンの枠を消してバー全体に広げ、どこを押しても展開できる見た目にする */

.sidebar--collapsed .sidebar-header {
    flex: 1;
    margin-bottom: 0;
}

.sidebar--collapsed .sidebar-collapse-btn {
    width: 100%;
    border: none;
    border-radius: 0;
}

.sidebar--collapsed .sidebar-collapse-btn::after {
    content: "▶";
}

@media (max-width: 900px) {
    /* 縦並び時は上方向に開閉するため矢印の向きを変える */
    .sidebar-collapse-btn::after {
        content: "▲";
    }

    .sidebar--collapsed .sidebar-collapse-btn::after {
        content: "▼";
    }

    .sidebar--collapsed .sidebar-collapse-btn {
        height: 32px;
    }
}

/* サイドバー 表示設定パネル */

@layer components {
    .sidebar-settings {
        flex: 1;
        min-width: 0;
        border: 1px solid #d9e1ea;
    }
}

/* stylelint-disable no-descending-specificity -- サイドバー設定と用語カードのsummaryは別のDOM subtreeで共存しないため実害はない */

.sidebar-settings > summary {
    font-size: var(--jig-font-size-sm);
    color: #31455f;
    cursor: pointer;
    padding: 4px 2px;
    border-radius: 4px;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-settings > summary:hover {
    background-color: #e8f0fb;
}

.sidebar-settings > summary::-webkit-details-marker {
    display: none;
}

/* stylelint-enable no-descending-specificity */

.sidebar-settings > summary::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: var(--settings-icon-mask) no-repeat center / contain;
    mask: var(--settings-icon-mask) no-repeat center / contain;
    opacity: 0.7;
}

.sidebar-settings-panel {
    display: grid;
    gap: 6px;
    padding: 6px 4px 2px;
    font-size: var(--jig-font-size-sm);
}

.sidebar-settings-panel fieldset {
    border: none;
    margin: 0;
    padding: 0 0 8px;
}

.sidebar-settings-panel fieldset:not(:last-child) {
    border-bottom: 1px solid #e8edf5;
}

.sidebar-settings-panel legend {
    font-size: var(--jig-font-size-xs);
    color: #5a7099;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0;
}

.sidebar-settings-panel label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #1b3a66;
}

.sidebar-settings-panel input[type="radio"],
.sidebar-settings-panel input[type="checkbox"] {
    cursor: pointer;
}

/* サイドバー テキストフィルタ */

@layer components {
    .sidebar-filter {
        flex-shrink: 0;
        padding: 4px 0;
    }
}

.sidebar-filter input[type="search"] {
    width: 100%;
    box-sizing: border-box;
    padding: 4px 8px;
    border: 1px solid #d9e1ea;
    border-radius: 6px;
    font-size: var(--jig-font-size-sm);
    background: #fff;
    color: #1b3a66;
}

.sidebar-filter input[type="search"]:focus {
    outline: none;
    border-color: #5a7099;
}

.direction-toggle {
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #f9f9f9;
    cursor: pointer;
    transition: all 0.2s;
    color: #1b3a66;
    display: flex;
    align-items: center;
    justify-content: center;
}

.direction-toggle:hover {
    border-color: #999;
    background: #f0f0f0;
}

.direction-toggle:active {
    background: #e8e8e8;
}

.direction-icon {
    width: 20px;
    height: 20px;
}

@layer components {
    .mermaid-menu,
    .mermaid-zoom-button {
        position: absolute;
        top: 6px;
        width: 28px;
        height: 28px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.15s;
        z-index: 1;
    }
}

.mermaid-menu-button,
.mermaid-zoom-button {
    padding: 0;
    border: 1px solid #888;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    font-size: var(--jig-font-size-base);
    line-height: 1;
}

.mermaid-menu-button {
    width: 100%;
    height: 100%;
}

.mermaid-diagram:hover > .mermaid-menu,
.mermaid-diagram:hover > .mermaid-zoom-button {
    opacity: 0.6;
    pointer-events: auto;
}

/* メニュー自体をホバーしている間は完全に不透明にする（透過でドロップダウン越しに
   ノードの図形が透けて文字が読みにくくなるのを防ぐ）。
   .mermaid-diagram:hover > .mermaid-menu より詳細度を上げて確実に上書きする。 */
.mermaid-diagram:hover > .mermaid-menu:hover {
    opacity: 1;
}

.mermaid-menu-button::after,
.mermaid-zoom-button::after {
    content: attr(data-tooltip);
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: rgba(17, 24, 39, 0.95);
    color: #fff;
    border-radius: 4px;
    padding: 4px 6px;
    white-space: nowrap;
    font-size: var(--jig-font-size-2xs);
    line-height: 1.2;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-2px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.mermaid-diagram .mermaid-zoom-button:hover {
    background-color: #f0f0f0;
    opacity: 1;
}

.mermaid-menu-button:hover {
    background-color: #f0f0f0;
}

.mermaid-menu-button:hover::after,
.mermaid-menu-button:focus-visible::after,
.mermaid-zoom-button:hover::after,
.mermaid-zoom-button:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

/* メニューが開いている（ホバー中の）間はツールチップとメニュー本体が重ならないようにする */
.mermaid-menu:hover > .mermaid-menu-button::after {
    display: none;
}

@layer components {
    /* コンテキストメニューを一番右側に配置する */
    .mermaid-menu {
        right: 6px;
    }

    .mermaid-zoom-button {
        right: 40px;
    }
}

/* 個別ダイアグラムの表示切り替え（向き・表示名など）のコンテキストメニュー。
   ボタンとメニュー本体の間に隙間があるとホバーが途切れて閉じてしまうため、top: 100%で隙間なく接続する。 */

.mermaid-menu-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin: 0;
    padding: 0.25em 0;
    list-style: none;
    background-color: #fff;
    border: 1px solid #888;
    border-radius: 6px;
    min-width: 12em;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 2;
}

.mermaid-menu:hover > .mermaid-menu-dropdown {
    display: block;
}

.mermaid-menu-item {
    padding: 0.4em 0.8em;
    font-size: var(--jig-font-size-sm);
    color: #222;
    cursor: pointer;
    white-space: nowrap;
}

.mermaid-menu-item:hover,
.mermaid-menu-item:focus-visible {
    background-color: #f0f0f0;
    outline: none;
}

/* ON/OFFの状態を持つ項目（内部メソッド等）はスイッチ表示にし、テキストの違いだけに頼らない */
.mermaid-menu-item--switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75em;
}

.mermaid-menu-item__switch {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 30px;
    height: 16px;
    border-radius: 999px;
    background-color: #ccc;
    transition: background-color 0.15s ease;
}

.mermaid-menu-item__switch::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease;
}

.mermaid-menu-item[aria-checked="true"] .mermaid-menu-item__switch {
    background-color: #1b3a66;
}

.mermaid-menu-item[aria-checked="true"] .mermaid-menu-item__switch::before {
    transform: translateX(14px);
}

.mermaid-menu-separator {
    margin: 0.25em 0;
    border-top: 1px solid #ddd;
}

/* エラーメッセージ（必須データ欠落） */

p.jig-data-error {
    color: #d32f2f;
    padding: 1rem;
    background-color: #ffebee;
    border-left: 4px solid #d32f2f;
    margin: 1rem;
    border-radius: 2px;
}

/* 警告メッセージ（optional データ欠落） */

p.jig-data-warning {
    color: #f57f17;
    padding: 1rem;
    background-color: #fff3e0;
    border-left: 4px solid #f57f17;
    margin: 1rem;
    border-radius: 2px;
}

/* 入力インタフェース サマリーテーブル */

.entrypoint-summary-section {
    margin-bottom: 0;
}

/* メインのパッケージ見出し。サイドバーのパッケージノードのリンク先 */

.package-heading {
    margin-top: 8px;
    padding-bottom: 4px;
    border-bottom: 2px solid #d4d9e5;
}

/* stylelint-disable no-descending-specificity -- ページ見出しとヘルプパネルは別のDOM subtreeで共存しないため実害はない */

.package-heading h2 {
    margin: 0;
    font-size: var(--jig-font-size-lg);
    color: #31455f;
}

/* stylelint-enable no-descending-specificity */

.entrypoint-summary {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    table-layout: fixed;
}

.entrypoint-summary td, .entrypoint-summary th {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entrypoint-filter {
    width: 100%;
    box-sizing: border-box;
    padding: 4px 8px;
    margin-bottom: 8px;
    border: 1px solid #d4d9e5;
    border-radius: 4px;
    font-size: var(--jig-font-size-sm);
}

.entrypoint-summary--http th:nth-child(2),
.entrypoint-summary--http td:nth-child(2) {
    width: 5em;
}

.entrypoint-filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.entrypoint-filter-row .entrypoint-filter {
    flex: 1;
    margin-bottom: 0;
}

.controller-group-toggle-all {
    white-space: nowrap;
    background: none;
    border: 1px solid #d4d9e5;
    border-radius: 4px;
    cursor: pointer;
    padding: 3px 8px;
    font-size: var(--jig-font-size-sm);
    color: #5a7a9a;
}

.controller-group-toggle-all:hover {
    background-color: #edf1fa;
}

/* stylelint-disable no-descending-specificity -- コントローラグループ行とentrypointサマリ表は別のDOM subtreeで共存しないため実害はない */

.controller-group-header > td {
    background-color: #edf1fa;
    padding: 4px 8px;
    font-size: var(--jig-font-size-sm);
    font-weight: 600;
}

/* stylelint-enable no-descending-specificity */

.controller-group-header__inner {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* stylelint-disable no-descending-specificity -- entrypointサマリ表とグローバルヘッダーは別のDOM subtreeで共存しないため実害はない */

.controller-group-header__inner > a {
    color: #1b3a66;
    text-decoration: none;
}

/* stylelint-enable no-descending-specificity */

/* stylelint-disable no-descending-specificity -- entrypointサマリ表とヘッダーの言語切替リンクは別のDOM subtreeで共存しないため実害はない */

.controller-group-header__inner > a:hover {
    text-decoration: underline;
}

/* stylelint-enable no-descending-specificity */

.controller-group-path {
    color: #5a7a9a;
    font-weight: normal;
}

.controller-group-count {
    margin-left: auto;
    background-color: #d4d9e5;
    color: #1b3a66;
    border-radius: 10px;
    padding: 0 6px;
    font-size: var(--jig-font-size-xs);
    font-weight: normal;
}

.controller-group-toggle[aria-expanded="false"]::before {
    transform: rotate(-45deg);
    margin-top: 0;
}

.entrypoint-summary tr.hidden {
    display: none;
}