/* Section content, used in the 3D panel (light on dark) and the reading view (dark on light). */
.panel .sec { --fg: #f4f2ee; --muted: #b3b8c6; --rule: rgba(201, 211, 222, 0.18); --accent: #e0a86c; }
.flat .sec, .flat-head { --fg: #121833; --muted: #4a5372; --rule: rgba(18, 24, 51, 0.16); --accent: #97591f; }

.sec { color: var(--fg); }
.sec h2 { margin: 0 0 0.4em; padding-right: 40px; font-weight: 780; font-stretch: 112.5%; font-size: 1.75rem; line-height: 1.08; }
.sec .where { margin: 0 0 1.1em; color: var(--muted); font-stretch: 87.5%; font-size: 0.95rem; }
.sec .lede { margin: 0 0 1em; font-size: 1.12rem; line-height: 1.45; }
.sec p { margin: 0 0 1em; text-wrap: pretty; }
.sec ul { margin: 0 0 1em; padding-left: 1.1em; }
.sec li { margin: 0.4em 0; }
.sec li::marker { color: var(--accent); }
.sec a { color: var(--accent); }
.sec code { font-size: 0.92em; padding: 0 0.2em; background: var(--rule); border-radius: 2px; }

.sec .facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.55em 1.2em; margin: 1.3em 0 0; padding-top: 1em; border-top: 1px solid var(--rule); }
.sec .facts dt { color: var(--muted); font-stretch: 87.5%; }
.sec .facts dd { margin: 0; }

.sec .kernels { width: 100%; margin: 0.4em 0 1.3em; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sec .kernels caption { padding-bottom: 0.5em; text-align: left; color: var(--muted); font-stretch: 87.5%; font-size: 0.9rem; }
.sec .kernels th, .sec .kernels td { padding: 0.32em 0.5em; border-bottom: 1px solid var(--rule); text-align: right; }
.sec .kernels th:first-child, .sec .kernels td:first-child { text-align: left; padding-left: 0; }
.sec .kernels th { font-weight: 600; font-stretch: 87.5%; color: var(--muted); }
.sec .kernels .match { color: var(--accent); font-weight: 700; }

.sec .roles { list-style: none; padding: 0; }
.sec .roles li { margin: 0; padding: 0.75em 0; border-bottom: 1px solid var(--rule); }
.sec .roles strong { display: block; font-weight: 700; }
.sec .roles span { color: var(--muted); font-size: 0.94rem; }

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.2em 0; }
.actions a {
  display: inline-block; padding: 0.55em 1em;
  color: var(--fg); text-decoration: none; font-weight: 600;
  border: 1px solid var(--accent); border-radius: 2px;
}
.actions a:hover { background: var(--rule); }

.flat .sec { padding: 2.4em 0 1.4em; border-top: 1px solid var(--rule); }
.flat-head { padding: 2em 0 1em; }

.sec .tech { margin: 1.2em 0 0; border-top: 1px solid var(--rule); padding-top: 0.8em; }
.sec .tech summary { cursor: pointer; font-weight: 700; font-stretch: 87.5%; color: var(--accent); }
.sec .tech[open] summary { margin-bottom: 0.8em; }
.panel .sec h2 { padding-right: 0; }
.flat .sec h2 { font-size: 1.5rem; }
.sec[data-sec="note"] .note-text { font-size: 1.1rem; }