/* Markset default stylesheet (spec §4, §5, §6). * Theme tokens arrive as data attributes and custom properties on * (see renderPage); everything below reads them with fallbacks, so a page * with no theme block still renders well. */ /* ---- tokens -------------------------------------------------------------- */ body { --ms-accent: #2563eb; --ms-font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ms-font-heading: var(--ms-font-body); --ms-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --ms-type-scale: 1.2; --ms-base: 1rem; --ms-measure: 56rem; /* reading measure for prose blocks; presets adjust it */ --ms-measure-wide: 72rem; /* the document box; layout constructs and tables run to it */ --ms-space: 1rem; --ms-radius: 0.5rem; /* Each color is written once, light value first. light-dark() resolves it * against the element's color-scheme, so following the reader's system * preference and forcing a scheme are the same mechanism: set color-scheme. * A theme overriding any of these with a flat color still works. */ color-scheme: light dark; --ms-fg: light-dark(#1f2328, #e6edf3); --ms-fg-muted: light-dark(#59636e, #9198a1); --ms-bg: light-dark(#ffffff, #0d1117); --ms-surface: light-dark(#f6f8fa, #161b22); --ms-border: light-dark(#d0d7de, #30363d); --ms-tone-neutral: light-dark(#59636e, #9198a1); --ms-tone-info: light-dark(#0969da, #4493f8); --ms-tone-success: light-dark(#1a7f37, #3fb950); --ms-tone-warn: light-dark(#9a6700, #d29922); --ms-tone-danger: light-dark(#cf222e, #f85149); /* Derived type scale: h6 .. h1 step up from the base. */ --ms-h6: var(--ms-base); --ms-h5: calc(var(--ms-base) * var(--ms-type-scale)); --ms-h4: calc(var(--ms-h5) * var(--ms-type-scale)); --ms-h3: calc(var(--ms-h4) * var(--ms-type-scale)); --ms-h2: calc(var(--ms-h3) * var(--ms-type-scale)); --ms-h1: calc(var(--ms-h2) * var(--ms-type-scale)); } /* Forcing a scheme. The document never asks for one — which colors a reader * sees is not authorial intent (invariant 1) — but the chrome around it may, * on the reader's behalf. Setting data-scheme re-resolves every light-dark() * above, and tells form controls and scrollbars to match. */ body[data-scheme="light"] { color-scheme: light; } body[data-scheme="dark"] { color-scheme: dark; } /* density */ body[data-density="compact"] { --ms-space: 0.625rem; --ms-base: 0.9375rem; } body[data-density="spacious"] { --ms-space: 1.5rem; --ms-base: 1.0625rem; } /* radius */ body[data-radius="none"] { --ms-radius: 0; } body[data-radius="sm"] { --ms-radius: 0.25rem; } body[data-radius="lg"] { --ms-radius: 1rem; } /* Presets: each sets what the token model leaves open. The two measures are a * settled design decision, not an incidental number, so they are pinned by a * test (packages/render-html/test/css.test.ts). Change them there in the same * commit, deliberately, or not at all. * * preset reading measure wide measure * (none) 56rem 72rem * editorial 44rem 64rem * technical 60rem 72rem * deck 64rem 80rem * report 56rem 72rem */ body[data-preset="editorial"] { --ms-font-body: "Source Serif 4", Charter, Georgia, "Times New Roman", serif; --ms-font-heading: Inter, ui-sans-serif, system-ui, sans-serif; --ms-type-scale: 1.25; --ms-measure: 44rem; --ms-measure-wide: 64rem; } body[data-preset="technical"] { --ms-type-scale: 1.15; --ms-measure: 60rem; --ms-measure-wide: 72rem; --ms-radius: 0.375rem; } body[data-preset="deck"] { --ms-base: 1.25rem; --ms-type-scale: 1.3; --ms-space: 1.5rem; --ms-measure: 64rem; --ms-measure-wide: 80rem; } body[data-preset="report"] { --ms-type-scale: 1.15; --ms-space: 0.875rem; --ms-measure: 56rem; --ms-measure-wide: 72rem; --ms-radius: 0.25rem; } /* ---- document ------------------------------------------------------------ */ body { margin: 0; color: var(--ms-fg); background: var(--ms-bg); font-family: var(--ms-font-body); font-size: var(--ms-base); line-height: 1.55; -webkit-text-size-adjust: 100%; } /* Two lanes, one left edge. The document box is the wide measure; prose blocks * stop at the reading measure, and layout constructs and tables run the full * width. Everything starts at the same left edge, so the page reads as one * column with some wide elements, not as two columns centered on each other. */ .ms-document { /* `margin: 0 auto` turns off stretch when this is a grid item (the spec page * puts it beside a table of contents), and the box then shrink-to-fits, which * lets it exceed its track. Capping at 100% keeps it inside whatever holds it. */ max-width: min(var(--ms-measure-wide), 100%); box-sizing: border-box; /* or the side padding is added on top of that 100% */ margin: 0 auto; padding: calc(var(--ms-space) * 2) var(--ms-space); } .ms-document > * { min-width: 0; max-width: var(--ms-measure); } .ms-document > :is(.ms-grid, .ms-columns, .ms-metrics, .ms-tabs, .ms-figure, table, .wide) { max-width: none; } .ms-document > * + * { margin-top: var(--ms-space); } .ms-document p, .ms-document ul, .ms-document ol, .ms-document blockquote, .ms-document pre, .ms-document table { margin: 0; } .ms-document * + p, .ms-document * + ul, .ms-document * + ol, .ms-document * + pre, .ms-document * + table, .ms-document * + blockquote { margin-top: var(--ms-space); } h1, h2, h3, h4, h5, h6 { font-family: var(--ms-font-heading); line-height: 1.2; margin: 0; letter-spacing: -0.01em; } /* Heading rhythm, in the heading's own em so it scales with the type scale: * more space above than below, and consecutive headings close up. * Selectors carry the .ms-document class so they beat the generic sibling gap. */ .ms-document > * + h1, .ms-document > * + h2 { margin-top: 2em; } .ms-document > * + h3, .ms-document > * + h4, .ms-document > * + h5, .ms-document > * + h6 { margin-top: 1.5em; } .ms-document > :is(h1, h2, h3, h4, h5, h6) + * { margin-top: calc(var(--ms-space) * 0.6); } .ms-document > :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) { margin-top: 0.5em; } /* The same rhythm inside constructs, which hold their own block sequences. */ .ms-card > * + :is(h1, h2, h3, h4, h5, h6):not(.ms-card-title), .ms-column > * + :is(h1, h2, h3, h4, h5, h6), .ms-tabpanel > * + :is(h1, h2, h3, h4, h5, h6), .ms-callout-body > * + :is(h1, h2, h3, h4, h5, h6) { margin-top: 1.5em; } .ms-card > :is(h1, h2, h3, h4, h5, h6) + *, .ms-column > :is(h1, h2, h3, h4, h5, h6) + *, .ms-tabpanel > :is(h1, h2, h3, h4, h5, h6) + *, .ms-callout-body > :is(h1, h2, h3, h4, h5, h6) + * { margin-top: calc(var(--ms-space) * 0.6); } h1 { font-size: var(--ms-h1); } h2 { font-size: var(--ms-h2); } h3 { font-size: var(--ms-h3); } h4 { font-size: var(--ms-h4); } h5 { font-size: var(--ms-h5); } h6 { font-size: var(--ms-h6); } a { color: var(--ms-accent); } code, pre { font-family: var(--ms-font-mono); font-size: 0.9em; } code { background: var(--ms-surface); padding: 0.1em 0.3em; border-radius: calc(var(--ms-radius) / 2); } pre { background: var(--ms-surface); padding: var(--ms-space); border-radius: var(--ms-radius); overflow-x: auto; } pre code { background: none; padding: 0; font-size: inherit; } blockquote { border-left: 3px solid var(--ms-border); padding-left: var(--ms-space); color: var(--ms-fg-muted); } hr { border: 0; border-top: 1px solid var(--ms-border); margin-inline: 0; } /* no auto centering inside the wide box */ img { max-width: 100%; height: auto; } table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 0.4em 0.75em; border-bottom: 1px solid var(--ms-border); } th { font-weight: 600; } /* ---- reserved classes (§5) -------------------------------------------------- */ .lead { font-size: calc(var(--ms-base) * 1.2); line-height: 1.5; } .small { font-size: 0.875em; } .eyebrow { font-family: var(--ms-font-heading); font-size: 0.75em; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ms-fg-muted); } /* An eyebrow labels the heading below it: it takes the heading's top margin and the heading closes up to it. */ .ms-document > * + .eyebrow { margin-top: calc(var(--ms-space) * 3); } .ms-document > .eyebrow + :is(h1, h2, h3, h4, h5, h6) { margin-top: 0.3em; } .muted { color: var(--ms-fg-muted); } .badge { display: inline-block; font-family: var(--ms-font-heading); font-size: 0.75em; font-weight: 600; line-height: 1.4; padding: 0.05em 0.55em; border-radius: 999px; border: 1px solid var(--ms-tone, var(--ms-border)); color: var(--ms-tone, var(--ms-fg-muted)); vertical-align: 0.1em; } /* Tone classes and data-tone set one variable that the rest reads. */ .neutral, [data-tone="neutral"] { --ms-tone: var(--ms-tone-neutral); } /* A tone on a plain span tints the text. Without this the class sets the custom * property and nothing reads it, so `[shipping]{.success}` renders unchanged. */ .ms-span:is(.info, .success, .warn, .danger, .neutral):not(.badge) { color: var(--ms-tone); } .info, [data-tone="info"] { --ms-tone: var(--ms-tone-info); } .success, [data-tone="success"] { --ms-tone: var(--ms-tone-success); } .warn, [data-tone="warn"] { --ms-tone: var(--ms-tone-warn); } .danger, [data-tone="danger"] { --ms-tone: var(--ms-tone-danger); } /* ---- callout (§4.1) --------------------------------------------------------- */ .ms-callout { border: 1px solid var(--ms-border); border-left: 4px solid var(--ms-tone, var(--ms-tone-neutral)); border-radius: var(--ms-radius); background: var(--ms-surface); padding: calc(var(--ms-space) * 0.75) var(--ms-space); } .ms-callout[data-type="note"] { --ms-tone: var(--ms-tone-info); } .ms-callout[data-type="tip"] { --ms-tone: var(--ms-tone-success); } .ms-callout[data-type="important"] { --ms-tone: #8250df; } .ms-callout[data-type="warning"] { --ms-tone: var(--ms-tone-warn); } .ms-callout[data-type="caution"] { --ms-tone: var(--ms-tone-danger); } .ms-callout-title { font-family: var(--ms-font-heading); font-weight: 600; color: var(--ms-tone); } summary.ms-callout-title { cursor: pointer; } .ms-callout-body:not(:empty) { margin-top: calc(var(--ms-space) / 2); } .ms-callout-body > * + * { margin-top: calc(var(--ms-space) / 2); } /* ---- card (§4.2) ------------------------------------------------------------ */ .ms-card { border: 1px solid var(--ms-border); border-top: 3px solid var(--ms-tone, var(--ms-border)); border-radius: var(--ms-radius); background: var(--ms-surface); padding: var(--ms-space); } .ms-card[data-tone="neutral"] { border-top-color: var(--ms-border); } .ms-card[data-compact] { padding: calc(var(--ms-space) / 2) calc(var(--ms-space) * 0.75); } .ms-card > * + * { margin-top: calc(var(--ms-space) * 0.75); } .ms-card-title { font-size: var(--ms-h5); color: var(--ms-tone, inherit); } .ms-card[data-tone="neutral"] .ms-card-title { color: inherit; } /* ---- grid (§4.3) ------------------------------------------------------------ */ .ms-grid { display: grid; gap: var(--ms-gap, var(--ms-space)); grid-template-columns: repeat(var(--ms-cols, 2), minmax(0, 1fr)); } .ms-grid[data-cols="1"] { --ms-cols: 1; } .ms-grid[data-cols="2"] { --ms-cols: 2; } .ms-grid[data-cols="3"] { --ms-cols: 3; } .ms-grid[data-cols="4"] { --ms-cols: 4; } [data-gap="sm"] { --ms-gap: calc(var(--ms-space) / 2); } [data-gap="md"] { --ms-gap: var(--ms-space); } [data-gap="lg"] { --ms-gap: calc(var(--ms-space) * 2); } .ms-grid-item { border: 1px solid var(--ms-border); border-radius: var(--ms-radius); background: var(--ms-surface); padding: var(--ms-space); } .ms-grid-item > * + * { margin-top: calc(var(--ms-space) / 2); } @media (max-width: 60rem) { .ms-grid[data-cols="4"] { --ms-cols: 2; } .ms-grid[data-cols="3"] { --ms-cols: 2; } } @media (max-width: 36rem) { .ms-grid { --ms-cols: 1 !important; } } /* ---- columns (§4.4) --------------------------------------------------------- */ .ms-columns { display: grid; gap: var(--ms-gap, var(--ms-space)); grid-template-columns: var(--ms-ratio, repeat(auto-fit, minmax(0, 1fr))); align-items: start; } .ms-column > * + * { margin-top: var(--ms-space); } @media (max-width: 36rem) { .ms-columns { grid-template-columns: 1fr; } } /* A grid or flex item defaults to min-width: auto, so it refuses to shrink below * the widest thing inside it. One long line in a code block then inflates the * item, the construct, the page, and every unrelated block drifts sideways with * it. Setting min-width: 0 on the items lets the scroll containers inside them * (pre, table) do their job. */ .ms-column, .ms-grid-item, .ms-tabpanel, .ms-callout-body, .ms-card, .ms-metric { min-width: 0; } /* ---- narrow viewports --------------------------------------------------------- * A table is the one construct that cannot reflow: its columns have a minimum * width, so a wide one pushes the whole page sideways and every other block * drifts with it. Below the breakpoint the table scrolls inside itself instead. * * `display: block` is what makes overflow apply at all, since overflow is * ignored on a table box. The cost is that some screen readers stop announcing * it as a table, which is why this is scoped to narrow viewports rather than * applied everywhere, and why the HTML keeps a plain with no presentational * wrapper around it (invariant 1). */ @media (max-width: 48rem) { .ms-document table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* ---- tabs (§4.5): radio inputs, no JavaScript ------------------------------- */ .ms-tabs { border: 1px solid var(--ms-border); border-radius: var(--ms-radius); overflow: hidden; } .ms-tab-input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .ms-tablist { display: flex; flex-wrap: wrap; gap: 2px; background: var(--ms-surface); border-bottom: 1px solid var(--ms-border); padding: 0.25rem 0.25rem 0; } .ms-tab { font-family: var(--ms-font-heading); font-weight: 500; padding: 0.45em 0.9em; border-radius: var(--ms-radius) var(--ms-radius) 0 0; color: var(--ms-fg-muted); cursor: pointer; border-bottom: 2px solid transparent; } .ms-tab:hover { color: var(--ms-fg); } .ms-tab-input:focus-visible ~ .ms-tablist .ms-tab { outline: none; } .ms-tabpanel { display: none; padding: var(--ms-space); } .ms-tabpanel > * + * { margin-top: var(--ms-space); } .ms-tab-input:nth-of-type(1):checked ~ .ms-tabpanel[data-index="1"], .ms-tab-input:nth-of-type(2):checked ~ .ms-tabpanel[data-index="2"], .ms-tab-input:nth-of-type(3):checked ~ .ms-tabpanel[data-index="3"], .ms-tab-input:nth-of-type(4):checked ~ .ms-tabpanel[data-index="4"], .ms-tab-input:nth-of-type(5):checked ~ .ms-tabpanel[data-index="5"], .ms-tab-input:nth-of-type(6):checked ~ .ms-tabpanel[data-index="6"], .ms-tab-input:nth-of-type(7):checked ~ .ms-tabpanel[data-index="7"], .ms-tab-input:nth-of-type(8):checked ~ .ms-tabpanel[data-index="8"], .ms-tab-input:nth-of-type(9):checked ~ .ms-tabpanel[data-index="9"], .ms-tab-input:nth-of-type(10):checked ~ .ms-tabpanel[data-index="10"], .ms-tab-input:nth-of-type(11):checked ~ .ms-tabpanel[data-index="11"], .ms-tab-input:nth-of-type(12):checked ~ .ms-tabpanel[data-index="12"] { display: block; } .ms-tab-input:nth-of-type(1):checked ~ .ms-tablist .ms-tab:nth-child(1), .ms-tab-input:nth-of-type(2):checked ~ .ms-tablist .ms-tab:nth-child(2), .ms-tab-input:nth-of-type(3):checked ~ .ms-tablist .ms-tab:nth-child(3), .ms-tab-input:nth-of-type(4):checked ~ .ms-tablist .ms-tab:nth-child(4), .ms-tab-input:nth-of-type(5):checked ~ .ms-tablist .ms-tab:nth-child(5), .ms-tab-input:nth-of-type(6):checked ~ .ms-tablist .ms-tab:nth-child(6), .ms-tab-input:nth-of-type(7):checked ~ .ms-tablist .ms-tab:nth-child(7), .ms-tab-input:nth-of-type(8):checked ~ .ms-tablist .ms-tab:nth-child(8), .ms-tab-input:nth-of-type(9):checked ~ .ms-tablist .ms-tab:nth-child(9), .ms-tab-input:nth-of-type(10):checked ~ .ms-tablist .ms-tab:nth-child(10), .ms-tab-input:nth-of-type(11):checked ~ .ms-tablist .ms-tab:nth-child(11), .ms-tab-input:nth-of-type(12):checked ~ .ms-tablist .ms-tab:nth-child(12) { color: var(--ms-accent); border-bottom-color: var(--ms-accent); background: var(--ms-bg); } /* ---- steps (§4.6) ----------------------------------------------------------- */ /* The built-in list-item counter honors

already carries, so it is decoration * that some screen readers read out twice. The second declaration gives the * generated content empty alternative text; the first stays as the fallback * for a browser that does not understand the alt syntax and would otherwise * drop the whole declaration and render no marker at all. */ content: counter(list-item); /* biome-ignore lint/suspicious/noDuplicateProperties: the pair is the point — the first is the fallback for the second. */ content: counter(list-item) / ""; position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--ms-accent); color: #fff; font-family: var(--ms-font-heading); font-weight: 600; font-size: 0.9em; } .ms-step:not(:last-child)::after { content: ""; position: absolute; left: calc(1rem - 1px); top: 2.25rem; bottom: calc(var(--ms-space) * -1); border-left: 2px solid var(--ms-border); } .ms-step > * + * { margin-top: calc(var(--ms-space) / 2); } /* ---- metrics (§4.7) --------------------------------------------------------- */ .ms-metrics { display: grid; gap: var(--ms-space); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); } .ms-metric { border: 1px solid var(--ms-border); border-radius: var(--ms-radius); background: var(--ms-surface); padding: var(--ms-space); } .ms-metric-label { font-family: var(--ms-font-heading); font-size: 0.8em; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ms-fg-muted); } .ms-metric-value { font-family: var(--ms-font-heading); font-size: var(--ms-h2); font-weight: 700; line-height: 1.1; margin-top: 0.25em; letter-spacing: -0.02em; } .ms-metric-delta { margin-top: 0.35em; font-size: 0.9em; font-weight: 600; color: var(--ms-fg-muted); } .ms-metric[data-direction="up"] .ms-metric-delta { color: var(--ms-tone-success); } .ms-metric[data-direction="down"] .ms-metric-delta { color: var(--ms-tone-danger); } /* ---- figure (§4.8) ---------------------------------------------------------- */ /* A narrowed figure keeps the document's left edge rather than centering itself. */ .ms-figure { margin-inline: 0; width: var(--ms-width, 100%); max-width: 100%; } .ms-figure > img { display: block; border-radius: var(--ms-radius); } .ms-figure > figcaption, .ms-figure caption { margin-top: calc(var(--ms-space) / 2); font-size: 0.9em; color: var(--ms-fg-muted); font-style: italic; } /* A table's caption is its first child in the markup but reads below it. */ .ms-figure caption { caption-side: bottom; text-align: left; } /* ---- print -------------------------------------------------------------------- */ @media print { /* Paper is light. Forcing the scheme re-resolves every token, so a reader who * chose dark on screen does not print a dark surface and a pale border. */ body, body[data-scheme="dark"] { color-scheme: light; --ms-bg: #fff; --ms-fg: #000; } .ms-document { max-width: none; padding: 0; } .ms-tabpanel { display: block !important; padding-top: 0; } .ms-tablist { display: none; } .ms-tabpanel::before { content: attr(data-index) ". "; font-weight: 600; } details.ms-callout { display: block; } details.ms-callout > .ms-callout-body { display: block; } a { color: inherit; } }