/** * Chinuch Platform UI v1.0 * * Drop-in stylesheet for custom apps that want to look native to the * Chinuch platform. All classes are namespaced with `chi-` so they * won't collide with your own styles. Import is automatic — the * platform injects `` * into every served app page, next to the SDK script. * * Quick reference: * Layout .chi-app, .chi-container, .chi-page, .chi-stack, .chi-row * Header .chi-header, .chi-header-title, .chi-header-sub, .chi-header-actions * Cards .chi-card, .chi-card-header, .chi-card-title, .chi-card-body, .chi-card-footer * Pills .chi-pill, .chi-pill--primary, .chi-pill--success, .chi-pill--warn, * .chi-pill--danger, .chi-pill--info, .chi-pill--muted, .chi-pill--ghost * Buttons .chi-btn, .chi-btn--primary, .chi-btn--ghost, .chi-btn--outline, * .chi-btn--danger, .chi-btn--sm, .chi-btn--lg, .chi-btn--icon * Inputs .chi-input, .chi-textarea, .chi-select, .chi-label, .chi-field * Tables .chi-table * Utilities .chi-muted, .chi-strong, .chi-mono, .chi-divider, .chi-empty, * .chi-spinner * * Everything is scoped to children of `.chi-app` (or the when * unscoped). Dark mode is opt-in via `.chi-app.chi-dark` or the * `data-theme="dark"` attribute on any ancestor. */ :root { /* Platform design tokens — kept in sync with app/globals.css */ --chi-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --chi-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --chi-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --chi-bg: #ffffff; --chi-bg-subtle: #f8fafc; --chi-bg-muted: #f1f5f9; --chi-surface: #ffffff; --chi-surface-hover: #f8fafc; --chi-border: #e5e7eb; --chi-border-strong: #d1d5db; --chi-divider: #f1f5f9; --chi-text: #0f172a; --chi-text-muted: #64748b; --chi-text-subtle: #94a3b8; --chi-text-inverted: #ffffff; --chi-primary: #2563eb; --chi-primary-hover: #1d4ed8; --chi-primary-soft: #eff6ff; --chi-primary-border: #bfdbfe; --chi-success: #16a34a; --chi-success-soft: #f0fdf4; --chi-success-border: #bbf7d0; --chi-warn: #d97706; --chi-warn-soft: #fffbeb; --chi-warn-border: #fde68a; --chi-danger: #dc2626; --chi-danger-soft: #fef2f2; --chi-danger-border: #fecaca; --chi-info: #0891b2; --chi-info-soft: #ecfeff; --chi-info-border: #a5f3fc; --chi-radius-sm: 6px; --chi-radius: 10px; --chi-radius-lg: 16px; --chi-radius-full: 9999px; --chi-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04); --chi-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --chi-shadow-lg: 0 10px 20px -4px rgba(15, 23, 42, 0.08), 0 4px 8px -4px rgba(15, 23, 42, 0.04); --chi-gap-xs: 0.25rem; --chi-gap-sm: 0.5rem; --chi-gap: 0.75rem; --chi-gap-md: 1rem; --chi-gap-lg: 1.5rem; --chi-gap-xl: 2rem; } /* Dark mode — automatic if the user's OS prefers dark, or opt-in via .chi-dark / data-theme="dark" on any ancestor. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --chi-bg: #0f172a; --chi-bg-subtle: #111827; --chi-bg-muted: #1e293b; --chi-surface: #111827; --chi-surface-hover: #1e293b; --chi-border: #1f2937; --chi-border-strong: #334155; --chi-divider: #1e293b; --chi-text: #f8fafc; --chi-text-muted: #94a3b8; --chi-text-subtle: #64748b; --chi-primary-soft: #1e3a8a; --chi-primary-border: #1e40af; --chi-success-soft: #052e16; --chi-success-border: #14532d; --chi-warn-soft: #451a03; --chi-warn-border: #78350f; --chi-danger-soft: #450a0a; --chi-danger-border: #7f1d1d; --chi-info-soft: #083344; --chi-info-border: #155e75; } } .chi-dark, [data-theme="dark"] { --chi-bg: #0f172a; --chi-bg-subtle: #111827; --chi-bg-muted: #1e293b; --chi-surface: #111827; --chi-surface-hover: #1e293b; --chi-border: #1f2937; --chi-border-strong: #334155; --chi-divider: #1e293b; --chi-text: #f8fafc; --chi-text-muted: #94a3b8; --chi-text-subtle: #64748b; --chi-primary-soft: #1e3a8a; --chi-primary-border: #1e40af; } /* ─── Root app shell ─────────────────────────────────────────────── */ .chi-app { font-family: var(--chi-font-sans); color: var(--chi-text); background: var(--chi-bg); line-height: 1.5; font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .chi-app *, .chi-app *::before, .chi-app *::after { box-sizing: border-box; } /* * Make the `hidden` attribute actually hide things. * * The UA stylesheet ships `[hidden] { display: none }` without * `!important`, so any class that sets `display: flex` / `grid` / * `block` will win on specificity and the element stays visible even * when `element.hidden = true`. That's how apps end up with their * "hidden by default" modal rendered on page load. Forcing the rule * here fixes it platform-wide. */ [hidden] { display: none !important; } .chi-app h1, .chi-app h2, .chi-app h3, .chi-app h4, .chi-app h5, .chi-app h6 { font-family: var(--chi-font-display); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--chi-text); margin: 0; } .chi-app h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; } .chi-app h2 { font-size: 1.25rem; } .chi-app h3 { font-size: 1.0625rem; } .chi-app h4 { font-size: 0.9375rem; color: var(--chi-text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; } .chi-app p { margin: 0; color: var(--chi-text); } .chi-app a { color: var(--chi-primary); text-decoration: none; } .chi-app a:hover { text-decoration: underline; } .chi-app code, .chi-app pre { font-family: var(--chi-font-mono); } /* ─── Layout ─────────────────────────────────────────────────────── */ .chi-container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 1.5rem; } .chi-page { min-height: 100vh; background: var(--chi-bg); padding: 1.5rem; } .chi-stack { display: flex; flex-direction: column; gap: var(--chi-gap-md); } .chi-stack--sm { display: flex; flex-direction: column; gap: var(--chi-gap-sm); } .chi-stack--lg { display: flex; flex-direction: column; gap: var(--chi-gap-lg); } .chi-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--chi-gap); } .chi-row--tight { display: flex; flex-wrap: wrap; align-items: center; gap: var(--chi-gap-sm); } .chi-row--between { display: flex; align-items: center; justify-content: space-between; gap: var(--chi-gap); } .chi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--chi-gap-md); } /* ─── Header ─────────────────────────────────────────────────────── */ .chi-header { display: flex; flex-direction: column; gap: var(--chi-gap-sm); padding: 0 0 var(--chi-gap-md); border-bottom: 1px solid var(--chi-divider); margin-bottom: var(--chi-gap-lg); } .chi-header--plain { border-bottom: none; margin-bottom: var(--chi-gap-md); padding-bottom: 0; } .chi-header-top { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--chi-gap); } .chi-header-title { font-family: var(--chi-font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; color: var(--chi-text); margin: 0; } .chi-header-count { margin-left: 0.375rem; font-size: 0.8125rem; color: var(--chi-text-subtle); font-weight: 400; } .chi-header-sub { font-size: 0.8125rem; color: var(--chi-text-muted); margin: 0; } .chi-header-actions { display: flex; align-items: center; gap: var(--chi-gap-sm); flex-wrap: wrap; } /* ─── Cards ──────────────────────────────────────────────────────── */ .chi-card { background: var(--chi-surface); border: 1px solid var(--chi-border); border-radius: var(--chi-radius-lg); padding: 1.25rem; transition: border-color 150ms ease, box-shadow 150ms ease; } .chi-card--interactive { cursor: pointer; } .chi-card--interactive:hover { border-color: var(--chi-border-strong); box-shadow: var(--chi-shadow); } .chi-card--flat { padding: 1rem; } .chi-card--accent { border-left-width: 3px; border-left-color: var(--chi-primary); border-left-style: solid; } .chi-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--chi-gap); margin-bottom: var(--chi-gap); } .chi-card-title { font-size: 0.9375rem; font-weight: 600; color: var(--chi-text); letter-spacing: -0.01em; margin: 0; } .chi-card-sub { font-size: 0.75rem; color: var(--chi-text-muted); margin-top: 2px; } .chi-card-body { font-size: 0.875rem; color: var(--chi-text); } .chi-card-footer { margin-top: var(--chi-gap-md); padding-top: var(--chi-gap); border-top: 1px solid var(--chi-divider); display: flex; align-items: center; gap: var(--chi-gap-sm); } /* ─── Pills / badges ─────────────────────────────────────────────── */ .chi-pill { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.625rem; border-radius: var(--chi-radius-full); font-size: 0.6875rem; font-weight: 500; line-height: 1.2; letter-spacing: 0.01em; border: 1px solid var(--chi-border); background: var(--chi-bg-subtle); color: var(--chi-text-muted); white-space: nowrap; } .chi-pill--primary { background: var(--chi-primary-soft); color: var(--chi-primary); border-color: var(--chi-primary-border); } .chi-pill--success { background: var(--chi-success-soft); color: var(--chi-success); border-color: var(--chi-success-border); } .chi-pill--warn { background: var(--chi-warn-soft); color: var(--chi-warn); border-color: var(--chi-warn-border); } .chi-pill--danger { background: var(--chi-danger-soft); color: var(--chi-danger); border-color: var(--chi-danger-border); } .chi-pill--info { background: var(--chi-info-soft); color: var(--chi-info); border-color: var(--chi-info-border); } .chi-pill--muted { background: var(--chi-bg-muted); color: var(--chi-text-muted); border-color: var(--chi-border); } .chi-pill--ghost { background: transparent; border-color: var(--chi-border); color: var(--chi-text-muted); } .chi-pill--solid { background: var(--chi-text); color: var(--chi-text-inverted); border-color: var(--chi-text); } .chi-dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--chi-radius-full); background: var(--chi-text-subtle); } .chi-dot--primary { background: var(--chi-primary); } .chi-dot--success { background: var(--chi-success); } .chi-dot--warn { background: var(--chi-warn); } .chi-dot--danger { background: var(--chi-danger); } /* ─── Buttons ────────────────────────────────────────────────────── */ .chi-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 0.875rem; border-radius: var(--chi-radius-full); font-family: inherit; font-size: 0.8125rem; font-weight: 500; line-height: 1; border: 1px solid transparent; background: var(--chi-text); color: var(--chi-text-inverted); cursor: pointer; transition: background 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease, box-shadow 120ms ease; white-space: nowrap; user-select: none; } .chi-btn:focus-visible { outline: 2px solid var(--chi-primary); outline-offset: 2px; } .chi-btn:hover:not(:disabled) { background: #1f2937; } .chi-btn:disabled { opacity: 0.6; cursor: not-allowed; } .chi-btn--primary { background: var(--chi-primary); color: var(--chi-text-inverted); } .chi-btn--primary:hover:not(:disabled) { background: var(--chi-primary-hover); } .chi-btn--outline { background: transparent; color: var(--chi-text); border-color: var(--chi-border-strong); } .chi-btn--outline:hover:not(:disabled) { background: var(--chi-bg-subtle); border-color: var(--chi-text-muted); } .chi-btn--ghost { background: transparent; color: var(--chi-text-muted); border-color: transparent; } .chi-btn--ghost:hover:not(:disabled) { background: var(--chi-bg-subtle); color: var(--chi-text); } .chi-btn--danger { background: var(--chi-danger); color: var(--chi-text-inverted); } .chi-btn--danger:hover:not(:disabled) { background: #b91c1c; } .chi-btn--sm { padding: 0.3125rem 0.625rem; font-size: 0.75rem; } .chi-btn--lg { padding: 0.6875rem 1.125rem; font-size: 0.875rem; } .chi-btn--icon { padding: 0.4375rem; border-radius: var(--chi-radius); aspect-ratio: 1; } /* ─── Inputs ─────────────────────────────────────────────────────── */ .chi-field { display: flex; flex-direction: column; gap: 0.3125rem; } .chi-label { font-size: 0.75rem; font-weight: 500; color: var(--chi-text-muted); letter-spacing: 0.01em; } .chi-input, .chi-textarea, .chi-select { width: 100%; font-family: inherit; font-size: 0.875rem; line-height: 1.4; color: var(--chi-text); background: var(--chi-surface); border: 1px solid var(--chi-border); border-radius: var(--chi-radius); padding: 0.5rem 0.75rem; transition: border-color 120ms ease, box-shadow 120ms ease; outline: none; } .chi-input:focus, .chi-textarea:focus, .chi-select:focus { border-color: var(--chi-primary); box-shadow: 0 0 0 3px var(--chi-primary-soft); } .chi-textarea { min-height: 6rem; resize: vertical; } .chi-input::placeholder, .chi-textarea::placeholder { color: var(--chi-text-subtle); } /* ─── Tables ─────────────────────────────────────────────────────── */ .chi-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.8125rem; } .chi-table th, .chi-table td { text-align: left; padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--chi-divider); } .chi-table th { font-weight: 500; color: var(--chi-text-muted); text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.04em; } .chi-table tbody tr:hover { background: var(--chi-surface-hover); } /* ─── Utilities ──────────────────────────────────────────────────── */ .chi-muted { color: var(--chi-text-muted); } .chi-subtle { color: var(--chi-text-subtle); } .chi-strong { font-weight: 600; color: var(--chi-text); } .chi-mono { font-family: var(--chi-font-mono); font-size: 0.8125rem; } .chi-divider { height: 1px; background: var(--chi-divider); border: 0; margin: var(--chi-gap-md) 0; } .chi-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1.5rem; text-align: center; border: 1px dashed var(--chi-border); border-radius: var(--chi-radius-lg); color: var(--chi-text-muted); gap: 0.25rem; } .chi-empty .chi-empty-title { color: var(--chi-text); font-weight: 600; font-size: 0.9375rem; } .chi-spinner { display: inline-block; width: 1rem; height: 1rem; border-radius: var(--chi-radius-full); border: 2px solid var(--chi-border); border-top-color: var(--chi-primary); animation: chi-spin 600ms linear infinite; } @keyframes chi-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .chi-app *, .chi-app *::before, .chi-app *::after { transition: none !important; animation: none !important; } }