` primitive. Tokenised so reference-theme links
read as brand-coloured rather than user-agent blue; hosts re-bind
`--fuaran-tone-brand-fg` and the link follows. */
.fuaran-link {
color: var(--fuaran-tone-brand-fg, #1d4ed8);
text-decoration: underline;
text-underline-offset: 2px;
}
.fuaran-link:hover {
color: var(--fuaran-tone-brand-hover-fg, #1e40af);
}
.fuaran-link:focus-visible {
outline: var(--fuaran-focus-ring-width, 2px) var(--fuaran-focus-ring-style, solid)
var(--fuaran-focus-ring-color, #93c5fd);
outline-offset: var(--fuaran-focus-ring-offset, 2px);
border-radius: var(--fuaran-radius-sm, 4px);
}
/* ── Divider (Phase 287) ───────────────────────────────────────── */
.fuaran-divider-horizontal {
border: none;
border-top: var(--fuaran-border-width, 1px) solid var(--fuaran-tone-default-border, #e5e7eb);
margin: var(--fuaran-space-md, 12px) 0;
}
.fuaran-divider-vertical {
display: inline-block;
width: var(--fuaran-border-width, 1px);
align-self: stretch;
background: var(--fuaran-tone-default-border, #e5e7eb);
margin: 0 var(--fuaran-space-md, 12px);
}
.fuaran-divider-labelled {
display: flex;
align-items: center;
text-align: center;
color: var(--fuaran-tone-subdued-fg, #6b7280);
font-size: var(--fuaran-text-sm, 13px);
margin: var(--fuaran-space-md, 12px) 0;
}
.fuaran-divider-labelled::before,
.fuaran-divider-labelled::after {
content: "";
flex: 1;
border-top: var(--fuaran-border-width, 1px) solid var(--fuaran-tone-default-border, #e5e7eb);
}
.fuaran-divider-label {
padding: 0 var(--fuaran-space-md, 12px);
}
/* ── ScrollArea (Phase 289) ────────────────────────────────────── */
.fuaran-scrollarea {
position: relative;
}
.fuaran-scrollarea-vertical {
overflow-y: auto;
overflow-x: hidden;
}
.fuaran-scrollarea-horizontal {
overflow-x: auto;
overflow-y: hidden;
}
.fuaran-scrollarea-both {
overflow: auto;
}
/* ── Toast (Phase 289 — overlay render-fidelity contract) ──────── */
/* Inline (no portal); CSS owns position + stacking so SSR and CSR agree. */
.fuaran-toast {
position: fixed;
bottom: var(--fuaran-space-lg, 16px);
right: var(--fuaran-space-lg, 16px);
z-index: var(--fuaran-z-toast, 1100);
display: flex;
align-items: center;
gap: var(--fuaran-space-md, 12px);
max-width: var(--fuaran-toast-max-width, 360px);
padding: var(--fuaran-space-md, 12px) var(--fuaran-space-lg, 16px);
border-radius: var(--fuaran-radius-md, 6px);
box-shadow: var(--fuaran-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
background: var(--fuaran-tone-default-bg, #ffffff);
border: var(--fuaran-border-width, 1px) solid var(--fuaran-tone-default-border, #e5e7eb);
color: var(--fuaran-tone-default-fg, #1f2937);
}
.fuaran-toast[hidden] {
display: none;
}
.fuaran-toast-info {
border-color: var(--fuaran-tone-info-border, #93c5fd);
}
.fuaran-toast-success {
border-color: var(--fuaran-tone-success-border, #86efac);
}
.fuaran-toast-warning {
border-color: var(--fuaran-tone-warning-border, #fcd34d);
}
.fuaran-toast-critical {
border-color: var(--fuaran-tone-critical-border, #fca5a5);
}
.fuaran-toast-message {
flex: 1;
}
.fuaran-toast-dismiss,
.fuaran-modal-dismiss {
border: none;
background: transparent;
cursor: pointer;
font-size: var(--fuaran-text-lg, 16px);
line-height: 1;
color: var(--fuaran-tone-subdued-fg, #6b7280);
padding: var(--fuaran-space-xs, 4px);
}
/* ── Modal (Phase 289 — overlay render-fidelity contract) ──────── */
/* Inline (no portal); the overlay is ALWAYS in the DOM, closed via [hidden].
CSS owns the fixed-position backdrop + centring + z-index so the server and
client emit identical structure. Focus-trap is a client-only enhancement
that does not alter the hydrated DOM. */
.fuaran-modal-overlay {
position: fixed;
inset: 0;
z-index: var(--fuaran-z-modal, 1000);
display: flex;
align-items: center;
justify-content: center;
padding: var(--fuaran-space-lg, 16px);
background: var(--fuaran-modal-backdrop, rgba(0, 0, 0, 0.5));
}
.fuaran-modal-overlay[hidden] {
display: none;
}
.fuaran-modal-dialog {
position: relative;
max-width: var(--fuaran-modal-max-width, 560px);
width: 100%;
max-height: calc(100% - var(--fuaran-space-xl, 20px));
overflow-y: auto;
background: var(--fuaran-tone-default-bg, #ffffff);
border-radius: var(--fuaran-radius-lg, 8px);
box-shadow: var(--fuaran-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1));
padding: var(--fuaran-space-xl, 20px);
}
.fuaran-modal-heading {
margin: 0 0 var(--fuaran-space-md, 12px) 0;
font-size: var(--fuaran-text-xl, 18px);
font-weight: var(--fuaran-font-weight-semibold, 600);
}
.fuaran-modal-dismiss {
position: absolute;
top: var(--fuaran-space-md, 12px);
right: var(--fuaran-space-md, 12px);
}
/* ═══════════════════════════════════════════════════════════════════════
Wave 43 — CodeBlock (Phase 290) + Math (Phase 293).
Both carry a deterministic-render contract: the parity-checked output is the
bare escaped structure (CodeBlock: ; Math: the raw source). Syntax
highlighting (CodeBlock) and KaTeX (Math) are client-only post-hydration
enhancements applied OUTSIDE the cross-host / SSR↔CSR byte-diff.
═══════════════════════════════════════════════════════════════════════ */
/* ── CodeBlock (Phase 290) ─────────────────────────────────────── */
.fuaran-codeblock {
position: relative;
margin: var(--fuaran-space-md, 12px) 0;
border-radius: var(--fuaran-radius-md, 6px);
background: var(--fuaran-code-bg, #1e1e2e);
color: var(--fuaran-code-fg, #cdd6f4);
overflow: hidden;
}
.fuaran-codeblock-pre {
margin: 0;
padding: var(--fuaran-space-md, 12px) var(--fuaran-space-lg, 16px);
overflow-x: auto;
font-family: var(--fuaran-font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
font-size: var(--fuaran-text-sm, 13px);
line-height: 1.5;
}
.fuaran-codeblock-code {
display: block;
white-space: pre;
}
/* Line-number gutter — a deterministic CSS counter (no JS). The renderer adds
`fuaran-codeblock-numbered` on the container; a post-hydration highlighter
may replace this with per-line markup, but the bare structure stands alone. */
.fuaran-codeblock-numbered .fuaran-codeblock-code {
counter-reset: fuaran-code-line;
}
.fuaran-codeblock-copy {
position: absolute;
top: var(--fuaran-space-sm, 8px);
right: var(--fuaran-space-sm, 8px);
padding: var(--fuaran-space-xs, 4px) var(--fuaran-space-sm, 8px);
border: var(--fuaran-border-width, 1px) solid var(--fuaran-code-copy-border, #45475a);
border-radius: var(--fuaran-radius-sm, 4px);
background: var(--fuaran-code-copy-bg, #313244);
color: inherit;
font-size: var(--fuaran-text-xs, 11px);
cursor: pointer;
}
/* ── Math (Phase 293) ──────────────────────────────────────────── */
.fuaran-math-block {
display: block;
margin: var(--fuaran-space-md, 12px) 0;
text-align: center;
overflow-x: auto;
}
.fuaran-math-inline {
display: inline;
}
/* The deterministic fallback: the raw LaTeX source, monospace, until KaTeX
replaces it client-side. KaTeX (when present) hides this and inserts its own
rendered output — the no-JS reader keeps the source. */
.fuaran-math-source {
font-family: var(--fuaran-font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
color: var(--fuaran-tone-subdued-fg, #6b7280);
}
/* ============================================================================
Responsive / mobile layout collapse — Phase 58 (2026-07-11)
The `@media` thresholds below repeat the `--fuaran-breakpoint-{sm|md|lg}`
token px values LITERALLY: a media-query condition cannot reference a
custom property (`@media (max-width: var(--x))` is invalid CSS). The
typed `Theme.Breakpoints` record (mirrored into the `:root` tokens above)
is the source of truth these rules are kept in sync with — change both
together. See docs/migrations/phase-58-mobile-responsive.md.
Rules are appended at the end of the file so they win by source order at
equal specificity over the desktop base rules above.
`grid-template-columns` is emitted as an INLINE style by the renderer
(Render.fs — column count rides inline so hosts needn't safelist every
N), so the grid-collapse rules require `!important` to override it. This
is the one sanctioned `!important` in the reference stylesheet, scoped to
the narrow-viewport media query.
============================================================================ */
/* ── tablet (≤ md / 768px): halve dense grids ──────────────────── */
@media (max-width: 768px) {
.fuaran-layout-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
/* ── phone (≤ sm / 640px): single-column + scrollable overflow ─── */
@media (max-width: 640px) {
/* Stack + split-panel collapse to a single vertical column. Class-driven
(not inline), so no `!important` needed. */
.fuaran-stack-horizontal {
flex-direction: column;
}
.fuaran-layout-split-panel {
flex-direction: column;
}
/* Grid collapses to one column (overrides the inline template — see note). */
.fuaran-layout-grid {
grid-template-columns: 1fr !important;
}
/* Tab bar becomes a horizontal scroller instead of overflowing / clipping
tabs off-screen — the "scrollable fallback" for narrow viewports. */
.fuaran-tabs-bar {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.fuaran-tab {
flex: 0 0 auto;
white-space: nowrap;
}
/* Wide tabular data scrolls horizontally within its node wrapper rather
than forcing the whole page to scroll. The `fuaran-kind-{grid|table}`
hook is the outer node wrapper (the `` is its child). */
.fuaran-kind-grid,
.fuaran-kind-table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Touch-target floor (WCAG 2.5.5): interactive leaves reach at least
44px of tappable height at phone widths. */
.fuaran-button,
.fuaran-form-input,
.fuaran-form-field-control,
.fuaran-select-control,
.fuaran-file-upload,
.fuaran-tab {
min-height: 44px;
}
}