/* knowledge.aadarwal.com — shared styles.
   Sibling of aadarshagarwal.com: #FFFFFA paper, black browser-default serif,
   underlined black links, hairline rules. Palette: #FFFFFA bg, #000 ink,
   #77776E quiet grey, #800000 maroon (reserved accent — use sparingly). */

body {
    background: #fffffa;
    color: #000;
    font-size: 18px;
    line-height: 1.45;
    max-width: 880px;
    margin: 24px 24px 64px;
}

a { color: #000; }

h1 {
    font-size: 24px;
    margin: 4px 0 6px;
}

h2 {
    font-size: 20px;
    margin: 30px 0 8px;
    padding-top: 8px;
    border-top: 1px solid #000;
}

p { margin: 8px 0; }

.crumbs {
    font-size: 16px;
    margin: 0 0 28px;
}

.scope { margin: 0 0 10px; }

.anchors {
    font-size: 16px;
    margin: 0 0 6px;
}

/* booktabs tables: top/bottom rules + header rule, no verticals */
table {
    border-collapse: collapse;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    font-size: 16px;
    margin: 12px 0;
}

th, td {
    text-align: left;
    vertical-align: top;
    padding: 3px 14px 3px 0;
}

th:last-child, td:last-child { padding-right: 0; }

thead th { border-bottom: 1px solid #000; }

ul, ol {
    margin: 8px 0;
    padding-left: 22px;
}

li { margin: 2px 0; }

/* KaTeX sits slightly large against 18px serif by default */
.katex { font-size: 1.06em; }

.katex-display {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 0;
    margin: 10px 0;
}

/* index pages */
.field { margin: 0 0 22px; }

.empty { color: #77776e; }

.foot {
    margin-top: 48px;
    font-size: 16px;
}

/* map menu — aadarshagarwal.com's chiselled-button menu, ported.
   Maroon buttons for fields (▾/▴ caret), gold for sheets; 3px chiselled
   bevel via six layered inset shadows. Horizontal flow on the index,
   right-aligned flush stack in the sidebar. Pressed state = inverted
   bevel; outer dimensions constant, label shifts +1px right/down. */
.field-toggle,
.nav-home a {
    display: inline-block;
    padding: 4px 12px;
    font-size: 16px;
    text-decoration: none;
    color: #fffcef;
    background: #800000;
    border: 1px solid #1a0000;
    box-shadow:
        inset 1px 1px 0 #c46060,
        inset 2px 2px 0 #a83838,
        inset 3px 3px 0 #8c1818,
        inset -1px -1px 0 #1a0000,
        inset -2px -2px 0 #4a0000,
        inset -3px -3px 0 #6a0000;
}

.field-toggle:hover,
.nav-home a:hover,
.subs a:hover { text-decoration: underline; }

.field-toggle:active,
.nav-home a:active {
    background: #660000;
    box-shadow:
        inset 1px 1px 0 #1a0000,
        inset 2px 2px 0 #4a0000,
        inset 3px 3px 0 #6a0000,
        inset -1px -1px 0 #c46060,
        inset -2px -2px 0 #a83838,
        inset -3px -3px 0 #8c1818;
    padding: 5px 11px 3px 13px;
}

.field-toggle::after {
    content: " \25B4";
    font-size: 10px;
    vertical-align: 1px;
}

.field.closed .field-toggle::after { content: " \25BE"; }

.field.closed .subs { display: none; }

.subs {
    display: inline-flex;
    flex-wrap: wrap;
    margin-top: 3px;
}

.subs a {
    display: inline-block;
    margin: 0 -1px -1px 0;
    padding: 4px 12px;
    font-size: 16px;
    text-decoration: none;
    color: #2a2005;
    background: #f0c419;
    border: 1px solid #5c4900;
    box-shadow:
        inset 1px 1px 0 #ffe9a8,
        inset 2px 2px 0 #fad766,
        inset 3px 3px 0 #f5cb3a,
        inset -1px -1px 0 #5c4900,
        inset -2px -2px 0 #8a6d00,
        inset -3px -3px 0 #b08a00;
}

.subs a:active,
.subs a.here {
    background: #d9af0d;
    box-shadow:
        inset 1px 1px 0 #5c4900,
        inset 2px 2px 0 #8a6d00,
        inset 3px 3px 0 #b08a00,
        inset -1px -1px 0 #ffe9a8,
        inset -2px -2px 0 #fad766,
        inset -3px -3px 0 #f5cb3a;
    padding: 5px 11px 3px 13px;
}

.subs .empty { padding: 5px 0; }

body.with-map {
    display: flex;
    align-items: flex-start;
    gap: 48px;
    max-width: none;
}

body.with-map main {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 880px;
}

#map {
    flex: 0 0 200px;
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    text-align: right;
    font-size: 16px;
}

#map .nav-home { margin: 0 0 22px; }

#map .field { margin: 0 0 14px; }

#map .field-toggle,
#map .nav-home a {
    display: block;
    width: 130px;
    margin: 0 0 0 auto;
    text-align: right;
}

#map .subs {
    display: block;
    margin-top: 3px;
}

#map .subs a {
    display: block;
    width: 150px;
    margin: 0 0 -1px auto;
    text-align: right;
}

/* out-specify the #map display overrides above and in the mobile block */
#map .field.closed .subs { display: none; }

/* compact technical visuals: topology, signal flow, and transfer sketches */
.flow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 7px;
    margin: 12px 0;
    font-size: 16px;
}

.flow > span {
    border: 1px solid #000;
    padding: 3px 7px;
}

.flow .accent {
    border-color: #800000;
    color: #800000;
}

.schematic-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 18px;
    margin: 12px 0;
}

.schematic {
    border-left: 2px solid #800000;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
    overflow-x: auto;
    padding: 4px 0 4px 10px;
    white-space: pre;
}

.quiet { color: #77776e; }

/* figure-rich sheets: source schematics beside measured behaviour */
body.electronics-sheet { max-width: 1080px; }

.figure-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
    margin: 14px 0 20px;
}

.figure-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.figure-grid figure,
.figure-wide {
    min-width: 0;
    margin: 0;
}

.figure-grid img,
.figure-wide img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.figure-grid .scope img,
.figure-wide.scope img,
.figure-wide.diagram img {
    width: 100%;
}

.figure-grid .tall img { max-height: 520px; }

.figure-wide {
    margin: 14px 0 20px;
}

.figure-wide img { max-height: 560px; }

figcaption {
    color: #77776e;
    font-size: 15px;
    line-height: 1.35;
    margin-top: 5px;
}

.visual-key {
    border-left: 2px solid #800000;
    padding-left: 10px;
}

@media (max-width: 640px) {
    body {
        margin: 14px 14px 48px;
        font-size: 17px;
    }

    h1 { font-size: 22px; }

    table {
        display: block;
        overflow-x: auto;
    }

    .schematic-grid,
    .figure-grid,
    .figure-grid.three { grid-template-columns: 1fr; }

    body.with-map { display: block; }

    #map {
        position: static;
        max-height: none;
        text-align: left;
        margin-top: 40px;
        border-top: 1px solid #000;
        padding-top: 12px;
    }

    #map .field-toggle,
    #map .nav-home a {
        display: inline-block;
        width: auto;
        margin: 0;
        text-align: left;
    }

    #map .subs {
        display: inline-flex;
        flex-wrap: wrap;
    }

    #map .subs a {
        display: inline-block;
        width: auto;
        margin: 0 -1px -1px 0;
        text-align: left;
    }
}