body {
    margin: 0;
    height: 100vh;
}
main, nav {
    padding: 0 1em;
}

a {
    color: #000;
    text-decoration-line: none;
}
a:hover {
    text-decoration-line: underline;
}

header.top {
    top: 0;
    left: 0;
    width: 100%;
    height: 2em;
    background-color: #243D1E;
    color: #FFF;
}
header a {
    color: #FFF;
    font-size: 0.8em;
}

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

/* 一般 */
.hidden {
    display: none;
}
.weak {
    font-size: 0.9em;
    color: gray;
}
.fully-qualified-name {
    font-size: 0.8em;
    color: silver;
}
.deprecated {
    text-decoration: line-through;
}

/* メインコンテンツ */
/* テーブル */
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;
}
.markdown table thead {
    color: #000;
    background-color: #CCC;
}

/* サイドナビのあるコンテナ */
.sideNavMain {
    display: flex;
    flex-wrap: nowrap;
}
.sideNavMain > nav, .sideNavMain > main {
    height: calc(100vh - 3em);
    overflow: auto;
}
.sideNavMain > nav {
    resize: horizontal;
    background-color: #EEE;
    font-size: 0.8em;
    border-right: solid 1px #AAA;
}
.sideNavMain > main {
    flex-grow: 1;
    /* 実際100pxになるわけではないけどこれを指定しておくとnav.treeのサイズ変更が期待通り動く */
    width: 100px;
}

/* ナビのツリー  */
.sideNavMain > nav.tree a, .sideNavMain > nav.tree summary {
    word-break: keep-all;
    white-space: nowrap;
}
.sideNavMain > nav.tree details > div, .sideNavMain > nav.tree details > details {
    margin-left: 0.5em;
}
.sideNavMain > nav.tree details {
    margin-bottom: 0.5em;
}

section.package > h2, section.type > h2, section.type {
    margin-bottom: 0;
}
section.package, section.type {
    border-top: #000 solid 1px;
    padding-left: 1em;
    padding-bottom: 1em;
}

.method-name {
    white-space: nowrap;
}
.method-argument-item {
    display: block;
}

main table.fields thead {
    color: #FFF;
    background-color: #009900;
}
.enum-param-item {
    display: block;
    white-space: nowrap;
}

/* index */
.index > header {
    border-bottom:solid 2px #000;
}
.index > header > h1 {
    margin-bottom: 0;
}
.index > header > p {
    font-size: 0.8em;
    color: #aaa;
    margin-top: 0;
    margin-bottom: 0;
}
.index > header, .index > main {
    margin:0 auto;
    max-width: 800px;
}
.index .diagram img {
    max-width: 800px;
}
.index > main > section h2 {
    border-bottom:solid 1px #000;
}
.index > main > section h3 {
    border-bottom:solid 1px #999;
}

/* ユースケース概要 */
.usecase .depends {
    background-color: #ddd;
}
.usecase h3 {
    margin-bottom: 0;
}
.usecase .method > :not(:first-child) {
    margin-left: 2em;
}

/* 用語集 */
.terms .identifier {
    text-overflow: clip;
    overflow: scroll;
    white-space: nowrap;
}
.terms .term, .terms .kind {
    white-space: nowrap;
}

/* Mermaidで画像が表示される前のテキストを表示しない */
pre.mermaid {
    font-size: 0;
}

label {
    cursor: pointer;
}

/* 用語集の表示設定 */
.glossary details.controls {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin: 1em auto;
    width: 90%;
    max-width: 800px;
}
.glossary details.controls summary {
    list-style: none;
    cursor: pointer;
    margin-bottom: 10px;
    padding: 5px 0;
}

.glossary details.controls > div,
.glossary details.controls > label {
    display: block;
    margin-right: 10px;
}

.glossary details.controls input[type="text"],
.glossary details.controls input[type="checkbox"] {
    margin-left: 8px;
}

/* 用語集 / 目次 */
.glossary .letter-navigation {
    text-align: center;
    margin: 1em 0;
    background-color: #f9f9f9;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.glossary .letter-navigation.invisible {
    /* display:none にするとid指定で移動できなくなるので、出しつつ見えないようにする */
    visibility: hidden;
    margin: 0;
    font-size: 0;
    padding: 0;
    border: none;
}
.glossary .letter-navigation a {
    text-decoration: none;
    color: #0073e6;
    font-weight: bold;
    font-size: 1em;
}
.glossary .letter-navigation a:not(:last-child)::after {
    margin: 0 0.4em;
    content: "|";
    font-weight: normal;
    color: #ccc;
}

/* 用語集 / 用語 */
.glossary .term-list {
    margin: 1em auto;
    width: 90%;
    max-width: 800px;
}
.glossary .term {
    padding: 1em;
    border-bottom: 1px solid #ccc;
}
.glossary .term h2 {
    margin: 0;
    color: #0073e6;
}
.glossary .term p {
    margin: 0.5em 0 0 0;
}
.glossary .term dl {
    color: #666;
    font-size: 0.7em;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 1rem;
    margin: 0;
}
.glossary .term dl dt {
    font-weight: bold;
    width: 100px;
    margin: 0;
}
.glossary .term dl dd {
    margin: 0;
}

/* テーブル全体のスタイル */
.package-list table {
    border-collapse: collapse;
    width: 100%;
    margin-top: 10px;
    font-size: 16px;
    table-layout: fixed; /* 列幅を固定して可読性を確保 */
}
.package-list td {
    text-align: left;
    vertical-align: top;
}
.package-list tr:nth-child(even) {
    background-color: #f9f9f9;
}

.insight table {
    border-collapse: collapse;
    width: 100%;
    margin-top: 10px;
}
.insight table tr td {
    white-space: nowrap;
    overflow: scroll;
    max-width: 20em;
}

/* 拡大アイコンをクリックしたときに非表示にする行のスタイル */
.insight table tr.hidden-by-zoom {
    display: none;
}

/* テーブルの行をゼブラスタイルにする */
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;
}