dsh-mnemon-source-memory-spaces 0.5.2 → 0.5.3

package/presentation/page.module.css

@@ -0,0 +1,486 @@
+.entityHeading > span,
+.inspectorHeading > span {
+  color: var(--mn-faint); font: 650 9px/1.2 var(--mn-code); letter-spacing: .12em; text-transform: uppercase;
+}
+.memoryHeaderActions { display: flex; align-items: center; gap: 7px; }
+.memoryHeaderActions > button { white-space: nowrap; }
+.asyncRegion { position: relative; min-width: 0; }
+.asyncResults { position: relative; min-width: 0; min-height: 120px; }
+.asyncPlaceholder { position: relative; display: grid; min-height: 220px; place-items: center; border: 1px solid var(--mn-line); border-radius: 13px; color: var(--mn-muted); background: var(--mn-layer-1); }
+.muted { padding: 16px 0; color: var(--mn-faint); font-size: 12px; }
+
+.readSources { display: grid; gap: 8px; margin: 0 0 14px; padding: 11px 12px; border: 1px solid var(--mn-line); border-radius: 11px; background: color-mix(in srgb, var(--mn-layer-1) 72%, transparent); }
+.readSources > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
+.readSources > header > div { display: grid; gap: 2px; }
+.readSources > header strong { font-size: 11px; }
+.readSources > header p { max-width: 92ch; margin: 0; color: var(--mn-muted); font-size: 9.5px; line-height: 1.45; }
+.readSources > header > button { min-height: 26px; flex: 0 0 auto; border: 1px solid var(--mn-line); border-radius: 7px; padding: 0 8px; color: var(--mn-muted); background: var(--mn-layer-2); font-size: 9px; cursor: pointer; }
+.readSources > header > button[data-selected] { border-color: color-mix(in srgb, var(--mn-accent) 42%, var(--mn-line)); color: var(--mn-accent); background: color-mix(in srgb, var(--mn-accent) 7%, var(--mn-layer-2)); }
+.readSources > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 6px; }
+.readSourceCard,
+.bodyCard,
+.metadataList > label { border: 1px solid var(--mn-line); border-radius: 8px; color: var(--mn-text); background: linear-gradient(90deg, color-mix(in srgb, var(--mn-provider-color) 5%, var(--mn-layer-1)), var(--mn-layer-1) 34%); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--mn-provider-color) 68%, transparent); }
+.readSourceCard { display: grid; min-width: 0; min-height: 58px; grid-template-columns: 7px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 8px 7px 11px; text-align: left; }
+button.readSourceCard { cursor: pointer; }
+button.readSourceCard:hover { border-color: color-mix(in srgb, var(--mn-provider-color) 32%, var(--mn-line-strong)); background: linear-gradient(90deg, color-mix(in srgb, var(--mn-provider-color) 8%, var(--mn-hover)), var(--mn-hover) 40%); }
+.readSourceCard[data-selected] { border-color: color-mix(in srgb, var(--mn-accent) 48%, var(--mn-line)); box-shadow: inset 3px 0 0 var(--mn-provider-color), inset 0 0 0 1px color-mix(in srgb, var(--mn-accent) 10%, transparent); }
+.readSourceSignal { width: 7px; height: 7px; border-radius: 50%; background: var(--mn-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mn-success) 12%, transparent); }
+.readSourceCard[data-mode="projection"] .readSourceSignal,
+.readSourceCard[data-mode="enumerable"] .readSourceSignal { background: #6574d9; box-shadow: 0 0 0 3px color-mix(in srgb, #6574d9 14%, transparent); }
+.readSourceCard[data-mode="query-only"] .readSourceSignal { background: #c38a32; box-shadow: 0 0 0 3px color-mix(in srgb, #c38a32 14%, transparent); }
+.readSourceCard[data-status="unavailable"] .readSourceSignal,
+.readSourceCard[data-status="unsupported"] .readSourceSignal { background: var(--mn-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mn-danger) 12%, transparent); }
+.readSourceCard[data-status="empty"] .readSourceSignal { background: var(--mn-faint); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mn-faint) 12%, transparent); }
+.readSourceIdentity,
+.readSourceState { display: grid; min-width: 0; gap: 1px; }
+.readSourceIdentity strong { overflow: hidden; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
+.readSourceMeta { display: flex; min-width: 0; align-items: center; gap: 5px; margin-top: 3px; }
+.readSourceMeta > small { overflow: hidden; color: var(--mn-faint); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
+.readSourceState { justify-items: end; text-align: right; }
+.readSourceState em { width: fit-content; padding: 2px 5px; border-radius: 999px; color: var(--mn-accent); background: color-mix(in srgb, var(--mn-accent) 9%, transparent); font: 650 8px var(--mn-code); font-style: normal; white-space: nowrap; }
+.readSourceState small { color: var(--mn-faint); font-size: 8px; white-space: nowrap; }
+
+.bodyDirectory { position: relative; margin-bottom: 12px; padding: 12px 14px; border: 1px solid var(--mn-line); border-radius: 11px; background: color-mix(in srgb, var(--mn-layer-1) 72%, var(--mn-bg)); }
+.bodyDirectoryHeader { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 10px; }
+.bodyDirectoryHeader h3 { margin: 1px 0; font-size: 13px; }
+.bodyDirectoryHeader p { margin: 0; color: var(--mn-muted); font-size: 10px; }
+.bodyDirectoryPath { display: block; max-width: min(62vw, 720px); margin-top: 4px; overflow: hidden; color: var(--mn-faint); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
+.bodyDirectoryControls { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 6px; padding-right: 28px; }
+.bodyDirectoryControls > strong { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; color: var(--mn-accent); background: color-mix(in srgb, var(--mn-accent) 9%, transparent); font: 650 9px var(--mn-code); }
+.bodyGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 7px; }
+.bodyDirectoryEmpty { grid-column: 1 / -1; min-height: 92px; display: flex; align-items: center; justify-content: center; gap: 14px; border: 1px dashed color-mix(in srgb, var(--mn-line) 84%, transparent); border-radius: 12px; color: var(--mn-muted); }
+.bodyDirectoryEmpty > span { font-size: 28px; opacity: .6; }
+.bodyDirectoryEmpty strong { display: block; color: var(--mn-text); }
+.bodyDirectoryEmpty p { margin: 3px 0 0; font-size: 10px; }
+.bodyCard { --mn-body-accent: var(--mn-success); min-width: 0; padding: 9px 10px 9px 13px; opacity: .72; transition: opacity .18s, border-color .18s, background-color .18s; }
+.bodyCard[data-active] { opacity: 1; box-shadow: inset 3px 0 0 color-mix(in srgb, var(--mn-provider-color) 78%, transparent); }
+.bodyCard[data-reconnectable] { cursor: pointer; }
+.bodyCard[data-reconnectable]:hover { border-color: color-mix(in srgb, var(--mn-provider-color) 46%, var(--mn-line)); }
+.bodyCard[data-reconnectable]:focus-visible { outline: 2px solid color-mix(in srgb, var(--mn-accent) 58%, transparent); outline-offset: 2px; }
+.bodySignal { width: 7px; height: 7px; border-radius: 50%; background: var(--mn-faint); }
+.bodyCard[data-active] .bodySignal { background: var(--mn-body-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mn-body-accent) 14%, transparent); }
+.bodyCard:not([data-healthy]) .bodySignal { background: var(--mn-danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mn-danger) 12%, transparent); }
+.bodyCard[data-status-loading] .bodySignal { background: var(--mn-faint); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mn-faint) 12%, transparent); }
+.bodyCard[data-reconnecting] .bodySignal { box-sizing: border-box; width: 7px; height: 7px; border: 1.5px solid color-mix(in srgb, var(--mn-provider-color) 24%, transparent); border-top-color: var(--mn-provider-color); background: transparent; box-shadow: none; animation: mnemon-spin .72s linear infinite; }
+.bodyHealth { color: var(--mn-success); font: 650 8px var(--mn-code); letter-spacing: .07em; text-transform: uppercase; }
+.bodyCard:not([data-healthy]) .bodyHealth { color: var(--mn-danger); }
+.bodyCard[data-status-loading] .bodyHealth { color: var(--mn-faint); }
+.mnemonDefaultBadge { width: fit-content; padding: 2px 5px; border: 1px solid color-mix(in srgb, var(--mn-accent) 24%, var(--mn-line)); border-radius: 999px; color: var(--mn-accent); background: color-mix(in srgb, var(--mn-accent) 7%, transparent); font: 650 8px var(--mn-code); white-space: nowrap; }
+.providerBadge { display: inline-flex; width: fit-content; min-height: 17px; max-width: 100%; flex: 0 0 auto; align-items: center; justify-content: center; padding: 2px 6px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--mn-provider-color) 34%, var(--mn-line)); border-radius: 999px; color: color-mix(in srgb, var(--mn-provider-color) 78%, var(--mn-text)); background: color-mix(in srgb, var(--mn-provider-color) 10%, var(--mn-layer-1)); font: 650 8px/11px var(--mn-code); text-align: center; text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; }
+
+.providerBadge,
+.readSourceCard,
+.bodyCard,
+.metadataList > label,
+.graphNode { --mn-provider-color: #64748b; }
+.providerBadge[data-provider="mnemon-native"],
+.readSourceCard[data-provider="mnemon-native"],
+.bodyCard[data-provider="mnemon-native"],
+.metadataList > label[data-provider="mnemon-native"],
+.graphNode[data-provider="mnemon-native"] { --mn-provider-color: #64748b; }
+.providerBadge[data-provider="openviking"],
+.readSourceCard[data-provider="openviking"],
+.bodyCard[data-provider="openviking"],
+.metadataList > label[data-provider="openviking"],
+.graphNode[data-provider="openviking"] { --mn-provider-color: #3b82d0; }
+.providerBadge[data-provider="honcho"],
+.readSourceCard[data-provider="honcho"],
+.bodyCard[data-provider="honcho"],
+.metadataList > label[data-provider="honcho"],
+.graphNode[data-provider="honcho"] { --mn-provider-color: #c44fcf; }
+.providerBadge[data-provider="mem0"],
+.readSourceCard[data-provider="mem0"],
+.bodyCard[data-provider="mem0"],
+.metadataList > label[data-provider="mem0"],
+.graphNode[data-provider="mem0"] { --mn-provider-color: #8b5cf6; }
+.providerBadge[data-provider="hindsight"],
+.readSourceCard[data-provider="hindsight"],
+.bodyCard[data-provider="hindsight"],
+.metadataList > label[data-provider="hindsight"],
+.graphNode[data-provider="hindsight"] { --mn-provider-color: #0891b2; }
+.providerBadge[data-provider="holographic"],
+.readSourceCard[data-provider="holographic"],
+.bodyCard[data-provider="holographic"],
+.metadataList > label[data-provider="holographic"],
+.graphNode[data-provider="holographic"] { --mn-provider-color: #6366d9; }
+.providerBadge[data-provider="retaindb"],
+.readSourceCard[data-provider="retaindb"],
+.bodyCard[data-provider="retaindb"],
+.metadataList > label[data-provider="retaindb"],
+.graphNode[data-provider="retaindb"] { --mn-provider-color: #d08a28; }
+.providerBadge[data-provider="byterover"],
+.readSourceCard[data-provider="byterover"],
+.bodyCard[data-provider="byterover"],
+.metadataList > label[data-provider="byterover"],
+.graphNode[data-provider="byterover"] { --mn-provider-color: #0f9a83; }
+.providerBadge[data-provider="supermemory"],
+.readSourceCard[data-provider="supermemory"],
+.bodyCard[data-provider="supermemory"],
+.metadataList > label[data-provider="supermemory"],
+.graphNode[data-provider="supermemory"] { --mn-provider-color: #df4d72; }
+.bodySwitch { display: flex; min-height: 32px; align-items: center; gap: 6px; border: 0; padding: 0 1px; color: var(--mn-faint); background: transparent; font-size: 9.5px; cursor: pointer; }
+.bodySwitchTrack { position: relative; width: 29px; height: 17px; flex: 0 0 auto; border: 1px solid var(--mn-line-strong); border-radius: 999px; background: var(--mn-layer-2); transition: border-color .18s, background-color .18s; }
+.bodySwitchTrack i { position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--mn-faint); transition: transform .2s cubic-bezier(.2, .8, .2, 1), background-color .18s; }
+.bodySwitch:hover { color: var(--mn-text); }
+.bodySwitch:hover .bodySwitchTrack { border-color: var(--mn-body-accent); }
+.bodySwitch[aria-checked="true"] { color: var(--mn-text); }
+.bodySwitch[aria-checked="true"] .bodySwitchTrack { border-color: color-mix(in srgb, var(--mn-body-accent) 65%, var(--mn-line)); background: color-mix(in srgb, var(--mn-body-accent) 25%, var(--mn-layer-2)); }
+.bodySwitch[aria-checked="true"] .bodySwitchTrack i { background: var(--mn-body-accent); transform: translateX(12px); }
+.bodyCardActions { display: flex; align-items: center; gap: 6px; }
+.bodyCreateForm { gap: 14px; padding-top: 0; }
+.createSection { display: grid; gap: 11px; padding: 13px; border: 1px solid var(--mn-line); border-radius: 11px; background: color-mix(in srgb, var(--mn-layer-2) 42%, var(--mn-layer-1)); }
+.createSectionHeading { display: flex; align-items: flex-start; gap: 9px; }
+.createSectionHeading > span { display: grid; width: 25px; height: 19px; flex: 0 0 auto; place-items: center; border-radius: 6px; color: var(--mn-accent); background: color-mix(in srgb, var(--mn-accent) 9%, transparent); font: 650 8px var(--mn-code); }
+.createSectionHeading > div { display: grid; min-width: 0; gap: 2px; }
+.createSectionHeading strong { color: var(--mn-text); font-size: 11.5px; line-height: 17px; }
+.createSectionHeading small { color: var(--mn-muted); font-size: 9px; line-height: 1.45; }
+.createIdentityGrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: stretch; }
+.createIdentityGrid > label { align-content: start; }
+.createIdentityGrid textarea { min-height: 70px; }
+.strategyForm { gap: 14px; padding-top: 0; }
+.strategyLoading { position: relative; display: flex; min-height: 88px; align-items: center; justify-content: center; border: 1px dashed var(--mn-line); border-radius: 10px; color: var(--mn-muted); font-size: 10px; }
+.strategyLoading .sectionSpinner { top: 9px; right: 9px; }
+.placementMode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 0; padding: 0; border: 0; }
+.placementMode legend { margin-bottom: 5px; color: var(--mn-muted); font-size: 10px; }
+.placementMode label { position: relative; display: grid; min-width: 0; grid-template-columns: 16px minmax(0, 1fr); align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--mn-line); border-radius: 9px; cursor: pointer; background: color-mix(in srgb, var(--mn-layer-2) 62%, transparent); }
+.placementMode label[data-selected] { border-color: color-mix(in srgb, var(--mn-accent) 52%, var(--mn-line)); background: color-mix(in srgb, var(--mn-accent) 5%, var(--mn-layer-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mn-accent) 12%, transparent); }
+.placementMode label[data-disabled] { cursor: not-allowed; opacity: .58; }
+.placementMode input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
+.placementMode span { display: grid; gap: 3px; }
+.placementMode strong { color: var(--mn-text); font-size: 11px; }
+.placementMode strong em { margin-left: 4px; padding: 2px 5px; border-radius: 999px; color: var(--mn-accent); background: color-mix(in srgb, var(--mn-accent) 10%, transparent); font: 650 8px var(--mn-code); font-style: normal; }
+.placementMode small { color: var(--mn-muted); font-size: 9px; line-height: 1.45; }
+.placementPolicy { display: grid; gap: 9px; margin: 0; padding: 11px; border: 1px solid color-mix(in srgb, var(--mn-accent) 26%, var(--mn-line)); border-radius: 10px; background: color-mix(in srgb, var(--mn-accent) 4%, var(--mn-layer-1)); }
+.placementPolicyHeading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
+.placementPolicyHeading > div { display: grid; gap: 2px; }
+.placementPolicyHeading strong { font-size: 11px; }
+.placementPolicyHeading small { color: var(--mn-muted); font-size: 9px; line-height: 1.45; }
+.placementPolicyHeading > span { flex: 0 0 auto; padding: 3px 6px; border: 1px solid color-mix(in srgb, var(--mn-accent) 22%, var(--mn-line)); border-radius: 999px; color: var(--mn-accent); font: 650 8px var(--mn-code); }
+.placementRuleGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
+.capabilityRules { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; }
+.capabilityRules legend { width: 100%; margin-bottom: 1px; color: var(--mn-faint); font-size: 9px; }
+.capabilityRules label { position: relative; display: flex; width: fit-content; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--mn-line); border-radius: 8px; color: var(--mn-muted); background: var(--mn-input); cursor: pointer; }
+.capabilityRules label[data-selected] { border-color: color-mix(in srgb, var(--mn-accent) 42%, var(--mn-line)); color: var(--mn-text); background: color-mix(in srgb, var(--mn-accent) 7%, var(--mn-input)); }
+.capabilityRules input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
+.placementCandidates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
+.placementCandidates > span,
+.placementCandidates > label { position: relative; display: grid; min-width: 0; grid-template-columns: 28px minmax(0, 1fr) 16px; align-items: center; gap: 8px; padding: 8px 9px; border: 1px solid var(--mn-line); border-radius: 8px; background: color-mix(in srgb, var(--mn-layer-2) 70%, transparent); }
+.placementCandidates > label { cursor: pointer; }
+.placementCandidates > [data-selected] { border-color: color-mix(in srgb, var(--mn-accent) 38%, var(--mn-line)); background: color-mix(in srgb, var(--mn-accent) 7%, transparent); }
+.placementCandidates > label[data-disabled] { cursor: not-allowed; opacity: .48; }
+.placementCandidates input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
+.placementCandidates > span > span:not(.candidateIcon),
+.placementCandidates > label > span:not(.candidateIcon) { display: grid; min-width: 0; gap: 2px; }
+.placementCandidates strong { color: var(--mn-text); font-size: 10px; }
+.placementCandidates small { color: var(--mn-muted); font-size: 8.5px; line-height: 1.4; }
+.providerChoice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; }
+.providerChoice legend { margin-bottom: 5px; color: var(--mn-muted); font-size: 10px; }
+.providerChoice label { position: relative; display: grid; min-width: 0; grid-template-columns: 32px minmax(0, 1fr) 16px; align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--mn-line); border-radius: 9px; cursor: pointer; background: color-mix(in srgb, var(--mn-layer-2) 72%, transparent); }
+.providerChoice label[data-native] { grid-column: 1 / -1; border-color: color-mix(in srgb, var(--mn-accent) 20%, var(--mn-line)); }
+.providerChoice label[data-selected] { border-color: color-mix(in srgb, var(--mn-accent) 48%, var(--mn-line)); background: color-mix(in srgb, var(--mn-accent) 5%, var(--mn-layer-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mn-accent) 12%, transparent); }
+.providerChoice label[data-disabled] { cursor: not-allowed; opacity: .5; }
+.providerChoice input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
+.providerChoice span { display: grid; gap: 3px; }
+.providerChoice strong { color: var(--mn-text); font-size: 11px; }
+.providerChoice strong em { margin-left: 5px; padding: 2px 5px; border-radius: 999px; color: var(--mn-accent); background: color-mix(in srgb, var(--mn-accent) 10%, transparent); font: 650 8px var(--mn-code); font-style: normal; }
+.providerChoice small { display: -webkit-box; overflow: hidden; color: var(--mn-muted); font-size: 9px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
+.providerChoiceIcon,
+.candidateIcon,
+.providerFieldIcon { display: grid; box-sizing: border-box; place-items: center; overflow: hidden; border: 1px solid var(--mn-line); background: var(--mn-layer-1); }
+.providerChoiceIcon { width: 32px; height: 32px; border-radius: 8px; padding: 3px; }
+.candidateIcon { width: 28px; height: 28px; border-radius: 7px; padding: 3px; }
+.providerFieldIcon { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 8px; padding: 3px; }
+.providerChoiceIcon > img,
+.providerChoiceIcon > svg,
+.candidateIcon > img,
+.candidateIcon > svg,
+.providerFieldIcon > img,
+.providerFieldIcon > svg { display: block; width: 100%; height: 100%; border-radius: 5px; object-fit: contain; }
+.choiceControl { position: relative; display: grid; width: 16px; height: 16px; box-sizing: border-box; flex: 0 0 auto; place-items: center; border: 1px solid color-mix(in srgb, var(--mn-muted) 52%, var(--mn-line)); border-radius: 5px; background: var(--mn-layer-1); }
+.choiceControl[data-kind='radio'] { border-radius: 50%; }
+[data-selected] > .choiceControl { border-color: var(--mn-accent); background: var(--mn-accent); }
+[data-selected] > .choiceControl[data-kind='check']::after { width: 7px; height: 4px; border-bottom: 1.5px solid white; border-left: 1.5px solid white; content: ''; transform: translateY(-1px) rotate(-45deg); }
+[data-selected] > .choiceControl[data-kind='radio']::after { width: 6px; height: 6px; border-radius: 50%; content: ''; background: white; }
+.placementMode label:focus-within,
+.providerChoice label:focus-within,
+.capabilityRules label:focus-within,
+.placementCandidates label:focus-within { outline: 2px solid color-mix(in srgb, var(--mn-accent) 28%, transparent); outline-offset: 1px; }
+.providerFields { display: grid; gap: 8px; padding: 10px; border: 1px solid color-mix(in srgb, #6574d9 25%, var(--mn-line)); border-radius: 9px; background: color-mix(in srgb, #6574d9 5%, transparent); }
+.providerFieldHeading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
+.providerFieldIdentity { display: flex; min-width: 0; align-items: center; gap: 8px; }
+.providerFieldIdentity > div { display: grid; min-width: 0; gap: 2px; }
+.providerFieldHeading strong { color: var(--mn-text); font-size: 11px; }
+.providerFieldHeading small { color: var(--mn-muted); font-size: 9px; line-height: 1.45; }
+.providerFieldHeading > span { flex: 0 0 auto; padding: 3px 6px; border: 1px solid color-mix(in srgb, #6574d9 24%, var(--mn-line)); border-radius: 999px; color: color-mix(in srgb, #8793ef 80%, var(--mn-text)); font: 650 8px var(--mn-code); }
+.providerFields details { min-width: 0; }
+.providerFields summary { width: fit-content; color: var(--mn-accent); cursor: pointer; font-size: 9px; }
+.providerAdvancedGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
+.providerFieldControl .providerSecretClear { display: flex; align-items: center; gap: 5px; color: var(--mn-muted); cursor: pointer; font-size: 8.5px; }
+.providerWriteHint { display: block; margin-top: 4px; color: color-mix(in srgb, #8793ef 72%, var(--mn-muted)); font-size: 9px; line-height: 1.45; }
+.placementReceipt { display: flex; min-width: 0; align-items: flex-start; gap: 7px; margin: 7px 0; padding: 7px 8px; border: 1px solid color-mix(in srgb, var(--mn-accent) 20%, var(--mn-line)); border-radius: 8px; color: var(--mn-accent); background: color-mix(in srgb, var(--mn-accent) 4%, transparent); }
+.placementReceipt > span { flex: 0 0 auto; font-size: 10px; }
+.placementReceipt > div { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; }
+.placementReceipt strong,
+.placementReceipt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.placementReceipt strong { font-size: 9px; }
+.placementReceipt small { color: var(--mn-muted); font-size: 8px; }
+.placementReceipt p { grid-column: 1 / -1; margin: 0; overflow: hidden; color: var(--mn-muted); font-size: 8.5px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
+.bodyCard > p { min-height: 15px; margin: 7px 0; color: var(--mn-muted); font-size: 10px; line-height: 1.45; }
+.bodyCard footer { display: flex; min-width: 0; flex-wrap: nowrap; gap: 5px 11px; padding-top: 6px; overflow: hidden; border-top: 1px solid var(--mn-line); color: var(--mn-faint); font-size: 9px; }
+.bodyFooterBlock { display: block; min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.bodyFooterGrow { flex: 1 1 auto; }
+
+.graphLayout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 270px); gap: 10px; }
+.graphPanel,
+.graphInspector { border: 1px solid var(--mn-line); border-radius: 11px; background: var(--mn-layer-1); }
+.graphPanel { position: relative; min-width: 0; overflow: hidden; }
+.graphToolbar,
+.graphFooter { display: flex; min-height: 43px; align-items: center; justify-content: space-between; gap: 14px; padding: 0 13px; color: var(--mn-muted); font-size: 10px; }
+.graphToolbar { border-bottom: 1px solid var(--mn-line); }
+.graphToolbar > div:first-child { display: flex; align-items: center; gap: 7px; }
+.graphToolbar small { color: var(--mn-faint); }
+.liveDot { width: 6px; height: 6px; border-radius: 50%; background: var(--mn-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mn-success) 15%, transparent); }
+.graphLegend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px 10px; }
+.graphLegend span { display: flex; align-items: center; gap: 4px; }
+.graphLegend span::before { width: 13px; height: 2px; border-radius: 2px; content: ""; background: var(--edge-color); }
+.graphLegend [data-edge="temporal"] { --edge-color: #87909f; }
+.graphLegend [data-edge="scope"] { --edge-color: #708199; }
+.graphLegend [data-edge="scope"]::before { background: repeating-linear-gradient(90deg, var(--edge-color) 0 4px, transparent 4px 7px); }
+.graphLegend [data-edge="semantic"] { --edge-color: #4d7cfe; }
+.graphLegend [data-edge="causal"] { --edge-color: #ef6b5b; }
+.graphLegend [data-edge="entity"] { --edge-color: #22a879; }
+.graphViewport { position: relative; min-height: clamp(390px, 42vw, 560px); overflow: hidden; background: radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--mn-accent) 6%, transparent), transparent 47%); }
+.graphCanvasControls { position: absolute; z-index: 2; top: 10px; right: 10px; display: flex; align-items: center; gap: 5px; padding: 4px; border: 1px solid var(--mn-line); border-radius: 9px; background: color-mix(in srgb, var(--mn-layer-1) 88%, transparent); box-shadow: 0 6px 18px color-mix(in srgb, var(--mn-text) 7%, transparent); backdrop-filter: blur(10px); }
+.graphCanvasControls span { display: flex; align-items: center; gap: 5px; padding: 0 6px; color: var(--mn-faint); font: 9px var(--mn-code); }
+.graphCanvasControls span i { width: 5px; height: 5px; border-radius: 50%; background: var(--mn-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mn-accent) 12%, transparent); }
+.graphCanvasControls button { min-height: 30px; border: 1px solid transparent; border-radius: 6px; padding: 0 9px; color: var(--mn-muted); background: transparent; font-size: 9.5px; cursor: pointer; }
+.graphCanvasControls button:hover,
+.graphCanvasControls button[data-active] { border-color: var(--mn-line); color: var(--mn-text); background: var(--mn-hover); }
+.graphCanvasControls button[data-active] { color: var(--mn-accent); }
+.graphSvg { display: block; width: 100%; height: clamp(390px, 42vw, 560px); touch-action: pan-y pinch-zoom; user-select: none; }
+.graphBackdrop { fill: var(--mn-layer-1); }
+.graphGridLine { stroke: var(--mn-line); stroke-width: .6; opacity: .5; }
+.graphEdge { fill: none; stroke: #87909f; stroke-width: 1; opacity: .32; vector-effect: non-scaling-stroke; }
+.graphEdge[data-edge="scope"] { stroke: #708199; stroke-dasharray: 4 5; opacity: .28; }
+.graphEdge[data-edge="semantic"] { stroke: #4d7cfe; opacity: .48; }
+.graphEdge[data-edge="causal"] { stroke: #ef6b5b; opacity: .52; }
+.graphEdge[data-edge="entity"] { stroke: #22a879; stroke-width: 1.45; opacity: .78; }
+.graphNode { --node: #8290a8; outline: none; cursor: grab; touch-action: none; }
+.graphNode[data-dragging] { cursor: grabbing; }
+.graphNode[data-category="decision"] { --node: #ef8354; }
+.graphNode[data-category="preference"] { --node: #a879e1; }
+.graphNode[data-category="fact"] { --node: #4d7cfe; }
+.graphNode[data-category="insight"] { --node: #19a77d; }
+.graphNode[data-category="context"] { --node: #d8a624; }
+.graphNode[data-kind="space"] { --node: var(--mn-provider-color); }
+.graphNode[data-kind="entity"] { --node: #2b9db9; }
+.nodeHalo { fill: color-mix(in srgb, var(--node) 18%, var(--mn-layer-1)); stroke: color-mix(in srgb, var(--node) 60%, var(--mn-layer-1)); stroke-width: 1.5; transition: r .16s; }
+.nodeCore { fill: var(--node); }
+.nodeLabel { fill: var(--mn-muted); font: 10px var(--mn-code); pointer-events: auto; }
+.nodeBodyLabel { fill: var(--mn-faint); font: 650 8px var(--mn-code); letter-spacing: .04em; pointer-events: auto; }
+.graphSvg[data-density="sparse"] .nodeLabel { font-size: 12px; }
+.graphNode:hover .nodeHalo,
+.graphNode:focus .nodeHalo,
+.graphNode[data-selected] .nodeHalo { fill: color-mix(in srgb, var(--node) 28%, var(--mn-layer-1)); stroke: var(--node); }
+.graphNode[data-selected] .nodeLabel { fill: var(--mn-text); font-weight: 650; }
+.graphFooter { min-height: 38px; border-top: 1px solid var(--mn-line); color: var(--mn-faint); }
+.graphInspector { min-width: 0; min-height: calc(clamp(390px, 42vw, 560px) + 83px); overflow: hidden; padding: 15px; }
+.inspectorEmpty { display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
+.inspectorLogo { width: 54px; height: 54px; margin-bottom: 15px; border-radius: 11px; opacity: .72; }
+.inspectorEmpty h3 { margin: 7px 0 3px; font-size: 14px; }
+.inspectorEmpty p { margin: 0; color: var(--mn-faint); font-size: 11px; }
+.inspectorHeading { display: flex; align-items: center; justify-content: space-between; }
+.inspectorHeading button { display: grid; width: 32px; height: 32px; place-items: center; border: 0; border-radius: 7px; color: var(--mn-muted); background: transparent; cursor: pointer; }
+.inspectorHeading button:hover { background: var(--mn-hover); }
+.inspectorChips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 24px; }
+.categoryChip { display: inline-flex; padding: 3px 8px; border-radius: 999px; color: var(--mn-accent); background: color-mix(in srgb, var(--mn-accent) 10%, transparent); font-size: 10px; }
+.inspectorTitleRow { display: flex; min-width: 0; align-items: flex-start; gap: 8px; margin: 12px 0 20px; }
+.inspectorTitle { display: -webkit-box; min-width: 0; flex: 1; margin: 0; overflow: hidden; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-wrap; -webkit-box-orient: vertical; -webkit-line-clamp: 6; }
+.inspectorEye { display: grid; width: 27px; height: 27px; flex: 0 0 auto; place-items: center; border: 1px solid var(--mn-line); border-radius: 7px; color: var(--mn-muted); background: var(--mn-layer-1); cursor: pointer; transition: color .15s, border-color .15s, background-color .15s; }
+.inspectorEye:hover { color: var(--mn-accent); border-color: var(--mn-line-strong); background: var(--mn-hover); }
+.inspectorMeta { margin: 0; }
+.inspectorMeta > div { display: grid; gap: 3px; padding: 11px 0; border-top: 1px solid var(--mn-line); }
+.inspectorMeta dt { color: var(--mn-faint); font: 9px var(--mn-code); text-transform: uppercase; }
+.inspectorMeta dd { margin: 0; overflow-wrap: anywhere; color: var(--mn-muted); font-size: 11px; }
+.inspectorActions { display: grid; gap: 8px; margin-top: 20px; }
+.previewContent { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--mn-text); font-size: 13px; line-height: 1.7; }
+
+.searchBar { margin-bottom: 18px; padding: 13px; border: 1px solid var(--mn-line); border-radius: 13px; background: var(--mn-layer-1); }
+.queryField { display: grid; grid-template-columns: 24px minmax(0, 1fr) 24px; align-items: center; gap: 5px; padding: 0 10px; border: 1px solid var(--mn-line-strong); border-radius: 9px; background: var(--mn-input); }
+.queryField > span { color: var(--mn-accent); font: 18px var(--mn-code); }
+.queryField input { width: 100%; height: 42px; border: 0; outline: 0; background: transparent; }
+.queryField kbd { color: var(--mn-faint); font: 11px var(--mn-code); }
+.searchControls { display: flex; align-items: flex-end; justify-content: flex-end; gap: 10px; padding-top: 10px; }
+.searchActions { display: flex; align-items: center; gap: 7px; }
+.agentAnswer { margin-bottom: 16px; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--mn-accent) 30%, var(--mn-line)); border-radius: 11px; background: linear-gradient(135deg, color-mix(in srgb, var(--mn-accent) 7%, var(--mn-layer-1)), var(--mn-layer-1) 60%); }
+.agentAnswerHeading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
+.agentAnswerHeading span { color: var(--mn-accent); font: 650 9px/1.2 var(--mn-code); letter-spacing: .08em; }
+.agentAnswerHeading h3 { margin: 4px 0 0; font-size: 15px; }
+.agentAnswerHeading > code { color: var(--mn-faint); font-size: 9px; }
+.agentAnswer > p { margin: 12px 0; white-space: pre-wrap; color: var(--mn-text); font-size: 13px; line-height: 1.7; }
+.agentCitations { display: flex; flex-wrap: wrap; gap: 5px; padding-top: 10px; border-top: 1px solid var(--mn-line); }
+.agentCitations code { padding: 3px 6px; border-radius: 5px; color: var(--mn-muted); background: var(--mn-layer-2); font-size: 9px; }
+.searchControls label,
+.fieldWide { display: grid; gap: 5px; color: var(--mn-muted); font-size: 11px; }
+.searchControls select,
+.listToolbar input,
+.listToolbar select,
+.entitySearch input { min-width: 140px; height: 34px; border: 1px solid var(--mn-line); border-radius: 8px; outline: 0; padding: 0 9px; background: var(--mn-input); }
+.searchControls select:focus,
+.listToolbar input:focus,
+.listToolbar select:focus,
+.entitySearch input:focus,
+.supervisedForm textarea:focus { border-color: var(--mn-accent); }
+.singleColumn { max-width: 830px; }
+.resultLayout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: 14px; align-items: start; }
+.results,
+.relatedPane,
+.entityResults { min-width: 0; }
+.relatedPane { position: sticky; top: 12px; max-height: calc(100vh - 230px); max-height: calc(100dvh - 230px); overflow: auto; padding: 13px; border: 1px solid var(--mn-line); border-radius: 12px; background: var(--mn-layer-1); scroll-margin-top: 14px; -webkit-overflow-scrolling: touch; }
+.relatedSource { margin: 0 0 13px; padding: 10px; border-radius: 8px; color: var(--mn-muted); background: var(--mn-layer-2); font-size: 11px; }
+
+.insightCard { min-width: 0; margin-bottom: 9px; padding: 14px; border: 1px solid var(--mn-line); border-radius: 11px; background: var(--mn-layer-1); transition: border-color .15s, transform .15s, box-shadow .15s; }
+.insightCard:hover { border-color: var(--mn-line-strong); transform: translateY(-1px); }
+.cardTop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
+.badges,
+.tags,
+.entities { display: flex; flex-wrap: wrap; gap: 5px; }
+.badge { padding: 2px 6px; border-radius: 999px; color: var(--mn-muted); background: var(--mn-layer-2); font-size: 9px; }
+.id { color: var(--mn-faint); font: 9px var(--mn-code); }
+.content { margin: 10px 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; }
+.tags { color: var(--mn-accent); font-size: 10px; }
+.entities { margin-top: 7px; }
+.entities span { padding: 2px 6px; border: 1px solid var(--mn-line); border-radius: 5px; color: var(--mn-muted); font-size: 9px; }
+.cardActions { display: flex; min-height: 30px; align-items: center; justify-content: flex-end; gap: 3px; margin-top: 10px; border-top: 1px solid var(--mn-line); padding-top: 8px; }
+
+.entityLayout { display: grid; grid-template-columns: 265px minmax(0, 1fr); gap: 16px; align-items: start; }
+.entityRail { position: sticky; top: 0; padding: 13px; border: 1px solid var(--mn-line); border-radius: 12px; background: var(--mn-layer-1); }
+.entitySearch { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
+.entitySearch input { min-width: 0; }
+.entityHeading { display: flex; align-items: center; justify-content: space-between; margin: 18px 2px 7px; }
+.entityHeading small { color: var(--mn-faint); font-size: 9px; }
+.entityList { display: grid; gap: 3px; }
+.entityList button { display: flex; min-height: 34px; align-items: center; justify-content: space-between; gap: 10px; border: 0; border-radius: 7px; padding: 0 9px; color: var(--mn-muted); background: transparent; cursor: pointer; text-align: left; }
+.entityList button:hover,
+.entityList button[aria-pressed="true"] { color: var(--mn-text); background: var(--mn-hover); }
+.entityList button > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.entityList strong { flex: none; color: var(--mn-faint); font: 10px var(--mn-code); }
+.entityResults > .emptyState { min-height: 360px; }
+
+.supervisedComposer { border: 1px solid var(--mn-line); border-radius: 12px; background: var(--mn-layer-1); }
+.supervisedComposer { overflow: hidden; }
+.supervisedForm { padding: 18px; }
+.supervisedHeading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
+.supervisedHeading h3 { margin: 4px 0 0; font-size: 17px; }
+.sessionReady,
+.sessionMissing { padding: 4px 8px; border-radius: 999px; font: 650 9px var(--mn-code); }
+.sessionReady { color: var(--mn-success); background: color-mix(in srgb, var(--mn-success) 10%, transparent); }
+.sessionMissing { color: var(--mn-danger); background: color-mix(in srgb, var(--mn-danger) 10%, transparent); }
+.supervisedForm textarea { width: 100%; resize: vertical; border: 1px solid var(--mn-line); border-radius: 9px; outline: 0; padding: 12px; color: var(--mn-text); background: var(--mn-input); line-height: 1.65; }
+.sessionHint { margin: 9px 0 0; color: var(--mn-danger); font-size: 11px; }
+.fieldWide { grid-column: 1 / -1; }
+.advancedWrite { border-top: 1px solid var(--mn-line); background: color-mix(in srgb, var(--mn-layer-2) 45%, var(--mn-layer-1)); }
+.advancedWrite summary { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 18px; cursor: pointer; list-style: none; }
+.advancedWrite summary::-webkit-details-marker { display: none; }
+.advancedWrite summary > span:first-child { display: grid; gap: 2px; }
+.advancedWrite summary strong { font-size: 12px; }
+.advancedWrite summary small { color: var(--mn-faint); font-size: 10px; }
+.advancedWrite summary > span:last-child { color: var(--mn-accent); font: 10px var(--mn-code); }
+.advancedWrite[open] summary { border-bottom: 1px solid var(--mn-line); }
+.advancedWrite[open] summary > span:last-child { font-size: 0; }
+.advancedWrite[open] summary > span:last-child::after { content: "−"; font-size: 13px; }
+.manualForm { padding: 3px 18px 18px; }
+.manualActions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 15px; }
+.manualActions p { max-width: 520px; margin: 0; color: var(--mn-faint); font-size: 10px; }
+
+.listToolbar { display: grid; grid-template-columns: minmax(0, 1fr) 170px auto; gap: 9px; padding: 12px; border: 1px solid var(--mn-line); border-radius: 11px; background: var(--mn-layer-1); }
+.listToolbar input,
+.listToolbar select { width: 100%; min-width: 0; }
+.listNotice { margin: 10px 0 16px; color: var(--mn-faint); font-size: 10px; }
+.listNotice span { margin-right: 7px; color: var(--mn-success); font: 650 9px var(--mn-code); letter-spacing: .08em; }
+.memoryList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; align-items: start; }
+.memoryList .insightCard { height: 100%; margin: 0; }
+.modalFooterNote { max-width: 54ch; margin: 0 auto 0 0; color: var(--mn-muted); font-size: 9px; line-height: 1.5; }
+.modalInlineStatus { margin: 12px 0 0; color: var(--mn-muted); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
+.metadataDialog { display: grid; gap: 12px; }
+.metadataToolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--mn-muted); font-size: 10px; }
+.metadataToolbar > span { display: flex; min-width: 0; align-items: center; gap: 7px; }
+.metadataToolbar em { padding: 2px 5px; border-radius: 999px; color: var(--mn-accent); background: color-mix(in srgb, var(--mn-accent) 9%, transparent); font: 650 8px var(--mn-code); font-style: normal; }
+.metadataList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
+.metadataEmpty { grid-column: 1 / -1; padding: 18px; border: 1px dashed var(--mn-line); border-radius: 8px; color: var(--mn-muted); background: color-mix(in srgb, var(--mn-layer-2) 76%, transparent); font-size: 10px; text-align: center; }
+.metadataList > label { position: relative; display: grid; min-width: 0; min-height: 76px; grid-template-columns: 16px minmax(0, 1fr); align-items: start; gap: 9px; padding: 10px 10px 10px 13px; cursor: pointer; }
+.metadataList > label[data-selected] { border-color: color-mix(in srgb, var(--mn-accent) 48%, var(--mn-line)); box-shadow: inset 3px 0 0 var(--mn-provider-color), inset 0 0 0 1px color-mix(in srgb, var(--mn-accent) 10%, transparent); }
+.metadataList > label[data-refreshing] { overflow: hidden; }
+.metadataList > label[data-refreshing]::after { position: absolute; inset: 0; content: ""; background: linear-gradient(105deg, transparent 20%, color-mix(in srgb, var(--mn-provider-color) 16%, transparent) 45%, transparent 70%); transform: translateX(-120%); animation: mnemon-metadata-sweep .9s ease-in-out infinite; pointer-events: none; }
+.metadataList > label[data-refreshed] { animation: mnemon-metadata-refreshed .9s ease-out; }
+.metadataList > label[data-failed] { border-color: color-mix(in srgb, var(--mn-danger) 42%, var(--mn-line)); }
+.metadataList > label > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
+.metadataList > label > span { display: grid; min-width: 0; gap: 4px; }
+.metadataList strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
+.metadataList small { display: -webkit-box; overflow: hidden; color: var(--mn-muted); font-size: 9px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
+.metadataList > label > span > span { display: flex; min-width: 0; align-items: center; gap: 6px; }
+.metadataList code { overflow: hidden; color: var(--mn-faint); font: 8px var(--mn-code); text-overflow: ellipsis; white-space: nowrap; }
+.metadataTaskStatus { min-width: 0; overflow: hidden; font: 650 8px var(--mn-code); text-overflow: ellipsis; white-space: nowrap; }
+.metadataTaskStatus[data-status='running'] { color: var(--mn-provider-color); }
+.metadataTaskStatus[data-status='success'] { color: var(--mn-success); }
+.metadataTaskStatus[data-status='error'] { color: var(--mn-danger); }
+@media (prefers-reduced-motion: reduce) { .metadataList > label[data-refreshing]::after,
+.metadataList > label[data-refreshed] { animation: none; } }
+
+@media (max-width: 1000px) {
+  .graphLayout { position: relative; display: block; }
+  .graphInspector { position: static; width: auto; min-height: 0; margin-top: 10px; overflow: visible; box-shadow: none; }
+  .graphInspector[data-empty] { display: none; }
+  .resultLayout { grid-template-columns: 1fr; }
+  .relatedPane { position: static; grid-row: 1; max-height: none; }
+  .memoryList { grid-template-columns: 1fr; }
+}
+
+@media (max-width: 760px) {
+  .metadataList { grid-template-columns: 1fr; }
+  .modalFooterNote { max-width: none; margin: 0; font-size: 10px; }
+  .modal .supervisedForm textarea { min-height: clamp(130px, 30vh, 210px); }
+  .entityLayout { grid-template-columns: 1fr; }
+  .manualActions { align-items: stretch; flex-direction: column; }
+  .entityRail { position: static; }
+  .searchControls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .searchActions { grid-column: 1 / -1; }
+  .searchActions > button { flex: 1; }
+  .searchControls select { width: 100%; min-width: 0; }
+  .listToolbar { grid-template-columns: 1fr; }
+  .bodyDirectoryHeader { display: grid; }
+  .createIdentityGrid,
+.placementMode,
+.placementRuleGrid,
+.placementCandidates,
+.providerChoice,
+.providerAdvancedGrid { grid-template-columns: 1fr; }
+  .graphViewport { min-height: 360px; }
+  .graphSvg { height: 390px; }
+  .graphCanvasControls { right: 7px; top: 7px; }
+  .graphCanvasControls span { display: none; }
+}
+
+@media (max-width: 520px) {
+  .memoryHeaderActions { width: 100%; }
+  .memoryHeaderActions > button { flex: 1; }
+  .supervisedHeading,
+.cardTop { align-items: flex-start; flex-direction: column; }
+  .cardActions { align-items: stretch; flex-wrap: wrap; }
+  .cardActions button { flex: 1; }
+  .searchControls { grid-template-columns: 1fr; }
+}
+
+@supports (height: 100dvh) {
+  @media (max-width: 760px) {
+    .modal .supervisedForm textarea { min-height: clamp(130px, 30dvh, 210px); }
+  }
+}
+@media (max-width: 1000px) and (max-height: 760px) {
+  .graphViewport { min-height: 300px; }
+  .graphSvg { height: 300px; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .insightCard:hover { transform: none; }
+}