:root { color-scheme: dark; --bg: #101114; --canvas: #15171b; --surface: #202228; --raised: #292c33; --border: #383c45; --text: #f2f3f5; --muted: #adb2bd; --subtle: #777e8c; --accent: #ff6d5a; --read: #62a8ff; --success: #63c883; --warning: #f4c152; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; background-color: var(--bg); background-image: radial-gradient(circle at 1px 1px, #2b2e35 1px, transparent 0); background-size: 22px 22px; } button, summary { font: inherit; } .auditHeader { min-height: 116px; padding: 24px 30px; display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; background: rgba(21, 23, 27, .97); border-bottom: 1px solid var(--border); } .headerIntro { min-width: 0; } .auditHeader h1 { margin: 4px 0 6px; font-size: 24px; line-height: 1.25; } .auditHeader p { margin: 0; color: var(--muted); font-size: 14px; } .eyeline { color: var(--accent); font-size: 13px; font-weight: 700; } .auditToolbar { position: sticky; top: 0; z-index: 30; min-height: 52px; padding: 8px 18px; display: flex; align-items: center; gap: 12px 18px; background: rgba(25, 27, 32, .98); border-bottom: 1px solid var(--border); box-shadow: 0 8px 20px rgba(0,0,0,.20); } .toolbarRun { flex: none; color: #dfe2e7; font-size: 13px; } .moduleJump, .sourceFilter { display: flex; align-items: center; gap: 8px; color: #c7cbd3; font-size: 12px; font-weight: 700; } .moduleJump > span, .sourceFilter > span { flex: none; white-space: nowrap; } .moduleJump { min-width: 300px; flex: 1 1 520px; max-width: 620px; } .moduleJump select { width: 100%; } .moduleJump select, .sourceFilter select { height: 34px; padding: 0 9px; color: var(--text); background: var(--surface); border: 1px solid #4a4f5b; border-radius: 7px; font: 12px/1.2 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .sourceFilter select { min-width: 94px; } .moduleJump select:hover:not(:disabled), .sourceFilter select:hover { border-color: #666d7b; background: #252830; } .moduleJump select:focus-visible, .sourceFilter select:focus-visible { outline: 2px solid var(--read); outline-offset: 2px; border-color: var(--read); } .moduleJump select:disabled { cursor: wait; color: var(--subtle); opacity: .72; } .compactToggle { flex: none; min-height: 34px; padding: 0 10px; display: inline-flex; align-items: center; gap: 7px; color: #e3e6eb; background: #24272d; border: 1px solid #484d58; border-radius: 7px; cursor: pointer; font-size: 12px; font-weight: 700; } .compactToggle:hover { background: #2a2e36; border-color: #626977; } .compactToggle:focus-within { outline: 2px solid var(--read); outline-offset: 2px; } .compactToggle input { width: 15px; height: 15px; margin: 0; accent-color: var(--read); } .runSummary { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px 14px; color: var(--muted); font-size: 13px; } .runSummary strong { color: var(--text); font-size: 15px; } .runSummary em { color: var(--success); font-style: normal; } main { width: 100%; min-width: 1080px; } .columnHeader { position: sticky; top: 52px; z-index: 20; display: grid; grid-template-columns: minmax(320px, .92fr) minmax(360px, 1fr) minmax(430px, 1.18fr); background: #191b20; border-bottom: 1px solid var(--border); box-shadow: 0 8px 24px rgba(0,0,0,.22); } .columnHeader strong { padding: 14px 18px; color: #d8dbe1; font-size: 13px; } .columnHeader strong + strong { border-left: 1px solid var(--border); } .auditGroup { padding-bottom: 24px; } .groupHeader { display: flex; align-items: center; gap: 12px; padding: 22px 30px 10px; } .groupHeader h2 { margin: 0; font-size: 18px; } .groupHeader span { color: var(--subtle); font-size: 12px; } .moduleRow { scroll-margin-top: 108px; margin: 0 18px 16px; background: var(--canvas); border: 1px solid var(--border); border-radius: 10px; overflow: clip; contain: layout paint style; box-shadow: 0 10px 30px rgba(0,0,0,.14); transition: border-color 180ms ease-out, box-shadow 180ms ease-out; } .moduleRow:focus { outline: none; } .moduleRow.isJumpTarget { border-color: var(--read); box-shadow: 0 0 0 2px rgba(98, 168, 255, .28), 0 14px 36px rgba(0,0,0,.24); } .moduleRow > header { min-height: 66px; padding: 13px 18px; display: flex; justify-content: space-between; align-items: center; gap: 20px; background: #1c1e23; border-bottom: 1px solid var(--border); } .moduleRow > header span { display: block; color: var(--subtle); font-size: 12px; } .moduleRow > header h3 { margin: 3px 0 0; font-size: 16px; } .moduleMeta { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; } .moduleMeta code, .readMeta code { color: #c7cbd3; font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; } .moduleStreamState { min-height: 23px; padding: 3px 7px; display: inline-flex !important; align-items: center; border: 1px solid #48505d; border-radius: 999px; color: #cbd5e2 !important; background: #252932; font-size: 10px !important; } .moduleRow.isLoaded .moduleStreamState { color: #9be2b1 !important; border-color: #315d3f; background: #1e3527; } .moduleLoadButton, .locateContextButton { border: 1px solid #555b67; border-radius: 6px; color: #dfe3e9; background: #272a31; cursor: pointer; font-weight: 700; } .moduleLoadButton { min-height: 30px; padding: 4px 9px; font-size: 11px; } .moduleLoadButton:hover:not(:disabled), .locateContextButton:hover { color: #fff; border-color: #748093; background: #30343d; } .moduleLoadButton:focus-visible, .locateContextButton:focus-visible { outline: 2px solid var(--read); outline-offset: 2px; } .moduleLoadButton:disabled { cursor: wait; opacity: .64; } .moduleRow.isLoaded .moduleLoadButton { display: none; } .moduleDeferred { min-height: 48px; padding: 13px 18px; display: flex; align-items: center; color: var(--subtle); font-size: 12px; } .moduleDeferred .cellLoading { width: min(520px, 100%); padding: 0; } .variant { padding: 3px 7px; border: 1px solid #555b67; border-radius: 999px; color: #cbd0d9 !important; } .moduleColumns { display: grid; grid-template-columns: minmax(320px, .92fr) minmax(360px, 1fr) minmax(430px, 1.18fr); align-items: start; } .moduleColumns > section { min-width: 0; padding: 14px; } .moduleColumns > section + section { border-left: 1px solid var(--border); } .correspondenceRows { display: block; } .correspondenceRow { display: grid; grid-template-columns: minmax(320px, .92fr) minmax(360px, 1fr) minmax(430px, 1.18fr); align-items: start; } .correspondenceRow + .correspondenceRow { border-top: 1px solid #464b56; } .correspondenceCell { min-width: 0; padding: 14px; } .correspondenceCell + .correspondenceCell { border-left: 1px solid var(--border); } .columnLabel { display: none; margin: 0 0 10px; color: var(--muted); font-size: 12px; font-weight: 700; } .contentBox { margin-bottom: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .contentBox:last-child { margin-bottom: 0; } .contentBox > summary { cursor: pointer; list-style: none; padding: 11px 12px; display: flex; flex-direction: column; gap: 7px; color: var(--text); } .contentBox > summary::-webkit-details-marker { display: none; } .contentBox > summary > .summaryLine { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .contentBox > summary b { font-size: 13px; } .contentBox > summary b::before { content: "›"; display: inline-block; width: 16px; color: var(--muted); font-size: 19px; line-height: 10px; transform: rotate(0); transform-origin: center; transition: transform 160ms ease-out; } .contentBox[open] > summary b::before { transform: rotate(90deg); } .contentBox > summary small { flex: none; color: var(--subtle); font-size: 11px; font-weight: 500; } .contentBox > summary em { color: #c2c6ce; font-size: 12px; font-style: normal; line-height: 1.55; } .contentBody { padding: 0 12px 13px; border-top: 1px solid #30333b; } .contentBody p, .contentBody pre { margin: 10px 0 0; color: #dfe1e5; font-size: 13px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; } .contentBody pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .tone-used { border-color: #66433e; } .tone-used > summary b { color: #ff8d7e; } .tone-read { border-color: #344f70; } .tone-read > summary b { color: #8fc0ff; } .tone-database { border-color: #3a5272; } .tone-database > summary b { color: #9bc8ff; } .tone-function { border-color: #38605d; } .tone-function > summary b { color: #8fd8cf; } .tone-log { border-color: #655735; } .tone-log > summary b { color: #f1ce7a; } .tone-context { background: #1d1f24; } .tone-muted { opacity: .82; } .tone-warning { border-color: #695a30; } .displayCard { padding: 12px 0 2px; } .displayCard h4 { margin: 0 0 12px; font-size: 16px; } .displayField { display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 10px; padding: 9px 0; border-top: 1px solid #343740; } .displayField b { color: var(--muted); font-size: 12px; } .displayField p, .displayField pre { margin: 0; } .businessDetailBody { padding-top: 2px; } .businessPart { padding: 13px 0; border-top: 1px solid #343740; } .businessPart:first-child { border-top: 0; } .businessPart h4 { margin: 0 0 8px; color: #f1a196; font-size: 14px; line-height: 1.4; } .businessPart p, .businessPart pre { margin: 0; } .technicalDetailBody { padding-top: 2px; } .technicalPart { padding: 12px 0; border-top: 1px solid #343740; } .technicalPart:first-child { border-top: 0; } .technicalPart h4 { margin: 0 0 7px; color: #9bc8ff; font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; } .technicalPart p, .technicalPart pre { margin: 0; } .correspondenceTarget { margin-inline: -8px; padding-inline: 9px; border-left: 3px solid var(--correlation-color); border-radius: 5px; background: var(--correlation-bg); cursor: pointer; transition: opacity 160ms ease-out, box-shadow 160ms ease-out, background 160ms ease-out; } .correspondenceTarget:focus-visible, .correlationChip:focus-visible, .correlationMark:focus-visible { outline: 2px solid var(--correlation-color); outline-offset: 2px; } .correlationNumber { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 18px; margin-right: 7px; border-radius: 4px; color: #101114; background: var(--correlation-color); font-size: 10px; font-weight: 800; vertical-align: 1px; } .correlationLinks { display: flex; flex-wrap: wrap; gap: 6px; } .correlationChip { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 3px 8px; border: 1px solid var(--correlation-color); border-radius: 999px; color: var(--correlation-color); background: var(--correlation-bg); cursor: pointer; font-size: 10px; font-weight: 650; } .correlationChip b { color: inherit !important; font-size: 10px !important; } .correlationChip b::before { content: none !important; } .correlationMark { padding: 1px 3px; color: #fff; background: var(--correlation-bg-strong); border-bottom: 2px solid var(--correlation-color); border-radius: 3px; cursor: pointer; } .correlation-0 { --correlation-color: #ff8c7c; --correlation-bg: rgba(255, 140, 124, .10); --correlation-bg-strong: rgba(255, 140, 124, .34); } .correlation-1 { --correlation-color: #78b8ff; --correlation-bg: rgba(120, 184, 255, .10); --correlation-bg-strong: rgba(120, 184, 255, .32); } .correlation-2 { --correlation-color: #70d7aa; --correlation-bg: rgba(112, 215, 170, .10); --correlation-bg-strong: rgba(112, 215, 170, .30); } .correlation-3 { --correlation-color: #d5a2ff; --correlation-bg: rgba(213, 162, 255, .10); --correlation-bg-strong: rgba(213, 162, 255, .30); } .correlation-4 { --correlation-color: #f0ca67; --correlation-bg: rgba(240, 202, 103, .10); --correlation-bg-strong: rgba(240, 202, 103, .30); } .correlation-5 { --correlation-color: #75d8e8; --correlation-bg: rgba(117, 216, 232, .10); --correlation-bg-strong: rgba(117, 216, 232, .30); } .correlation-6 { --correlation-color: #ff9dcb; --correlation-bg: rgba(255, 157, 203, .10); --correlation-bg-strong: rgba(255, 157, 203, .30); } .correlation-7 { --correlation-color: #add574; --correlation-bg: rgba(173, 213, 116, .10); --correlation-bg-strong: rgba(173, 213, 116, .30); } .isCompact [data-column="use"] .sourceLinks { display: none; } .compactPanel { overflow: hidden; background: #1c1e23; border: 1px solid var(--border); border-radius: 8px; } .compactPanel > header { min-height: 42px; padding: 9px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #343740; } .compactPanel > header h4 { margin: 0; color: #e8eaee; font-size: 13px; } .compactPanel > header span { color: var(--subtle); font-size: 11px; } .lineageItem { margin: 0; padding: 11px 12px; background: transparent; border: 0; border-top: 1px solid #31343c; border-radius: 0; } .lineageItem:first-of-type { border-top: 0; } .lineageItem.correspondenceTarget { margin: 0; padding: 11px 12px; border-left: 0; border-radius: 0; background: var(--correlation-bg); } .lineageItem > header { display: flex; align-items: center; gap: 7px; } .lineageItem > header strong { color: #eef0f3; font-size: 12px; } .lineageItem > header em { margin-left: auto; color: var(--correlation-color, var(--subtle)); font-size: 10px; font-style: normal; } .lineageSources { padding-top: 8px; display: grid; gap: 7px; } .lineageSource { min-width: 0; display: grid; gap: 5px; } .lineageSource small { color: var(--subtle); font-size: 11px; line-height: 1.45; } .lineageSourceSummary { grid-template-columns: max-content minmax(0, 1fr); align-items: start; column-gap: 8px; } .lineageSource + .lineageSource { padding-top: 9px; border-top: 1px solid #333741; } .lineageSourceHeader { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .locateContextButton { flex: none; min-height: 27px; padding: 3px 8px; font-size: 10px; } .sourceKindPill { display: inline-flex; width: fit-content; align-items: center; min-height: 22px; padding: 2px 7px; border: 1px solid currentColor; border-radius: 999px; font-size: 10px; font-weight: 700; } .pathList { display: flex; flex-wrap: wrap; gap: 5px; } .pathList code { max-width: 100%; padding: 3px 6px; color: #dce7f7; background: #2a3039; border: 1px solid #3b4655; border-radius: 4px; font: 10px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; } .sourceDigest { padding: 11px 12px; border-top: 1px solid #31343c; } .sourceDigest:first-of-type { border-top: 0; } .sourceDigest > header { display: flex; align-items: center; gap: 7px; } .sourceDigest > header strong { min-width: 0; color: #eef0f3; font-size: 12px; overflow-wrap: anywhere; } .sourceDigest > header em { margin-left: auto; flex: none; max-width: 44%; color: var(--subtle); font-size: 10px; font-style: normal; text-align: right; overflow-wrap: anywhere; } .sourceDigest > p { margin: 8px 0 0; color: #c5c9d1; font-size: 11px; line-height: 1.5; } .sourceDigest.isLocated { outline: 2px solid var(--active-correlation-color, var(--read)); outline-offset: -2px; animation: locate-pulse 680ms ease-out 2; } .rawField.isLocated { outline: 2px solid var(--active-correlation-color, var(--read)); outline-offset: 2px; border-radius: 5px; animation: locate-pulse 680ms ease-out 2; } .readValueEntry { padding: 8px 0 2px; } .readValueEntry + .readValueEntry { margin-top: 5px; border-top: 1px solid #343842; } .readValueMeta { padding-bottom: 6px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px 9px; } .readValueMeta > span { color: #cdd2da; font-size: 11px; font-weight: 700; } .readValueMeta code, .recordLocation code, .rawField code { color: #dce7f7; font: 10px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; } .fieldActualValue { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 8px; padding: 7px 9px; background: rgba(255,255,255,.025); border-radius: 5px; } .fieldActualValue > b { color: var(--muted); font-size: 10px; } .fieldActualValue p, .fieldActualValue pre { margin: 0; color: #eef0f3; font-size: 11px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; } .valueDisclosure { background: rgba(255,255,255,.025); border-radius: 5px; } .valueDisclosure > summary { min-height: 34px; padding: 7px 9px; display: grid; grid-template-columns: max-content 1fr; gap: 3px 9px; cursor: pointer; list-style: none; } .valueDisclosure > summary::-webkit-details-marker { display: none; } .valueDisclosure > summary > span { color: var(--muted); font-size: 10px; font-weight: 700; } .valueDisclosure > summary > span::before { content: "›"; display: inline-block; width: 13px; font-size: 16px; line-height: 9px; transform-origin: center; transition: transform 160ms ease-out; } .valueDisclosure[open] > summary > span::before { transform: rotate(90deg); } .valueDisclosure > summary > small { justify-self: end; color: var(--subtle); font-size: 10px; } .valueDisclosure > summary > em { grid-column: 1 / -1; color: #cfd3db; font-size: 11px; font-style: normal; line-height: 1.5; } .valueDisclosure .valueMatch, .fieldActualValue .valueMatch { padding: 1px 2px; color: #fff; background: rgba(255, 109, 90, .42); border-radius: 2px; } .valueDisclosure[open] > summary > em { display: none; } .valueDisclosureBody { padding: 8px 9px 10px; border-top: 1px solid #363a43; } .valueDisclosureBody p, .valueDisclosureBody pre { margin: 0; color: #eef0f3; font-size: 11px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; } .moreFieldsNotice { display: block; padding-top: 7px; } .lineageUnproven { display: block; padding: 7px 9px 2px; color: var(--subtle); font-size: 10px; line-height: 1.45; } .recordLocation { margin: 9px 0 2px; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; } .recordLocation > span { margin-right: 3px; color: var(--muted); font-size: 10px; font-weight: 700; } .recordLocation code { padding: 3px 5px; background: #292d35; border-radius: 4px; } .rawFields { padding-top: 7px; } .rawField { padding: 9px 0; border-top: 1px solid #343842; } .rawField > header { padding-bottom: 6px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .rawField > header > div { min-width: 0; display: grid; gap: 3px; } .rawField > header span { color: #dfe2e7; font-size: 11px; font-weight: 700; } .rawField .correlationLinks { justify-content: flex-end; } .lineageRelation { flex: none; margin-left: auto; color: #8fc0ff; font-size: 10px; font-style: normal; } .exactFieldMap { margin: 10px 0 14px; padding: 10px 11px; border: 1px solid #3a526d; border-radius: 7px; background: rgba(98,168,255,.045); } .exactFieldMap > h4 { margin: 0 0 7px; color: #9bc8ff; font-size: 12px; } .digestFields { padding-top: 8px; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 7px; align-items: start; } .digestFields > b { color: var(--muted); font-size: 10px; line-height: 1.5; } .digestFields > span { color: var(--subtle); font-size: 11px; line-height: 1.45; } .compactEmpty { min-height: 78px; padding: 18px; display: flex; align-items: center; justify-content: center; color: var(--subtle); background: #1c1e23; border: 1px dashed #454a55; border-radius: 8px; font-size: 12px; text-align: center; } .sourceLinks { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 6px; } .sourceTag, .usageTag { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 9px; border-radius: 999px; font-size: 11px; line-height: 1.2; } .sourceTag { cursor: pointer; border: 1px solid currentColor; font-weight: 700; transition: background 160ms ease-out, color 160ms ease-out, opacity 160ms ease-out; } .sourceTag:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .source-database { color: #9bc8ff; background: rgba(98, 168, 255, .09); } .source-function { color: #8fd8cf; background: rgba(82, 190, 176, .09); } .source-log { color: #f1ce7a; background: rgba(241, 206, 122, .09); } .source-unknown { color: #c6cad2; background: rgba(198, 202, 210, .08); } .source-database[aria-pressed="true"] { color: #101114; background: #9bc8ff; } .source-function[aria-pressed="true"] { color: #101114; background: #8fd8cf; } .source-log[aria-pressed="true"] { color: #101114; background: #f1ce7a; } .source-unknown[aria-pressed="true"] { color: #101114; background: #c6cad2; } .usageTag { color: #c7cbd3; background: #30333a; } .readItem { padding: 11px 0; border-top: 1px solid #343740; } .readItem:first-child { border-top: 0; } .readItemHeader { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; } .readItemHeader b { color: #e7e9ed; font-size: 13px; } .readItemHeader code { color: var(--muted); font: 11px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; } .readMeta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 10px; padding-top: 8px; } .readMeta > span:not(.readStatus) { color: var(--subtle); font-size: 11px; } .readStatus { padding: 3px 7px; border-radius: 999px; color: #dbeeff; background: #29445f; font-size: 11px; } .status-fallback { color: #d9dce2; background: #424751; } .status-calculation-input { color: #fff0bc; background: #5e4e20; } .status-unconfirmed, .status-missing { color: #ffe1d4; background: #603528; } .contextTree { padding-top: 10px; font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; } .contextTree dl { margin: 0; } .contextTree ol { margin: 4px 0; padding-left: 22px; } .contextEntry { display: grid; grid-template-columns: minmax(128px, .32fr) minmax(0, 1fr); gap: 10px; padding: 4px 0; } .contextEntry dt { color: #aeb4c0; overflow-wrap: anywhere; } .contextEntry dd { margin: 0; color: #d9dce3; overflow-wrap: anywhere; } .contextEntry.isDim { opacity: .34; } .contextEntry.isRead { padding: 5px 7px; margin: 2px -7px; border-radius: 5px; background: rgba(98, 168, 255, .09); opacity: 1; } .contextEntry.hasCorrelationData { opacity: 1; } mark { padding: 1px 2px; color: #fff; background: rgba(255, 109, 90, .48); border-radius: 2px; } .moduleRow .contentBox { transition: opacity 160ms ease-out, border-color 160ms ease-out, box-shadow 160ms ease-out; } .moduleRow.hasSourceFocus .contentBox { opacity: .3; } .moduleRow.hasSourceFocus .contentBox.isSourceMatch { opacity: 1; box-shadow: 0 0 0 1px rgba(242, 243, 245, .2); } .moduleRow.hasCorrelationFocus [data-correlation-id], .moduleRow.hasCorrelationFocus [data-correlation-ids] { opacity: .18; } .moduleRow.hasCorrelationFocus [data-correlation-id].isCorrelationMatch, .moduleRow.hasCorrelationFocus [data-correlation-ids].isCorrelationMatch { opacity: 1; box-shadow: 0 0 0 2px var(--active-correlation-color, var(--correlation-color)); } .empty { color: var(--subtle) !important; } .loadError, .fatal { margin: 18px; padding: 18px; color: #ffd8d2; background: #35211f; border: 1px solid #643a34; border-radius: 8px; } .loadingBlock, .cellLoading { padding: 18px; } .loadingBlock i, .cellLoading i { display: block; height: 12px; margin: 9px 0; border-radius: 4px; background: linear-gradient(90deg, #25282e, #333740, #25282e); background-size: 200% 100%; animation: loading 1.3s linear infinite; } .loadingBlock i:nth-child(2), .cellLoading i:nth-child(2) { width: 72%; } @keyframes loading { to { background-position: -200% 0; } } @keyframes locate-pulse { 50% { box-shadow: inset 0 0 0 2px var(--active-correlation-color, var(--read)); } } @media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important; } } @media (max-width: 900px) { main { min-width: 0; } .auditHeader { align-items: flex-start; flex-direction: column; padding: 20px; } .headerIntro { width: 100%; } .auditToolbar { padding: 8px 10px; flex-wrap: wrap; } .toolbarRun { display: none; } .moduleJump { min-width: 0; max-width: none; flex: 1 1 100%; } .moduleJump select { width: 100%; } .compactToggle { flex: 1 1 auto; justify-content: center; } .sourceFilter { flex: 1 1 auto; } .sourceFilter select { flex: 1; } .runSummary { justify-content: flex-start; } .columnHeader { display: none; } .groupHeader { padding-inline: 14px; } .moduleRow { scroll-margin-top: 104px; margin-inline: 10px; } .moduleRow > header { align-items: flex-start; flex-direction: column; } .moduleMeta { justify-content: flex-start; } .lineageSourceHeader { align-items: flex-start; flex-direction: column; } .locateContextButton { min-height: 34px; } .fieldActualValue { grid-template-columns: 1fr; } .moduleColumns { display: block; } .moduleColumns > section + section { border-left: 0; border-top: 1px solid var(--border); } .correspondenceRow { display: block; } .correspondenceCell + .correspondenceCell { border-left: 0; border-top: 1px solid var(--border); } .columnLabel { display: block; } }