@domainkit/react 0.1.0

package/dist/styles.css

@@ -0,0 +1,883 @@
+:where(
+  [data-domainkit-root],
+  [data-domainkit-part="copy-value"]:not([data-domainkit-root] *),
+  [data-domainkit-part="record-card"]:not([data-domainkit-root] *),
+  [data-domainkit-part="record-status"]:not([data-domainkit-root] *),
+  [data-domainkit-part="records-panel"]:not([data-domainkit-root] *),
+  [data-domainkit-part="zone-file"]:not([data-domainkit-root] *)
+) {
+  --domainkit-accent: #0070f3;
+  --domainkit-accent-contrast: #ffffff;
+  --domainkit-background: #ffffff;
+  --domainkit-border: #d4d4d8;
+  --domainkit-danger: #dc2626;
+  --domainkit-fill: #f4f4f5;
+  --domainkit-font-family: ui-sans-serif, system-ui, sans-serif;
+  --domainkit-muted: #52525b;
+  --domainkit-radius: 0.75rem;
+  --domainkit-shadow: 0 16px 40px rgb(15 23 42 / 0.12);
+  --domainkit-success: #059669;
+  --domainkit-text: #18181b;
+  --domainkit-control-radius: calc(var(--domainkit-radius) * 0.5);
+  --domainkit-button-raised-glint: rgb(255 255 255 / 0.95);
+  --domainkit-button-raised-shade: rgb(15 23 42 / 0.1);
+  --domainkit-button-raised-shadow: 0 1px 2px rgb(15 23 42 / 0.1);
+  color: var(--domainkit-text);
+  color-scheme: light;
+  font-family: var(--domainkit-font-family);
+}
+
+:where([data-domainkit-root][data-color-scheme="dark"]) {
+  --domainkit-background: #18181b;
+  --domainkit-border: #3f3f46;
+  --domainkit-fill: #27272a;
+  --domainkit-muted: #a1a1aa;
+  --domainkit-shadow: 0 16px 40px rgb(0 0 0 / 0.4);
+  --domainkit-success: #34d399;
+  --domainkit-text: #fafafa;
+  --domainkit-button-raised-glint: rgb(255 255 255 / 0.14);
+  --domainkit-button-raised-shade: rgb(0 0 0 / 0.42);
+  --domainkit-button-raised-shadow: 0 1px 2px rgb(0 0 0 / 0.45);
+  color-scheme: dark;
+}
+
+@media (prefers-color-scheme: dark) {
+  :where([data-domainkit-root][data-color-scheme="inherit"]) {
+    --domainkit-background: #18181b;
+    --domainkit-border: #3f3f46;
+    --domainkit-fill: #27272a;
+    --domainkit-muted: #a1a1aa;
+    --domainkit-shadow: 0 16px 40px rgb(0 0 0 / 0.4);
+    --domainkit-success: #34d399;
+    --domainkit-text: #fafafa;
+    --domainkit-button-raised-glint: rgb(255 255 255 / 0.14);
+    --domainkit-button-raised-shade: rgb(0 0 0 / 0.42);
+    --domainkit-button-raised-shadow: 0 1px 2px rgb(0 0 0 / 0.45);
+    color-scheme: dark;
+  }
+}
+
+:where([data-domainkit-part="connection-root"]) {
+  display: grid;
+  gap: 0.75rem;
+  justify-items: start;
+}
+
+:where([data-domainkit-part="connection-status"]) {
+  color: var(--domainkit-muted);
+  font-size: 0.875rem;
+  line-height: 1.4;
+}
+
+:where([data-domainkit-part="connection-status"][data-state="Connected"]) {
+  color: var(--domainkit-success);
+  font-weight: 500;
+}
+
+:where([data-domainkit-part="connection-status"][data-state="Failure"]) {
+  color: var(--domainkit-danger);
+}
+
+:where(
+  [data-domainkit-part="connection-trigger"],
+  [data-domainkit-part="oauth-connect"],
+  [data-domainkit-part="reuse-connection"],
+  [data-domainkit-part="connection-retry"],
+  [data-domainkit-part="plan-trigger"],
+  [data-domainkit-part="plan-apply"],
+  [data-domainkit-part="provisioning-retry"],
+  [data-domainkit-part="observe-action"],
+  [data-domainkit-part="cleanup-trigger"],
+  [data-domainkit-part="cleanup-apply"],
+  [data-domainkit-part="disconnect-action"],
+  [data-domainkit-part="token-connect"] button,
+  [data-domainkit-part="copy-action"],
+  [data-domainkit-part="zone-copy"],
+  [data-domainkit-part="zone-download"],
+  [data-domainkit-part="dialog-cancel"],
+  [data-domainkit-part="dialog-close"]
+) {
+  align-items: center;
+  border: 1px solid transparent;
+  border-radius: var(--domainkit-control-radius);
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  justify-content: center;
+  line-height: 1.2;
+  min-height: 2.25rem;
+  padding: 0.45rem 0.85rem;
+  transition:
+    background-color 120ms ease,
+    background-image 120ms ease,
+    border-color 120ms ease,
+    box-shadow 120ms ease;
+}
+
+:where(
+  [data-domainkit-part="connection-trigger"],
+  [data-domainkit-part="oauth-connect"],
+  [data-domainkit-part="plan-trigger"],
+  [data-domainkit-part="plan-apply"]
+) {
+  --domainkit-button-face: color-mix(in oklch, var(--domainkit-accent), white 22%);
+  --domainkit-button-glint: color-mix(in oklch, var(--domainkit-accent), white 42%);
+  --domainkit-button-edge: color-mix(in oklch, var(--domainkit-accent), black 18%);
+  background-color: var(--domainkit-accent);
+  background-image: linear-gradient(
+    to bottom,
+    var(--domainkit-button-face),
+    var(--domainkit-accent)
+  );
+  border-color: var(--domainkit-button-edge);
+  box-shadow:
+    0 1px 2px rgb(15 23 42 / 0.18),
+    inset 0 1px 0 var(--domainkit-button-glint);
+  color: var(--domainkit-accent-contrast);
+}
+
+:where(
+  [data-domainkit-part="connection-trigger"]:hover:not(:disabled),
+  [data-domainkit-part="oauth-connect"]:hover:not(:disabled),
+  [data-domainkit-part="plan-trigger"]:hover:not(:disabled),
+  [data-domainkit-part="plan-apply"]:hover:not(:disabled)
+) {
+  --domainkit-button-face: color-mix(in oklch, var(--domainkit-accent), white 28%);
+}
+
+:where(
+  [data-domainkit-part="connection-trigger"]:active:not(:disabled),
+  [data-domainkit-part="oauth-connect"]:active:not(:disabled),
+  [data-domainkit-part="plan-trigger"]:active:not(:disabled),
+  [data-domainkit-part="plan-apply"]:active:not(:disabled)
+) {
+  background-image: linear-gradient(
+    to bottom,
+    var(--domainkit-accent),
+    color-mix(in oklch, var(--domainkit-accent), black 10%)
+  );
+  box-shadow: inset 0 1px 2px rgb(15 23 42 / 0.28);
+}
+
+:where(
+  [data-domainkit-part="reuse-connection"],
+  [data-domainkit-part="connection-retry"],
+  [data-domainkit-part="provisioning-retry"],
+  [data-domainkit-part="observe-action"],
+  [data-domainkit-part="zone-copy"],
+  [data-domainkit-part="zone-download"],
+  [data-domainkit-part="token-connect"] button
+) {
+  background-color: var(--domainkit-background);
+  border-color: var(--domainkit-border);
+  box-shadow:
+    var(--domainkit-button-raised-shadow),
+    inset 0 1px 0 var(--domainkit-button-raised-glint),
+    inset 0 -1px 0 var(--domainkit-button-raised-shade);
+  color: var(--domainkit-text);
+}
+
+:where(
+  [data-domainkit-part="reuse-connection"]:hover:not(:disabled),
+  [data-domainkit-part="connection-retry"]:hover:not(:disabled),
+  [data-domainkit-part="provisioning-retry"]:hover:not(:disabled),
+  [data-domainkit-part="observe-action"]:hover:not(:disabled),
+  [data-domainkit-part="zone-copy"]:hover:not(:disabled),
+  [data-domainkit-part="zone-download"]:hover:not(:disabled),
+  [data-domainkit-part="token-connect"] button:hover:not(:disabled)
+) {
+  background-color: var(--domainkit-fill);
+}
+
+:where([data-domainkit-part="cleanup-trigger"], [data-domainkit-part="disconnect-action"]) {
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+  color: var(--domainkit-danger);
+  font-weight: 500;
+}
+
+:where(
+  [data-domainkit-part="cleanup-trigger"]:hover:not(:disabled),
+  [data-domainkit-part="disconnect-action"]:hover:not(:disabled)
+) {
+  background: color-mix(in srgb, var(--domainkit-danger) 8%, transparent);
+}
+
+:where([data-domainkit-part="cleanup-apply"]) {
+  --domainkit-button-face: color-mix(in oklch, var(--domainkit-danger), white 22%);
+  --domainkit-button-glint: color-mix(in oklch, var(--domainkit-danger), white 42%);
+  --domainkit-button-edge: color-mix(in oklch, var(--domainkit-danger), black 18%);
+  background-color: var(--domainkit-danger);
+  background-image: linear-gradient(
+    to bottom,
+    var(--domainkit-button-face),
+    var(--domainkit-danger)
+  );
+  border-color: var(--domainkit-button-edge);
+  box-shadow:
+    0 1px 2px rgb(15 23 42 / 0.18),
+    inset 0 1px 0 var(--domainkit-button-glint);
+  color: var(--domainkit-accent-contrast);
+}
+
+:where([data-domainkit-part="cleanup-apply"]:hover:not(:disabled)) {
+  --domainkit-button-face: color-mix(in oklch, var(--domainkit-danger), white 28%);
+}
+
+:where([data-domainkit-part="cleanup-apply"]:active:not(:disabled)) {
+  background-image: linear-gradient(
+    to bottom,
+    var(--domainkit-danger),
+    color-mix(in oklch, var(--domainkit-danger), black 10%)
+  );
+  box-shadow: inset 0 1px 2px rgb(15 23 42 / 0.28);
+}
+
+:where([data-domainkit-part="dialog-cancel"], [data-domainkit-part="dialog-close"]) {
+  background: transparent;
+  border-color: transparent;
+  color: var(--domainkit-muted);
+}
+
+:where([data-domainkit-part="dialog-cancel"]:hover, [data-domainkit-part="dialog-close"]:hover) {
+  background: var(--domainkit-fill);
+  color: var(--domainkit-text);
+}
+
+:where([data-domainkit-part="copy-action"]) {
+  background: var(--domainkit-fill);
+  border-color: var(--domainkit-border);
+  color: var(--domainkit-muted);
+  display: inline-grid;
+  flex: none;
+  height: 1.5rem;
+  min-height: 1.5rem;
+  min-width: 1.5rem;
+  overflow: hidden;
+  padding: 0;
+  place-items: center;
+  width: 1.5rem;
+}
+
+:where([data-domainkit-part="copy-action"]:hover) {
+  background: var(--domainkit-background);
+  color: var(--domainkit-text);
+}
+
+:where([data-domainkit-part="copy-value"][data-copied] [data-domainkit-part="copy-action"]) {
+  border-color: color-mix(in srgb, var(--domainkit-success) 45%, var(--domainkit-border));
+  color: var(--domainkit-success);
+}
+
+:where([data-icon] svg) {
+  display: block;
+  flex: none;
+  height: 0.875rem;
+  width: 0.875rem;
+}
+
+:where([data-domainkit-part="copy-glyph"]) {
+  display: flex;
+  grid-area: 1 / 1;
+  transition:
+    opacity 180ms ease,
+    transform 180ms ease;
+}
+
+:where([data-domainkit-part="copy-glyph"][data-state="idle"]) {
+  opacity: 1;
+  transform: scale(1) rotate(0deg);
+}
+
+:where(
+  [data-domainkit-part="copy-value"][data-copied]
+    [data-domainkit-part="copy-glyph"][data-state="idle"]
+) {
+  opacity: 0;
+  transform: scale(0.5) rotate(-18deg);
+}
+
+:where([data-domainkit-part="copy-glyph"][data-state="done"]) {
+  opacity: 0;
+  transform: scale(0.5) rotate(18deg);
+}
+
+:where(
+  [data-domainkit-part="copy-value"][data-copied]
+    [data-domainkit-part="copy-glyph"][data-state="done"]
+) {
+  opacity: 1;
+  transform: scale(1) rotate(0deg);
+}
+
+:where([data-domainkit-part="dialog-close"]) {
+  flex: none;
+  min-height: 2rem;
+  padding: 0;
+  width: 2rem;
+}
+
+:where([data-domainkit-part]:disabled) {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+:where([data-domainkit-part="dialog-backdrop"]) {
+  background: rgb(15 23 42 / 0.45);
+  inset: 0;
+  position: fixed;
+  transition: opacity 150ms ease;
+  z-index: 1000;
+}
+
+:where(
+  [data-domainkit-part="connection-dialog"],
+  [data-domainkit-part="plan-dialog"],
+  [data-domainkit-part="cleanup-dialog"]
+) {
+  background: var(--domainkit-background);
+  border: 1px solid var(--domainkit-border);
+  border-radius: var(--domainkit-radius);
+  box-shadow: var(--domainkit-shadow);
+  color: var(--domainkit-text);
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  left: 50%;
+  max-height: calc(100vh - 2rem);
+  max-width: calc(100vw - 2rem);
+  overflow: hidden;
+  position: fixed;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  transition:
+    opacity 150ms ease,
+    transform 150ms ease;
+  width: 24rem;
+  z-index: 1001;
+}
+
+:where([data-domainkit-part="plan-dialog"], [data-domainkit-part="cleanup-dialog"]) {
+  width: 36rem;
+}
+
+:where(
+  [data-domainkit-part="connection-dialog"][data-starting-style],
+  [data-domainkit-part="connection-dialog"][data-ending-style],
+  [data-domainkit-part="plan-dialog"][data-starting-style],
+  [data-domainkit-part="plan-dialog"][data-ending-style],
+  [data-domainkit-part="cleanup-dialog"][data-starting-style],
+  [data-domainkit-part="cleanup-dialog"][data-ending-style]
+) {
+  opacity: 0;
+  transform: translate(-50%, -48%) scale(0.98);
+}
+
+:where([data-domainkit-part="dialog-header"]) {
+  align-items: flex-start;
+  border-bottom: 1px solid var(--domainkit-border);
+  display: flex;
+  gap: 0.75rem;
+  padding: 1rem 1rem 0.85rem;
+}
+
+:where([data-domainkit-part="dialog-heading"]) {
+  display: grid;
+  flex: 1;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
+:where([data-domainkit-part="dialog-title"]) {
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.3;
+  margin: 0;
+}
+
+:where([data-domainkit-part="dialog-description"]) {
+  color: var(--domainkit-muted);
+  font-size: 0.875rem;
+  line-height: 1.45;
+  margin: 0;
+}
+
+:where([data-domainkit-part="dialog-body"]) {
+  display: grid;
+  gap: 0.65rem;
+  overflow: auto;
+  padding: 1rem;
+}
+
+:where([data-domainkit-part="dialog-body"] [data-domainkit-part="oauth-connect"]),
+:where([data-domainkit-part="dialog-body"] [data-domainkit-part="reuse-connection"]) {
+  width: 100%;
+}
+
+:where([data-domainkit-part="dialog-footer"]) {
+  border-top: 1px solid var(--domainkit-border);
+  display: flex;
+  gap: 0.5rem;
+  justify-content: flex-end;
+  padding: 0.75rem 1rem;
+}
+
+:where([data-domainkit-part="provider-mark"]) {
+  align-items: center;
+  background: var(--domainkit-fill);
+  border: 1px solid var(--domainkit-border);
+  border-radius: var(--domainkit-control-radius);
+  display: inline-flex;
+  flex: none;
+  font-size: 0.75rem;
+  font-weight: 600;
+  height: 2rem;
+  justify-content: center;
+  overflow: hidden;
+  width: 2rem;
+}
+
+:where([data-domainkit-part="provider-mark"] img),
+:where([data-domainkit-part="provider-mark"] svg) {
+  display: block;
+  height: 100%;
+  object-fit: cover;
+  width: 100%;
+}
+
+:where([data-domainkit-part="connection-trigger"]) {
+  gap: 0.45rem;
+}
+
+:where([data-domainkit-part="connection-trigger"] [data-domainkit-part="provider-mark"]) {
+  background: var(--domainkit-accent-contrast);
+  border-color: color-mix(in oklch, var(--domainkit-accent) 18%, transparent);
+  font-size: 0.625rem;
+  height: 1.25rem;
+  width: 1.25rem;
+}
+
+:where([data-domainkit-part="token-connect"]) {
+  background: var(--domainkit-fill);
+  border: 1px solid var(--domainkit-border);
+  border-radius: var(--domainkit-control-radius);
+  display: grid;
+  gap: 0.65rem;
+  padding: 0.75rem;
+}
+
+:where([data-domainkit-part="token-connect"] label) {
+  color: var(--domainkit-muted);
+  display: grid;
+  font-size: 0.8125rem;
+  gap: 0.35rem;
+}
+
+:where([data-domainkit-part="token-connect"] small) {
+  color: var(--domainkit-muted);
+  font-size: 0.75rem;
+}
+
+:where([data-domainkit-part="token-connect"] input) {
+  background: var(--domainkit-background);
+  border: 1px solid var(--domainkit-border);
+  border-radius: var(--domainkit-control-radius);
+  color: var(--domainkit-text);
+  font: inherit;
+  min-height: 2.25rem;
+  padding: 0 0.65rem;
+}
+
+:where([data-domainkit-part="token-connect"] button) {
+  justify-self: start;
+}
+
+:where([data-domainkit-part="connected-shell"]) {
+  display: grid;
+  gap: 1rem;
+  width: 100%;
+}
+
+:where([data-domainkit-part="connected-card"]) {
+  align-items: center;
+  background: var(--domainkit-background);
+  border: 1px solid var(--domainkit-border);
+  border-radius: var(--domainkit-radius);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem 1rem;
+  justify-content: space-between;
+  padding: 1rem;
+  width: 100%;
+}
+
+:where([data-domainkit-part="connected-identity"]) {
+  align-items: center;
+  display: flex;
+  gap: 0.75rem;
+  min-width: 0;
+}
+
+:where([data-domainkit-part="connected-actions"]) {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-left: auto;
+}
+
+:where(
+  [data-domainkit-part="provisioning-flow"],
+  [data-domainkit-part="verification-status"],
+  [data-domainkit-part="cleanup-flow"]
+) {
+  align-items: flex-start;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+:where(
+  [data-domainkit-part="connected-actions"] > [data-domainkit-part="provisioning-flow"],
+  [data-domainkit-part="connected-actions"] > [data-domainkit-part="verification-status"],
+  [data-domainkit-part="connected-actions"] > [data-domainkit-part="disconnect"]
+) {
+  flex: 0 0 auto;
+  width: auto;
+}
+
+:where([data-domainkit-part="provisioning-flow"] > [data-domainkit-part="records-panel"]),
+:where([data-domainkit-part="provisioning-flow"] > [data-domainkit-part="flow-outcome"]),
+:where([data-domainkit-part="verification-status"] > [data-domainkit-part="observation-list"]),
+:where([data-domainkit-part="verification-status"] > p),
+:where([data-domainkit-part="cleanup-flow"] > [data-domainkit-part="flow-outcome"]) {
+  flex: 1 1 100%;
+}
+
+:where([data-domainkit-part="observation-list"]) {
+  background: var(--domainkit-fill);
+  border: 1px solid var(--domainkit-border);
+  border-radius: var(--domainkit-control-radius);
+  display: grid;
+  gap: 0.85rem;
+  max-width: 24rem;
+  padding: 0.75rem 0.85rem;
+  width: 100%;
+}
+
+:where([data-domainkit-part="observation-group"]) {
+  display: grid;
+  gap: 0.4rem;
+}
+
+:where([data-domainkit-part="observation-source"]) {
+  color: var(--domainkit-muted);
+  font-size: 0.6875rem;
+  font-weight: 650;
+  letter-spacing: 0.04em;
+  margin: 0;
+  text-transform: uppercase;
+}
+
+:where([data-domainkit-part="observation-group"] ul) {
+  display: grid;
+  gap: 0.35rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+:where([data-domainkit-part="observation-group"] li) {
+  display: grid;
+  gap: 0.25rem;
+}
+
+:where([data-domainkit-part="observation-row"]) {
+  align-items: center;
+  display: flex;
+  gap: 0.75rem;
+  justify-content: space-between;
+  min-height: 1.75rem;
+}
+
+:where([data-domainkit-part="observation-record"]) {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+:where([data-domainkit-part="observation-note"]) {
+  color: var(--domainkit-muted);
+  font-size: 0.75rem;
+  margin: 0;
+}
+
+:where([data-domainkit-part="records-panel"]) {
+  background: var(--domainkit-fill);
+  border: 1px solid var(--domainkit-border);
+  border-radius: var(--domainkit-control-radius);
+  overflow-x: auto;
+  width: 100%;
+}
+
+:where([data-domainkit-part="records-table"]) {
+  border-collapse: collapse;
+  min-width: 36rem;
+  width: 100%;
+}
+
+:where([data-domainkit-part="records-table"] th) {
+  color: var(--domainkit-muted);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  padding: 0.55rem 0.75rem;
+  text-align: left;
+  white-space: nowrap;
+}
+
+:where([data-domainkit-part="records-table"] td) {
+  border-top: 1px solid var(--domainkit-border);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.75rem;
+  line-height: 1.4;
+  padding: 0.55rem 0.75rem;
+  text-align: left;
+  vertical-align: middle;
+}
+
+:where([data-domainkit-part="records-table"] td:first-child) {
+  font-weight: 600;
+  white-space: nowrap;
+  width: 4.5rem;
+}
+
+:where([data-domainkit-part="records-table"] [data-column="status"]) {
+  text-align: right;
+  white-space: nowrap;
+  width: 1%;
+}
+
+:where([data-domainkit-part="copy-value"]) {
+  align-items: center;
+  display: inline-flex;
+  flex-wrap: nowrap;
+  gap: 0.35rem;
+  max-width: 100%;
+  min-width: 0;
+}
+
+:where([data-domainkit-part="copy-value"] code) {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: inherit;
+  line-height: 1.25rem;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+:where([data-domainkit-part="record-value"]) {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  max-width: 100%;
+  min-width: 0;
+  width: 100%;
+}
+
+:where([data-domainkit-part="record-value"] [data-domainkit-part="copy-value"]) {
+  min-width: 0;
+  width: 100%;
+}
+
+:where([data-domainkit-part="record-priority"]) {
+  color: var(--domainkit-muted);
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+:where([data-domainkit-part="record-value"] [data-domainkit-part="record-priority"]) {
+  font-size: 0.6875rem;
+}
+
+:where([data-domainkit-part="zone-file"]) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: flex-start;
+}
+
+:where([data-domainkit-part="zone-copy"], [data-domainkit-part="zone-download"]) {
+  gap: 0.4rem;
+}
+
+:where([data-domainkit-part="record-card"]) {
+  background: var(--domainkit-fill);
+  border: 1px solid var(--domainkit-border);
+  border-radius: var(--domainkit-control-radius);
+  display: grid;
+  gap: 0.75rem;
+  padding: 0.85rem 1rem;
+}
+
+:where([data-domainkit-part="record-card-head"]) {
+  align-items: center;
+  display: flex;
+  gap: 0.5rem;
+  justify-content: space-between;
+}
+
+:where([data-domainkit-part="record-card"] dl) {
+  display: grid;
+  gap: 0.65rem;
+  margin: 0;
+}
+
+:where([data-domainkit-part="record-card"] dt) {
+  color: var(--domainkit-muted);
+  font-size: 0.6875rem;
+  font-weight: 650;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+:where([data-domainkit-part="record-card"] dd) {
+  display: grid;
+  gap: 0.25rem;
+  justify-items: start;
+  margin: 0.25rem 0 0;
+}
+
+:where([data-domainkit-part="record-card"] [data-domainkit-part="record-priority"]) {
+  font-size: 0.6875rem;
+}
+
+:where([data-domainkit-part="record-status"]) {
+  border-radius: 999px;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  padding: 0.15rem 0.45rem;
+}
+
+:where([data-domainkit-part="record-status"][data-status="Found"]) {
+  background: color-mix(in srgb, var(--domainkit-success) 16%, transparent);
+  color: var(--domainkit-success);
+}
+
+:where([data-domainkit-part="record-status"][data-status="Missing"]),
+:where([data-domainkit-part="record-status"][data-status="Mismatch"]) {
+  background: color-mix(in srgb, var(--domainkit-danger) 14%, transparent);
+  color: var(--domainkit-danger);
+}
+
+:where([data-domainkit-part="record-status"][data-status="Unavailable"]) {
+  background: var(--domainkit-background);
+  color: var(--domainkit-muted);
+}
+
+:where([data-domainkit-part="plan-operations"], [data-domainkit-part="cleanup-operations"]) {
+  display: grid;
+  gap: 0.35rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+:where([data-domainkit-part="plan-operations"] li, [data-domainkit-part="cleanup-operations"] li) {
+  align-items: baseline;
+  background: var(--domainkit-fill);
+  border-radius: var(--domainkit-control-radius);
+  display: grid;
+  font-size: 0.8125rem;
+  gap: 0.5rem 0.75rem;
+  grid-template-columns: auto auto 1fr;
+  padding: 0.6rem 0.75rem;
+}
+
+:where([data-domainkit-part="operation-kind"]) {
+  border-radius: 999px;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  padding: 0.15rem 0.45rem;
+  text-transform: uppercase;
+}
+
+:where([data-operation="Create"] [data-domainkit-part="operation-kind"]) {
+  background: color-mix(in srgb, var(--domainkit-success) 16%, transparent);
+  color: var(--domainkit-success);
+}
+
+:where([data-operation="Update"] [data-domainkit-part="operation-kind"]) {
+  background: color-mix(in srgb, var(--domainkit-accent) 14%, transparent);
+  color: var(--domainkit-accent);
+}
+
+:where(
+  [data-operation="Delete"] [data-domainkit-part="operation-kind"],
+  [data-operation="Remove"] [data-domainkit-part="operation-kind"]
+) {
+  background: color-mix(in srgb, var(--domainkit-danger) 14%, transparent);
+  color: var(--domainkit-danger);
+}
+
+:where(
+  [data-operation="Conflict"] [data-domainkit-part="operation-kind"],
+  [data-operation="Blocked"] [data-domainkit-part="operation-kind"],
+  [data-operation="Stale"] [data-domainkit-part="operation-kind"]
+) {
+  background: color-mix(in srgb, var(--domainkit-danger) 10%, var(--domainkit-fill));
+  color: var(--domainkit-danger);
+}
+
+:where([data-operation="Noop"] [data-domainkit-part="operation-kind"]) {
+  background: var(--domainkit-background);
+  color: var(--domainkit-muted);
+}
+
+:where([data-domainkit-part="operation-record"]) {
+  color: var(--domainkit-muted);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.75rem;
+}
+
+:where([data-operation="AlreadyAbsent"] [data-domainkit-part="operation-kind"]) {
+  background: var(--domainkit-background);
+  color: var(--domainkit-muted);
+}
+
+:where([data-domainkit-part="cleanup-flow"]) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+:where([data-domainkit-part="flow-outcome"]) {
+  font-size: 0.875rem;
+  margin: 0;
+  width: 100%;
+}
+
+:where([data-domainkit-part="flow-outcome"][data-tone="success"]) {
+  color: var(--domainkit-success);
+}
+
+:where([data-domainkit-part="flow-outcome"][data-tone="danger"]) {
+  color: var(--domainkit-danger);
+}
+
+:where([data-domainkit-part]:focus-visible) {
+  outline: 2px solid var(--domainkit-accent);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-domainkit-part]) {
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+  }
+}