/* caserag SPA design system. * * Restrained, professional register: system fonts, one accent, generous * whitespace, subtle borders, minimal shadow. Colours are CSS custom * properties so light/dark are each defined once. Default follows the OS * (`prefers-color-scheme`); the theme toggle in app.js overrides that by * stamping `data-theme="dark"|"light"` on , which the two * `:root[data-theme=...]` blocks below win against the media query. */ /* The `hidden` attribute must always win over element display rules * (id/class `display:` selectors otherwise override the UA `[hidden]` rule, * which would leave the login screen and app shell both visible). */ [hidden] { display: none !important; } :root { --font-sans: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace; --color-accent: #1f4b8e; --color-accent-hover: #163a6e; --color-accent-contrast: #ffffff; --color-bg: #f6f7f9; --color-surface: #ffffff; --color-surface-alt: #eef1f5; --color-border: #d7dce3; --color-text: #1a1d21; --color-text-muted: #5b6472; --color-danger: #8f2c26; --color-danger-bg: #fbeceb; --color-danger-border: #e3bcb8; --color-success: #1e6b45; --color-success-bg: #e9f5ee; --color-warning: #8a5a00; --color-warning-bg: #fdf3e0; --color-warning-border: #e9cf9c; --color-json-key: #7a3e9d; --color-json-string: #1e6b45; --color-json-number: #1f4b8e; --color-json-boolean: #b35900; --color-json-null: #8f2c26; --color-json-punct: #5b6472; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --radius: 6px; --radius-sm: 4px; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08); --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.10); color-scheme: light; } @media (prefers-color-scheme: dark) { :root { --color-accent: #6592cc; --color-accent-hover: #86a9d6; --color-accent-contrast: #0c1420; --color-bg: #14171c; --color-surface: #1b1f26; --color-surface-alt: #232833; --color-border: #333a46; --color-text: #e7eaf0; --color-text-muted: #9aa4b2; --color-danger: #e2857c; --color-danger-bg: #3a2220; --color-danger-border: #5c3430; --color-success: #7fd0a6; --color-success-bg: #1c3327; --color-warning: #e0b166; --color-warning-bg: #3a2f14; --color-warning-border: #5c4a24; --color-json-key: #c99bec; --color-json-string: #7fd0a6; --color-json-number: #86a9d6; --color-json-boolean: #e0b166; --color-json-null: #e2857c; --color-json-punct: #9aa4b2; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45); color-scheme: dark; } } :root[data-theme="dark"] { --color-accent: #6592cc; --color-accent-hover: #86a9d6; --color-accent-contrast: #0c1420; --color-bg: #14171c; --color-surface: #1b1f26; --color-surface-alt: #232833; --color-border: #333a46; --color-text: #e7eaf0; --color-text-muted: #9aa4b2; --color-danger: #e2857c; --color-danger-bg: #3a2220; --color-danger-border: #5c3430; --color-success: #7fd0a6; --color-success-bg: #1c3327; --color-warning: #e0b166; --color-warning-bg: #3a2f14; --color-warning-border: #5c4a24; --color-json-key: #c99bec; --color-json-string: #7fd0a6; --color-json-number: #86a9d6; --color-json-boolean: #e0b166; --color-json-null: #e2857c; --color-json-punct: #9aa4b2; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45); color-scheme: dark; } :root[data-theme="light"] { --color-accent: #1f4b8e; --color-accent-hover: #163a6e; --color-accent-contrast: #ffffff; --color-bg: #f6f7f9; --color-surface: #ffffff; --color-surface-alt: #eef1f5; --color-border: #d7dce3; --color-text: #1a1d21; --color-text-muted: #5b6472; --color-danger: #8f2c26; --color-danger-bg: #fbeceb; --color-danger-border: #e3bcb8; --color-success: #1e6b45; --color-success-bg: #e9f5ee; --color-warning: #8a5a00; --color-warning-bg: #fdf3e0; --color-warning-border: #e9cf9c; --color-json-key: #7a3e9d; --color-json-string: #1e6b45; --color-json-number: #1f4b8e; --color-json-boolean: #b35900; --color-json-null: #8f2c26; --color-json-punct: #5b6472; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08); --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.10); color-scheme: light; } /* --- Reset ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: 15px; line-height: 1.5; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; } h1, h2, h3 { margin: 0 0 var(--space-3) 0; font-weight: 600; line-height: 1.25; } h1 { font-size: 1.5rem; } h2 { font-size: 1.15rem; } p { margin: 0 0 var(--space-3) 0; } a { color: var(--color-accent); } .muted { color: var(--color-text-muted); } .mono { font-family: var(--font-mono); font-size: 0.9em; } /* --- Layout: header + nav + main --------------------------------------- */ #app { min-height: 100%; display: flex; flex-direction: column; } .app-header { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-3) var(--space-5); background: var(--color-surface); border-bottom: 1px solid var(--color-border); } .app-header__brand { display: flex; align-items: baseline; gap: var(--space-3); min-width: 0; } .app-header__name { font-weight: 700; font-size: 1.1rem; letter-spacing: 0.01em; } .app-header__case { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-nav { display: flex; gap: var(--space-4); flex: 1; } .app-nav a { padding: var(--space-2) var(--space-1); color: var(--color-text-muted); text-decoration: none; font-weight: 500; border-bottom: 2px solid transparent; } .app-nav a:hover { color: var(--color-text); } .app-nav a.is-active { color: var(--color-accent); border-bottom-color: var(--color-accent); } .app-header__actions { display: flex; align-items: center; gap: var(--space-2); } #view { flex: 1; padding: var(--space-6) var(--space-5); max-width: 1080px; width: 100%; margin: 0 auto; } .view-header { margin-bottom: var(--space-5); } .view-subtitle { color: var(--color-text-muted); margin-top: calc(var(--space-1) * -1); } .empty-state { padding: var(--space-5); color: var(--color-text-muted); text-align: center; border: 1px dashed var(--color-border); border-radius: var(--radius); background: var(--color-surface); } /* --- Login screen -------------------------------------------------------- */ .login-section { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: var(--space-5); } .login-form { width: 100%; max-width: 340px; display: flex; flex-direction: column; } .login-form__title { margin-bottom: var(--space-1); } .login-form__subtitle { margin-bottom: var(--space-5); } /* --- Cards ---------------------------------------------------------------- */ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: var(--space-5); } .create-case-form { margin-bottom: var(--space-5); max-width: 480px; } /* --- Forms ------------------------------------------------------------- */ label { display: block; font-size: 0.85rem; font-weight: 600; margin: var(--space-3) 0 var(--space-1) 0; color: var(--color-text-muted); } label:first-of-type { margin-top: 0; } input[type="text"], input[type="password"], input[type="search"], input[type="number"], select, textarea { width: 100%; padding: var(--space-2) var(--space-3); font: inherit; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); } input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .form-error { color: var(--color-danger); font-size: 0.88rem; margin: var(--space-2) 0 0 0; min-height: 1.2em; } .form-error:empty { display: none; } /* --- Buttons -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); font: inherit; font-weight: 600; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; background: var(--color-surface-alt); color: var(--color-text); } .btn:hover { filter: brightness(0.97); } .btn:disabled { opacity: 0.6; cursor: not-allowed; } .btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-contrast); margin-top: var(--space-4); } .btn--primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); } .btn--ghost { background: transparent; border-color: var(--color-border); color: var(--color-text-muted); } .btn--ghost:hover { color: var(--color-text); } .btn--danger { background: var(--color-danger); border-color: var(--color-danger); color: #ffffff; } .btn--danger-ghost { background: transparent; border-color: var(--color-danger-border); color: var(--color-danger); } .btn--small { padding: var(--space-1) var(--space-3); font-size: 0.85rem; } /* --- Tables ----------------------------------------------------------- */ .cases-table { width: 100%; border-collapse: collapse; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; } .cases-table th, .cases-table td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); vertical-align: middle; } .cases-table th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); background: var(--color-surface-alt); } .cases-table tbody tr:last-child td { border-bottom: none; } .cases-table tbody tr.is-new { background: var(--color-success-bg); } .delete-affordance { display: flex; justify-content: flex-end; } .delete-confirm { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; } .delete-confirm input[type="text"] { width: auto; min-width: 160px; } .delete-confirm .form-error { width: 100%; text-align: right; margin: 0; } /* --- Toasts (design-system primitive; wired up by later views) --------- */ .toast-stack { position: fixed; bottom: var(--space-5); right: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); z-index: 100; } .toast { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: var(--space-3) var(--space-4); max-width: 320px; } .toast--danger { border-color: var(--color-danger-border); background: var(--color-danger-bg); color: var(--color-danger); } .toast--success { border-color: var(--color-success); background: var(--color-success-bg); color: var(--color-success); } /* --- Badges & banners --------------------------------------------------- */ .badge { display: inline-flex; align-items: center; padding: 2px var(--space-2); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--color-text-muted); background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-sm); } .banner { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); border: 1px solid var(--color-border); margin-bottom: var(--space-3); } .banner--warning { color: var(--color-warning); background: var(--color-warning-bg); border-color: var(--color-warning-border); } /* --- Search console ----------------------------------------------------- */ .search-form { margin-bottom: var(--space-5); max-width: 640px; } .search-results-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); align-items: start; } .snippets-panel { display: flex; flex-direction: column; } .snippet-list { display: flex; flex-direction: column; gap: var(--space-3); } .snippet-card { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); background: var(--color-surface-alt); } .snippet-card__header { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); } .snippet-card__citation { font-weight: 700; flex: 1 1 auto; } .snippet-card__score { color: var(--color-text-muted); font-size: 0.85rem; } .snippet-card__meta { font-size: 0.85rem; margin: 0 0 var(--space-2) 0; } .snippet-card__text { margin: 0; white-space: pre-wrap; } /* --- Raw payload inspector (D10) ----------------------------------------- */ .inspector-panel { display: flex; flex-direction: column; min-width: 0; } .inspector-panel__header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-1); } .inspector-panel__header h3 { margin: 0; flex: 1 1 auto; } .inspector-copy-status { font-size: 0.8rem; min-width: 4.5em; } .inspector-caption { font-size: 0.85rem; margin: 0 0 var(--space-3) 0; } .inspector-details { margin-top: var(--space-4); } .inspector-details summary { cursor: pointer; font-weight: 600; color: var(--color-text-muted); padding: var(--space-2) 0; } .inspector-details .inspector-panel { margin-top: var(--space-3); } .json-tree-wrap { max-height: 480px; overflow: auto; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); } .json-tree { margin: 0; padding: var(--space-3); font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.5; white-space: pre; } .json-key { color: var(--color-json-key); } .json-string { color: var(--color-json-string); } .json-number { color: var(--color-json-number); } .json-boolean { color: var(--color-json-boolean); } .json-null { color: var(--color-json-null); font-style: italic; } .json-punct { color: var(--color-json-punct); } /* --- Document browser ----------------------------------------------------- */ .docs-filter-form { margin-bottom: var(--space-5); max-width: 640px; } .docs-list-wrap, .docs-detail-wrap { margin-bottom: var(--space-5); } .doc-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); } .doc-row { display: block; width: 100%; text-align: left; font: inherit; color: inherit; background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); cursor: pointer; } .doc-row:hover { border-color: var(--color-accent); } .doc-row__main { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); } .doc-row__title { font-weight: 600; flex: 1 1 auto; } .doc-row__summary, .doc-row__meta { margin: 0; font-size: 0.85rem; } .outline-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); } .outline-entry { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); } .outline-entry__number { flex: 0 0 auto; color: var(--color-text-muted); } .outline-entry__page { flex: 0 0 auto; font-size: 0.8rem; } .outline-entry__snippet { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fetch-form { margin-top: var(--space-5); max-width: 640px; } .fetch-form__range { display: flex; gap: var(--space-2); } .fetch-result { margin-top: var(--space-4); } .fetch-result__citation { color: var(--color-text-muted); } .fetch-paragraph { padding: var(--space-3) 0; border-top: 1px solid var(--color-border); } .fetch-paragraph:first-of-type { border-top: none; } .fetch-paragraph__number { display: block; font-size: 0.8rem; margin-bottom: var(--space-1); } .fetch-paragraph__text { margin: 0; white-space: pre-wrap; } @media (min-width: 900px) { .search-results-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } /* --- Responsive ------------------------------------------------------- */ @media (max-width: 640px) { .app-header { flex-wrap: wrap; gap: var(--space-3); } .app-nav { order: 3; width: 100%; } #view { padding: var(--space-4); } .cases-table, .cases-table thead, .cases-table tbody, .cases-table th, .cases-table td, .cases-table tr { display: block; } .cases-table thead { display: none; } .cases-table tr { border-bottom: 1px solid var(--color-border); padding: var(--space-3) var(--space-4); } .cases-table td { border-bottom: none; padding: var(--space-1) 0; } }