script-build-and-framework-tmp/visualization-old/backend/app/module_audit/static/styles.css

: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; }
}