/* Throwaway spike chrome. Morph ships its own component CSS; this is just page scaffolding. Restyled to give each block family its own visual identity (accent + icon) so a document reads as varied, scannable sections rather than one flat wall — see the [data-type] palette below. */ /* Always reserve the scrollbar gutter so toggling between a scrolling and a non-scrolling document (switching docs/tabs changes the content height) doesn't shift the centered layout sideways — the little horizontal "jitter" on redraw. Matches the Morph demo. */ html { scrollbar-gutter: stable; } :root { /* Force light always — like Morph, this app ignores the OS dark-mode preference. Morph only goes dark when explicitly set via ; it never reacts to prefers-color-scheme. `color-scheme: light` keeps UA-rendered surfaces (scrollbars, form controls, the page canvas) light too, so a phone in dark mode still gets the light paper. The prefers-color-scheme overrides that used to swap --card/--raw-bg/--paper to dark were removed for the same reason. */ color-scheme: light; --accent: #6c5ce7; /* per-block accent; overridden by [data-type] rules */ --ink: var(--morph-ink, #2a2a33); --bg: var(--morph-bg, #ecebf0); --card: #ffffff; --line: color-mix(in srgb, currentColor 12%, transparent); --radius: 14px; --shadow: 0 1px 2px rgba(20, 20, 40, .06), 0 6px 18px rgba(20, 20, 40, .05); } body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: radial-gradient(1200px 600px at 80% -10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent), var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; } .boot { padding: 2rem; opacity: .6; } .shell { max-width: 940px; margin: 0 auto; padding: 1.5rem 1.25rem 5rem; } .topbar { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; } .brand { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; } .muted { opacity: .62; font-size: .85rem; } .nav { display: flex; gap: .25rem; } .nav-link { text-decoration: none; color: inherit; opacity: .65; padding: .25rem .7rem; border-radius: 999px; font-size: .85rem; transition: background .15s, opacity .15s; } .nav-link:hover { opacity: 1; } .nav-link.active { opacity: 1; background: var(--accent); color: white; } /* ============================================================================================ PER-TYPE PALETTE — each block family sets --accent and an icon. Adding a type is one line here plus its icon rule; no per-component CSS. This is the "distinct identity per type" experiment. ============================================================================================ */ [data-type="summary"] { --accent: #6c5ce7; } [data-type="context"] { --accent: #0984e3; } [data-type="expected-result"] { --accent: #e1772b; } [data-type="analysis"] { --accent: #00897b; } [data-type="outcome"] { --accent: #2e9e4f; } [data-type="verification"] { --accent: #2e9e4f; } [data-type="scope"] { --accent: #00838f; } [data-type="decision"] { --accent: #8e44ad; } [data-type="question"] { --accent: #d68910; } [data-type="phase"] { --accent: #2d6cdf; } [data-type="open-question"] { --accent: #c77d11; } [data-type="quotation"] { --accent: #c0398a; } [data-type="diagram"] { --accent: #b53bd1; } [data-type="image"] { --accent: #0aa2c0; } [data-type="link"] { --accent: #1f6feb; } [data-type="checklist"] { --accent: #2e9e4f; } [data-type="embed"] { --accent: #d6336c; } /* Title icons (decorative). One rule per type; safe to omit (degrades to no icon). */ .block-title::before { font-size: .95em; margin-right: .45rem; filter: saturate(1.1); } [data-type="summary"] .block-title::before { content: "📝"; } [data-type="context"] .block-title::before { content: "🧭"; } [data-type="expected-result"] .block-title::before { content: "🔮"; } [data-type="analysis"] .block-title::before { content: "🔬"; } [data-type="outcome"] .block-title::before { content: "🎯"; } [data-type="verification"] .block-title::before { content: "✅"; } [data-type="scope"] .block-title::before { content: "🗺️"; } [data-type="decision"] .block-title::before { content: "⚖️"; } [data-type="question"] .block-title::before { content: "❓"; } [data-type="phase"] .block-title::before { content: "🧱"; } [data-type="open-question"] .block-title::before { content: "💭"; } [data-type="quotation"] .block-title::before { content: "❝"; } [data-type="diagram"] .block-title::before { content: "📈"; } [data-type="image"] .block-title::before { content: "🖼️"; } [data-type="link"] .block-title::before { content: "🔗"; } [data-type="checklist"] .block-title::before { content: "☑️"; } [data-type="embed"] .block-title::before { content: "🧩"; } /* ============================================================================================ BLOCK SHELL — card with a left accent rail, colored by --accent. ============================================================================================ */ .block { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.15rem 1.1rem 1.25rem; box-shadow: var(--shadow); overflow: hidden; } .block::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 55%, transparent)); } .block-head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 .55rem; } .block-title { margin: 0; font-size: 1.12rem; font-weight: 650; letter-spacing: -.01em; } .block-label { font-size: .66rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); } .member-title { margin: 0 0 .3rem; font-size: 1rem; font-weight: 600; } .attr-row { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; } /* Foldable head (native
). */ .block-fold > summary { list-style: none; cursor: pointer; } .block-fold > summary::-webkit-details-marker { display: none; } .fold-caret { margin-left: auto; width: .5rem; height: .5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); opacity: .5; transition: transform .15s; } .block-fold[open] > summary .fold-caret { transform: rotate(45deg); } /* ============================================================================================ COLLECTION — bounded group of item cards. ============================================================================================ */ .block.collection { } .collection-body { display: flex; flex-direction: column; gap: .6rem; margin-top: .5rem; } .block-member { background: color-mix(in srgb, var(--accent) 5%, var(--card)); border-radius: 10px; } .block-member.quote { border-left: 3px solid color-mix(in srgb, var(--accent) 50%, transparent); } /* Phase status chips. */ .status { font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; } .status-done { background: #2e9e4f; color: #fff; } .status-doing { background: #2d6cdf; color: #fff; } .status-todo { background: color-mix(in srgb, currentColor 16%, transparent); } .status-blocked { background: #c0392b; color: #fff; } .lean { font-size: .85rem; } .lean strong { opacity: .65; font-weight: 600; } /* ============================================================================================ PREVIEW RENDERS ============================================================================================ */ /* Diagram (mermaid). */ .mermaid-host { display: flex; justify-content: center; padding: .5rem 0; overflow-x: auto; } .mermaid-host svg { max-width: 100%; height: auto; } .diagram-err { margin: 0; padding: .6rem .8rem; font-size: .8rem; white-space: pre-wrap; color: #c0392b; border: 1px dashed #c0392b; border-radius: 8px; } /* Image. */ .doc-figure { margin: 0; } .doc-figure img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); } .doc-figure figcaption { margin-top: .45rem; font-size: .8rem; opacity: .6; text-align: center; } /* Link cards. */ .link-item { padding: 0 !important; } .link-row { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: inherit; padding: .6rem .7rem; } .link-favicon { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 5px; background: color-mix(in srgb, currentColor 8%, transparent) center/16px no-repeat; } .link-text { display: flex; flex-direction: column; min-width: 0; } .link-title { font-weight: 600; font-size: .92rem; } .link-url { font-size: .76rem; opacity: .55; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .link-go { margin-left: auto; opacity: .4; } .link-row:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); } .link-row:hover .link-go { opacity: .8; color: var(--accent); } .link-blurb { padding: 0 .7rem .55rem 2.95rem; font-size: .84rem; opacity: .8; } /* Checklist. */ .checklist { display: flex; flex-direction: column; gap: .15rem; } .check-item { display: flex; align-items: flex-start; gap: .6rem; cursor: pointer; padding: .4rem .55rem; border-radius: 9px; } .check-item:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); } .check-item input { position: absolute; opacity: 0; width: 0; height: 0; } .check-box { flex: 0 0 auto; margin-top: .1rem; width: 18px; height: 18px; border-radius: 5px; border: 2px solid color-mix(in srgb, currentColor 35%, transparent); display: grid; place-content: center; transition: background .12s, border-color .12s; } .check-box::after { content: ""; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .12s; } .check-item.on .check-box { background: var(--accent); border-color: var(--accent); } .check-item.on .check-box::after { transform: rotate(45deg) scale(1); } .check-item.on .check-title { opacity: .55; text-decoration: line-through; } .check-title { font-size: .92rem; font-weight: 500; } .check-blurb { font-size: .82rem; opacity: .7; } /* Embed (external iframe). */ .embed-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: color-mix(in srgb, currentColor 5%, transparent); } .embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .embed-src { margin: .45rem 0 0; } .embed-src a { color: var(--accent); } /* ============================================================================================ GROUPS — segment band, and the tabbed variant. ============================================================================================ */ .group { border: 1.5px solid color-mix(in srgb, var(--morph-accent, #6c5ce7) 35%, transparent); border-radius: var(--radius); overflow: hidden; background: var(--card); box-shadow: var(--shadow); } .group-head { display: flex; align-items: center; gap: .5rem; padding: .6rem .95rem; font-weight: 600; background: color-mix(in srgb, var(--morph-accent, #6c5ce7) 14%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--morph-accent, #6c5ce7) 25%, transparent); } .group-tag { font-size: .6rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; padding: .12rem .45rem; border-radius: 999px; color: white; background: var(--morph-accent, #6c5ce7); } .group-body { display: flex; flex-direction: column; gap: 1.1rem; padding: 1rem; } /* Tabs. */ .grouptabs { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); box-shadow: var(--shadow); } .grouptab-bar { display: flex; gap: .15rem; padding: .35rem .35rem 0; flex-wrap: wrap; background: color-mix(in srgb, var(--morph-accent, #6c5ce7) 7%, transparent); border-bottom: 1px solid var(--line); } .grouptab { border: 0; background: transparent; color: inherit; cursor: pointer; padding: .5rem .9rem; font-size: .88rem; font-weight: 600; border-radius: 9px 9px 0 0; opacity: .6; border-bottom: 2px solid transparent; margin-bottom: -1px; } .grouptab:hover { opacity: .9; } .grouptab.on { opacity: 1; background: var(--card); border-bottom-color: var(--morph-accent, #6c5ce7); } .grouptab-panel { display: flex; flex-direction: column; gap: 1.1rem; padding: 1rem; } /* ============================================================================================ REORDER — drag handle + lift state. ============================================================================================ */ .reorder-item { display: flex; align-items: stretch; gap: .4rem; border-radius: 11px; transition: box-shadow .12s, transform .12s, opacity .12s; } .reorder-item .reorder-body { flex: 1 1 auto; min-width: 0; } .reorder-grip { flex: 0 0 auto; display: grid; place-content: center; width: 1.5rem; cursor: grab; color: color-mix(in srgb, currentColor 45%, transparent); font-size: 1.1rem; user-select: none; } .reorder-item.dragging { opacity: .55; } .reorder-item.over { box-shadow: 0 0 0 2px var(--accent) inset; } /* ============================================================================================ DOCUMENT ENVELOPE + PICKER ============================================================================================ */ .content { display: block; } .doc { display: flex; flex-direction: column; gap: 1.1rem; } .doc-head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .25rem; } .doc-kind { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; } .doc-source { font-size: .78rem; opacity: .55; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .status-badge { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; background: color-mix(in srgb, currentColor 12%, transparent); } .status-badge.st-approved, .status-badge.st-final { background: var(--morph-accent, #6c5ce7); color: white; } .doc-warn { margin: 0; font-size: .82rem; color: #c0392b; border: 1px dashed #c0392b; border-radius: 8px; padding: .5rem .7rem; background: color-mix(in srgb, #c0392b 6%, transparent); } .doc-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 1.5rem; } .doc-tab { border: 1px solid var(--line); background: var(--card); color: inherit; cursor: pointer; padding: .35rem .8rem; border-radius: 999px; font-size: .85rem; box-shadow: var(--shadow); } .doc-tab.on { background: var(--morph-accent, #6c5ce7); color: white; border-color: transparent; } /* ============================================================================================ MARKDOWN BODY ============================================================================================ */ .md :first-child { margin-top: 0; } .md :last-child { margin-bottom: 0; } .md p { margin: .5rem 0; line-height: 1.55; } .md ul, .md ol { margin: .5rem 0; padding-left: 1.4rem; } .md li { margin: .2rem 0; line-height: 1.5; } .md code { background: color-mix(in srgb, currentColor 10%, transparent); padding: .1em .35em; border-radius: 4px; font-size: .9em; } .md a { color: var(--accent); } /* ============================================================================================ RENDER LIBRARY (gallery page) ============================================================================================ */ .gallery-h1 { margin: 0 0 .25rem; font-size: 1.5rem; letter-spacing: -.02em; } .gallery-section { margin: 3rem 0 1rem; font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; opacity: .9; border-bottom: 2px solid var(--morph-accent, #6c5ce7); padding-bottom: .4rem; } .gallery-section .section-note { font-size: .75rem; font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .55; } .gallery-item { margin: 1rem 0; } .gallery-cap { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .74rem; margin: 0 0 .5rem; opacity: .75; } .gallery-cap span { opacity: .55; } /* Blazor's unhandled-error banner — hidden until the framework sets display:block on a real error. (The spike was missing this standard rule, so the banner showed on every page.) */ #blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1000; padding: .6rem 1.25rem .7rem; background: #fff3cd; color: #663c00; box-shadow: 0 -1px 2px rgba(0, 0, 0, .2); } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; } /* Fallback / unknown. */ .unknown { border-style: dashed; } .unknown::before { background: #c0392b; } .unknown .block-label { color: #c0392b; background: color-mix(in srgb, #c0392b 12%, transparent); } /* ============================================================================================ DOC RENDERER (demo page) — frames the live render in our Morph style. The whole page is one warm Morph workspace surface; a raised header band sits over a neumorphic inset "well", and a clean clear "paper" floats in the middle where DocView composes the document. Everything shares the surface colour so the bevels blend; only the paper breaks out, light, as the reading space. ============================================================================================ */ .renderer { display: flex; flex-direction: column; gap: 1.1rem; /* The Morph palette (from morph.bundle.css) — surface as the page floor so raised/inset bevels read; paper a warm near-white so the white block cards still pop. */ background: var(--surface, #ece3d5); border-radius: 22px; padding: 1.1rem; margin-bottom: 2.5rem; } /* Header band: doc title + the sample picker, riding the raised Morph header. */ .renderer-bar { align-items: center; } .renderer-picker { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; } /* Toolbar between the header and the well: the Rendered/Raw view toggle + the source path. */ .renderer-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: 0 .35rem; } .renderer-modes { display: flex; gap: .4rem; } .renderer-source { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .74rem; opacity: .55; color: var(--text, var(--ink)); } /* The inset well — the recessed workspace the paper sits inside. */ .renderer-well { padding: clamp(1rem, 4vw, 2.25rem); border-radius: 20px; } /* The clear space in the middle: a clean page that holds the rendered document. */ .renderer-paper { max-width: 760px; margin: 0 auto; background: var(--paper, #faf8f3); color: var(--ink); border-radius: 16px; padding: clamp(1.25rem, 4vw, 2.25rem); box-shadow: 0 1px 2px rgba(20, 20, 40, .05), 0 12px 34px rgba(20, 20, 40, .09); } .renderer-paper > * + * { margin-top: 1rem; } .renderer-loading { text-align: center; padding: 2rem 0; } /* Raw source view — the document exactly as received, no renderers. */ .renderer-paper.is-raw { padding: 0; background: var(--raw-bg, #f4f1ea); } .renderer-raw { margin: 0; padding: clamp(1rem, 3vw, 1.75rem); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; tab-size: 2; color: var(--ink); }