pub const CF_CSS: &str = "/* cratefield-ui base stylesheet (ADR 0010). Everything sits in @layer cf, so\n any unlayered rule a venture writes wins on its own. Colours,\n radii and spacing are the --cf-* custom properties below; override them\n on :root to restyle without touching a selector. */\n@layer cf {\n :root {\n --cf-font: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n --cf-fg: #1a1a1a;\n --cf-bg: #ffffff;\n --cf-muted: #666666;\n --cf-border: #cfcfcf;\n --cf-accent: #1a56db;\n --cf-accent-fg: #ffffff;\n --cf-error: #b91c1c;\n --cf-success: #15803d;\n --cf-warning: #b45309;\n --cf-radius: 6px;\n --cf-gap: 1rem;\n --cf-max-width: 32rem;\n }\n /* Dark scheme only on the harness\'s own pages. An embedded fragment\n sits inside a site with its own colours, and must not go dark under\n a dark OS unless that site sets the properties. */\n @media (prefers-color-scheme: dark) {\n .cf-page {\n --cf-fg: #f2f2f2;\n --cf-bg: #111111;\n --cf-muted: #a3a3a3;\n --cf-border: #3a3a3a;\n --cf-accent: #60a5fa;\n --cf-accent-fg: #0b1220;\n }\n }\n .cf-page {\n margin: 0;\n font-family: var(--cf-font);\n color: var(--cf-fg);\n background: var(--cf-bg);\n line-height: 1.5;\n }\n .cf-main {\n max-width: var(--cf-max-width);\n margin: 0 auto;\n padding: calc(var(--cf-gap) * 2) var(--cf-gap);\n }\n .cf-venture {\n margin: 0;\n color: var(--cf-muted);\n font-size: 0.875rem;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n }\n .cf-title {\n margin: 0 0 var(--cf-gap);\n font-size: 1.75rem;\n }\n .cf-form {\n display: grid;\n gap: var(--cf-gap);\n }\n .cf-field {\n display: grid;\n gap: 0.375rem;\n }\n .cf-label {\n font-weight: 600;\n }\n .cf-label--checkbox {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-weight: 400;\n }\n .cf-required {\n color: var(--cf-error);\n margin-left: 0.2em;\n }\n .cf-input {\n font: inherit;\n color: inherit;\n background: var(--cf-bg);\n border: 1px solid var(--cf-border);\n border-radius: var(--cf-radius);\n padding: 0.625rem 0.75rem;\n width: 100%;\n box-sizing: border-box;\n }\n .cf-input:focus-visible {\n outline: 2px solid var(--cf-accent);\n outline-offset: 1px;\n }\n .cf-input--checkbox {\n width: auto;\n padding: 0;\n }\n .cf-input--textarea {\n min-height: 6rem;\n resize: vertical;\n }\n .cf-field--invalid .cf-input {\n border-color: var(--cf-error);\n }\n .cf-help {\n margin: 0;\n color: var(--cf-muted);\n font-size: 0.875rem;\n }\n .cf-error {\n margin: 0;\n color: var(--cf-error);\n font-size: 0.875rem;\n }\n .cf-error--form {\n font-size: 1rem;\n }\n .cf-actions {\n display: flex;\n gap: var(--cf-gap);\n }\n .cf-submit {\n font: inherit;\n font-weight: 600;\n color: var(--cf-accent-fg);\n background: var(--cf-accent);\n border: 0;\n border-radius: var(--cf-radius);\n padding: 0.75rem 1.25rem;\n cursor: pointer;\n }\n .cf-submit:focus-visible {\n outline: 2px solid var(--cf-fg);\n outline-offset: 2px;\n }\n .cf-notice {\n border: 1px solid var(--cf-border);\n border-left: 4px solid var(--cf-accent);\n border-radius: var(--cf-radius);\n padding: var(--cf-gap);\n }\n .cf-notice--success {\n border-left-color: var(--cf-success);\n }\n .cf-notice--warning {\n border-left-color: var(--cf-warning);\n }\n .cf-notice--error {\n border-left-color: var(--cf-error);\n }\n .cf-notice-title {\n margin: 0 0 0.25rem;\n font-size: 1.125rem;\n }\n .cf-notice-text {\n margin: 0;\n }\n .cf-status {\n display: grid;\n grid-template-columns: max-content 1fr;\n gap: 0.5rem var(--cf-gap);\n margin: 0;\n }\n .cf-status-row {\n display: contents;\n }\n .cf-status-key {\n color: var(--cf-muted);\n }\n .cf-status-value {\n margin: 0;\n overflow-wrap: anywhere;\n }\n .cf-nav {\n display: flex;\n gap: var(--cf-gap);\n align-items: center;\n margin-top: 0.5rem;\n }\n .cf-nav-link {\n font: inherit;\n color: var(--cf-accent);\n background: none;\n border: 0;\n padding: 0;\n cursor: pointer;\n text-decoration: underline;\n }\n .cf-table-wrap {\n overflow-x: auto;\n }\n .cf-table {\n border-collapse: collapse;\n width: 100%;\n font-size: 0.9375rem;\n }\n .cf-table-head,\n .cf-table-cell,\n .cf-table-empty {\n text-align: left;\n padding: 0.5rem 0.625rem;\n border-bottom: 1px solid var(--cf-border);\n vertical-align: top;\n }\n .cf-table-head {\n color: var(--cf-muted);\n font-weight: 600;\n }\n .cf-table-actions {\n white-space: nowrap;\n }\n .cf-submit--row,\n .cf-submit--danger {\n background: var(--cf-error);\n padding: 0.375rem 0.75rem;\n }\n .cf-cancel {\n align-self: center;\n color: var(--cf-muted);\n }\n .cf-admin-module {\n margin-bottom: var(--cf-gap);\n }\n .cf-admin-module-title {\n margin: 0 0 0.25rem;\n font-size: 1.125rem;\n }\n .cf-admin-links {\n margin: 0;\n padding-left: 1.25rem;\n }\n}\n";Expand description
The base stylesheet served at /ui/cf.css: @layer cf, --cf-*
custom properties, nothing that an unlayered venture rule cannot beat.