/* ========================= Ontology Conformance Diagnostic (OCD) Scoped UX styles - Relies on global theme tokens: --ont-* - Theme toggled via ========================= */ /* Optional page fallback (before app loads) */ .ocd-body { margin: 0; background: var(--ont-bg); } /* ===== App root ===== */ .ocd-app { /* Full viewport height */ min-height: 100vh; background: var(--ont-bg); color: var(--ont-text); font-family: var(--ont-font-body); /* OCD-local shape + elevation */ --ocd-radius: 12px; --ocd-radius-sm: 10px; --ocd-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); --ocd-shadow-sm: 0 3px 12px rgba(0, 0, 0, 0.06); /* Spacing */ --ocd-space-1: 6px; --ocd-space-2: 10px; --ocd-space-3: 14px; --ocd-space-4: 18px; /* Focus ring */ --ocd-focus-ring: 0 0 0 3px color-mix(in srgb, var(--ont-focus) 35%, transparent); /* Derived surfaces */ --ocd-surface: var(--ont-panel-bg); --ocd-surface-2: color-mix(in srgb, var(--ont-panel-bg) 92%, var(--ont-text) 8%); /* Accent panel (tan/wood vibe -> now token-derived) */ --ocd-accent-bg: color-mix(in srgb, var(--ont-accent-soft) 70%, var(--ont-panel-bg)); --ocd-accent-border: color-mix(in srgb, var(--ont-border) 60%, var(--ont-accent)); /* Status palette (kept as local semantic tokens) */ --ocd-success-bg: color-mix(in srgb, #22c55e 18%, transparent); --ocd-success-text: color-mix(in srgb, #22c55e 78%, var(--ont-text)); --ocd-warn-bg: color-mix(in srgb, #f59e0b 18%, transparent); --ocd-warn-text: color-mix(in srgb, #f59e0b 82%, var(--ont-text)); --ocd-danger-bg: color-mix(in srgb, #ef4444 18%, transparent); --ocd-danger-text: color-mix(in srgb, #ef4444 82%, var(--ont-text)); --ocd-info-bg: color-mix(in srgb, var(--ont-accent) 18%, transparent); --ocd-info-text: color-mix(in srgb, var(--ont-accent) 80%, var(--ont-text)); } /* Ensure “card/section” containers inherit readable text */ .ocd-app .ocd-section, .ocd-app .ocd-card, .ocd-app .ocd-detail, .ocd-app .ocd-text { color: var(--ont-text); } .ocd-app .ocd-muted { color: var(--ont-muted); } /* Theme toggle bar */ .ocd-app .ocd-theme-toggle-bar { display: flex; justify-content: flex-end; margin-bottom: 14px; } /* ========================= Base layout utilities ========================= */ .ocd-app .ocd-page { min-height: 100vh; background: var(--ont-bg); color: var(--ont-text); padding: var(--ocd-space-4); } .ocd-app .ocd-section { max-width: 70%; margin: auto; background: var(--ocd-surface); border: 1px solid var(--ont-border); border-radius: var(--ocd-radius); box-shadow: var(--ocd-shadow-sm); padding: var(--ocd-space-4); margin-top: var(--ocd-space-4); margin-bottom: var(--ocd-space-4); } .ocd-app .ocd-title { margin: 0 0 var(--ocd-space-2) 0; font-size: 18px; font-weight: 650; letter-spacing: 0.1px; } .ocd-app .ocd-subtitle { margin: 0 0 var(--ocd-space-3) 0; color: var(--ont-muted); font-size: 13px; line-height: 1.35; } /* Inline label/value rows */ .ocd-app .ocd-kv { display: flex; gap: var(--ocd-space-2); flex-wrap: wrap; margin: var(--ocd-space-2) 0; } .ocd-app .ocd-kv-label { color: var(--ont-muted); font-weight: 600; } .ocd-app .ocd-kv-value { color: var(--ont-text); font-family: var(--ont-font-mono); font-size: 12.5px; } /* ========================= Header + layout ========================= */ .ocd-app .ocd-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; } .ocd-app .ocd-h1 { margin: 0; font-size: 22px; font-weight: 750; letter-spacing: 0.2px; } .ocd-app .ocd-lede { margin: 8px 0 0 0; color: var(--ont-muted); font-size: 13.5px; line-height: 1.45; max-width: 78ch; } /* ========================= Cards / toolbar ========================= */ .ocd-app .ocd-card { background: var(--ocd-surface); } .ocd-app .ocd-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; } .ocd-app .ocd-toolbar-left { flex: 1; min-width: 320px; max-width: 50%; } .ocd-app .ocd-toolbar-right { max-width: 50%; align-items: flex-start; justify-content: flex-end; } .ocd-app .ocd-label { display: block; font-size: 13px; font-weight: 700; color: var(--ont-text); margin-bottom: 8px; } .ocd-app .ocd-file-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .ocd-app .ocd-actions, .ocd-app .ocd-export { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } /* ========================= Inputs ========================= */ .ocd-app .ocd-input { border: 1px solid var(--ont-border); background: var(--ont-input-bg); color: var(--ont-input-text); border-radius: 10px; padding: 8px 10px; font-size: 13px; } .ocd-app .ocd-textarea { min-height: 44px; resize: vertical; } .ocd-app .ocd-input:focus-visible { outline: none; box-shadow: var(--ocd-focus-ring); } .ocd-app .ocd-input-file { padding: 7px 10px; } .ocd-app .ocd-select { padding-right: 34px; } /* ========================= Links + buttons ========================= */ .ocd-app .ocd-link { color: var(--ont-link); text-decoration: underline; text-underline-offset: 2px; } .ocd-app .ocd-link:hover { color: var(--ont-link-hover); } .ocd-app .ocd-btn { appearance: none; border: 1px solid var(--ont-btn-border); background: transparent; color: var(--ont-btn-text); padding: 8px 12px; border-radius: 10px; font-weight: 650; font-size: 13px; line-height: normal; cursor: pointer; box-shadow: var(--ocd-shadow-sm); } .ocd-app .ocd-btn-small { padding: 6px 10px; font-size: 12px; } .ocd-app .ocd-btn:hover { background: var(--ocd-surface-2); border-color: var(--ont-btn-hover-border); color: var(--ont-btn-hover-text); } .ocd-app .ocd-btn:focus-visible { outline: none; box-shadow: var(--ocd-focus-ring); } /* Button variants */ .ocd-app .ocd-btn-primary { border-color: transparent; background: var(--ont-accent); color: #fff; box-shadow: var(--ocd-shadow-sm); } .ocd-app .ocd-btn-primary:hover { background: var(--ont-link-hover); } .ocd-app .ocd-btn-secondary { background: transparent; } .ocd-app .ocd-btn-tertiary { background: var(--ocd-surface-2); } /* ========================= Status line ========================= */ .ocd-app .ocd-status { margin: 0 0 18px 0; color: var(--ont-muted); font-size: 13px; min-height: 18px; } .ocd-app .ocd-progress-board { display: grid; gap: 10px; } .ocd-app .ocd-progress-card, .ocd-app .ocd-summary-card { border: 1px solid var(--ont-border); border-radius: var(--ocd-radius-sm); background: var(--ocd-surface-2); padding: 12px 14px; } .ocd-app .ocd-progress-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .ocd-app .ocd-progress-track { width: 100%; height: 12px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--ont-border) 55%, var(--ocd-surface)); } .ocd-app .ocd-progress-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ont-accent), var(--ont-link-hover)); } .ocd-app .ocd-progress-meta, .ocd-app .ocd-summary-meta { margin-top: 8px; color: var(--ont-muted); font-size: 12px; } .ocd-app .ocd-help { margin: 10px 0 0 0; color: var(--ont-muted); font-size: 12.8px; line-height: 1.4; } .ocd-app .ocd-inline-preflight { margin-top: 14px; } .ocd-app .ocd-inline-preflight-empty { margin: 0; } .ocd-app .ocd-preflight-shell { border: 1px solid var(--ont-border); border-radius: var(--ocd-radius-sm); background: var(--ocd-surface-2); padding: 12px; } .ocd-app .ocd-preflight-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; } .ocd-app .ocd-preflight-summary::-webkit-details-marker { display: none; } .ocd-app .ocd-preflight-shell[open] .ocd-preflight-summary { margin-bottom: 10px; } /* ========================= Tables (scoped) ========================= */ .ocd-app .ocd-table { width: 70%; margin: auto; border-collapse: separate; border-spacing: 0; border: 1px solid var(--ont-border); border-radius: var(--ocd-radius-sm); overflow: hidden; background: var(--ocd-surface); } .ocd-app .ocd-table-head { background: var(--ocd-surface-2); color: var(--ont-text); } .ocd-app .ocd-table-th, .ocd-app .ocd-table-td { padding: 10px 12px; border-bottom: 1px solid var(--ont-table-border); vertical-align: top; font-size: 13px; line-height: 1.35; } .ocd-app .ocd-table-th { text-align: left; font-weight: 650; color: var(--ont-text); } .ocd-app .ocd-table-tr:last-child .ocd-table-td { border-bottom: none; } /* Hover + click affordance for clickable rows */ .ocd-app .ocd-row-clickable { cursor: pointer; } .ocd-app .ocd-row-clickable:hover { background: var(--ocd-accent-bg); } /* Selected row styling */ .ocd-app .ocd-row-selected { outline: 2px solid var(--ocd-accent-border); outline-offset: -2px; background: var(--ocd-accent-bg); } /* Focus ring for keyboard users */ .ocd-app .ocd-row-clickable:focus-visible, .ocd-app .ocd-btn:focus-visible, .ocd-app .ocd-link:focus-visible { outline: none; box-shadow: var(--ocd-focus-ring); border-radius: 8px; } /* ========================= Badges / status pills ========================= */ .ocd-app .ocd-badge { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 650; border: 1px solid var(--ont-border); background: var(--ocd-surface-2); color: var(--ont-text); } .ocd-app .ocd-badge-success { background: var(--ocd-success-bg); color: var(--ocd-success-text); border-color: transparent; } .ocd-app .ocd-badge-warn { background: var(--ocd-warn-bg); color: var(--ocd-warn-text); border-color: transparent; } .ocd-app .ocd-badge-danger { background: var(--ocd-danger-bg); color: var(--ocd-danger-text); border-color: transparent; } .ocd-app .ocd-badge-info { background: var(--ocd-info-bg); color: var(--ocd-info-text); border-color: transparent; } /* ========================= Requirement detail panel ========================= */ .ocd-app .ocd-detail { border: 1px solid var(--ocd-accent-border); background: var(--ocd-accent-bg); border-radius: var(--ocd-radius); padding: var(--ocd-space-4); box-shadow: var(--ocd-shadow-sm); } .ocd-app .ocd-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ocd-space-3); } .ocd-app .ocd-detail-title { margin: 0; font-size: 16px; font-weight: 700; } .ocd-app .ocd-detail-meta { margin-top: var(--ocd-space-2); color: var(--ont-muted); font-size: 13px; } .ocd-app .ocd-detail-facts-table { margin-top: 0; } .ocd-app .ocd-detail-facts-label { width: 220px; white-space: nowrap; } .ocd-app .ocd-meta-list { display: grid; gap: 8px; margin: 0; } .ocd-app .ocd-meta-row { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 10px; margin: 0; } .ocd-app .ocd-meta-row dt, .ocd-app .ocd-meta-row dd { margin: 0; } .ocd-app .ocd-table-meta { margin-top: 4px; color: var(--ont-muted); font-size: 12px; line-height: 1.35; } .ocd-app .ocd-detail-section { margin-top: var(--ocd-space-3); } .ocd-app .ocd-detail-section-title { font-size: 13px; font-weight: 700; color: var(--ont-text); margin-bottom: 6px; } .ocd-app .ocd-detail-list { margin: 0; padding-left: 18px; } .ocd-app .ocd-modal { display: none; position: fixed; inset: 0; z-index: 1000; background: color-mix(in srgb, #000 45%, transparent); padding: 5vh 4vw; align-items: center; justify-content: center; } .ocd-app .ocd-modal.ocd-modal-open { display: flex; } .ocd-app .ocd-modal-dialog { width: min(1100px, 100%); max-height: 90vh; overflow-y: auto; margin: 0; position: relative; } .ocd-app .ocd-modal-close { appearance: none; border: 1px solid var(--ont-border); background: var(--ocd-surface); color: var(--ont-text); width: 40px; height: 40px; border-radius: 999px; font-size: 24px; line-height: 1; cursor: pointer; flex: 0 0 auto; } .ocd-app .ocd-modal-close:hover { background: var(--ocd-surface-2); } .ocd-app .ocd-modal-close:focus-visible { outline: none; box-shadow: var(--ocd-focus-ring); } .ocd-app .ocd-mono { font-family: var(--ont-font-mono); font-size: 12.5px; } /* ========================= Filter controls ========================= */ .ocd-app .ocd-filters { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; } .ocd-app .ocd-filter { display: flex; flex-direction: column; gap: 8px; min-width: 240px; } .ocd-app .ocd-filter-actions { min-width: auto; } .ocd-app .ocd-batch-row--selected { outline: 2px solid var(--ocd-accent-border); outline-offset: -2px; background: var(--ocd-accent-bg); } .ocd-app .ocd-preflight-list { display: grid; gap: var(--ocd-space-3); } .ocd-app .ocd-preflight-card { border: 1px solid var(--ont-border); border-radius: var(--ocd-radius-sm); background: var(--ocd-surface-2); padding: var(--ocd-space-3); } .ocd-app .ocd-preflight-header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ocd-space-3); flex-wrap: wrap; } .ocd-app .ocd-preflight-title { margin: 0; font-size: 15px; font-weight: 700; } .ocd-app .ocd-preflight-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--ocd-space-3); margin-top: var(--ocd-space-3); } .ocd-app .ocd-preflight-block { display: flex; flex-direction: column; gap: 6px; } .ocd-app .ocd-preflight-import-list { display: grid; gap: 10px; } .ocd-app .ocd-preflight-import-row { display: grid; gap: 8px; border: 1px solid var(--ont-border); border-radius: var(--ocd-radius-sm); background: var(--ocd-surface); padding: 10px; } .ocd-app .ocd-preflight-import-attachment-list { display: grid; gap: 8px; } .ocd-app .ocd-preflight-import-attachment { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .ocd-app .ocd-checkbox-list { display: grid; gap: 6px; } .ocd-app .ocd-checkbox { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; } .ocd-app .ocd-chip-list { display: flex; flex-wrap: wrap; gap: 8px; } .ocd-app .ocd-chip { display: inline-flex; align-items: center; border: 1px solid var(--ont-border); border-radius: 999px; padding: 4px 10px; font-size: 12px; background: var(--ocd-surface); } .ocd-app .ocd-chip-subtle { background: var(--ocd-surface-2); } .ocd-app .ocd-chip-list-compact { gap: 6px; } .ocd-app .ocd-chip-criterion { font-size: 11px; line-height: 1.25; } .ocd-app .ocd-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 0 0 var(--ocd-space-3) 0; } .ocd-app .ocd-summary-label { font-size: 12px; font-weight: 700; color: var(--ont-muted); text-transform: uppercase; letter-spacing: 0.04em; } .ocd-app .ocd-summary-value { margin: 8px 0; font-size: 20px; font-weight: 700; color: var(--ont-text); } .ocd-app .ocd-standards-group { margin-top: var(--ocd-space-3); } .ocd-app .ocd-standards-group-title { margin: 0 0 10px 0; font-size: 14px; font-weight: 700; } .ocd-app .ocd-standards-pass-group { border: 1px solid var(--ont-border); border-radius: var(--ocd-radius-sm); background: var(--ocd-surface-2); padding: 12px; } .ocd-app .ocd-standards-pass-group summary { cursor: pointer; font-weight: 700; color: var(--ont-text); } .ocd-app .ocd-standards-pass-group[open] summary { margin-bottom: 12px; } .ocd-app .ocd-table-wide { width: 100%; } .ocd-app .ocd-table-title-cell { font-weight: 700; } .ocd-app .ocd-curation-workspace #curationFiltersContainer { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--ont-border); } .ocd-app .ocd-curation-workspace #curationTableContainer:empty, .ocd-app .ocd-curation-workspace #curationFiltersContainer[hidden] + #curationTableContainer:empty { display: none; } .ocd-app .ocd-resource-column { width: 36%; } .ocd-app .ocd-resource-iri { overflow-wrap: anywhere; word-break: break-word; } .ocd-app .ocd-criteria-column { width: 15%; font-size: 12px; } .ocd-app .ocd-resource-detail-section + .ocd-resource-detail-section { margin-top: 14px; } .ocd-app .ocd-collapsible-section { border: 1px solid var(--ont-border); border-radius: var(--ocd-radius-sm); background: var(--ocd-surface-2); padding: 12px; } .ocd-app .ocd-collapsible-section summary { cursor: pointer; font-weight: 700; color: var(--ont-text); list-style: none; } .ocd-app .ocd-collapsible-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ocd-app .ocd-collapsible-section summary::-webkit-details-marker { display: none; } .ocd-app .ocd-collapsible-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .ocd-app .ocd-collapsible-summary::before { content: '+'; font-weight: 700; color: var(--ont-muted); } .ocd-app .ocd-collapsible-section[open] > .ocd-collapsible-summary { margin-bottom: 12px; } .ocd-app .ocd-collapsible-section[open] > .ocd-collapsible-summary::before { content: '−'; } .ocd-app .ocd-collapsible-nested { margin-top: 12px; background: var(--ocd-surface); } .ocd-app .ocd-editor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .ocd-app .ocd-filter-span-2 { grid-column: 1 / -1; } .ocd-app .ocd-inline-field-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ocd-app .ocd-inline-field-actions .ocd-select { flex: 1 1 220px; } .ocd-app .ocd-summary-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; padding: 4px 10px; border: 1px solid var(--ont-border); border-radius: 999px; background: var(--ocd-surface); color: var(--ont-muted); font-size: 12px; font-weight: 650; } .ocd-app .ocd-resource-deprecate-fields { display: none; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; padding-left: 28px; } .ocd-app .ocd-filter-span-2:has(input[data-resource-deprecate-toggle]:checked) .ocd-resource-deprecate-fields { display: grid; } .ocd-app .ocd-resource-meta-list { display: grid; gap: 8px; margin: 0; } .ocd-app .ocd-resource-meta-row { display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: 12px; } .ocd-app .ocd-resource-meta-row dt, .ocd-app .ocd-resource-meta-row dd { margin: 0; } .ocd-app .ocd-resource-meta-row dt { color: var(--ont-muted); font-weight: 700; } .ocd-app .ocd-resource-meta-row dd { word-break: break-word; } .ocd-site-footer { max-width: 70%; margin: 0 auto 2rem auto; color: var(--ont-text); } .ocd-site-footer-notice { border: 1px solid var(--ont-border); border-radius: var(--ocd-radius); background: var(--ocd-surface); box-shadow: var(--ocd-shadow-sm); padding: var(--ocd-space-3) var(--ocd-space-4); } .ocd-site-footer-notice summary { cursor: pointer; font-weight: 700; } .ocd-site-footer-notice p { margin: 0.75rem 0 0 0; line-height: 1.5; } .ocd-site-footer-meta { margin: 0.75rem 0 0 0; text-align: right; color: var(--ont-muted); } .ocd-app .ocd-edit-session-grid { display: grid; grid-template-columns: minmax(240px, 0.9fr) minmax(260px, 1.1fr) minmax(320px, 1.4fr); gap: 14px; margin-top: 14px; } .ocd-app .ocd-edit-session-card { border: 1px solid var(--ont-border); border-radius: var(--ocd-radius-sm); background: var(--ocd-surface-2); padding: 14px; } .ocd-app .ocd-edit-session-card-staged { min-width: 0; } .ocd-app .ocd-edit-session-card-actions { margin-top: 14px; } .ocd-app .ocd-staged-edit-list { margin: 0; padding-left: 18px; } .ocd-app .ocd-staged-edit-list li, .ocd-app .ocd-edit-session-card .ocd-mono { overflow-wrap: anywhere; word-break: break-word; } @media (max-width: 1100px) { .ocd-app .ocd-edit-session-grid { grid-template-columns: 1fr; } .ocd-app .ocd-detail-facts-label { width: 180px; } }