/* ========================================================================= surface-treatments — separate surfaces composed from three axes; the disclosure; content emphasis; the bordered label; the labeled range; the scope underline. An OPT-IN VISUAL RULE under Foundations. It owns PRESENTATION ONLY: no markup, no semantics, no template, and no generated preview. A consuming surface writes its own markup and applies these classes to it. It serves BOTH lifecycles. A live surface references or vendors it and re-syncs when it changes. An artifact scaffold may inline it at generation time, after which the sealed copy does not re-sync. It loads no resource and imports no stylesheet, so it inlines verbatim — together with surface-panel.css, which it extends. LOAD ORDER colors_and_type.css -> surface-panel.css -> surface-treatments.css (surface-document.css, where a page also uses it, loads before this file) LOAD ORDER IS LOAD-BEARING. 1 surface-panel.css comes first. It authors the glass recipe once and shares it by selector grouping: .surface-material-page, .surface-material-panel, .surface-attach-free and .surface-elevation-raised are defined THERE. Without that file those four classes do nothing. 2 Material and elevation precede emphasis. The emphasis border and paint then win at equal specificity (0,1,0) over a material's edge and over .surface-elevation-flush. 3 .surface-emphasis.surface-elevation-raised composes the emphasis paint with the raised shadow at (0,2,0), so an emphasized surface that is also raised keeps both. It names --shadow-md again, because a box-shadow list cannot compose across rules. 4 The accent modifiers follow the base rules that set a default accent. 5 The disclosure's foreground rules share one specificity per host — (0,3,1) for the indicator and (0,2,1) for the summary of a details host; (0,3,0) and (0,2,0) for a controlled trigger — and are ordered [open] / [aria-expanded="true"] < :hover < :focus-visible, so a trigger that is hovered and focused shows the focus signal: the magenta indicator and the outline. USE. Use .surface-panel for a live content panel, and always for a panel that is itself a link: a.surface-panel is the only linked-panel form. Use .surface-separate plus one material, one attachment and one elevation where the reader needs a separate plane that is not a content panel — an emphasis panel or a comparison plane. Never compose axis classes or .surface-emphasis onto .surface-panel: this file loads later, so either would silently replace part of the panel. This module offers no emphasis for a full-panel link; the repository README (Hover, press, focus) records that a persistent emphasis on one is overwritten while it is hovered or focused and needs the consumer's own composition. It introduces no token and no palette value. Space, type, color, radius, motion and shadow resolve through the foundation, apart from the registered literals below. There is no blur here and no blur token: the one value every blurring material uses is the panel recipe's, authored in surface-panel.css. CATALOG SURFACE AXES meaning a separate surface selected on three independent axes: material (fill, blur, edge), attachment (corners) and elevation (depth cue); none determines another population a separate plane that is not a content panel: an emphasis panel, a comparison plane, a section synthesis (surface-document.css: panel material, free, flush), an overlay or an independently scrolling region owner this module; the page material, panel material, free attachment and raised elevation are authored in surface-panel.css and shared by selector grouping reuses --surface-glass, --line-1, --radius-lg, --radius-pill, --shadow-md, --space-5 variation material page | panel · attachment free | top | bottom | full-width | chip · elevation flush | raised exclusions content panels take .surface-panel; ordinary flow, subordinate grouping and quotation take no surface example a flush emphasis plane on the page material with free corners counterexample a raised, blurred card wrapped around an ordinary subsection ATTACHMENT meaning which edges a surface is joined to; it governs CORNER TREATMENT ONLY — radius on the free corners, none where every edge is joined population free-standing surfaces; surfaces joined at the top or the bottom edge; surfaces joined along their full width; chips owner this module reuses --radius-lg, --radius-pill variation .surface-attach-free · .surface-attach-top (hangs from the top: the bottom corners round) · .surface-attach-bottom (rises from the bottom: the top corners round) · .surface-attach-full-width (no corner rounds) · .surface-attach-chip (pill corners) exclusions no fill, blur, edge or shadow; an attached surface here keeps all four edges. surface-shell's navigation panel realizes the same corner rule pattern-locally and also drops the border on its joined edge; it does not consume these classes example a drawer hanging from the top edge rounds its two bottom corners, whatever its material and elevation counterexample a full radius on that drawer, which rounds a joined edge and detaches it from what it hangs from DISCLOSURE meaning a trigger and the region it expands population a details element whose summary names what it reveals; or, where the host must keep a region it controls, a button carrying .surface-disclosure-trigger whose aria-expanded and aria-controls state that region. The controlled trigger takes the summary's grammar — label, indicator, rotation, hover and focus — and none of the enclosure's geometry: its host keeps padding, placement and the region's own surface owner this module reuses the panel material, free attachment and flush elevation for its enclosure; operative-label metrics for the trigger; --space-6 inset, --space-4 gap; --fg-1 at 2px, --space-1 out, for the trigger's keyboard-focus outline variation none per artifact exclusions the region takes no second surface; the trigger joins neither the attention edge nor the foreground-bound link treatment: its hover and focus are its own example a census kept behind a "measured census" trigger; a diagram's legend behind a "legend" trigger on a small canvas counterexample a summary styled as a compact action, or a heading standing in for the trigger; a plus or minus sign standing in for the indicator CONTENT EMPHASIS meaning "this deserves attention": persistent, assigned by the content's role, and not interactive. It is not elevation, not containment and not interaction — hover and focus are transient and border-only; emphasis stays at rest population .surface-emphasis for a whole unit (a perimeter and a soft bloom, present at rest); .surface-emphasis-rail for a bounded passage in the reading flow (a vertical accent rule and an inset), which in a document is the authorial callout; .surface-emphasis-chip for the marker that names why — on a surface with no accent of its own, such as a section synthesis panel, the chip carries the accent modifier itself, so only its border takes the accent and the panel gains no perimeter and no bloom owner this module reuses --ask-emphasis-magenta, --ask-emphasis-violet, --ask-emphasis-cyan; operative-label metrics for the chip; --fg-1 for the chip's words; the bordered label's box and edge for the chip variation the accent (.surface-emphasis--magenta | --violet | --cyan) supplied by the content's role; the dose per theme exclusions no hover, press, focus or animation; the chip's words stay in the primary text role and the accent stays on the border; use the least elaborate treatment that expresses the distinction example a finding marked "read this first", its accent on the perimeter and the chip border counterexample a hard directional drop shadow with no visible border, or chip words set in the accent BORDERED LABEL meaning a short inert label inside a thin border: a word that is read, never operated. One box for every such label, so a label measures the same wherever it appears and only its meaning changes its color population .surface-bordered-label, neutral by default: a status word such as DRAFT. Two governed meanings take the same box: the emphasis chip, by selector grouping in this file, its border the emphasis accent; and Review Semantics' review mark, which carries the class, its border the review role's value owner this module: display, size, baseline, wrapping, padding, corners, the 1px layout border, the per-theme edge reinforcement, the clearance that keeps the reinforcement visible, and the neutral border. The words take the composing text role (.doc-label in a document, the chip's operative-label metrics); the border color comes from the composing meaning, through --surface-bordered-label-color reuses --fg-3 for the neutral border; --radius-sm; --space-2 variation the border color, set only by a governed meaning; the edge dose per theme exclusions no fill, wash, bloom, depth shadow, hover, press, focus or animation; this treatment takes --radius-sm (8px), not --radius-pill; corner shape alone assigns no interaction. Never a color chosen for contrast or decoration: a neutral label stays --fg-3, and a color arrives only with the emphasis chip or a review mark. Evidence dots, state squares and the not-yet-testable rail are not bordered labels, and the status badge (surface-shell) is an unbordered note example a neutral DRAFT; a THESIS chip in the emphasis magenta; a PROPOSED review mark in its role value — one box, three meanings counterexample a review module or a consumer setting its own padding, edge width or corner for a label; a bordered label used as a button LABELED RANGE meaning the exact run of blocks one label governs: a scope rail in the outer margin, beginning beside the label at the range's head and ending after its last block, so a reader sees where the label's scope starts and ends without inferring it from placement population .surface-labeled-range on the element that holds the run, or on one whole list item, which is then the range itself (the item host, below). Neutral by default: its first child is the label itself, a neutral bordered label such as DRAFT, over the blocks it marks; a neutral range claims no judgment, and content inside it keeps its own marks. One governed meaning sets its color: Review Semantics' annotation range, whose first child is the row naming its one review judgment, and whose rail takes that judgment's value owner this module: the rail's stroke, its lane outside the content edge, its reach past the range's first child, the label or its row, and its last block (whose outer margins it removes, so the rail ends just past them), the buffer between two ranges and at the edge of a list that opens or closes on an item host, the item host's lane and inset ends, and the neutral color. The run's own flow is its composition's (.doc-group in a document); the color comes from the composing meaning, through --surface-labeled-range-color reuses --fg-3 for the neutral rail; --space-1, --space-3 and --space-5 variation the rail color, set only by a governed meaning; for an item host, the list's indentation, which the host names through --surface-labeled-range-indent exclusions draws nothing on the range's own box and moves nothing it holds sideways: no inline margin, no padding, border, offset, transform, indent, fill or wash. Never a rail at the content edge, which belongs to the passage roles (quotation, preformatted block, callout). Never nested in another range, and never inside a list item, a railed passage, a separate surface or panel, a hierarchy level or an annotation note, whose own edges or markers sit where its rail would; a list inside a range keeps its markers inside its own padding. An item host is the item itself, never a block inside it, and an item of a list in the flow, never of a list inside another item; like any range it takes no content role, so its words sit in its own blocks. No ornament at the rail's ends: no foot, cap, dot or arrow. Never the cue for words inside a block: that is the scope underline. Colors other than neutral and the governed review value are not admitted: emphasis keeps its own rail example two paragraphs beside a magenta scope rail under PROPOSED, then one beside a green rail under ACCEPTED; a quotation and the sentence that reads it, beside one scope rail that runs outside the quotation's own violet rail; two judged items of one list, each beside its own rail in that same lane, outside the bullets counterexample a review color on a paragraph's own rail; a scope rail with no label at its head; one annotation range over blocks whose judgments differ SCOPE UNDERLINE meaning the exact words inside a block that one label governs: one solid line under them, so a reader sees which words a record concerns without a field painted behind them. The inline counterpart of the labeled range population .surface-scope-underline on the inline element that holds the words. Neutral by default; a neutral underline claims no judgment. One governed meaning sets its color: Review Semantics' passage mark, which names the note recording its judgment and takes that judgment's value owner this module: the line's style, weight and place, its run through descenders, the words' unchanged color, the absence of fill, padding and corner, and the neutral color. The color comes from the composing meaning, through --surface-scope-underline-color reuses --fg-3 for the neutral line variation the line color, set only by a governed meaning exclusions the words keep their color, weight and box: no text color, fill, wash, padding, corner, border or rail. One solid line: never dotted, dashed, wavy or doubled, and never thinned, raised or lightened toward a text link's line. Inert: no cursor, hover, focus or other interactive behavior; never on a link or a control and never composed onto one, while a link inside the words keeps its own line and its states. Never the cue for whole blocks: that is the labeled range example "two props or fewer" underlined in the emphasis magenta, its CORRECTION REQUESTED note after the paragraph counterexample a tinted field behind the words; the words recolored; an underline that brightens on hover; a text link's 1px line reused to mark scope THE BORDERED LABEL'S EDGE. An apparent 2px edge in light and 1.5px in dark: the fixed 1px border plus a same-color, zero-blur reinforcement of 1px light and 0.5px dark. The reinforcement is paint, not layout, so the box measures the same in both themes and nothing moves when the theme changes. Because it paints outside the border, a clipping box (a scrolling table, a scrolling block) would cut it where a label meets its edge, and that side would fall back to the bare 1px border. The label therefore keeps 1px of inline margin, the larger of the two doses, in both themes: on its inline sides the reinforcement lands inside the label's own margin box, so a label at the start of a table's first column or the end of its last, scrolled fully into view, keeps its whole edge. Above and below, the composing box keeps the clearance, as the document table's cells do with their block padding; the label takes no block margin, which would change the line it sits on. On a surface with an accent of its own the chip's edge is heavier than the panel's perimeter (2px against 1.5px in light, 1.5px against 1px in dark); a compact label and a whole unit's perimeter work at different scales, and neither is adjusted to match the other. THE LABELED RANGE'S LANE. Every passage rail in the register sits at the content edge and insets its text. A range's scope rail sits outside that edge, in the outer margin, so it is never read as a passage's own rail: a quotation inside a range keeps its violet rail, and the scope rail runs beside it, outside, as it does beside a callout of its own color. The label at its head names the range, and the rail ends with the last block it covers; two ranges in a row keep the passage buffer between them, so their rails never join, even where they share a color. The stroke is 2px, the passage rails' width: one straight line with plain ends, its outer edge 14px and its inner edge 12px (--space-3) outside the content edge. It extends 4px (--space-1) above the range's first child, its label or the row that holds it, and below its last block; the range removes those two children's outer margins, so the rail ends just past them. It is paint on the range's ::before, so no line of the range's content moves sideways; the buffer between two ranges moves what follows down. The host keeps the lane: at least 14px of unclipped space to the left of the content edge, and --space-5 (24px) of side padding is recommended at the narrowest page width, so the rail stays clear of the screen edge. A scrolling or paint-contained box clips the lane at its own edge. In a document table a range hangs into the gutter of the column before it; the first column has none, so a table with a range in its first or only column keeps the lane in its own box: .doc-table-scroll--range-lane (surface-document.css) reaches the lane's width into the page's margin and pads it back, so no column moves and the rail sits where a range's in the flow does. THE ITEM HOST. One whole list item may itself be the range. It keeps its list semantics: display: list-item, its marker, its indentation and its place in the list's order. Its rail is the same 2px stroke in the same lane as every other scope rail, reached back across the list's indentation and then 14px outside the content edge, so it clears the marker and lines up with the rail of a range in the flow beside the list. That indentation is --surface-labeled-range-indent, 24px (--space-5) by default; a list indented otherwise sets it. The rail's ends sit 2px inside the item instead of 4px beyond it, so two item hosts in a row never join, even in one color, and the list keeps its own item spacing between them: no passage buffer opens between the items of one list. The marker sits on a line of the item's own font, which can hold the first block a few pixels below the item's top, so the rail may begin just above the label. A list that opens or closes on an item host keeps the 24px passage buffer from a range, or from another such list, beside it, whether the list stands directly beside it or is the first or last child of one block that wraps it. A deeper wrapper is not reached; a host that nests its lists deeper composes its own buffer. THE SCOPE UNDERLINE'S PLACE. One solid 2px line, 0.36em below the baseline, drawn straight through descenders (no skip-ink), in the full value of the composing meaning. A text link's own line (surface-text-link.css) is 1px, at half its value at rest and full on hover, 0.22em below the baseline and broken at descenders, and its keyboard focus is a 2px foreground line 2px below the baseline. The two lines differ in weight, place and continuity at rest, and each keeps its place while a link is hovered or focused. A link inside underlined words keeps its own line above the scope line, which runs on under the whole phrase. At body leading the line can paint just past the line box: it is paint, not layout, so no line of text moves, and what follows the words keeps its own clearance (Review Semantics gives a note in a list item its attachment space). THE EMPHASIS DOSE. The themes are deliberately not numerically equal, because equal numbers do not read as equal emphasis: light has an apparent 1.5px edge (the 1px border plus a 0.5px zero-blur ring, which grows the edge without growing layout) and a 28% bloom; dark has a 1px edge and a 50% bloom. The dark dose applies under an explicit dark theme, a .theme-dark subtree and an automatic dark theme. REGISTERED LITERALS — no token expresses these values 1px, 2px surface edge and accent-rail widths 0.5px, 0 the emphasis ring, light and dark 28%, 50% the emphasis bloom alpha, light and dark 70% the emphasis ring's accent mix 22px 1px the emphasis bloom's blur and spread -90deg the closed disclosure indicator's rotation 1 the disclosure indicator's leading 2px the bordered label's block padding 1px, 0.5px the bordered label's edge reinforcement, light and dark: an apparent 2px and 1.5px edge 1px the bordered label's inline margin, the larger dose calc(100% - 2px) the bordered label's widest box: its container less its two 1px margins 2px the disclosure trigger's focus-outline width 2px the labeled range's scope-rail stroke, and the width of the ::before that draws it; with --space-3 it sets the rail's lane, 14px outside the content edge 2px the item host's rail ends, inside the item 2px, 0.36em the scope underline's thickness and its offset below the baseline LIMITS - Hover and focus colors on the disclosure trigger depend on the source order stated above; a consumer that restates one of them restates all three in the same order. - Under prefers-reduced-motion: reduce the indicator changes state without animating. - The trigger's focus outline is drawn --space-1 outside the summary, inside the disclosure's --space-6 inset; a consumer that clips that band hides it. - The labeled range's scope rail is its ::before. A consumer that draws its own ::before on a range replaces the rail. A host with less than 14px of space left of the content edge, or a clipping box at the content edge, cuts it. The rail is drawn on the left: a right-to-left document is not yet served. - The rail's color for an annotation range comes through :has(). A browser without :has() draws the neutral rail beside the colored label. The buffer at a list's edge comes through :has() too: without it, an item host's rail can meet a neighboring range's. It counts siblings, so a wrapper laid out beside its neighbor, a grid or flex column, takes the margin too; a host that sets such lists side by side composes its own spacing. - CSS cannot read a list's indentation, so the item host's rail reaches back by --surface-labeled-range-indent: a list indented otherwise that does not set it puts its item rails out of the lane. - The scope underline is text decoration, so it runs under everything inline inside the words; an inline element that draws its own line, a text link, draws it beside the scope line. The 0.36em offset follows the font's metrics, so the line sits a little differently in another family. ========================================================================= */ /* ---- Surface axes ----------------------------------------------------- */ /* Material, free attachment and raised elevation are authored in surface-panel.css. What follows is what the panel recipe does not select. */ /* ATTACHMENT — corners only. */ .surface-attach-top { border-radius: 0 0 var(--radius-lg) var(--radius-lg); } .surface-attach-bottom { border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .surface-attach-full-width { border-radius: 0; } .surface-attach-chip { border-radius: var(--radius-pill); } /* ELEVATION — flush. Absence of a shadow is not deficient elevation. */ .surface-elevation-flush { box-shadow: none; } /* A SEPARATE SURFACE — the plane itself. Its material, attachment and elevation are chosen with the axis classes above. */ .surface-separate { padding: var(--space-5); } /* ---- Disclosure ------------------------------------------------------- */ /* The enclosure composes the axes: .surface-disclosure + .surface-material-panel + .surface-attach-free + .surface-elevation-flush. */ .surface-disclosure { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); } /* The trigger's grammar, shared by the summary of a details host and a controlled trigger. */ .surface-disclosure > summary, .surface-disclosure-trigger { cursor: pointer; font-family: var(--font-mono); font-size: var(--fs-caption); font-weight: var(--fw-light); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-2); } .surface-disclosure > summary { list-style: none; margin: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } /* A controlled trigger is a native button: its own chrome is reset, and its host supplies any surface around it. */ .surface-disclosure-trigger { appearance: none; margin: 0; padding: 0; border: 0; background: none; display: inline-flex; align-items: center; gap: var(--space-3); text-align: start; } .surface-disclosure-trigger > .surface-disclosure-label { flex: 0 1 auto; min-width: 0; } .surface-disclosure > summary::-webkit-details-marker { display: none; } /* The label is a real flex item so a long label can shrink and wrap. It shrinks and does not grow: justify-content already places the indicator at the trailing edge. */ .surface-disclosure > summary > .surface-disclosure-label { flex: 0 1 auto; min-width: 0; } .surface-disclosure[open] > summary { color: var(--fg-1); } .surface-disclosure > summary .surface-disclosure-indicator, .surface-disclosure-trigger .surface-disclosure-indicator { flex: 0 0 auto; font-size: var(--fs-caption); line-height: 1; color: var(--fg-2); transition: transform var(--dur-2) var(--ease-out); } .surface-disclosure[open] > summary .surface-disclosure-indicator { color: var(--fg-1); } .surface-disclosure:not([open]) > summary .surface-disclosure-indicator { transform: rotate(-90deg); } /* The controlled trigger reads its state from aria-expanded, the one truthful source its controller keeps. */ .surface-disclosure-trigger[aria-expanded="true"] { color: var(--fg-1); } .surface-disclosure-trigger[aria-expanded="true"] .surface-disclosure-indicator { color: var(--fg-1); } .surface-disclosure-trigger[aria-expanded="false"] .surface-disclosure-indicator { transform: rotate(-90deg); } /* Hover: a closed disclosure's foreground rises; an open one already rests at --fg-1. No border, no opacity drop, no press. */ .surface-disclosure > summary:hover { color: var(--fg-1); } .surface-disclosure > summary:hover .surface-disclosure-indicator { color: var(--fg-1); } .surface-disclosure-trigger:hover { color: var(--fg-1); } .surface-disclosure-trigger:hover .surface-disclosure-indicator { color: var(--fg-1); } /* Focus: the summary is at --fg-1, the indicator takes the emphasis magenta and a 2px --fg-1 outline surrounds the trigger, --space-1 out. The outline is the signal that always shows: an open disclosure's summary already rests at --fg-1, and a trigger may lead with a mark that keeps its own color. These follow the hover rules on purpose (load order, item 5). */ .surface-disclosure > summary:focus-visible { color: var(--fg-1); outline: 2px solid var(--fg-1); outline-offset: var(--space-1); } .surface-disclosure > summary:focus-visible .surface-disclosure-indicator { color: var(--ask-emphasis-magenta); } .surface-disclosure-trigger:focus-visible { color: var(--fg-1); outline: 2px solid var(--fg-1); outline-offset: var(--space-1); } .surface-disclosure-trigger:focus-visible .surface-disclosure-indicator { color: var(--ask-emphasis-magenta); } .surface-disclosure > .surface-disclosure-body { margin: 0; } @media (prefers-reduced-motion: reduce) { .surface-disclosure > summary .surface-disclosure-indicator, .surface-disclosure-trigger .surface-disclosure-indicator { transition: none; } } /* ---- Content emphasis ------------------------------------------------- */ /* The rail: a bounded passage inside the reading flow or inside an existing surface. No perimeter, no bloom, no second wash. It marks attention, not a change of voice, so it is not quotation. In a document it is the authorial callout: a thesis, posed question or contrast the document states in its own voice (surface-document.css). surface-document.css reuses its geometry — width, style and inset — for the passage rail of a quotation and a preformatted block, but not its meaning: a quotation's rail is violet, represented voice, and a preformatted block's is magenta like this one. check-type-roles.mjs (R7) keeps the geometry equal and pins each color. On document text this rail is always magenta; elsewhere the violet and cyan modifiers below stay valid. Where surface-document.css is loaded, a rail inside a railed passage — a quotation, a block or another rail — draws none: that module's nested-rail rule removes it, so one passage keeps one rail. */ .surface-emphasis-rail { --surface-emphasis-accent: var(--ask-emphasis-magenta); border-left: 2px solid var(--surface-emphasis-accent); padding-left: var(--space-4); } /* Two rails in a row would read as one passage. A rail directly after a rail takes a buffer, added to whatever gap its parent supplies. */ .surface-emphasis-rail + .surface-emphasis-rail { margin-top: var(--space-5); } /* The dose, per theme. */ :root { --surface-emphasis-ring: 0.5px; --surface-emphasis-bloom: 28%; } :root[data-theme="dark"], .theme-dark { --surface-emphasis-ring: 0; --surface-emphasis-bloom: 50%; } :root[data-theme="light"] { --surface-emphasis-ring: 0.5px; --surface-emphasis-bloom: 28%; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --surface-emphasis-ring: 0; --surface-emphasis-bloom: 50%; } } /* The panel: a perimeter plus a soft bloom, present at rest. Flush by default: an emphasized unit must be easier to notice, not necessarily higher. */ .surface-emphasis { --surface-emphasis-accent: var(--ask-emphasis-magenta); border: 1px solid var(--surface-emphasis-accent); box-shadow: 0 0 0 var(--surface-emphasis-ring) color-mix(in srgb, var(--surface-emphasis-accent) 70%, transparent), 0 0 22px 1px color-mix(in srgb, var(--surface-emphasis-accent) var(--surface-emphasis-bloom), transparent); } /* Emphasis and elevation are separate axes: a raised emphasized surface keeps both rather than one replacing the other. */ .surface-emphasis.surface-elevation-raised { box-shadow: 0 0 0 var(--surface-emphasis-ring) color-mix(in srgb, var(--surface-emphasis-accent) 70%, transparent), 0 0 22px 1px color-mix(in srgb, var(--surface-emphasis-accent) var(--surface-emphasis-bloom), transparent), var(--shadow-md); } /* The accent is supplied by the content's role, never chosen decoratively. These bind the existing emphasis accents and create none. */ .surface-emphasis--magenta { --surface-emphasis-accent: var(--ask-emphasis-magenta); } .surface-emphasis--violet { --surface-emphasis-accent: var(--ask-emphasis-violet); } .surface-emphasis--cyan { --surface-emphasis-accent: var(--ask-emphasis-cyan); } /* ---- Bordered label --------------------------------------------------- */ /* The edge dose, per theme, set as the emphasis dose is set. */ :root { --surface-bordered-label-reinforce: 1px; } :root[data-theme="dark"], .theme-dark { --surface-bordered-label-reinforce: 0.5px; } :root[data-theme="light"] { --surface-bordered-label-reinforce: 1px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --surface-bordered-label-reinforce: 0.5px; } } /* The box. One atomic inline box on the text baseline, as wide as its words on one line: a flex or grid parent never stretches it, and neither a flex row nor a table column squeezes it, so a line never breaks inside it while it fits. Only a label wider than its container wraps, inside its border, rather than overflow. An inline-block, not a flex box: a label may hold inline emphasis (strong, em), which a flex box would split into separate items and close up. Neutral by default; a governed meaning sets --surface-bordered-label-color and nothing else. The 1px inline margin holds the reinforcement inside the label's own margin box (THE BORDERED LABEL'S EDGE, above). */ .surface-bordered-label, .surface-emphasis-chip { display: inline-block; box-sizing: border-box; width: max-content; max-width: calc(100% - 2px); flex-shrink: 0; vertical-align: baseline; white-space: normal; margin: 0 1px; padding: 2px var(--space-2); border: 1px solid var(--surface-bordered-label-color, var(--fg-3)); border-radius: var(--radius-sm); box-shadow: 0 0 0 var(--surface-bordered-label-reinforce) var(--surface-bordered-label-color, var(--fg-3)); } /* The marker that names why a unit is emphasized: the emphasis member of the bordered label. Two channels on purpose: the accent arrives on the border, where it cannot drift from the perimeter it belongs to, and the words are set in the primary text role. Outside an accented surface the border falls back to the tertiary foreground. Its box is the bordered label's. It keeps its own placement at the start of the unit it names (align-self), so in a flex row it sits at the row's start rather than on the row's baseline. */ .surface-emphasis-chip { --surface-bordered-label-color: var(--surface-emphasis-accent, var(--fg-3)); align-self: flex-start; font-family: var(--font-mono); font-size: var(--fs-caption); font-weight: var(--fw-light); line-height: var(--lh-tight); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-1); } /* Inline emphasis inside the trigger and the chip. Scoped, so strong and em elsewhere keep their own styling. */ :where(.surface-disclosure, .surface-emphasis-chip) strong { font-weight: var(--fw-medium); color: var(--fg-1); } :where(.surface-disclosure, .surface-emphasis-chip) em { font-style: italic; } /* ---- Labeled range ---------------------------------------------------- */ /* The scope rail: one straight stroke in the outer lane beside the label at the range's head and the blocks it governs, from just above the label to just below the last block, its ends plain. Paint only: the range takes no inline margin, padding or border, so nothing it holds moves sideways. The host keeps the lane free and unclipped (THE LABELED RANGE'S LANE, above). */ .surface-labeled-range { position: relative; } /* The rail ends just past the first and last child, not their outer margins. */ .surface-labeled-range > :first-child { margin-top: 0; } .surface-labeled-range > :last-child { margin-bottom: 0; } .surface-labeled-range::before { content: ""; position: absolute; top: calc(-1 * var(--space-1)); bottom: calc(-1 * var(--space-1)); left: calc(-1 * (var(--space-3) + 2px)); box-sizing: border-box; width: 2px; border-left: 2px solid var(--surface-labeled-range-color, var(--fg-3)); pointer-events: none; } /* Two ranges in a row keep the passage buffer, so their rails never read as one. */ .surface-labeled-range + .surface-labeled-range { margin-top: var(--space-5); } /* The item host: one whole list item that is itself the range. It keeps its marker and indentation; its rail sits in every range's lane, reached back across the list's indentation, and ends 2px inside the item, so two item hosts in a row never join and the list keeps its own spacing between them (THE ITEM HOST, above). */ li.surface-labeled-range::before { top: 2px; bottom: 2px; left: calc(-1 * (var(--surface-labeled-range-indent, var(--space-5)) + var(--space-3) + 2px)); } li.surface-labeled-range + li.surface-labeled-range { margin-top: 0; } /* A list that opens or closes on an item host keeps the passage buffer from a range or from another such list beside it: the list directly beside it, or the first or last child of one block that wraps it. */ .surface-labeled-range + :is( :is(ul, ol):has(> li.surface-labeled-range:first-child), :has(> :is(ul, ol):first-child > li.surface-labeled-range:first-child)), :is( :is(ul, ol):has(> li.surface-labeled-range:last-child), :has(> :is(ul, ol):last-child > li.surface-labeled-range:last-child)) + :is( .surface-labeled-range, :is(ul, ol):has(> li.surface-labeled-range:first-child), :has(> :is(ul, ol):first-child > li.surface-labeled-range:first-child)) { margin-top: var(--space-5); } /* ---- Scope underline -------------------------------------------------- */ /* The exact words one label governs: one solid 2px line 0.36em below the baseline, straight through descenders, in the composing meaning's value. The words keep their color and their box, so an element that paints its own, such as a mark, is reset: no fill, padding or corner. Neutral by default; a governed meaning sets --surface-scope-underline-color and nothing else (THE SCOPE UNDERLINE'S PLACE, above). */ .surface-scope-underline { color: inherit; background: none; padding: 0; border-radius: 0; text-decoration-line: underline; text-decoration-style: solid; text-decoration-thickness: 2px; text-underline-offset: 0.36em; text-decoration-skip-ink: none; text-decoration-color: var(--surface-scope-underline-color, var(--fg-3)); }