| :root { --color-bg: #fafaf8 } |
| :root { --color-text: #1a1a1a } |
| :root { --color-text-light: #666666 } |
| :root { --color-accent: #24364f } |
| :root { --color-accent-soft: #eef2f7 } |
| :root { --color-border: #e5e5e0 } |
| :root { --font-sans: 'General Sans', 'Inter', system-ui, -apple-system, sans-serif } |
| :root { --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace } |
|
|
| * { box-sizing: border-box } |
| * { margin: 0 } |
| * { padding: 0 } |
|
|
| body { background: var(--color-bg) } |
| body { color: var(--color-text) } |
| body { font-family: var(--font-sans) } |
| body { line-height: 1.6 } |
| body { min-height: 100vh } |
|
|
| a { color: var(--color-accent) } |
| a { font-weight: 500 } |
| a { text-decoration: none } |
|
|
| button, |
| input, |
| select { font: inherit } |
|
|
| button, |
| select, |
| input { border: 1px solid var(--color-border) } |
| button, |
| select, |
| input { border-radius: 4px } |
| button, |
| select, |
| input { min-height: 2.65rem } |
|
|
| button { background: var(--color-accent) } |
| button { color: #ffffff } |
| button { cursor: pointer } |
| button { font-weight: 600 } |
| button { padding: 0 1rem } |
|
|
| input, |
| select { background: transparent } |
| input, |
| select { color: var(--color-text) } |
| input, |
| select { padding: 0 0.7rem } |
| input, |
| select { width: 100% } |
|
|
| table { border-collapse: collapse } |
| table { min-width: 980px } |
| table { width: 100% } |
|
|
| th { color: var(--color-text-light) } |
| th { font-family: var(--font-mono) } |
| th { font-size: 0.75rem } |
| th { font-weight: 500 } |
| th { letter-spacing: 0.05em } |
| th { text-align: left } |
| th { text-transform: uppercase } |
|
|
| th, |
| td { border-bottom: 1px solid var(--color-border) } |
| th, |
| td { padding: 0.8rem 0.75rem } |
| th, |
| td { vertical-align: middle } |
|
|
| td { font-size: 0.94rem } |
|
|
| th:last-child, |
| td:last-child { background: var(--color-bg) } |
| th:last-child, |
| td:last-child { position: sticky } |
| th:last-child, |
| td:last-child { right: 0 } |
| th:last-child, |
| td:last-child { z-index: 2 } |
|
|
| .page-shell { margin: 0 auto } |
| .page-shell { max-width: 1380px } |
| .page-shell { padding: 0 2.4rem } |
|
|
| main.page-shell { padding-bottom: 2.5rem } |
|
|
| .site-header { background: rgba(250, 250, 248, 0.94) } |
| .site-header { border-bottom: 1px solid var(--color-border) } |
| .site-header { position: sticky } |
| .site-header { top: 0 } |
| .site-header { z-index: 20 } |
|
|
| .header-inner { align-items: center } |
| .header-inner { display: flex } |
| .header-inner { gap: 1.5rem } |
| .header-inner { justify-content: space-between } |
| .header-inner { min-height: 68px } |
|
|
| .brand-block { display: grid } |
| .brand-block { gap: 0.22rem } |
|
|
| .brand { color: var(--color-text) } |
| .brand { font-size: 1.1125rem } |
| .brand { font-weight: 600 } |
|
|
| .header-link { color: var(--color-accent) } |
| .header-link { font-family: var(--font-mono) } |
| .header-link { font-size: 0.78rem } |
| .header-link { font-weight: 500 } |
| .header-link { letter-spacing: 0.05em } |
|
|
| .eyebrow { color: var(--color-accent) } |
| .eyebrow { font-family: var(--font-mono) } |
| .eyebrow { font-size: 0.78rem } |
| .eyebrow { font-weight: 500 } |
| .eyebrow { letter-spacing: 0.05em } |
| .eyebrow { text-transform: uppercase } |
|
|
| .tabs { display: flex } |
| .tabs { gap: 0.4rem } |
| .tabs { padding-top: 1.25rem } |
|
|
| .tab-link { border-bottom: 2px solid transparent } |
| .tab-link { color: var(--color-text-light) } |
| .tab-link { font-size: 0.95rem } |
| .tab-link { padding: 0.65rem 1rem } |
|
|
| .tab-link.active { border-bottom-color: var(--color-accent) } |
| .tab-link.active { color: var(--color-text) } |
|
|
| .tab-panel { display: none } |
| .tab-panel.active { display: block } |
|
|
| .filters { align-items: end } |
| .filters { display: grid } |
| .filters { gap: 0.9rem } |
| .filters { grid-template-columns: minmax(8rem, 0.9fr) minmax(8rem, 0.9fr) minmax(12rem, 1.4fr) minmax(9rem, 0.75fr) minmax(9rem, 0.75fr) auto } |
| .filters { padding: 1.5rem 0 2rem } |
|
|
| .filters label, |
| .case-search label { display: grid } |
| .filters label, |
| .case-search label { gap: 0.35rem } |
|
|
| .filters span, |
| .case-search span { color: var(--color-text-light) } |
| .filters span, |
| .case-search span { font-size: 0.82rem } |
| .filters span, |
| .case-search span { font-weight: 500 } |
|
|
| .results { min-width: 0 } |
|
|
| .section-heading { align-items: end } |
| .section-heading { display: flex } |
| .section-heading { gap: 1rem } |
| .section-heading { justify-content: space-between } |
| .section-heading { margin-bottom: 1rem } |
|
|
| .section-heading h1 { font-size: 1.35rem } |
| .section-heading h1 { font-weight: 600 } |
|
|
| .section-heading.compact { align-items: start } |
|
|
| .results-meta { align-items: center } |
| .results-meta { display: flex } |
| .results-meta { justify-content: space-between } |
| .results-meta { margin-bottom: 0.85rem } |
|
|
| .limit-note { color: var(--color-text-light) } |
| .limit-note { font-size: 0.85rem } |
|
|
| .table-wrap { background: transparent } |
| .table-wrap { border-bottom: 1px solid var(--color-border) } |
| .table-wrap { border-radius: 0 } |
| .table-wrap { border-top: 1px solid var(--color-border) } |
| .table-wrap { overflow: auto } |
| .table-wrap { margin-bottom: 1.25rem } |
|
|
| .case-id-cell { align-items: center } |
| .case-id-cell { display: flex } |
| .case-id-cell { gap: 0.45rem } |
|
|
| .icon-button { align-items: center } |
| .icon-button { background: transparent } |
| .icon-button { border: none } |
| .icon-button { color: var(--color-accent) } |
| .icon-button { display: inline-flex } |
| .icon-button { font-family: var(--font-mono) } |
| .icon-button { font-size: 0.86rem } |
| .icon-button { font-weight: 500 } |
| .icon-button { height: 1.4rem } |
| .icon-button { justify-content: center } |
| .icon-button { min-height: 1.4rem } |
| .icon-button { min-width: 1.4rem } |
| .icon-button { padding: 0 } |
|
|
| .copy-action { position: relative } |
| .copy-action { width: 1.4rem } |
| .copy-action::before, |
| .copy-action::after { background: currentColor } |
| .copy-action::before, |
| .copy-action::after { border-radius: 2px } |
| .copy-action::before, |
| .copy-action::after { content: "" } |
| .copy-action::before, |
| .copy-action::after { height: 0.72rem } |
| .copy-action::before, |
| .copy-action::after { position: absolute } |
| .copy-action::before, |
| .copy-action::after { width: 0.58rem } |
| .copy-action::before { height: 0.72rem } |
| .copy-action::before { left: 0.52rem } |
| .copy-action::before { opacity: 0.45 } |
| .copy-action::before { top: 0.18rem } |
| .copy-action::before { width: 0.58rem } |
| .copy-action::after { left: 0.32rem } |
| .copy-action::after { top: 0.42rem } |
| .copy-action[data-copied="true"] { min-width: 4rem } |
| .copy-action[data-copied="true"]::after { display: none } |
| .copy-action[data-copied="true"]::before { background: none } |
| .copy-action[data-copied="true"]::before { content: "Copied" } |
| .copy-action[data-copied="true"]::before { height: auto } |
| .copy-action[data-copied="true"]::before { left: auto } |
| .copy-action[data-copied="true"]::before { position: static } |
| .copy-action[data-copied="true"]::before { top: auto } |
| .copy-action[data-copied="true"]::before { width: auto } |
|
|
| .details-action { color: var(--color-accent) } |
| .details-action { font-family: var(--font-mono) } |
| .details-action { font-size: 0.78rem } |
| .details-action { font-weight: 500 } |
| .details-action { letter-spacing: 0.05em } |
| .details-action { text-transform: uppercase } |
|
|
| .case-search { align-items: end } |
| .case-search { display: grid } |
| .case-search { gap: 0.75rem } |
| .case-search { grid-template-columns: minmax(16rem, 28rem) 6rem } |
| .case-search { padding: 1.5rem 0 } |
|
|
| .error { background: #fff5f5 } |
| .error { border: 1px solid #f1c6c6 } |
| .error { border-radius: 6px } |
| .error { color: #8a2626 } |
| .error { margin-bottom: 1rem } |
| .error { padding: 0.75rem } |
|
|
| .details-card, |
| .empty-state { background: transparent } |
| .details-card, |
| .empty-state { border: none } |
| .details-card, |
| .empty-state { border-radius: 0 } |
| .details-card, |
| .empty-state { padding: 0 } |
|
|
| .details-card { width: 100% } |
| .details-card { border-top: 1px solid var(--color-border) } |
| .details-card { margin-bottom: 1.25rem } |
| .details-card { padding-top: 1.4rem } |
|
|
| .meta-list { border-bottom: 1px solid var(--color-border) } |
| .meta-list { display: grid } |
| .meta-list { gap: 0.85rem } |
| .meta-list { grid-template-columns: repeat(3, minmax(0, 1fr)) } |
| .meta-list { margin-bottom: 1.25rem } |
| .meta-list { padding-bottom: 1.25rem } |
|
|
| .meta-list div { display: grid } |
| .meta-list div { gap: 0.15rem } |
|
|
| dt { color: var(--color-accent) } |
| dt { font-family: var(--font-mono) } |
| dt { font-size: 0.75rem } |
| dt { letter-spacing: 0.05em } |
| dt { text-transform: uppercase } |
|
|
| dd { color: var(--color-text) } |
|
|
| .text-section { border-bottom: 1px solid var(--color-border) } |
| .text-section { margin-bottom: 1.25rem } |
| .text-section { padding-bottom: 1.25rem } |
|
|
| .text-section:last-child { border-bottom: none } |
| .text-section:last-child { margin-bottom: 0 } |
| .text-section:last-child { padding-bottom: 0 } |
|
|
| .text-section h2 { font-size: 1rem } |
| .text-section h2 { margin-bottom: 0.6rem } |
|
|
| .text-section p { color: var(--color-text-light) } |
| .text-section p { margin-bottom: 0.8rem } |
|
|
| .empty-state { max-width: 560px } |
| .empty-state { padding-top: 1rem } |
|
|
| .empty-state h1 { font-size: 1.2rem } |
| .empty-state h1 { margin-bottom: 0.35rem } |
|
|
| .empty-state p { color: var(--color-text-light) } |
|
|
| @media (max-width: 1100px) { |
| .filters { grid-template-columns: repeat(3, minmax(0, 1fr)) } |
| .filters button { width: 100% } |
| } |
|
|
| @media (max-width: 720px) { |
| .page-shell { padding: 0 1.25rem } |
| .header-inner { align-items: flex-start } |
| .header-inner { flex-direction: column } |
| .header-inner { gap: 0.75rem } |
| .header-inner { justify-content: center } |
| .header-inner { min-height: 96px } |
| .filters { grid-template-columns: 1fr } |
| .case-search { grid-template-columns: 1fr } |
| .case-search button { width: 100% } |
| .meta-list { grid-template-columns: 1fr } |
| th, |
| td { padding: 0.7rem 0.6rem } |
| } |
|
|
