/* SemText — vocabulary base Theme-independent structure: layout, spacing, the component rules, and the fallback-tier hide/show gating. Reads --sem-* custom properties but declares none — pair with a theme file such as themes/minimal-tech-light.css for values. BOTH AUTHORING FORMS FROM ONE RULE (D10). Every vocabulary selector is `:is(sem-x, .sem-x)`: the canonical custom element and its class-form alias (conventions Appendix A) render identically, before or without the Lit upgrade (conventions §4 rule 3). Element-form children use their bare tags (``, ``, ``); the alias uses `.sem-*`. Parameters are read in both spellings where a rule must hold with NO script (`[status]`/`[data-status]`); a bare-spelling rule that renders `attr()` is guarded with `:not([data-])` so `data-*` wins when both are present (conventions §2), while a value selector (`:is([data-status="done"], [status="done"])`) needs no guard — both spellings of one value yield one declaration. Rules that only apply once a tier is driving the element key on the `data-*` spelling alone, which the fallback core mirrors from the bare attribute before any handler runs. HIDE RULES ARE GATED (D12). Nothing in this file hides content unless a tier marker says a script is driving it: `[data-sem-fallback]` (vanilla handler) or `[data-sem-upgraded]` (Lit), on the element that owns the behavior — or on `` for rules whose host is deliberately unmarked. With no script, every distractor, view, conclusion and body renders. */ body { margin: 0; } /* Paint the element that carries the theme, not : themes may mount on an embedded subtree (data-sem-theme on a pane div), where the tokens are invisible at body scope — an unguarded body rule then resolves var(--sem-fg) to nothing and resets page text to UA black over the host's dark background. [data-sem-theme] covers html/body mounts too. */ [data-sem-theme] { background: var(--sem-bg); color: var(--sem-fg); } :is(sem-enhanced-document, .sem-enhanced-document) { font-family: system-ui, sans-serif; line-height: 1.6; } /* Custom elements are inline by default; the vocabulary is block-level. */ sem-enhanced-document, sem-agent, sem-audiences, sem-note, sem-facts, sem-fact, sem-details, sem-detail, sem-procedure, sem-step, sem-properties, sem-property, sem-views, sem-view, sem-reveal, sem-progress, sem-chronology, sem-event, sem-code, sem-references, sem-reference, sem-reader, sem-table, sem-source, sem-md, sem-data-visualizer, sem-data-source, sem-agent > :is(name, bio, instructions), sem-fact > :is(statement, conclusion, incorrect-statement) { display: block; } /* The audience fallback hides with the native attribute; keep it winning over the block rule above for element forms. */ :is(sem-enhanced-document, .sem-enhanced-document) [hidden] { display: none !important; } /* motion — smooth anchor scrolling only for readers who did not opt out */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } :is(highlight, .sem-highlight, .sem-occluded, .sem-revealed, .sem-target) { transition: none !important; animation: none !important; } } /* deep-link target (transient runtime class set by fallback/target) */ .sem-target { outline: 2px solid var(--sem-accent); outline-offset: 4px; border-radius: 8px; transition: outline-color .6s; } /* metadata */ :is(sem-agent, .sem-agent) { border: 1px solid var(--sem-border); border-radius: 12px; padding: 1rem; margin: 1.5rem 0; background: var(--sem-surface); } :is(sem-agent, .sem-agent) :is(name, .sem-agent-name) { font-weight: 600; } :is(sem-agent, .sem-agent) :is(bio, .sem-agent-bio) { color: var(--sem-muted); margin: .25rem 0; } :is(sem-agent, .sem-agent) :is(instructions, .sem-agent-instructions) { font-size: .875rem; margin: .25rem 0 0; } /* audiences — profile declarations render as a muted metadata strip */ :is(sem-audiences, .sem-audiences) { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 1rem 0; font-size: .8rem; color: var(--sem-muted); } :is(sem-audiences, .sem-audiences)::before { content: "audiences ·"; letter-spacing: .05em; text-transform: uppercase; font-size: .7rem; } :is(sem-profile, .sem-profile) { display: inline-block; border: 1px solid var(--sem-border); border-radius: 999px; padding: .1rem .6rem; background: var(--sem-surface); } :is(sem-profile, .sem-profile)::before { content: attr(id); } :is(sem-profile, .sem-profile)[data-label]::before { content: attr(data-label); } :is(sem-profile, .sem-profile)[label]:not([data-label])::before { content: attr(label); } /* note */ :is(sem-note, .sem-note) { border-left: 4px solid var(--sem-note-info); border-radius: 8px; padding: .75rem 1rem; margin: 1rem 0; background: var(--sem-surface); } :is(sem-note, .sem-note):is([data-variant="warning"], [variant="warning"]) { border-color: var(--sem-note-warning); } :is(sem-note, .sem-note):is([data-variant="tip"], [variant="tip"]) { border-color: var(--sem-note-tip); } :is(sem-note, .sem-note):is([data-variant="danger"], [variant="danger"]) { border-color: var(--sem-note-danger); } :is(sem-note, .sem-note)[variant]:not([data-variant])::before { content: attr(variant) " · "; } :is(sem-note, .sem-note):is([data-variant], [variant])::before { content: attr(data-variant) " · "; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--sem-muted); display: block; } :is(sem-note, .sem-note):is([data-sem-fallback], [data-sem-upgraded])[collapsed] > .sem-note-body { display: none; } :is(sem-note, .sem-note)[collapsed] .sem-note-summary { cursor: pointer; color: var(--sem-accent); } /* view-as="margin": floated aside on wide viewports, inline callout otherwise. Floats INSIDE the container by default; a document whose wrapper has a gutter can push it out with --sem-margin-offset: calc(-1 * (var(--sem-margin-width) + 1.5rem)). */ @media (min-width: 64rem) { :is(sem-note, .sem-note):is([data-view-as="margin"], [view-as="margin"]) { float: right; clear: right; width: var(--sem-margin-width, 14rem); margin: 0 var(--sem-margin-offset, 0) 1rem 1.5rem; font-size: .875rem; } } /* facts */ :is(sem-facts, .sem-facts) { margin: 1.5rem 0; } .sem-facts-chrome { display: flex; gap: .5rem; align-items: center; margin: .5rem 0; } .sem-facts-chrome button { font: inherit; border: 1px solid var(--sem-border); background: var(--sem-surface); color: var(--sem-fg); border-radius: 8px; padding: .25rem .75rem; cursor: pointer; } .sem-facts-meter { color: var(--sem-muted); font-size: .875rem; } :is(sem-fact, .sem-fact) { border: 1px solid var(--sem-border); border-radius: 12px; padding: 1rem; margin: .75rem 0; background: var(--sem-surface); } :is(sem-fact, .sem-fact) :is(statement, .sem-statement) { font-weight: 600; } :is(sem-fact, .sem-fact) :is(conclusion, .sem-conclusion) { margin: .5rem 0 0; color: var(--sem-muted); } /* distractors are quiz decoys: hidden once a script drives the document, labelled and readable when none does (D12) */ :root:is([data-sem-fallback], [data-sem-upgraded]) :is(sem-fact, .sem-fact) :is(incorrect-statement, .incorrect-statement) { display: none; } :root:not([data-sem-fallback], [data-sem-upgraded]) :is(sem-fact, .sem-fact) :is(incorrect-statement, .incorrect-statement) { margin: .5rem 0 0; color: var(--sem-muted); font-size: .875rem; } :root:not([data-sem-fallback], [data-sem-upgraded]) :is(sem-fact, .sem-fact) :is(incorrect-statement, .incorrect-statement)::before { content: "incorrect statement · "; font-variant-caps: all-small-caps; letter-spacing: .05em; } /* quiz + flashcards (hide rules gated on the tier marker — JS-off stays readable) */ :is(sem-facts, .sem-facts):is([data-sem-fallback], [data-sem-upgraded])[data-view-as="quiz"] :is(sem-fact, .sem-fact) :is(conclusion, .sem-conclusion) { display: none; } :is(sem-facts, .sem-facts):is([data-sem-fallback], [data-sem-upgraded])[data-view-as="flashcards"] :is(sem-fact, .sem-fact) { display: none; cursor: pointer; min-height: 8rem; position: relative; } :is(sem-facts, .sem-facts):is([data-sem-fallback], [data-sem-upgraded])[data-view-as="flashcards"] :is(sem-fact, .sem-fact).sem-current { display: block; } :is(sem-facts, .sem-facts):is([data-sem-fallback], [data-sem-upgraded])[data-view-as="flashcards"] :is(sem-fact, .sem-fact) :is(conclusion, .sem-conclusion) { visibility: hidden; } :is(sem-facts, .sem-facts):is([data-sem-fallback], [data-sem-upgraded])[data-view-as="flashcards"] :is(sem-fact, .sem-fact).sem-flipped :is(conclusion, .sem-conclusion) { visibility: visible; } .sem-quiz-options { display: grid; gap: .5rem; margin-top: .75rem; } .sem-quiz-options button { font: inherit; text-align: left; border: 1px solid var(--sem-border); background: var(--sem-surface); color: var(--sem-fg); border-radius: 8px; padding: .5rem .75rem; cursor: pointer; } .sem-quiz-options button[data-correct="true"].sem-answered { border-color: var(--sem-correct); } .sem-quiz-options button.sem-wrong-pick { border-color: var(--sem-wrong); } .sem-score { font-size: .875rem; color: var(--sem-muted); } /* details + highlight */ :is(sem-details, .sem-details) { margin: 1rem 0; } :is(sem-detail, .sem-detail) { border: 1px solid var(--sem-border); border-radius: 12px; padding: 1rem; margin: .75rem 0; background: var(--sem-surface); cursor: pointer; } :is(highlight, .sem-highlight) { font-style: normal; background: color-mix(in srgb, var(--sem-accent) 18%, transparent); border-radius: 4px; padding: 0 .2em; } .sem-occluded { color: transparent; background: var(--sem-occluded); border-radius: 4px; cursor: pointer; user-select: none; transition: color .15s; min-width: 3ch; display: inline-block; } .sem-revealed { color: inherit; background: color-mix(in srgb, var(--sem-accent) 18%, transparent); } /* procedure */ :is(sem-procedure, .sem-procedure) { margin: 1rem 0; } :is(sem-step, .sem-step) { counter-increment: sem-step; border-left: 3px solid var(--sem-border); padding: .5rem .75rem .5rem 2.25rem; margin: .25rem 0; position: relative; background: var(--sem-surface); border-radius: 0 8px 8px 0; } :is(sem-step, .sem-step)::before { content: counter(sem-step); position: absolute; left: .6rem; top: .5rem; font-size: .75rem; color: var(--sem-muted); } :is(sem-step, .sem-step):is([data-status="done"], [status="done"])::after { content: " ✓"; color: var(--sem-correct); } :is(sem-step, .sem-step):is([data-status="current"], [status="current"]) { border-left-color: var(--sem-accent); } :is(sem-step, .sem-step):is([data-status="current"], [status="current"])::after { content: " →"; color: var(--sem-accent); } :is(sem-step, .sem-step):is([data-status="blocked"], [status="blocked"]) { border-left-color: var(--sem-wrong); color: var(--sem-muted); } :is(sem-step, .sem-step):is([data-status="blocked"], [status="blocked"])::after { content: " ⛔"; color: var(--sem-wrong); } /* properties */ :is(sem-properties, .sem-properties) { margin: 1rem 0; border: 1px solid var(--sem-border); border-radius: 12px; overflow: hidden; background: var(--sem-surface); } :is(sem-property, .sem-property) { display: grid; grid-template-columns: minmax(8rem, 1fr) 2fr; gap: .75rem; padding: .5rem .9rem; } :is(sem-property, .sem-property):nth-child(even) { background: color-mix(in srgb, var(--sem-border) 40%, transparent); } :is(sem-property, .sem-property)::before { content: attr(data-key); color: var(--sem-muted); font-variant-caps: all-small-caps; } :is(sem-property, .sem-property)[key]:not([data-key])::before { content: attr(key); } /* narrow viewports: key above value instead of a squeezed value column */ @media (max-width: 34rem) { :is(sem-property, .sem-property) { grid-template-columns: minmax(0, 1fr); gap: .15rem; overflow-wrap: break-word; } } /* properties — glossary view (R/W1): term over definition; anchors get a preview from the reading bundle; :target highlight works with no script */ :is(sem-properties, .sem-properties):is([data-view-as="glossary"], [view-as="glossary"]) :is(sem-property, .sem-property) { display: block; padding: .6rem .9rem; } :is(sem-properties, .sem-properties):is([data-view-as="glossary"], [view-as="glossary"]) :is(sem-property, .sem-property)::before { display: block; font-weight: 600; font-variant-caps: normal; color: var(--sem-fg); margin-bottom: .15rem; } :is(sem-property, .sem-property):target { background: color-mix(in srgb, var(--sem-accent) 12%, transparent); } :is(sem-enhanced-document, .sem-enhanced-document) dfn { font-style: normal; font-weight: 600; } /* in-document links read against either colour scheme (citations, terms) */ :is(sem-enhanced-document, .sem-enhanced-document) a { color: var(--sem-accent); } .sem-properties-ref { text-decoration: underline dotted; text-underline-offset: .15em; } /* chronology — CSS-only timeline (pattern: procedure). The rail is the container's left border; each event's own left border carries status. Date label: the authored