/* ============================================================ The Brain — stylesheet brain.nagged.ai · Filament panel: `brain` ⚠ THIS FILE IS THE SOURCE OF TRUTH. Edit it here. Loaded by a render hook in BrainPanelProvider as a plain to /css/brain.css, cache-busted with filemtime(). Deliberately NOT routed through Filament's asset pipeline: that pipeline copies the file into public/ on `filament:assets`, so any edit made without re-publishing shipped stale CSS silently. (2026-07-25 — the device-mockup styles were invisible in production for exactly that reason.) Same handling as public/css/sections.css: no build step, no publish step, nothing to forget on deploy. ── Why plain CSS and not Tailwind ────────────────────────── Filament ships a precompiled stylesheet containing only the classes its own components use. Arbitrary Tailwind utilities in custom Blade views resolve to nothing. Rather than add a per-panel Tailwind theme (and a build step to every deploy), the Brain owns a small design system. ── Conventions ───────────────────────────────────────────── - Everything is namespaced `brain-` so we never collide with Filament. - Block / block__element / block--modifier. - Layout primitives are generic and reusable — new Brain pages should compose these, never redeclare them. Add here, not in a view. - Dark mode keys off `.dark` on , which Filament sets. ============================================================ */ /* ───────────────────────────────────────────── 1. TOKENS ───────────────────────────────────────────── */ .brain { /* Surfaces */ --brain-bg: #ffffff; --brain-bg-sunken: #f9fafb; --brain-bg-hover: #f3f4f6; /* Lines */ --brain-border: rgba(9, 9, 11, 0.08); --brain-border-strong: rgba(9, 9, 11, 0.14); /* Text */ --brain-text: #18181b; --brain-text-soft: #52525b; --brain-text-faint: #a1a1aa; /* Accent — matches the panel's violet primary */ --brain-accent: #7c3aed; --brain-accent-text: #ffffff; --brain-accent-soft: rgba(124, 58, 237, 0.10); /* Status */ --brain-ok: #059669; --brain-ok-soft: rgba(5, 150, 105, 0.10); --brain-warn: #b45309; --brain-warn-soft: rgba(180, 83, 9, 0.10); /* Shape + depth */ --brain-radius: 0.75rem; --brain-radius-sm: 0.5rem; --brain-radius-pill: 999px; --brain-shadow: 0 1px 2px rgba(9, 9, 11, 0.04); --brain-shadow-raised: 0 6px 20px rgba(9, 9, 11, 0.10); /* Rhythm */ --brain-gap: 1rem; --brain-gap-sm: 0.5rem; --brain-pad: 1rem; /* Grid sizing — override per-context to change columns */ --brain-grid-min: 15rem; } .dark .brain { --brain-bg: #18181b; --brain-bg-sunken: rgba(255, 255, 255, 0.03); --brain-bg-hover: rgba(255, 255, 255, 0.06); --brain-border: rgba(255, 255, 255, 0.10); --brain-border-strong: rgba(255, 255, 255, 0.18); --brain-text: #fafafa; --brain-text-soft: #a1a1aa; --brain-text-faint: #71717a; --brain-accent: #8b5cf6; --brain-accent-soft: rgba(139, 92, 246, 0.16); --brain-ok: #34d399; --brain-ok-soft: rgba(52, 211, 153, 0.14); --brain-warn: #fbbf24; --brain-warn-soft: rgba(251, 191, 36, 0.14); --brain-shadow: none; --brain-shadow-raised: 0 6px 20px rgba(0, 0, 0, 0.5); } /* ───────────────────────────────────────────── 2. LAYOUT PRIMITIVES Generic. Compose these; don't redeclare them per page. ───────────────────────────────────────────── */ /* Vertical rhythm container. */ .brain-flow { display: flex; flex-direction: column; gap: var(--brain-gap); } .brain-flow--tight { gap: var(--brain-gap-sm); } /* Horizontal bar: content left, actions right, wraps gracefully. */ .brain-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--brain-gap-sm); } .brain-bar__group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; } /* Responsive auto-fit grid. Column count follows --brain-grid-min. */ .brain-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--brain-grid-min), 1fr)); gap: var(--brain-gap); } .brain-grid--narrow { --brain-grid-min: 12rem; } .brain-grid--wide { --brain-grid-min: 20rem; } /* Sidebar + main. Collapses to a single column under 1024px. */ .brain-split { display: grid; grid-template-columns: minmax(16rem, 22rem) 1fr; gap: var(--brain-gap); align-items: start; } .brain-split__aside { position: sticky; top: 1rem; } @media (max-width: 1024px) { .brain-split { grid-template-columns: 1fr; } .brain-split__aside { position: static; } } /* ───────────────────────────────────────────── 3. SURFACES ───────────────────────────────────────────── */ .brain-card { background: var(--brain-bg); border: 1px solid var(--brain-border); border-radius: var(--brain-radius); box-shadow: var(--brain-shadow); padding: var(--brain-pad); } .brain-card--flush { padding: 0; } .brain-card--tight { padding: 0.75rem; } /* Clickable card — lifts and accents on hover/focus. */ .brain-card--interactive { position: relative; display: flex; flex-direction: column; gap: 0.5rem; text-decoration: none; color: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .brain-card--interactive:hover, .brain-card--interactive:focus-visible { border-color: var(--brain-accent); box-shadow: var(--brain-shadow-raised); transform: translateY(-1px); outline: none; } /* Off / inactive state. */ .brain-card--muted { background: var(--brain-bg-sunken); opacity: 0.62; } .brain-card--muted:hover { opacity: 0.85; } /* ───────────────────────────────────────────── 4. TYPOGRAPHY ───────────────────────────────────────────── */ .brain-title { margin: 0; font-size: 0.875rem; font-weight: 600; line-height: 1.35; color: var(--brain-text); } .brain-title--lg { font-size: 1rem; } .brain-subtitle { margin: 0; font-size: 0.75rem; color: var(--brain-text-soft); } .brain-meta { margin: 0; font-size: 0.6875rem; color: var(--brain-text-faint); } /* Grouped block — a labelled cluster of cards (e.g. one main vertical). */ .brain-group { display: block; } .brain-group__title { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.75rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brain-text-soft); } .brain-strong { color: var(--brain-text); font-weight: 600; } /* ───────────────────────────────────────────── 5. CONTROLS ───────────────────────────────────────────── */ .brain-input { display: block; width: 100%; padding: 0.5rem 0.75rem; font-size: 0.875rem; font-family: inherit; color: var(--brain-text); background: var(--brain-bg); border: 1px solid var(--brain-border); border-radius: var(--brain-radius-sm); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .brain-input::placeholder { color: var(--brain-text-faint); } .brain-input:focus { outline: none; border-color: var(--brain-accent); box-shadow: 0 0 0 3px var(--brain-accent-soft); } .brain-input--sm { padding: 0.3125rem 0.5rem; font-size: 0.75rem; } /* Pill button — filters, variant pickers, segmented choices. */ .brain-pill { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.625rem; font-size: 0.75rem; font-weight: 500; font-family: inherit; line-height: 1.4; color: var(--brain-text-soft); background: var(--brain-bg-sunken); border: 1px solid transparent; border-radius: var(--brain-radius-pill); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .brain-pill:hover { background: var(--brain-bg-hover); color: var(--brain-text); } .brain-pill--active, .brain-pill--active:hover { background: var(--brain-accent); color: var(--brain-accent-text); } .brain-pill--xs { padding: 0.125rem 0.5rem; font-size: 0.6875rem; } .brain-pill__count { opacity: 0.6; font-variant-numeric: tabular-nums; } /* Static metadata chip (not clickable). */ .brain-chip { display: inline-flex; align-items: center; padding: 0.125rem 0.375rem; font-size: 0.625rem; font-weight: 500; line-height: 1.5; border-radius: 0.25rem; background: var(--brain-bg-sunken); color: var(--brain-text-soft); } .brain-chip--accent { background: var(--brain-accent-soft); color: var(--brain-accent); } /* Status badge. */ .brain-badge { display: inline-flex; align-items: center; padding: 0.0625rem 0.375rem; font-size: 0.625rem; font-weight: 500; line-height: 1.6; border-radius: var(--brain-radius-pill); background: var(--brain-bg-sunken); color: var(--brain-text-soft); } .brain-badge--ok { background: var(--brain-ok-soft); color: var(--brain-ok); } .brain-badge--warn { background: var(--brain-warn-soft); color: var(--brain-warn); } /* Inline note — explains a divergence, sits inside a card. */ .brain-note { margin: 0; padding: 0.3125rem 0.5rem; font-size: 0.625rem; line-height: 1.5; border-radius: var(--brain-radius-sm); background: var(--brain-warn-soft); color: var(--brain-warn); } /* Toggle switch. */ .brain-toggle { position: relative; flex-shrink: 0; width: 2.25rem; height: 1.25rem; padding: 0; background: var(--brain-border-strong); border: none; border-radius: var(--brain-radius-pill); cursor: pointer; transition: background 0.15s ease; } .brain-toggle__thumb { position: absolute; top: 0.125rem; left: 0.125rem; width: 1rem; height: 1rem; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.15s ease; } .brain-toggle--on { background: var(--brain-accent); } .brain-toggle--on .brain-toggle__thumb { transform: translateX(1rem); } /* Checkbox + label pairing. */ .brain-check { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--brain-text-soft); cursor: pointer; } /* ───────────────────────────────────────────── 6. ORDERED LIST (drag-to-reorder stack) ───────────────────────────────────────────── */ .brain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; } .brain-list__item { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.5rem; font-size: 0.75rem; background: var(--brain-bg-sunken); border-radius: var(--brain-radius-sm); } .brain-list__item.brain-is-dragging { opacity: 0.4; } .brain-list__handle { display: inline-flex; flex-shrink: 0; color: var(--brain-text-faint); cursor: grab; } .brain-list__handle:active { cursor: grabbing; } .brain-list__index { flex-shrink: 0; width: 1.25rem; font-size: 0.625rem; font-variant-numeric: tabular-nums; text-align: right; color: var(--brain-text-faint); } .brain-list__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--brain-text); } /* ───────────────────────────────────────────── 7. TILE (section card in the recipe editor) ───────────────────────────────────────────── */ .brain-tile__head { display: flex; align-items: flex-start; gap: 0.5rem; } .brain-tile__icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-top: 0.125rem; color: var(--brain-text-faint); } .brain-tile__body { flex: 1; min-width: 0; } .brain-tile__field { margin-top: 0.75rem; } .brain-tile__field-label { display: block; margin-bottom: 0.25rem; font-size: 0.625rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brain-text-faint); } .brain-tile__options { display: flex; flex-wrap: wrap; gap: 0.25rem; } /* Arrow affordance on interactive cards. */ .brain-card__arrow { position: absolute; top: 1rem; right: 0.875rem; width: 1rem; height: 1rem; color: var(--brain-text-faint); transition: color 0.15s ease, transform 0.15s ease; } .brain-card--interactive:hover .brain-card__arrow { color: var(--brain-accent); transform: translateX(2px); } /* Card footer — divider + summary row. */ .brain-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: auto; padding-top: 0.625rem; border-top: 1px solid var(--brain-border); font-size: 0.6875rem; color: var(--brain-text-soft); } /* ───────────────────────────────────────────── 8. DEVICE MOCKUP (site preview) A direct port of the .preview-2026__mockup / __phone presentation used on /p/{slug} (see public/css/nagged.css ~3990), so the Brain frames a recipe exactly the way a prospect sees their sketch: dark browser chrome around a desktop iframe, with a phone floating over the bottom-right rendering the same page at real mobile width. Deliberately a separate `brain-mock-*` block rather than reusing the preview-2026 classes — nagged.css isn't loaded inside the Filament panel, which only gets brain.css. Values are copied on purpose; if the customer-facing frame is restyled, mirror the change here. ───────────────────────────────────────────── */ .brain-mock-wrap { position: relative; /* width + align-self are load-bearing: this sits inside a .brain-flow (flex column), where `margin: 0 auto` would make the item shrink-to-fit and centre rather than stretch — the mockup collapsed to ~316px because of exactly that. Never reintroduce auto side margins here. */ width: 100%; align-self: stretch; /* Room for the phone to hang below without clipping. */ padding-bottom: 2rem; } /* ── Desktop browser frame ── */ .brain-mock { position: relative; padding: 8px; border-radius: 14px; background: #2a2a2a; box-shadow: 0 24px 60px rgba(32, 13, 175, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.08); } .brain-mock__bar { display: flex; align-items: center; gap: 16px; padding-bottom: 12px; } .brain-mock__dots { display: flex; gap: 6px; } .brain-mock__dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; } .brain-mock__dot:nth-child(2) { background: #ffbd2e; } .brain-mock__dot:nth-child(3) { background: #28ca41; } .brain-mock__url { flex: 1; max-width: 380px; margin: 0 auto; padding: 6px 14px; border-radius: 6px; background: #1a1a1a; color: rgba(255, 255, 255, 0.6); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .brain-mock__frame { border-radius: 6px; background: #fff; overflow: hidden; } .brain-mock__frame iframe { display: block; width: 100%; height: clamp(30rem, 68vh, 48rem); border: 0; } /* ── Floating phone ── The iframe renders at a real iPhone width (375px) so the site's own mobile breakpoints actually apply, then is scaled down visually. Scale is measured against the visible clip area (width minus both bezels), not the outer width, so the right edge never gets cut off. */ .brain-mock__phone { --phone-w: 200px; --phone-pad-x: 7px; --phone-inner-w: 375px; --phone-scale: calc((var(--phone-w) - (var(--phone-pad-x) * 2)) / var(--phone-inner-w)); position: absolute; right: 24px; bottom: 0; z-index: 3; width: var(--phone-w); aspect-ratio: 9 / 19.5; padding: 10px var(--phone-pad-x); border-radius: 28px; background: #111; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.25), 0 0 0 4px rgba(255, 255, 255, 0.9), 0 0 0 6px rgba(0, 0, 0, 0.08); overflow: hidden; } .brain-mock__notch { position: absolute; top: 9px; left: 50%; z-index: 2; width: 54px; height: 14px; transform: translateX(-50%); border-radius: 999px; background: #000; } .brain-mock__phone-frame { position: relative; width: 100%; height: 100%; border-radius: 20px; background: #fff; overflow: hidden; } .brain-mock__phone-frame iframe { display: block; width: var(--phone-inner-w); height: 900px; border: 0; transform: scale(var(--phone-scale)); transform-origin: top left; } /* Narrow panels: drop the phone rather than let it cover the page. */ @media (max-width: 1100px) { .brain-mock__phone { display: none; } .brain-mock__frame iframe { height: 28rem; } .brain-mock-wrap { padding-bottom: 0; } } /* ───────────────────────────────────────────── 9. GLOBAL SETTINGS + CONTRAST AUDIT ───────────────────────────────────────────── */ .brain-setting__text { flex: 1; min-width: 0; } .brain-setting__control { flex-shrink: 0; } .brain-setting__number { width: 6rem; } .brain-setting__colour { display: flex; align-items: center; gap: 0.375rem; } .brain-setting__colour input[type="color"] { width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--brain-border); border-radius: var(--brain-radius-sm); background: none; cursor: pointer; } .brain-setting__colour input[type="text"] { width: 6rem; } /* Compact colour swatch — the native picker with its chrome hidden, so it reads as a solid tile rather than a form control. Used in the recipe editor toolbar where space is tight. */ .brain-swatch { display: inline-flex; width: 1.75rem; height: 1.75rem; border-radius: var(--brain-radius-sm); border: 1px solid var(--brain-border); overflow: hidden; cursor: pointer; transition: border-color 0.15s ease, transform 0.15s ease; } .brain-swatch:hover { border-color: var(--brain-accent); transform: translateY(-1px); } .brain-swatch input[type="color"] { width: 200%; height: 200%; margin: -50%; padding: 0; border: none; background: none; cursor: pointer; } .brain-audit__intro { margin-bottom: 0.75rem; } .brain-audit { display: flex; flex-direction: column; gap: 0.25rem; } .brain-audit__row { display: flex; align-items: center; gap: 0.75rem; padding: 0.4375rem 0.5rem; border-radius: var(--brain-radius-sm); background: var(--brain-bg-sunken); } /* A failing palette gets a warning tint — visible at a glance when scanning 30 rows, without having to read every ratio. */ .brain-audit__row--fail { background: var(--brain-warn-soft); box-shadow: inset 2px 0 0 var(--brain-warn); } .brain-audit__swatches { display: flex; flex-shrink: 0; gap: 0.1875rem; } .brain-audit__swatch { width: 1rem; height: 1rem; border-radius: 0.25rem; border: 1px solid var(--brain-border); } .brain-audit__name { flex: 1; min-width: 0; display: flex; flex-direction: column; } .brain-audit__name .brain-strong, .brain-audit__name .brain-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; } .brain-audit__results { display: flex; flex-shrink: 0; gap: 0.1875rem; font-variant-numeric: tabular-nums; } @media (max-width: 768px) { .brain-audit__results { display: none; } } /* ───────────────────────────────────────────── 10. EMPTY STATE ───────────────────────────────────────────── */ .brain-empty { padding: 2.5rem 1.5rem; text-align: center; font-size: 0.875rem; color: var(--brain-text-soft); } .brain-empty code { padding: 0.0625rem 0.25rem; font-size: 0.75rem; border-radius: 0.25rem; background: var(--brain-bg-sunken); } .brain-empty__action { font-weight: 500; color: var(--brain-accent); background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; font-size: inherit; } .brain-empty__action:hover { text-decoration: underline; }