/* Wiki additions to the verbatim blog main.css. */
@media (prefers-color-scheme: dark) {
    html:not([data-madoromi]) {
        --background: linear-gradient(
            in oklab,
            #000,
            var(--madoromi-kami) 100%
        );
        --text: #fff;
        --code-bg: #fff1;
    }
}
html {
    background: var(--madoromi-kami);
}
header nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em 1em;
    align-items: center;
}
header nav > span {
    flex: 0 1 auto;
}
button {
    font: inherit;
    color: inherit;
    cursor: pointer;
}
#search {
    flex: 1 1 10em;
    min-width: 0;
}
#search form {
    display: flex;
    gap: 0.5em;
}
#search input {
    width: 100%;
    min-width: 0;
    padding: 0.333em 0.5em;
    border: 0;
    border-radius: 0.25em;
    background: var(--madoromi-chitsu);
    font: inherit;
}
#search input::placeholder {
    color: var(--madoromi-usuzumi1);
}
#search button {
    flex-shrink: 0;
    white-space: nowrap;
    border: 0;
    background: transparent;
    color: var(--accent);
}
#search-results {
    padding-left: 1.5em;
}
#search-results li {
    margin: 1.5em 0;
}
#search-results h2 {
    font-size: 1.2em;
    margin-bottom: 0.3em;
}
#search-results p {
    margin: 0;
}

pre,
math[display="block"] {
    overflow-x: auto;
}
pre.mermaid {
    display: block;
}
.diagram-zoom {
    display: flex;
    justify-content: flex-end;
    gap: 0.25em;
}
.diagram-zoom button {
    border: 0;
    border-radius: 0.25em;
    padding: 0 0.5em;
    background: var(--madoromi-chitsu);
}
img {
    height: auto;
}
figure {
    margin: 1em 0;
}
table {
    border-collapse: collapse;
    width: 100%;
}
th,
td {
    text-align: left;
    vertical-align: top;
    padding: 0.25em 0.5em;
    border-bottom: 1px solid var(--madoromi-kasure0);
}
aside.callout {
    margin: 1em 0;
}
.note,
.meta,
.byline,
.backlinks,
sup.cn {
    color: var(--madoromi-usuzumi1);
}
.related-documents,
.backlinks {
    margin-top: 2em;
}

/* Let the blog carousel shrink within the reading column. */
.carousel {
    min-width: 0;
}
.carousel li {
    min-width: 0;
}
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}


.main-page-cards {
    display: grid;
    grid-template-columns: 50% 50%;
}

/* Compact topic links, shared by home and portal pages. */
.topics {
    display: grid;
    grid-template-columns: fit-content(30%) minmax(0, 1fr);
    gap: .4em 1em;
    font-size: .85em;
}
.topics dt { font-weight: bold; overflow-wrap: normal; }
.topics dd { margin: 0; }

@media (max-width: 40em) {
    .main-page-cards { grid-template-columns: 1fr; }
}

/* Raised Madoromi surfaces keep dark panels distinct from the kami page. */
.dark :is(.portal, aside.callout, details[open], #search input) {
    background: var(--madoromi-nijimi1);
}
.dark summary {
    background: var(--madoromi-nijimi2);
}
.dark #search input {
    color: var(--madoromi-sumi);
}