@domainkit/react 0.11.0 → 0.12.0

package/dist/styles.css

@@ -1,1875 +0,0 @@
-/**
- * Every rule ships inside the `domainkit` cascade layer, so a host's own stylesheet wins
- * without needing to out-specify a part selector. Nothing here relies on beating host CSS;
- * a host that wants the package to win puts its own rules in a layer ordered below this one.
- */
-@layer domainkit {
-  :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-backdrop: rgb(15 23 42 / 0.45);
-    --domainkit-background: #ffffff;
-    --domainkit-border: #d4d4d8;
-    --domainkit-danger: #dc2626;
-    --domainkit-danger-contrast: #ffffff;
-    --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-warning: #b45309;
-    --domainkit-control-radius: calc(var(--domainkit-radius) * 0.5);
-    /*
-     * The quiet controls in a dialog — a docs link, a disclosure trigger, a secondary action, the
-     * way back, the provider menu — share one rhythm: what sits above them, what sits below, and
-     * the room their hover and focus states need around the text.
-     */
-    --domainkit-quiet-lead: 0.5rem;
-    --domainkit-quiet-trail: 0.75rem;
-    --domainkit-quiet-inset: 0.5rem;
-    --domainkit-quiet-pad: 0.25rem;
-    /* The inner room a panel gives its contents: the dialog's form, and the two cards. */
-    --domainkit-panel-pad: 0.75rem;
-    /* A dialog that asks one question, and the width a dialog listing records takes instead. */
-    --domainkit-dialog-width: 24rem;
-    --domainkit-dialog-wide: 36rem;
-    /* The switch track, the thumb inside it, and the room it keeps at each end of the track. */
-    --domainkit-switch-width: 2.25rem;
-    --domainkit-switch-height: 1.25rem;
-    --domainkit-switch-thumb: 1rem;
-    --domainkit-switch-inset: 0.125rem;
-    /*
-     * A provider's identity is a name over one line about it, and the mark stands against both.
-     * The mark's size is the two lines added up, so it spans the block instead of guessing at it.
-     */
-    --domainkit-identity-name: 0.875rem;
-    --domainkit-identity-line: 0.8125rem;
-    --domainkit-identity-leading: 1.4;
-    --domainkit-mark-size: calc(
-      (var(--domainkit-identity-name) + var(--domainkit-identity-line)) *
-        var(--domainkit-identity-leading)
-    );
-    /* Cards draw no border of their own. A host that wants one sets this on the part. */
-    --domainkit-card-border: transparent;
-    --domainkit-button-raised-glint: rgb(255 255 255 / 0.95);
-    --domainkit-button-raised-shade: color-mix(in srgb, var(--domainkit-text) 10%, transparent);
-    --domainkit-button-raised-shadow: 0 1px 2px
-      color-mix(in srgb, var(--domainkit-text) 10%, transparent);
-    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-warning: #fbbf24;
-    --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-warning: #fbbf24;
-      --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: stretch;
-    width: 100%;
-  }
-
-  :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-recipe="connect"],
-    [data-domainkit-part="integration-connect"],
-    [data-domainkit-part="oauth-connect"],
-    [data-domainkit-part="attach-target"],
-    [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="cleanup-retry"],
-    [data-domainkit-part="disconnect-action"],
-    [data-domainkit-part="disconnect-confirm"],
-    [data-domainkit-part="method-alternate"],
-    [data-domainkit-part="dialog-back"],
-    [data-domainkit-part="dialog-provider-menu"],
-    [data-domainkit-part="more-options-trigger"],
-    [data-domainkit-part="disconnect-trigger"],
-    [data-domainkit-part="actions-trigger"],
-    [data-domainkit-part="token-connect"] button,
-    [data-domainkit-part="connection-trigger"],
-    [data-domainkit-part="token-submit"],
-    [data-domainkit-part="plan-decline"],
-    [data-domainkit-part="verification-retry"],
-    [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-recipe="connect"],
-    [data-domainkit-part="integration-connect"],
-    [data-domainkit-part="oauth-connect"],
-    [data-domainkit-part="plan-trigger"],
-    [data-domainkit-part="plan-apply"],
-    [data-domainkit-part="connection-trigger"],
-    [data-domainkit-part="token-submit"]
-  ) {
-    --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 color-mix(in srgb, var(--domainkit-text) 18%, transparent),
-      inset 0 1px 0 var(--domainkit-button-glint);
-    color: var(--domainkit-accent-contrast);
-  }
-
-  :where(
-    [data-domainkit-recipe="connect"]:hover:not(:disabled),
-    [data-domainkit-part="integration-connect"]: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),
-    [data-domainkit-part="connection-trigger"]:hover:not(:disabled),
-    [data-domainkit-part="token-submit"]:hover:not(:disabled)
-  ) {
-    --domainkit-button-face: color-mix(in oklch, var(--domainkit-accent), white 28%);
-  }
-
-  :where(
-    [data-domainkit-recipe="connect"]:active:not(:disabled),
-    [data-domainkit-part="integration-connect"]: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),
-    [data-domainkit-part="connection-trigger"]:active:not(:disabled),
-    [data-domainkit-part="token-submit"]: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 color-mix(in srgb, var(--domainkit-text) 28%, transparent);
-  }
-
-  :where(
-    [data-domainkit-part="attach-target"],
-    [data-domainkit-part="connection-retry"],
-    [data-domainkit-part="provisioning-retry"],
-    [data-domainkit-part="cleanup-retry"],
-    [data-domainkit-part="observe-action"],
-    [data-domainkit-part="zone-copy"],
-    [data-domainkit-part="zone-download"],
-    [data-domainkit-part="plan-decline"]
-  ) {
-    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="attach-target"]: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="plan-decline"]: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"], [data-domainkit-part="disconnect-confirm"]) {
-    --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 color-mix(in srgb, var(--domainkit-text) 18%, transparent),
-      inset 0 1px 0 var(--domainkit-button-glint);
-    color: var(--domainkit-danger-contrast);
-  }
-
-  :where(
-    [data-domainkit-part="cleanup-apply"]:hover:not(:disabled),
-    [data-domainkit-part="disconnect-confirm"]:hover:not(:disabled)
-  ) {
-    --domainkit-button-face: color-mix(in oklch, var(--domainkit-danger), white 28%);
-  }
-
-  :where(
-    [data-domainkit-part="cleanup-apply"]:active:not(:disabled),
-    [data-domainkit-part="disconnect-confirm"]: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 color-mix(in srgb, var(--domainkit-text) 28%, transparent);
-  }
-
-  /* Every quiet control in the dialog keeps the same rhythm above and below it. */
-  :where(
-    [data-domainkit-part="method-alternate"],
-    [data-domainkit-part="dialog-back"],
-    [data-domainkit-part="more-options-trigger"]
-  ) {
-    margin-block: var(--domainkit-quiet-lead) var(--domainkit-quiet-trail);
-  }
-
-  :where([data-domainkit-part="method-alternate"]) {
-    background: transparent;
-    border-color: var(--domainkit-border);
-    box-shadow: none;
-    color: var(--domainkit-text);
-    width: 100%;
-  }
-
-  :where(
-    [data-domainkit-part="method-alternate"]:hover:not(:disabled),
-    [data-domainkit-part="more-options-trigger"]:hover:not(:disabled)
-  ) {
-    background: var(--domainkit-fill);
-  }
-
-  :where([data-domainkit-part="more-options-trigger"]) {
-    background: transparent;
-    border-color: var(--domainkit-border);
-    box-shadow: none;
-    color: var(--domainkit-muted);
-    font-size: 0.8125rem;
-    gap: var(--domainkit-quiet-pad);
-    justify-self: start;
-  }
-
-  :where([data-domainkit-part="more-options-trigger"] svg),
-  :where([data-domainkit-part="dialog-provider-menu"] svg) {
-    height: 1rem;
-    transition: transform 150ms ease;
-    width: 1rem;
-  }
-
-  :where([data-domainkit-part="more-options"][data-state="open"])
-    :where([data-domainkit-part="more-options-trigger"] svg) {
-    transform: rotate(180deg);
-  }
-
-  :where([data-domainkit-part="more-options-panel"]) {
-    display: grid;
-    gap: var(--domainkit-quiet-lead);
-    padding-block-end: var(--domainkit-quiet-lead);
-  }
-
-  :where([data-domainkit-part="dialog-back"]) {
-    background: transparent;
-    border-color: transparent;
-    box-shadow: none;
-    color: var(--domainkit-muted);
-    justify-self: start;
-    margin-inline-start: calc(-1 * var(--domainkit-quiet-inset));
-    padding-inline: var(--domainkit-quiet-inset);
-  }
-
-  :where([data-domainkit-part="dialog-back"]:hover:not(:disabled)) {
-    background: var(--domainkit-fill);
-    color: var(--domainkit-text);
-  }
-
-  :where([data-domainkit-part="dialog-back"])::before {
-    content: "\2190";
-    margin-inline-end: 0.35rem;
-  }
-
-  :where([data-domainkit-part="dialog-provider-menu"]) {
-    background: transparent;
-    border-color: transparent;
-    box-shadow: none;
-    color: inherit;
-    font: inherit;
-    gap: var(--domainkit-quiet-pad);
-    margin-inline-start: calc(-1 * var(--domainkit-quiet-inset));
-    padding: var(--domainkit-quiet-pad) var(--domainkit-quiet-inset);
-  }
-
-  :where([data-domainkit-part="dialog-provider-menu"]:hover:not(:disabled)) {
-    background: var(--domainkit-fill);
-    color: var(--domainkit-accent);
-  }
-
-  :where([data-domainkit-part="dialog-provider-menu"][data-popup-open] svg) {
-    transform: rotate(180deg);
-  }
-
-  /* Above the dialog that opened it: the trigger sits inside the dialog's own stacking context. */
-  :where([data-domainkit-part="provider-menu-positioner"]) {
-    z-index: 1002;
-  }
-
-  :where([data-domainkit-part="provider-menu"]) {
-    background: var(--domainkit-background);
-    border: 1px solid var(--domainkit-border);
-    border-radius: var(--domainkit-radius);
-    box-shadow: var(--domainkit-shadow);
-    display: grid;
-    gap: 0.15rem;
-    min-width: 12rem;
-    padding: 0.3rem;
-  }
-
-  :where([data-domainkit-part="provider-menu-item"]) {
-    align-items: center;
-    border-radius: var(--domainkit-control-radius);
-    color: var(--domainkit-text);
-    cursor: pointer;
-    display: flex;
-    font-size: 0.875rem;
-    gap: 0.5rem;
-    padding: 0.35rem 0.5rem;
-  }
-
-  :where([data-domainkit-part="provider-menu-item"][data-highlighted]) {
-    background: var(--domainkit-fill);
-  }
-
-  :where([data-domainkit-part="disconnect-scope"]) {
-    border: 1px solid var(--domainkit-border);
-    border-radius: var(--domainkit-control-radius);
-    display: grid;
-    gap: 0.4rem;
-    margin: 0;
-    padding: 0.6rem 0.75rem;
-  }
-
-  :where([data-domainkit-part="disconnect-scope"] legend) {
-    color: var(--domainkit-muted);
-    font-size: 0.8125rem;
-    padding-inline: 0.25rem;
-  }
-
-  :where([data-domainkit-part="disconnect-scope"] label) {
-    align-items: center;
-    color: var(--domainkit-text);
-    cursor: pointer;
-    display: flex;
-    font-size: 0.875rem;
-    gap: 0.5rem;
-  }
-
-  :where([data-domainkit-part="disconnect-scope"] input) {
-    accent-color: var(--domainkit-accent);
-    margin: 0;
-  }
-
-  :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: var(--domainkit-backdrop);
-    inset: 0;
-    opacity: 1;
-    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"],
-    [data-domainkit-part="disconnect-dialog"]
-  ) {
-    background: var(--domainkit-background);
-    border: 1px solid var(--domainkit-border);
-    border-color: color-mix(in oklab, var(--domainkit-border) 60%, var(--domainkit-background));
-    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;
-    outline: none;
-    position: fixed;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    transition:
-      opacity 150ms ease,
-      transform 150ms ease;
-    width: var(--domainkit-dialog-width);
-    z-index: 1001;
-  }
-
-  /*
-   * A dialog that lists records takes the wider width: the plan and the cleanup always do, and the
-   * disconnect dialog does whenever it carries removals to decide over.
-   */
-  :where(
-    [data-domainkit-part="plan-dialog"],
-    [data-domainkit-part="cleanup-dialog"],
-    [data-domainkit-part="disconnect-dialog"][data-cleanup="offered"]
-  ) {
-    --domainkit-dialog-width: var(--domainkit-dialog-wide);
-  }
-
-  /* The backdrop fades with the dialog it belongs to rather than appearing whole. */
-  :where(
-    [data-domainkit-part="dialog-backdrop"][data-starting-style],
-    [data-domainkit-part="dialog-backdrop"][data-ending-style]
-  ) {
-    opacity: 0;
-  }
-
-  /*
-   * A closed dialog is out of the customer's way even while it is still in the tree: it may linger
-   * for its exit, and a transparent sheet that still takes a press would swallow the next click.
-   */
-  :where(
-    [data-domainkit-part="dialog-backdrop"][data-closed],
-    [data-domainkit-part="connection-dialog"][data-closed],
-    [data-domainkit-part="plan-dialog"][data-closed],
-    [data-domainkit-part="cleanup-dialog"][data-closed],
-    [data-domainkit-part="disconnect-dialog"][data-closed]
-  ) {
-    pointer-events: none;
-  }
-
-  :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],
-    [data-domainkit-part="disconnect-dialog"][data-starting-style],
-    [data-domainkit-part="disconnect-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;
-  }
-
-  /* The mark stands against the title and the line under it, the way it does on the two cards. */
-  :where([data-domainkit-part="dialog-media"]) {
-    align-items: center;
-    align-self: center;
-    display: inline-flex;
-    flex: none;
-  }
-
-  :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="provider-authentication"]) {
-    display: grid;
-    gap: 0.55rem;
-  }
-
-  :where([data-domainkit-part="authentication-separator"]) {
-    align-items: center;
-    color: var(--domainkit-muted);
-    display: grid;
-    font-size: 0.75rem;
-    gap: 0.75rem;
-    grid-template-columns: 1fr auto 1fr;
-    line-height: 1;
-    padding: 0.15rem 0;
-    text-transform: lowercase;
-  }
-
-  :where([data-domainkit-part="authentication-separator"])::before,
-  :where([data-domainkit-part="authentication-separator"])::after {
-    border-top: 1px solid var(--domainkit-border);
-    content: "";
-  }
-
-  :where([data-domainkit-part="dialog-progress"]) {
-    color: var(--domainkit-muted);
-    margin: 0;
-    min-height: 1.4em;
-  }
-
-  :where(
-    [data-domainkit-part="dialog-body"] [data-domainkit-part="oauth-connect"],
-    [data-domainkit-part="dialog-body"] [data-domainkit-part="integration-connect"],
-    [data-domainkit-part="dialog-body"] [data-domainkit-part="attach-target"]
-  ) {
-    width: 100%;
-  }
-
-  :where([data-domainkit-part="reusable-connection"]) {
-    background: var(--domainkit-fill);
-    border: 1px solid var(--domainkit-border);
-    border-radius: var(--domainkit-control-radius);
-    display: grid;
-    gap: 0.55rem;
-    padding: 0.7rem;
-  }
-
-  :where([data-domainkit-part="reusable-connection-heading"]) {
-    align-items: baseline;
-    display: flex;
-    gap: 0.5rem;
-    justify-content: space-between;
-  }
-
-  :where([data-domainkit-part="reusable-connection-heading"] strong) {
-    font-size: 0.8125rem;
-    font-weight: 600;
-  }
-
-  :where([data-domainkit-part="reusable-connection-heading"] span) {
-    color: var(--domainkit-muted);
-    font-size: 0.6875rem;
-  }
-
-  :where([data-domainkit-part="target-list"]) {
-    display: grid;
-    gap: 0.45rem;
-  }
-
-  :where([data-domainkit-part="target-unavailable"]) {
-    color: var(--domainkit-muted);
-    font-size: 0.8125rem;
-    margin: 0;
-  }
-
-  :where([data-domainkit-part="disconnect-cleanup"]) {
-    display: grid;
-    gap: var(--domainkit-quiet-lead);
-  }
-
-  :where([data-domainkit-part="disconnect-cleanup-label"]) {
-    align-items: center;
-    color: var(--domainkit-text);
-    cursor: pointer;
-    display: flex;
-    font-size: 0.875rem;
-    gap: 0.6rem;
-  }
-
-  /*
-   * Base UI's own Switch anatomy: the root is the track and the thumb is a box laid out inside it.
-   * `border-box` and `inline-flex` make the declared width and height the track a customer sees,
-   * whatever the host's reset does with padding, and centre the thumb between the track's edges.
-   */
-  :where([data-domainkit-part="disconnect-cleanup-switch"]) {
-    align-items: center;
-    background: var(--domainkit-border);
-    border: 0;
-    border-radius: 999px;
-    box-sizing: border-box;
-    cursor: pointer;
-    display: inline-flex;
-    flex: none;
-    height: var(--domainkit-switch-height);
-    padding: var(--domainkit-switch-inset);
-    transition: background-color 150ms ease;
-    width: var(--domainkit-switch-width);
-  }
-
-  :where([data-domainkit-part="disconnect-cleanup-switch"][data-checked]) {
-    background: var(--domainkit-accent);
-  }
-
-  :where([data-domainkit-part="disconnect-cleanup-switch"]:disabled) {
-    cursor: default;
-    opacity: 0.6;
-  }
-
-  :where([data-domainkit-part="disconnect-cleanup-thumb"]) {
-    background: var(--domainkit-background);
-    border-radius: 999px;
-    display: block;
-    flex: none;
-    height: var(--domainkit-switch-thumb);
-    transition: translate 150ms ease;
-    width: var(--domainkit-switch-thumb);
-  }
-
-  /* The travel is the track less the thumb and the room the track keeps at both ends. */
-  :where([data-domainkit-part="disconnect-cleanup-thumb"][data-checked]) {
-    translate: calc(
-      var(--domainkit-switch-width) - var(--domainkit-switch-thumb) -
-        var(--domainkit-switch-inset) * 2
-    );
-  }
-
-  :where([data-domainkit-part="disconnect-cleanup-panel"]) {
-    display: grid;
-    gap: 0.35rem;
-    transition: opacity 150ms ease;
-  }
-
-  /* Off, the records are still what the decision is about, so they stay legible and step back. */
-  :where([data-domainkit-part="disconnect-cleanup"][data-state="off"])
-    :where([data-domainkit-part="disconnect-cleanup-panel"]) {
-    opacity: 0.55;
-  }
-
-  :where([data-domainkit-part="disconnect-cleanup-note"]) {
-    color: var(--domainkit-muted);
-    font-size: 0.8125rem;
-    margin: 0;
-  }
-
-  :where([data-domainkit-part="disconnect-status"]) {
-    color: var(--domainkit-muted);
-    font-size: 0.875rem;
-    margin: 0;
-  }
-
-  :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;
-  }
-
-  /* A squircle: a rounded square on the radius token, filled edge to edge. Nothing here rounds it
-   * into a circle, so a mark that reads as one is a circular asset the host passed in. */
-  :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);
-    box-sizing: border-box;
-    display: inline-flex;
-    flex: none;
-    font-size: 0.8125rem;
-    font-weight: 600;
-    height: var(--domainkit-mark-size);
-    justify-content: center;
-    overflow: hidden;
-    width: var(--domainkit-mark-size);
-  }
-
-  :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="provider-mark"][data-domainkit-provider="vercel"]) {
-    border-color: transparent;
-  }
-
-  :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: var(--domainkit-panel-pad);
-  }
-
-  :where([data-domainkit-part="token-connect"] [data-domainkit-part="field-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%;
-  }
-
-  /*
-   * Both cards sit on the host's inset surface rather than floating on the page ground, so a
-   * domain page reads as one section. The border is off unless a host sets `--domainkit-card-border`
-   * on the part.
-   */
-  :where([data-domainkit-part="connected-card"], [data-domainkit-part="connect-prompt"]) {
-    background: var(--domainkit-fill);
-    border: 1px solid var(--domainkit-card-border);
-    border-radius: var(--domainkit-radius);
-    padding: var(--domainkit-panel-pad);
-  }
-
-  :where([data-domainkit-part="connected-card"]) {
-    align-items: center;
-    column-gap: 1rem;
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) auto;
-    justify-content: space-between;
-    width: 100%;
-  }
-
-  :where([data-domainkit-part="connected-actions"]) {
-    align-items: center;
-    display: flex;
-    flex-wrap: nowrap;
-    gap: 0.5rem;
-    margin-left: auto;
-  }
-
-  :where([data-domainkit-part="actions-trigger"]) {
-    background: transparent;
-    border-color: transparent;
-    color: var(--domainkit-muted);
-    flex: none;
-    font-size: 1.15rem;
-    min-height: 2.25rem;
-    padding: 0;
-    width: 2.25rem;
-  }
-
-  :where(
-    [data-domainkit-part="actions-trigger"]:hover:not(:disabled),
-    [data-domainkit-part="actions-trigger"][data-popup-open]
-  ) {
-    background: var(--domainkit-fill);
-    color: var(--domainkit-text);
-  }
-
-  :where([data-domainkit-part="actions-menu"]) {
-    background: var(--domainkit-background);
-    border: 1px solid var(--domainkit-border);
-    border-radius: var(--domainkit-control-radius);
-    box-shadow: var(--domainkit-shadow);
-    color: var(--domainkit-text);
-    display: grid;
-    min-width: 11rem;
-    padding: 0.3rem;
-    transform-origin: var(--transform-origin);
-    transition:
-      opacity 120ms ease,
-      transform 120ms ease;
-    z-index: 1002;
-  }
-
-  :where(
-    [data-domainkit-part="actions-menu"][data-starting-style],
-    [data-domainkit-part="actions-menu"][data-ending-style]
-  ) {
-    opacity: 0;
-    transform: scale(0.98);
-  }
-
-  :where([data-domainkit-part="actions-item"]) {
-    align-items: center;
-    background: transparent;
-    border: 0;
-    border-radius: calc(var(--domainkit-control-radius) * 0.75);
-    cursor: pointer;
-    display: flex;
-    font: inherit;
-    font-size: 0.875rem;
-    min-height: 2.25rem;
-    outline: none;
-    padding: 0.45rem 0.65rem;
-    text-align: left;
-    width: 100%;
-  }
-
-  :where([data-domainkit-part="actions-item"][data-highlighted]) {
-    background: var(--domainkit-fill);
-  }
-
-  :where([data-domainkit-part="actions-item"][data-tone="danger"]) {
-    color: var(--domainkit-danger);
-  }
-
-  :where([data-domainkit-part="actions-separator"]) {
-    background: var(--domainkit-border);
-    height: 1px;
-    margin: 0.25rem 0.35rem;
-  }
-
-  @media (max-width: 36rem) {
-    :where([data-domainkit-part="connected-card"]) {
-      grid-template-columns: minmax(0, 1fr);
-    }
-
-    :where([data-domainkit-part="connected-actions"]) {
-      justify-content: space-between;
-      margin-left: 0;
-      width: 100%;
-    }
-  }
-
-  :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="verification-status"]) {
-    display: inline-flex;
-    width: auto;
-  }
-
-  :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="outcome"]),
-  :where([data-domainkit-part="cleanup-flow"] > [data-domainkit-part="outcome"]) {
-    flex: 1 1 100%;
-  }
-
-  :where([data-domainkit-part="verification-positioner"]) {
-    max-width: min(var(--available-width), calc(100vw - 1rem));
-    z-index: 1002;
-  }
-
-  :where([data-domainkit-part="verification-popover"]) {
-    background: var(--domainkit-background);
-    border: 1px solid var(--domainkit-border);
-    border-radius: var(--domainkit-control-radius);
-    box-shadow: 0 6px 20px color-mix(in srgb, var(--domainkit-text) 12%, transparent);
-    box-sizing: border-box;
-    color: var(--domainkit-text);
-    display: grid;
-    gap: 0.625rem;
-    max-height: min(20rem, var(--available-height));
-    max-width: min(18rem, calc(100vw - 1rem), var(--available-width));
-    overflow-x: hidden;
-    overflow-y: auto;
-    padding: 0.625rem;
-    transform-origin: var(--transform-origin);
-    transition:
-      opacity 120ms ease,
-      transform 120ms ease;
-    width: 18rem;
-  }
-
-  :where(
-    [data-domainkit-part="verification-popover"][data-starting-style],
-    [data-domainkit-part="verification-popover"][data-ending-style]
-  ) {
-    opacity: 0;
-    transform: scale(0.98);
-  }
-
-  :where([data-domainkit-part="verification-arrow"]) {
-    display: block;
-    height: 5px;
-    overflow: clip;
-    position: relative;
-    width: 10px;
-  }
-
-  :where([data-domainkit-part="verification-arrow"])::before {
-    background: var(--domainkit-background);
-    border: 1px solid var(--domainkit-border);
-    box-sizing: border-box;
-    content: "";
-    display: block;
-    height: calc(5px * sqrt(2));
-    left: 50%;
-    position: absolute;
-    width: calc(5px * sqrt(2));
-  }
-
-  :where([data-domainkit-part="verification-arrow"][data-side="bottom"]) {
-    top: -5px;
-  }
-
-  :where([data-domainkit-part="verification-arrow"][data-side="bottom"])::before {
-    bottom: 0;
-    transform: translate(-50%, 50%) rotate(45deg);
-  }
-
-  :where([data-domainkit-part="verification-arrow"][data-side="top"]) {
-    bottom: -5px;
-    rotate: 180deg;
-  }
-
-  :where([data-domainkit-part="verification-arrow"][data-side="top"])::before {
-    bottom: 0;
-    transform: translate(-50%, 50%) rotate(45deg);
-  }
-
-  :where([data-domainkit-part="verification-arrow"][data-side="left"]) {
-    right: -7px;
-    rotate: 90deg;
-  }
-
-  :where([data-domainkit-part="verification-arrow"][data-side="left"])::before,
-  :where([data-domainkit-part="verification-arrow"][data-side="right"])::before {
-    bottom: 0;
-    transform: translate(-50%, 50%) rotate(45deg);
-  }
-
-  :where([data-domainkit-part="verification-arrow"][data-side="right"]) {
-    left: -7px;
-    rotate: -90deg;
-  }
-
-  :where([data-domainkit-part="verification-progress"]) {
-    color: var(--domainkit-muted);
-    font-size: 0.8125rem;
-    margin: 0;
-  }
-
-  :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.625rem;
-    max-width: 18rem;
-    padding: 0.75rem 0.85rem;
-    width: 100%;
-  }
-
-  :where([data-domainkit-part="verification-popover"] > [data-domainkit-part="observation-list"]) {
-    background: transparent;
-    border: 0;
-    box-sizing: border-box;
-    max-width: none;
-    padding: 0;
-  }
-
-  :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 0 0.125rem;
-    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.5rem;
-  }
-
-  /* A record name longer than the popover wraps inside its own cell; the status keeps the row. */
-  :where([data-domainkit-part="observation-record"]) {
-    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-    font-size: 0.75rem;
-    font-weight: 600;
-    min-width: 0;
-    overflow-wrap: anywhere;
-  }
-
-  :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;
-  }
-
-  /* Glyph and word are one badge: a narrow status column breaks the line, not the badge. */
-  :where([data-domainkit-part="record-status"]) {
-    align-items: center;
-    border-radius: 999px;
-    display: inline-flex;
-    font-size: 0.6875rem;
-    font-weight: 600;
-    gap: 0.25rem;
-    letter-spacing: 0.02em;
-    padding: 0.15rem 0.45rem;
-    white-space: nowrap;
-  }
-
-  /* The glyph reads at the size of the word beside it rather than a size above it. */
-  :where([data-domainkit-part="record-status"] [data-icon] svg) {
-    height: 1em;
-    width: 1em;
-  }
-
-  :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);
-  }
-
-  /* A record name is longer than a dialog is wide; it wraps rather than running off the row. */
-  :where([data-domainkit-part="operation-record"]) {
-    color: var(--domainkit-muted);
-    display: grid;
-    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-    font-size: 0.75rem;
-    gap: 0.2rem;
-    min-width: 0;
-    overflow-wrap: anywhere;
-  }
-
-  :where([data-domainkit-part="operation-value"]) {
-    color: var(--domainkit-text);
-    overflow-wrap: anywhere;
-    white-space: pre-wrap;
-  }
-
-  :where([data-domainkit-part="operation-priority"]) {
-    font-size: 0.6875rem;
-  }
-
-  :where([data-domainkit-part="operation-reason"]) {
-    color: var(--domainkit-danger);
-  }
-
-  :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;
-  }
-
-  /* -------------------------------------------------------------------------------------------
-   * Outcome: media, title, description, and the action, in a card or on one line
-   * ----------------------------------------------------------------------------------------- */
-
-  :where([data-domainkit-part="outcome"]) {
-    --domainkit-outcome-tone: var(--domainkit-danger);
-    color: var(--domainkit-text);
-    font-size: 0.875rem;
-    width: 100%;
-  }
-
-  :where([data-domainkit-part="outcome"][data-tone="success"]) {
-    --domainkit-outcome-tone: var(--domainkit-success);
-  }
-
-  :where([data-domainkit-part="outcome"][data-tone="warning"]) {
-    --domainkit-outcome-tone: var(--domainkit-warning);
-  }
-
-  :where([data-domainkit-part="outcome"][data-layout="card"]) {
-    border: 1px dashed color-mix(in srgb, var(--domainkit-outcome-tone) 45%, transparent);
-    border-radius: var(--domainkit-radius);
-    display: grid;
-    gap: 0.75rem;
-    justify-items: center;
-    padding: 1.25rem 1rem;
-    text-align: center;
-  }
-
-  /* Glyph and title on one row, the description under the title, the action beside both. */
-  :where([data-domainkit-part="outcome"][data-layout="inline"]) {
-    align-items: start;
-    column-gap: 0.5rem;
-    display: grid;
-    grid-template-columns: auto minmax(0, 1fr) auto;
-    row-gap: 0.15rem;
-  }
-
-  /* The header groups the words for a card; inline puts its parts on the outcome's own grid. */
-  :where(
-    [data-domainkit-part="outcome"][data-layout="inline"] [data-domainkit-part="outcome-header"]
-  ) {
-    display: contents;
-  }
-
-  :where(
-    [data-domainkit-part="outcome"][data-layout="inline"] [data-domainkit-part="outcome-media"]
-  ) {
-    grid-area: 1 / 1;
-  }
-
-  :where(
-    [data-domainkit-part="outcome"][data-layout="inline"] [data-domainkit-part="outcome-title"]
-  ) {
-    grid-area: 1 / 2;
-  }
-
-  :where(
-    [data-domainkit-part="outcome"][data-layout="inline"]
-      [data-domainkit-part="outcome-description"]
-  ) {
-    grid-area: 2 / 2;
-  }
-
-  /*
-   * The action sits on the title's row. Spanning the description's row too would hold that row
-   * open where an outcome has no description, and leave the row's gap under a single line.
-   */
-  :where(
-    [data-domainkit-part="outcome"][data-layout="inline"] [data-domainkit-part="outcome-content"]
-  ) {
-    align-self: start;
-    grid-area: 1 / 3;
-  }
-
-  :where([data-domainkit-part="outcome-header"]) {
-    display: grid;
-    gap: 0.25rem;
-    justify-items: inherit;
-  }
-
-  :where(
-    [data-domainkit-part="outcome"][data-layout="card"] [data-domainkit-part="outcome-header"]
-  ) {
-    gap: 0.35rem;
-    max-width: 26rem;
-  }
-
-  :where([data-domainkit-part="outcome-media"]) {
-    align-items: center;
-    color: var(--domainkit-outcome-tone);
-    display: inline-flex;
-    justify-content: center;
-  }
-
-  :where([data-domainkit-part="outcome-media"] svg) {
-    height: 1.25rem;
-    width: 1.25rem;
-  }
-
-  :where([data-domainkit-part="outcome-media"][data-variant="icon"]) {
-    background: color-mix(in srgb, var(--domainkit-outcome-tone) 12%, transparent);
-    border-radius: var(--domainkit-control-radius);
-    height: 2.25rem;
-    width: 2.25rem;
-  }
-
-  :where(
-    [data-domainkit-part="outcome"][data-layout="inline"]
-      [data-domainkit-part="outcome-media"][data-variant="icon"]
-  ) {
-    background: none;
-    height: 1.25rem;
-    width: 1.25rem;
-  }
-
-  :where([data-domainkit-part="outcome-title"]) {
-    color: var(--domainkit-text);
-    font-size: 0.875rem;
-    font-weight: 600;
-  }
-
-  :where([data-domainkit-part="outcome-description"]) {
-    color: var(--domainkit-muted);
-    font-size: 0.8125rem;
-    margin: 0;
-  }
-
-  :where([data-domainkit-part="outcome-content"]) {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-  }
-
-  :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;
-    }
-  }
-
-  /* ---------------------------------------------------------------------------------------------
-   * Domain.Flow, the connection form, and the review actions
-   * ------------------------------------------------------------------------------------------- */
-
-  [data-domainkit-part="domain-flow"] {
-    display: grid;
-    gap: 0.75rem;
-    justify-items: start;
-  }
-
-  [data-domainkit-part="domain-flow"] > [data-domainkit-part="records-panel"],
-  [data-domainkit-part="domain-flow"] > [data-domainkit-part="connected-card"] {
-    justify-self: stretch;
-    width: 100%;
-  }
-
-  [data-domainkit-part="connection-form"] {
-    display: grid;
-    gap: 1rem;
-  }
-
-  [data-domainkit-part="provider-heading"] {
-    align-items: center;
-    color: var(--domainkit-text);
-    display: flex;
-    font-size: 0.875rem;
-    gap: 0.5rem;
-  }
-
-  [data-domainkit-part="token-connect"] {
-    display: grid;
-    gap: 0.5rem;
-  }
-
-  [data-domainkit-part="field"] {
-    display: grid;
-    gap: 0.25rem;
-  }
-
-  [data-domainkit-part="field"][data-orientation="horizontal"] {
-    align-items: center;
-    grid-template-columns: auto minmax(0, 1fr);
-  }
-
-  [data-domainkit-part="field-label"] {
-    align-items: baseline;
-    color: var(--domainkit-muted);
-    display: flex;
-    font-size: 0.8125rem;
-    gap: 0.375rem;
-  }
-
-  [data-domainkit-part="field-optional"] {
-    font-size: 0.75rem;
-    opacity: 0.8;
-  }
-
-  [data-domainkit-part="field-input"] {
-    background-color: var(--domainkit-background);
-    border: 1px solid var(--domainkit-border);
-    border-radius: var(--domainkit-control-radius);
-    color: var(--domainkit-text);
-    font: inherit;
-    font-size: 0.875rem;
-    padding: 0.4375rem 0.625rem;
-    width: 100%;
-  }
-
-  [data-domainkit-part="field-input"]:focus-visible {
-    border-color: var(--domainkit-accent);
-    outline: none;
-  }
-
-  [data-domainkit-part="field-input"][aria-invalid="true"] {
-    border-color: var(--domainkit-danger);
-  }
-
-  [data-domainkit-part="field-error"] {
-    display: grid;
-    gap: 0.25rem;
-  }
-
-  [data-domainkit-part="field-description"] {
-    align-items: center;
-    border-radius: var(--domainkit-control-radius);
-    color: var(--domainkit-muted);
-    display: inline-flex;
-    font-size: 0.8125rem;
-    gap: 0.25rem;
-    justify-self: start;
-    margin-block: var(--domainkit-quiet-lead) var(--domainkit-quiet-trail);
-    margin-inline-start: calc(-1 * var(--domainkit-quiet-inset));
-    padding: var(--domainkit-quiet-pad) var(--domainkit-quiet-inset);
-    text-decoration: none;
-  }
-
-  [data-domainkit-part="field-description"]:hover {
-    background: var(--domainkit-fill);
-    color: var(--domainkit-text);
-  }
-
-  /* ---------------------------------------------------------------------------------------------
-   * The disconnected prompt, and the disclosures that keep the dialog to one decision
-   * ------------------------------------------------------------------------------------------- */
-
-  [data-domainkit-part="connect-prompt"] {
-    align-items: center;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.75rem;
-    justify-content: space-between;
-    width: 100%;
-  }
-
-  /*
-   * The mark beside a name, with the line about it directly under: both cards read the same. Two
-   * explicit rows carry the name and the line, and the mark spans them, so it stands against the
-   * whole identity rather than hanging off the name.
-   */
-  [data-domainkit-part="connected-identity"],
-  [data-domainkit-part="host-identity"] {
-    column-gap: 0.5rem;
-    display: grid;
-    grid-template-columns: auto minmax(0, 1fr);
-    grid-template-rows: auto auto;
-    min-width: 0;
-    row-gap: 0;
-  }
-
-  [data-domainkit-part="connected-identity"] > [data-domainkit-part="provider-mark"],
-  [data-domainkit-part="host-identity"] > [data-domainkit-part="provider-mark"] {
-    align-self: center;
-    grid-row: 1 / -1;
-  }
-
-  [data-domainkit-part="host-name"] {
-    font-size: var(--domainkit-identity-name);
-    font-weight: 600;
-    grid-column: 2;
-    line-height: var(--domainkit-identity-leading);
-  }
-
-  [data-domainkit-part="host-statement"] {
-    color: var(--domainkit-muted);
-    font-size: var(--domainkit-identity-line);
-    grid-column: 2;
-    line-height: var(--domainkit-identity-leading);
-  }
-
-  button[data-domainkit-part="provider-heading"] {
-    background: none;
-    border: 0;
-    cursor: pointer;
-    padding: 0;
-    text-align: start;
-    width: 100%;
-  }
-
-  [data-domainkit-part="discovery-resolved"],
-  [data-domainkit-part="discovery-candidates"] {
-    display: grid;
-    gap: 0.5rem;
-  }
-
-  [data-domainkit-part="review-actions"] {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-  }
-
-  [data-domainkit-part="provisioning-status"],
-  [data-domainkit-part="cleanup-status"],
-  [data-domainkit-part="plan-decline-reason"],
-  [data-domainkit-part="plan-empty"] {
-    color: var(--domainkit-muted);
-    font-size: 0.875rem;
-    margin: 0;
-  }
-
-  [data-domainkit-part="provisioning-status"]:empty,
-  [data-domainkit-part="cleanup-status"]:empty,
-  [data-domainkit-part="connection-status"]:empty {
-    display: none;
-  }
-
-  [data-domainkit-part="record-purpose"] {
-    color: var(--domainkit-muted);
-    display: block;
-    font-size: 0.8125rem;
-  }
-
-  [data-domainkit-part="host-evidence"] {
-    align-items: center;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.375rem;
-  }
-
-  /* A DKIM key is one word wider than the popover; it breaks rather than widening the whole list. */
-  [data-domainkit-part="observation-expected"] {
-    color: var(--domainkit-muted);
-    font-size: 0.8125rem;
-    margin: 0;
-    overflow-wrap: anywhere;
-  }
-
-  /* The source line above these is a small uppercase label; the values under it are data. */
-  [data-domainkit-part="observation-observed"] {
-    color: var(--domainkit-text);
-    display: block;
-    font-size: 0.8125rem;
-    font-weight: 400;
-    letter-spacing: normal;
-    margin-top: 0.125rem;
-    overflow-wrap: anywhere;
-    text-transform: none;
-  }
-
-  [data-domainkit-part="observation-source"] [data-domainkit-part="observation-note"] {
-    font-weight: 400;
-    letter-spacing: normal;
-    text-transform: none;
-  }
-}