…
…
flagkeytype · required…
…
children, not spans */
.manifest-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.doc-article .manifest-chips > code {
padding: var(--sp-1) var(--sp-3);
border: 1px solid var(--line-1); border-radius: var(--r-1);
background: var(--surface-2);
font-family: var(--font-mono); font-size: var(--fs-label);
color: var(--ink-3); letter-spacing: .02em;
}
/* ⊞OS
…
*/
.artifact-group { margin: var(--sp-8) 0; }
.artifact-group-head {
display: flex; align-items: center; gap: var(--sp-4);
margin-bottom: var(--sp-4);
padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line-1);
}
.artifact-group-head > div > p {
margin: 0 0 2px;
font-family: var(--font-mono); font-size: var(--fs-label);
letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-4);
}
/* neutralise the global h2 treatment inside this header */
.doc-article .artifact-group-head h2 {
margin: 0; padding: 0; border: 0;
font-size: var(--fs-lg); font-weight: 560;
}
.artifact-os {
display: grid; place-items: center;
width: 34px; height: 34px; flex: none;
border: 1px solid var(--ember-line); border-radius: var(--r-2);
background: var(--ember-wash);
font-family: var(--font-mono); font-size: var(--fs-md); color: var(--ember);
}
/* labelvalues… */
.artifact-items { display: grid; gap: 0; }
.artifact-items > div {
display: grid; grid-template-columns: minmax(120px, 170px) minmax(0, 1fr);
gap: var(--sp-5);
padding: var(--sp-3) 0; border-bottom: 1px solid var(--line-1);
}
.artifact-items > div:last-child { border-bottom: 0; }
.artifact-items > div > strong { font-size: var(--fs-sm); font-weight: 560; color: var(--ink); }
.artifact-items > div > span { font-size: var(--fs-sm); color: var(--ink-3); }
.artifact-filter { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-5) 0; }
.artifact-filter button {
padding: var(--sp-2) var(--sp-4);
border: 1px solid var(--line-1); border-radius: var(--r-full);
background: var(--surface-1);
font-family: var(--font-mono); font-size: var(--fs-label);
letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
transition: all var(--d-1) var(--e-out);
}
.artifact-filter button:hover { color: var(--ink); border-color: var(--line-2); }
.artifact-filter button[aria-pressed="true"], .artifact-filter button.active {
background: var(--ember-wash); border-color: var(--ember-line); color: var(--ember);
}
.filtered-out { display: none; }
.file-tree, .module-map, .tool-groups, .command-manifest, .implementation-notes, .tool-lines {
margin: var(--sp-5) 0;
padding: var(--sp-5);
border: 1px solid var(--line-1); border-radius: var(--r-3);
background: var(--surface-1);
font-size: var(--fs-sm);
}
/* ▾dir/
◇file */
.file-tree { font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 2; color: var(--ink-2); }
.file-tree > div { display: flex; align-items: baseline; gap: var(--sp-3); }
.file-tree strong { color: var(--ink); font-weight: 500; }
.file-tree > div > span { color: var(--ink-4); width: 10px; flex: none; }
.doc-article .file-tree code { background: none; border: 0; padding: 0; color: var(--ink-2); font-size: 1em; }
.tree-folder { color: var(--ember) !important; }
.file-tree .depth-1 { padding-left: var(--sp-5); }
.file-tree .depth-2 { padding-left: var(--sp-10); }
/* ……
repeated */
.implementation-notes > div + div, .command-manifest > div + div {
margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line-1);
}
.implementation-notes strong, .command-manifest strong {
display: block; margin-bottom: var(--sp-2); font-size: var(--fs-sm); color: var(--ink);
}
.implementation-notes p, .command-manifest p { margin: 0; font-size: var(--fs-sm); color: var(--ink-3); }
/* main.rsrole… */
.module-map { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-3); }
.module-map > i {
align-self: center; width: 1px; height: 20px; background: var(--line-2);
}
.module-core { text-align: center; border-color: var(--ember-line) !important; }
.module-grid { margin: 0 !important; }
.module-grid > div, .module-core {
padding: var(--sp-4);
border: 1px solid var(--line-1); border-radius: var(--r-2);
background: var(--surface-2);
}
.doc-article .module-map code {
display: block; margin-bottom: 2px;
background: none; border: 0; padding: 0;
font-size: var(--fs-xs); color: var(--ember);
}
.module-map span { font-size: var(--fs-label); color: var(--ink-4); letter-spacing: .02em; }
/* commandoutput file
*/
.tool-lines > p {
display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3);
margin: 0; padding: var(--sp-2) 0; border-bottom: 1px solid var(--line-1);
}
.tool-lines > p:last-child { border-bottom: 0; }
.doc-article .tool-lines code {
flex: 1; background: none; border: 0; padding: 0;
font-size: var(--fs-xs); color: var(--ink-2);
}
.tool-lines b {
font-family: var(--font-mono); font-size: var(--fs-label);
color: var(--ember); font-weight: 500; white-space: nowrap;
}
.tool-groups > div + div { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--line-1); }
.tool-groups h4 {
margin: 0 0 var(--sp-3);
font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500;
letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-4);
}
/* …
… */
.accordion { margin: var(--sp-5) 0; }
.accordion details {
border: 1px solid var(--line-1); border-radius: var(--r-2);
background: var(--surface-1);
overflow: hidden;
}
.accordion details + details { margin-top: var(--sp-2); }
.accordion summary {
display: flex; align-items: center; gap: var(--sp-3);
padding: var(--sp-4);
cursor: pointer; list-style: none;
font-size: var(--fs-sm); font-weight: 560; color: var(--ink);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::before {
content: "+"; font-family: var(--font-mono); color: var(--ember); width: 12px; flex: none;
}
.accordion details[open] summary::before { content: "−"; }
.accordion summary:hover { background: var(--surface-2); }
.accordion summary > span { flex: 1; }
.accordion details > div { padding: 0 var(--sp-4) var(--sp-4) calc(var(--sp-4) + 24px); }
.accordion details > div p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }
.doc-next {
display: flex; align-items: center; gap: var(--sp-4);
margin-top: var(--sp-10); padding-top: var(--sp-6);
border-top: 1px solid var(--line-1);
}
.doc-next > span {
font-family: var(--font-mono); font-size: var(--fs-label);
letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-4);
}
.doc-next a {
margin-left: auto;
display: inline-flex; align-items: center; gap: var(--sp-3);
padding: var(--sp-3) var(--sp-5);
border: 1px solid var(--line-1); border-radius: var(--r-2);
background: var(--surface-1);
text-decoration: none !important; color: var(--ink) !important;
transition: border-color var(--d-1) var(--e-out), background var(--d-1) var(--e-out);
}
.doc-next a:hover { border-color: var(--ember-line); background: var(--surface-2); }
.doc-next a strong { font-size: var(--fs-sm); font-weight: 560; }
.doc-next a i { font-style: normal; color: var(--ember); }
/* Builders */
.command-builder, .route-builder {
margin: var(--sp-5) 0;
border: 1px solid var(--line-1); border-radius: var(--r-3);
background: var(--surface-1);
overflow: hidden;
}
.builder-controls, .route-controls {
display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
gap: var(--sp-4);
padding: var(--sp-5);
border-bottom: 1px solid var(--line-1);
}
.builder-controls label, .route-controls label {
display: flex; flex-direction: column; gap: var(--sp-2);
font-family: var(--font-mono); font-size: var(--fs-label);
letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-4);
}
.builder-controls select, .builder-controls input,
.route-controls select, .route-controls input {
height: 34px; padding-inline: var(--sp-3);
border: 1px solid var(--line-2); border-radius: var(--r-2);
background: var(--ground); color: var(--ink);
font-family: var(--font-mono); font-size: var(--fs-xs);
letter-spacing: 0; text-transform: none;
transition: border-color var(--d-1) var(--e-out);
}
.builder-controls select:hover, .route-controls select:hover { border-color: var(--line-3); }
.toggle-row { flex-direction: row !important; align-items: center; gap: var(--sp-3) !important; }
.toggle-row input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--ember); }
.route-wide { grid-column: 1 / -1; }
.builder-result, .route-results { background: var(--ground-deep); }
.builder-result pre, .route-results pre {
margin: 0; padding: var(--sp-4) var(--sp-5);
overflow-x: auto; font-size: var(--fs-sm); line-height: 1.7; color: var(--ink-2);
}
.route-results .code-block { margin: 0; border: 0; border-radius: 0; border-top: 1px solid var(--line-1); }
/* --------------------------------------------------------------------------
9. Search palette
-------------------------------------------------------------------------- */
.search-modal { position: fixed; inset: 0; z-index: 200; display: none; }
.search-modal.is-open { display: block; }
.search-backdrop { position: absolute; inset: 0; background: rgba(3, 8, 7, .72); backdrop-filter: blur(3px); }
.search-dialog {
position: relative;
width: min(100% - var(--sp-8), 620px);
margin: 10vh auto 0;
border: 1px solid var(--line-2); border-radius: var(--r-3);
background: var(--surface-1);
overflow: hidden;
box-shadow: 0 24px 64px rgba(0, 0, 0, .5);
}
.search-input-row {
display: flex; align-items: center; gap: var(--sp-3);
padding: var(--sp-4) var(--sp-5);
border-bottom: 1px solid var(--line-1);
}
.search-input-row svg { width: 17px; height: 17px; stroke: var(--ink-4); fill: none; stroke-width: 1.8; flex: none; }
.search-input-row input {
flex: 1; border: 0; background: none; outline: none;
font-size: var(--fs-md); color: var(--ink);
}
.search-input-row input::placeholder { color: var(--ink-4); }
.search-results { max-height: 56vh; overflow-y: auto; padding: var(--sp-2); }
.search-result {
display: block; width: 100%; text-align: left;
padding: var(--sp-3) var(--sp-4);
border-radius: var(--r-2);
transition: background var(--d-1) var(--e-out);
}
.search-result:hover, .search-result.is-active { background: var(--surface-2); }
.search-result b { display: block; font-size: var(--fs-sm); font-weight: 560; color: var(--ink); }
.search-result small {
display: block; margin-top: 2px;
font-size: var(--fs-xs); color: var(--ink-4);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.search-result .crumb {
font-family: var(--font-mono); font-size: var(--fs-label);
letter-spacing: .06em; text-transform: uppercase; color: var(--ember);
}
.search-empty { padding: var(--sp-8); text-align: center; font-size: var(--fs-sm); color: var(--ink-4); }
.search-footer {
display: flex; gap: var(--sp-5);
padding: var(--sp-3) var(--sp-5);
border-top: 1px solid var(--line-1);
background: var(--surface-2);
font-size: var(--fs-label); color: var(--ink-4);
}
.search-footer kbd {
padding: 1px 5px; border: 1px solid var(--line-2); border-radius: var(--r-1);
background: var(--ground); margin-right: var(--sp-1);
}
/* --------------------------------------------------------------------------
10. Responsive
-------------------------------------------------------------------------- */
/* Inline TOC: hidden by default, revealed once the right rail is dropped.
The base rule MUST precede the media query — equal specificity means
source order wins, and a media query does not change that. */
.toc-inline {
display: none;
margin: 0 0 var(--sp-7);
padding: var(--sp-4) var(--sp-5);
border: 1px solid var(--line-1); border-radius: var(--r-2);
background: var(--surface-1);
}
.toc-inline h2 {
margin: 0 0 var(--sp-3); padding: 0; border: 0;
font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500;
letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-4);
}
.toc-inline a { display: block; padding: var(--sp-1) 0; font-size: var(--fs-xs); color: var(--ink-2); }
.toc-inline a:hover { color: var(--ember); }
.toc-inline a[aria-current="location"] { color: var(--ember); }
@media (max-width: 1240px) {
.docs-layout { grid-template-columns: 232px minmax(0, 1fr); gap: var(--sp-7); }
.docs-toc { display: none; }
.toc-inline { display: block; } /* replaces the rail instead of vanishing */
}
/* Base state must come BEFORE the media query that reveals it — same
specificity means source order decides, media query or not. */
.docs-menu-toggle { display: none; }
@media (max-width: 940px) {
.docs-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
.docs-sidebar {
position: fixed; z-index: 80;
inset-block: var(--header-h) 0; inset-inline-start: 0;
width: 268px; padding-inline: var(--sp-4);
border-right: 1px solid var(--line-1);
background: var(--ground);
transform: translateX(-102%);
transition: transform var(--d-2) var(--e-out);
}
.docs-sidebar.is-open { transform: none; }
.docs-menu-toggle { display: inline-grid; }
.search-trigger span, .search-trigger kbd { display: none; }
.search-trigger { flex: none; width: 34px; justify-content: center; padding: 0; }
.docs-label { display: none; }
.concept-grid.three-up,
.comparison-grid, .manifest-grid, .module-grid, .deploy-doc-grid,
.recipe-grid, .link-cards, .doc-download-grid, .artifact-doc-grid { grid-template-columns: 1fr; }
.option, .schema-list > div { grid-template-columns: 1fr; gap: var(--sp-2); grid-template-areas: none; }
.schema-list-two-column { columns: 1; }
.artifact-items > div { grid-template-columns: 1fr; gap: var(--sp-1); }
.option > span { justify-self: start; }
}
@media (max-width: 560px) {
.docs-layout { width: calc(100% - var(--sp-6)); }
.doc-hero h1 { font-size: var(--fs-2xl); }
.version-tag { display: none; }
}
/* Narrow phones: shed header actions instead of overflowing. Both stay
reachable — GitHub via the sidebar card, Download via the landing page. */
@media (max-width: 400px) {
.docs-header { padding-inline: var(--sp-3); gap: var(--sp-2); }
.docs-header-actions a[href*="github"] { display: none; }
}
@media (max-width: 360px) {
.docs-header-actions .btn-primary { display: none; }
}
/* --------------------------------------------------------------------------
11. Print — a doc page must export as a clean runbook
-------------------------------------------------------------------------- */
@media print {
.docs-header, .docs-sidebar, .docs-toc, .toc-inline,
.search-modal, .doc-next, .copy-button, .artifact-filter,
.command-builder, .route-builder { display: none !important; }
.docs-layout { display: block; width: 100%; padding-top: 0; }
.docs-main { padding: 0; }
.doc-article { max-width: none; }
.doc-article h2 { break-after: avoid; }
.code-block, .table-wrap, .doc-callout, .concept-card { break-inside: avoid; }
.code-panel { display: block !important; } /* print every tab, not just the open one */
.manifest-details { break-inside: avoid; }
.manifest-details[open] summary::before, .manifest-details summary::before { content: ""; }
.manifest-body { display: block !important; }
}