nexus-shared 3.1.0 → 4.0.0

package/src/Styles/Nexus.Popup.css

@@ -1,724 +1,800 @@
-@layer nexus.components {
-  /*
-   * Popup: a native <dialog> shown modally. The panel is the dialog itself, so a click on the backdrop reaches the
-   * dialog element and nothing else. The header and footer stay while the body scrolls.
-   */
-  .nx-popup {
-    --nx-popup-width: 560px;
-
-    /* Percentages, not vw: the viewport width here leaves out the scrollbar. */
-    width: min(var(--nx-popup-width), calc(100% - 32px));
-    max-width: none;
-    max-height: min(calc(100vh - 48px), calc(100dvh - 48px));
-    margin: auto;
-    padding: 0;
-    overflow: hidden;
-    border: 1px solid var(--nx-border);
-    border-radius: var(--nx-radius-lg);
-    background: var(--nx-surface);
-    color: var(--nx-text);
-    box-shadow: var(--nx-shadow);
-    outline: none;
-    /* Where the title bar moved it, from the center (set by the Popup while dragging). */
-    translate: var(--nx-popup-x, 0px) var(--nx-popup-y, 0px);
-  }
-
-  /*
-   * Opening and closing are a plain fade, the popup and its backdrop together: it appears where it stays, at the size
-   * it keeps, so nothing in it moves while it fades. Closing waits for its fade (`afterAnimation`), and takes no clicks
-   * meanwhile, so a double-click on Save does not submit twice; with animations off there is no fade to wait for.
-   */
-  .nx-popup[open] {
-    display: flex;
-    flex-direction: column;
-    animation: nx-popup-in 160ms ease-out;
-  }
-
-  .nx-popup::backdrop {
-    background: rgb(0 0 0 / 0.5);
-    animation: nx-popup-in 160ms ease-out;
-  }
-
-  .nx-popup--closing[open] {
-    animation: nx-popup-out 120ms ease-in forwards;
-    pointer-events: none;
-  }
-
-  .nx-popup--closing::backdrop {
-    animation: nx-popup-out 120ms ease-in forwards;
-  }
-
-  @keyframes nx-popup-in {
-    from {
-      opacity: 0;
-    }
-  }
-
-  @keyframes nx-popup-out {
-    to {
-      opacity: 0;
-    }
-  }
-
-  /* The page behind a modal popup stops scrolling; the Popup sets --nx-scrollbar-gap to the scrollbar's width, so nothing shifts. */
-  :root:has(.nx-popup:modal) {
-    overflow: hidden;
-    padding-right: var(--nx-scrollbar-gap, 0px);
-  }
-
-  /* Sizes */
-  .nx-popup--xs {
-    --nx-popup-width: 360px;
-  }
-
-  .nx-popup--sm {
-    --nx-popup-width: 440px;
-  }
-
-  .nx-popup--lg {
-    --nx-popup-width: 720px;
-  }
-
-  .nx-popup--xl {
-    --nx-popup-width: 960px;
-  }
-
-  .nx-popup--full {
-    --nx-popup-width: calc(100% - 32px);
-
-    height: calc(100vh - 32px);
-    max-height: none;
-  }
-
-  /* Maximized: the whole window, edge to edge, wherever it was moved. Two classes, to win over the sizes and phones. */
-  .nx-popup.nx-popup--maximized {
-    width: 100%;
-    height: 100%;
-    max-height: none;
-    border-width: 0;
-    border-radius: 0;
-    translate: none;
-  }
-
-  /* Minimizing: the page comes back while the popup flies to the dock. */
-  .nx-popup[data-nx-minimizing] {
-    pointer-events: none;
-  }
-
-  .nx-popup[data-nx-minimizing]::backdrop {
-    animation: nx-popup-out 200ms ease-in forwards;
-  }
-
-  /* Header, either design: the title bar moves the popup, so it selects no text and a touch drags instead of scrolling. */
-  .nx-popup__head {
-    display: flex;
-    flex-shrink: 0;
-  }
-
-  .nx-popup--movable .nx-popup__head {
-    cursor: move;
-    touch-action: none;
-    user-select: none;
-  }
-
-  .nx-popup__title,
-  .nx-popup__description {
-    margin: 0;
-  }
-
-  .nx-popup__controls {
-    display: flex;
-    flex-shrink: 0;
-    margin-left: auto;
-  }
-
-  .nx-popup__control {
-    display: grid;
-    place-items: center;
-    padding: 0;
-    border: 0;
-    background: none;
-    color: var(--nx-text-muted);
-    cursor: pointer;
-    transition:
-      background-color var(--nx-duration),
-      color var(--nx-duration);
-  }
-
-  .nx-popup__control .nx-icon {
-    vertical-align: 0;
-  }
-
-  /* Close turns red on hover, the one button that throws away what the popup holds. */
-  .nx-popup__close:hover {
-    background: var(--nx-danger-solid);
-    color: var(--nx-danger-text);
-  }
-
-  /*
-   * Window (the default): one low title bar, as on a desktop window. The icon and the title on the left, the
-   * description after the title in muted text, and the window buttons filling the top right corner.
-   */
-  .nx-popup--window {
-    --nx-popup-bar: 32px;
-  }
-
-  .nx-popup--window .nx-popup__head {
-    box-sizing: content-box;
-    align-items: center;
-    gap: var(--nx-space-2);
-    height: var(--nx-popup-bar);
-    padding-left: var(--nx-space-3);
-    border-bottom: 1px solid var(--nx-border);
-    background: color-mix(in oklab, var(--nx-surface), var(--nx-text) 4%);
-  }
-
-  .nx-popup--window .nx-popup__icon {
-    display: grid;
-    flex-shrink: 0;
-    place-items: center;
-    color: var(--nx-primary);
-  }
-
-  .nx-popup--window .nx-popup__icon .nx-icon {
-    width: 16px;
-    height: 16px;
-    vertical-align: 0;
-  }
-
-  /* One line: the title keeps its room, the description takes what is left, and both end in … when cut. */
-  .nx-popup--window .nx-popup__heading {
-    display: flex;
-    flex: 1 1 auto;
-    align-items: baseline;
-    gap: var(--nx-space-2);
-    min-width: 0;
-    white-space: nowrap;
-  }
-
-  .nx-popup--window .nx-popup__title {
-    flex: 0 1 auto;
-    min-width: 0;
-    overflow: hidden;
-    font-size: var(--nx-text-sm);
-    font-weight: 600;
-    line-height: var(--nx-popup-bar);
-    text-overflow: ellipsis;
-  }
-
-  .nx-popup--window .nx-popup__description {
-    flex: 1 1 0;
-    min-width: 0;
-    overflow: hidden;
-    color: var(--nx-text-muted);
-    font-size: var(--nx-text-xs);
-    text-overflow: ellipsis;
-  }
-
-  .nx-popup--window .nx-popup__controls {
-    align-self: stretch;
-  }
-
-  .nx-popup--window .nx-popup__control {
-    width: 46px;
-    height: 100%;
-  }
-
-  .nx-popup--window .nx-popup__control:hover {
-    background: color-mix(in oklab, var(--nx-text) 9%, transparent);
-    color: var(--nx-text);
-  }
-
-  .nx-popup--window .nx-popup__control:active {
-    background: color-mix(in oklab, var(--nx-text) 15%, transparent);
-  }
-
-  .nx-popup--window .nx-popup__close:hover {
-    background: var(--nx-danger-solid);
-    color: var(--nx-danger-text);
-  }
-
-  .nx-popup--window .nx-popup__close:active {
-    background: var(--nx-danger-hover);
-  }
-
-  /* The buttons touch the popup's edges, where an outer ring would be cut off, so the ring is drawn inside. */
-  .nx-popup--window .nx-popup__control:focus-visible {
-    outline: none;
-    box-shadow: inset 0 0 0 2px var(--nx-primary);
-  }
-
-  /* Thin lines, as desktop window buttons have; the square glyphs fill more of their box, so they are drawn smaller. */
-  .nx-popup--window .nx-popup__control .nx-icon {
-    width: 16px;
-    height: 16px;
-    stroke-width: 1.5;
-  }
-
-  .nx-popup--window .nx-popup__maximize .nx-icon {
-    width: 13px;
-    height: 13px;
-    stroke-width: 1.75;
-  }
-
-  /* Touch screens get taller buttons. */
-  @media (pointer: coarse) {
-    .nx-popup--window {
-      --nx-popup-bar: 40px;
-    }
-
-    .nx-popup--window .nx-popup__control {
-      width: 48px;
-    }
-  }
-
-  /*
-   * Dialog (message boxes): a larger heading, the icon in a circle that carries the tone, the description under the
-   * title, and a small close button.
-   */
-  .nx-popup--dialog .nx-popup__head {
-    align-items: flex-start;
-    gap: var(--nx-space-3);
-    padding: var(--nx-space-5) var(--nx-space-5) 0;
-  }
-
-  .nx-popup--dialog .nx-popup__icon {
-    display: grid;
-    flex-shrink: 0;
-    place-items: center;
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    background: var(--nx-primary-soft);
-    color: var(--nx-primary);
-  }
-
-  .nx-popup--dialog .nx-popup__icon .nx-icon {
-    width: 22px;
-    height: 22px;
-    vertical-align: 0;
-  }
-
-  .nx-popup--dialog .nx-popup__heading {
-    flex: 1 1 auto;
-    min-width: 0;
-    padding-top: 2px;
-  }
-
-  .nx-popup--dialog .nx-popup__title {
-    font-size: var(--nx-text-lg);
-    font-weight: 600;
-    line-height: 1.35;
-    overflow-wrap: anywhere;
-  }
-
-  .nx-popup--dialog .nx-popup__description {
-    margin-top: 4px;
-    color: var(--nx-text-muted);
-    font-size: var(--nx-text-sm);
-    line-height: 1.45;
-  }
-
-  .nx-popup--dialog .nx-popup__controls {
-    gap: 2px;
-    margin: -6px -8px 0 auto;
-  }
-
-  .nx-popup--dialog .nx-popup__control {
-    width: 30px;
-    height: 30px;
-    border-radius: var(--nx-radius);
-  }
-
-  .nx-popup--dialog .nx-popup__control:not(.nx-popup__close):hover {
-    background: var(--nx-surface-hover);
-    color: var(--nx-text);
-  }
-
-  .nx-popup--dialog .nx-popup__control:focus-visible {
-    outline: none;
-    box-shadow: var(--nx-focus-ring);
-  }
-
-  .nx-popup--dialog .nx-popup__control .nx-icon {
-    width: 18px;
-    height: 18px;
-  }
-
-  .nx-popup--dialog .nx-popup__maximize .nx-icon {
-    width: 15px;
-    height: 15px;
-  }
-
-  /* Body: scrolls when the content is taller than the window allows. */
-  .nx-popup__body {
-    flex: 1 1 auto;
-    min-height: 0;
-    padding: var(--nx-space-4) var(--nx-space-5) var(--nx-space-5);
-    overflow: auto;
-    overscroll-behavior: contain;
-  }
-
-  .nx-popup__head + .nx-popup__body:empty {
-    padding-top: var(--nx-space-2);
-  }
-
-  .nx-popup__body:only-child,
-  .nx-popup--window .nx-popup__body {
-    padding-top: var(--nx-space-5);
-  }
-
-  .nx-popup--flush .nx-popup__body {
-    padding: 0;
-  }
-
-  /* Footer: buttons at the end. */
-  .nx-popup__foot {
-    display: flex;
-    flex-shrink: 0;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: flex-end;
-    gap: var(--nx-space-2);
-    padding: var(--nx-space-3) var(--nx-space-5);
-    border-top: 1px solid var(--nx-border);
-  }
-
-  /* A form's bar fills the foot, so its status line sits beside the buttons instead of on a row of its own. */
-  .nx-popup__foot > .nx-form-buttons {
-    flex: 1 1 auto;
-  }
-
-  /* Message boxes: a small popup whose icon carries the tone. */
-  .nx-popup--message .nx-popup__body {
-    padding-top: var(--nx-space-2);
-  }
-
-  .nx-popup--message .nx-popup__body:empty {
-    padding: var(--nx-space-3) 0 0;
-  }
-
-  .nx-message__text {
-    color: var(--nx-text-muted);
-    line-height: 1.5;
-  }
-
-  .nx-message__form {
-    display: grid;
-    gap: var(--nx-space-4);
-  }
-
-  .nx-popup--tone-info .nx-popup__icon {
-    background: var(--nx-info-soft);
-    color: var(--nx-info);
-  }
-
-  .nx-popup--tone-success .nx-popup__icon {
-    background: var(--nx-success-soft);
-    color: var(--nx-success);
-  }
-
-  .nx-popup--tone-warning .nx-popup__icon {
-    background: var(--nx-warning-soft);
-    color: var(--nx-warning);
-  }
-
-  .nx-popup--tone-danger .nx-popup__icon {
-    background: var(--nx-danger-soft);
-    color: var(--nx-danger);
-  }
-
-  /*
-   * The dock: minimized popups as bars at the bottom right. Several stack behind the newest, with cards peeking out
-   * above it and a count that opens the whole list. It sits on the page, so an open popup's backdrop covers it.
-   */
-  .nx-dock {
-    --nx-dock-edge: 16px;
-
-    position: fixed;
-    right: calc(var(--nx-dock-edge) + env(safe-area-inset-right, 0px));
-    bottom: calc(var(--nx-dock-edge) + env(safe-area-inset-bottom, 0px));
-    z-index: 1000;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    gap: var(--nx-space-2);
-    width: min(300px, calc(100% - 2 * var(--nx-dock-edge)));
-    max-height: calc(100dvh - 2 * var(--nx-dock-edge));
-    /* Only the bars and the count take clicks, not the space between them. */
-    pointer-events: none;
-  }
-
-  .nx-dock > * {
-    pointer-events: auto;
-  }
-
-  /* While a popup locks the page, its scrollbar's space is padding; the dock keeps its place beside it. */
-  :root:has(.nx-popup:modal) .nx-dock {
-    right: calc(var(--nx-dock-edge) + var(--nx-scrollbar-gap, 0px) + env(safe-area-inset-right, 0px));
-  }
-
-  .nx-dock__toggle {
-    display: inline-flex;
-    flex-shrink: 0;
-    align-items: center;
-    gap: 6px;
-    height: 28px;
-    padding: 0 10px 0 4px;
-    border: 1px solid var(--nx-border);
-    border-radius: var(--nx-radius-full);
-    background: light-dark(var(--nx-surface), var(--nx-surface-2));
-    color: var(--nx-text);
-    box-shadow: var(--nx-shadow-sm);
-    font: inherit;
-    font-size: var(--nx-text-sm);
-    font-weight: 600;
-    cursor: pointer;
-    transition: background-color var(--nx-duration);
-  }
-
-  .nx-dock__toggle:hover {
-    background: var(--nx-surface-hover);
-  }
-
-  .nx-dock__toggle:focus-visible {
-    outline: none;
-    box-shadow: var(--nx-focus-ring);
-  }
-
-  .nx-dock__toggle .nx-icon {
-    width: 16px;
-    height: 16px;
-    color: var(--nx-text-muted);
-  }
-
-  .nx-dock__count {
-    display: grid;
-    place-items: center;
-    min-width: 20px;
-    height: 20px;
-    padding: 0 6px;
-    border-radius: var(--nx-radius-full);
-    background: var(--nx-primary-solid);
-    color: var(--nx-primary-text);
-    font-size: var(--nx-text-xs);
-    font-variant-numeric: tabular-nums;
-    line-height: 1;
-  }
-
-  .nx-dock__list {
-    position: relative;
-    isolation: isolate;
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    width: 100%;
-    min-height: 0;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-
-  /* Open: the whole list, oldest at the top; it scrolls when taller than the window, with room for the shadows. */
-  .nx-dock--open .nx-dock__list {
-    margin: -8px;
-    padding: 8px;
-    width: calc(100% + 16px);
-    overflow-y: auto;
-    overscroll-behavior: contain;
-  }
-
-  /* Stacked: one or two cards peek out above the newest bar; a click on them opens the list. */
-  .nx-dock__list[data-depth] {
-    margin-top: calc(var(--nx-dock-depth) * 5px);
-    cursor: pointer;
-  }
-
-  .nx-dock__list[data-depth="1"] {
-    --nx-dock-depth: 1;
-  }
-
-  .nx-dock__list[data-depth="2"] {
-    --nx-dock-depth: 2;
-  }
-
-  .nx-dock__list[data-depth]::before,
-  .nx-dock__list[data-depth="2"]::after {
-    content: "";
-    position: absolute;
-    top: -5px;
-    right: 8px;
-    left: 8px;
-    z-index: -1;
-    height: 24px;
-    border: 1px solid var(--nx-border);
-    border-radius: var(--nx-radius-lg);
-    background: light-dark(var(--nx-surface), var(--nx-surface-2));
-    box-shadow: var(--nx-shadow-sm);
-  }
-
-  .nx-dock__list[data-depth="2"]::after {
-    top: -10px;
-    right: 16px;
-    left: 16px;
-    z-index: -2;
-  }
-
-  .nx-dock__item {
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    gap: 2px;
-    height: 44px;
-    padding-right: 6px;
-    border: 1px solid var(--nx-border);
-    border-radius: var(--nx-radius-lg);
-    background: light-dark(var(--nx-surface), var(--nx-surface-2));
-    color: var(--nx-text);
-    box-shadow: var(--nx-shadow);
-    cursor: default;
-    transition: background-color var(--nx-duration);
-    animation: nx-dock-in 180ms cubic-bezier(0.2, 0, 0, 1);
-  }
-
-  .nx-dock__item:has(.nx-dock__window:hover) {
-    background: var(--nx-surface-hover);
-  }
-
-  .nx-dock__item:has(.nx-dock__window:focus-visible) {
-    box-shadow: var(--nx-focus-ring), var(--nx-shadow);
-  }
-
-  /* The bar's title part brings the popup back. */
-  .nx-dock__window {
-    display: flex;
-    flex: 1 1 auto;
-    align-items: center;
-    gap: 10px;
-    min-width: 0;
-    height: 100%;
-    padding: 0 6px 0 7px;
-    border: 0;
-    border-radius: inherit;
-    background: none;
-    color: inherit;
-    font: inherit;
-    text-align: start;
-    cursor: pointer;
-  }
-
-  .nx-dock__window:focus-visible {
-    outline: none;
-  }
-
-  .nx-dock__icon {
-    display: grid;
-    flex-shrink: 0;
-    place-items: center;
-    width: 28px;
-    height: 28px;
-    border-radius: var(--nx-radius);
-    background: var(--nx-primary-soft);
-    color: var(--nx-primary);
-  }
-
-  .nx-dock__icon .nx-icon {
-    width: 16px;
-    height: 16px;
-    vertical-align: 0;
-  }
-
-  .nx-dock__title {
-    flex: 1 1 auto;
-    min-width: 0;
-    overflow: hidden;
-    font-size: var(--nx-text-md);
-    font-weight: 600;
-    line-height: 1.3;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .nx-dock__restore {
-    flex-shrink: 0;
-    width: 18px;
-    height: 18px;
-    color: var(--nx-text-muted);
-  }
-
-  .nx-dock__window:hover .nx-dock__restore {
-    color: var(--nx-text);
-  }
-
-  .nx-dock__close {
-    display: grid;
-    flex-shrink: 0;
-    place-items: center;
-    width: 30px;
-    height: 30px;
-    padding: 0;
-    border: 0;
-    border-radius: var(--nx-radius);
-    background: none;
-    color: var(--nx-text-muted);
-    cursor: pointer;
-    transition:
-      background-color var(--nx-duration),
-      color var(--nx-duration);
-  }
-
-  .nx-dock__close:hover {
-    background: var(--nx-danger-solid);
-    color: var(--nx-danger-text);
-  }
-
-  .nx-dock__close:focus-visible {
-    outline: none;
-    box-shadow: var(--nx-focus-ring);
-  }
-
-  .nx-dock__close .nx-icon {
-    width: 16px;
-    height: 16px;
-    vertical-align: 0;
-  }
-
-  @keyframes nx-dock-in {
-    from {
-      opacity: 0;
-      transform: translateY(8px);
-    }
-  }
-
-  @media (max-width: 600px) {
-    .nx-popup {
-      width: calc(100% - 16px);
-      max-height: min(calc(100vh - 16px), calc(100dvh - 16px));
-    }
-
-    .nx-popup--dialog .nx-popup__head {
-      padding: var(--nx-space-4) var(--nx-space-4) 0;
-    }
-
-    .nx-popup__body {
-      padding: var(--nx-space-3) var(--nx-space-4) var(--nx-space-4);
-    }
-
-    .nx-popup--window:not(.nx-popup--flush) .nx-popup__body {
-      padding-top: var(--nx-space-4);
-    }
-
-    .nx-popup__foot {
-      padding: var(--nx-space-3) var(--nx-space-4);
-    }
-  }
-
-  [data-nx-motion="reduce"] .nx-popup[open],
-  [data-nx-motion="reduce"] .nx-popup--closing[open],
-  [data-nx-motion="reduce"] .nx-popup::backdrop,
-  [data-nx-motion="reduce"] .nx-popup--closing::backdrop,
-  [data-nx-motion="reduce"] .nx-popup[data-nx-minimizing]::backdrop,
-  [data-nx-motion="reduce"] .nx-dock__item {
-    animation: none;
-  }
-}
+@layer nexus.components {
+  /*
+   * Popup: a native <dialog> shown modally. The panel is the dialog itself, so a click on the backdrop reaches the
+   * dialog element and nothing else. The header and footer stay while the body scrolls.
+   */
+  .nx-popup {
+    --nx-popup-width: 560px;
+
+    /* Percentages, not vw: the viewport width here leaves out the scrollbar. */
+    width: min(var(--nx-popup-width), calc(100% - 32px));
+    max-width: none;
+    max-height: min(calc(100vh - 48px), calc(100dvh - 48px));
+    margin: auto;
+    padding: 0;
+    overflow: hidden;
+    border: 1px solid var(--nx-border);
+    border-radius: var(--nx-radius-lg);
+    background: var(--nx-surface);
+    color: var(--nx-text);
+    box-shadow: var(--nx-shadow);
+    outline: none;
+    /* Where the title bar moved it, from the center (set by the Popup while dragging). */
+    translate: var(--nx-popup-x, 0px) var(--nx-popup-y, 0px);
+  }
+
+  /*
+   * Opening and closing are a plain fade, the popup and its backdrop together: it appears where it stays, at the size
+   * it keeps, so nothing in it moves while it fades. Closing waits for its fade (`afterAnimation`), and takes no clicks
+   * meanwhile, so a double-click on Save does not submit twice; with animations off there is no fade to wait for.
+   */
+  .nx-popup[open] {
+    display: flex;
+    flex-direction: column;
+    animation: nx-popup-in 160ms ease-out;
+  }
+
+  .nx-popup::backdrop {
+    background: rgb(0 0 0 / 0.5);
+    animation: nx-popup-in 160ms ease-out;
+  }
+
+  .nx-popup--closing[open] {
+    animation: nx-popup-out 120ms ease-in forwards;
+    pointer-events: none;
+  }
+
+  .nx-popup--closing::backdrop {
+    animation: nx-popup-out 120ms ease-in forwards;
+  }
+
+  @keyframes nx-popup-in {
+    from {
+      opacity: 0;
+    }
+  }
+
+  @keyframes nx-popup-out {
+    to {
+      opacity: 0;
+    }
+  }
+
+  /* The page behind a modal popup stops scrolling; the Popup sets --nx-scrollbar-gap to the scrollbar's width, so nothing shifts. */
+  :root:has(.nx-popup:modal) {
+    overflow: hidden;
+    padding-right: var(--nx-scrollbar-gap, 0px);
+  }
+
+  /* Sizes */
+  .nx-popup--xs {
+    --nx-popup-width: 360px;
+  }
+
+  .nx-popup--sm {
+    --nx-popup-width: 440px;
+  }
+
+  .nx-popup--lg {
+    --nx-popup-width: 720px;
+  }
+
+  .nx-popup--xl {
+    --nx-popup-width: 960px;
+  }
+
+  .nx-popup--full {
+    --nx-popup-width: calc(100% - 32px);
+
+    height: calc(100vh - 32px);
+    max-height: none;
+  }
+
+  /* Maximized: the whole window, edge to edge, wherever it was moved. Two classes, to win over the sizes and phones. */
+  .nx-popup.nx-popup--maximized {
+    width: 100%;
+    height: 100%;
+    max-height: none;
+    border-width: 0;
+    border-radius: 0;
+    translate: none;
+  }
+
+  /* Minimizing: the page comes back while the popup flies to the dock. */
+  .nx-popup[data-nx-minimizing] {
+    pointer-events: none;
+  }
+
+  .nx-popup[data-nx-minimizing]::backdrop {
+    animation: nx-popup-out 200ms ease-in forwards;
+  }
+
+  /* Header, either design: the title bar moves the popup, so it selects no text and a touch drags instead of scrolling. */
+  .nx-popup__head {
+    display: flex;
+    flex-shrink: 0;
+  }
+
+  .nx-popup--movable .nx-popup__head {
+    cursor: move;
+    touch-action: none;
+    user-select: none;
+  }
+
+  .nx-popup__title,
+  .nx-popup__description {
+    margin: 0;
+  }
+
+  .nx-popup__controls {
+    display: flex;
+    flex-shrink: 0;
+    margin-left: auto;
+  }
+
+  .nx-popup__control {
+    display: grid;
+    place-items: center;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--nx-text-muted);
+    cursor: pointer;
+    transition:
+      background-color var(--nx-duration),
+      color var(--nx-duration);
+  }
+
+  .nx-popup__control .nx-icon {
+    vertical-align: 0;
+  }
+
+  /* Close turns red on hover, the one button that throws away what the popup holds. */
+  .nx-popup__close:hover {
+    background: var(--nx-danger-solid);
+    color: var(--nx-danger-text);
+  }
+
+  /*
+   * Window (the default): one low title bar, as on a desktop window. The icon and the title on the left, the
+   * description after the title in muted text, and the window buttons filling the top right corner.
+   */
+  .nx-popup--window {
+    --nx-popup-bar: 32px;
+  }
+
+  .nx-popup--window .nx-popup__head {
+    box-sizing: content-box;
+    align-items: center;
+    gap: var(--nx-space-2);
+    height: var(--nx-popup-bar);
+    padding-left: var(--nx-space-3);
+    border-bottom: 1px solid var(--nx-border);
+    background: color-mix(in oklab, var(--nx-surface), var(--nx-text) 4%);
+  }
+
+  .nx-popup--window .nx-popup__icon {
+    display: grid;
+    flex-shrink: 0;
+    place-items: center;
+    color: var(--nx-primary);
+  }
+
+  .nx-popup--window .nx-popup__icon .nx-icon {
+    width: 16px;
+    height: 16px;
+    vertical-align: 0;
+  }
+
+  /* One line: the title keeps its room, the description takes what is left, and both end in … when cut. */
+  .nx-popup--window .nx-popup__heading {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: baseline;
+    gap: var(--nx-space-2);
+    min-width: 0;
+    white-space: nowrap;
+  }
+
+  .nx-popup--window .nx-popup__title {
+    flex: 0 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    font-size: var(--nx-text-sm);
+    font-weight: 600;
+    line-height: var(--nx-popup-bar);
+    text-overflow: ellipsis;
+  }
+
+  .nx-popup--window .nx-popup__description {
+    flex: 1 1 0;
+    min-width: 0;
+    overflow: hidden;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+    text-overflow: ellipsis;
+  }
+
+  .nx-popup--window .nx-popup__controls {
+    align-self: stretch;
+  }
+
+  .nx-popup--window .nx-popup__control {
+    width: 46px;
+    height: 100%;
+  }
+
+  .nx-popup--window .nx-popup__control:hover {
+    background: color-mix(in oklab, var(--nx-text) 9%, transparent);
+    color: var(--nx-text);
+  }
+
+  .nx-popup--window .nx-popup__control:active {
+    background: color-mix(in oklab, var(--nx-text) 15%, transparent);
+  }
+
+  .nx-popup--window .nx-popup__close:hover {
+    background: var(--nx-danger-solid);
+    color: var(--nx-danger-text);
+  }
+
+  .nx-popup--window .nx-popup__close:active {
+    background: var(--nx-danger-hover);
+  }
+
+  /* The buttons touch the popup's edges, where an outer ring would be cut off, so the ring is drawn inside. */
+  .nx-popup--window .nx-popup__control:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 2px var(--nx-primary);
+  }
+
+  /* Thin lines, as desktop window buttons have; the square glyphs fill more of their box, so they are drawn smaller. */
+  .nx-popup--window .nx-popup__control .nx-icon {
+    width: 16px;
+    height: 16px;
+    stroke-width: 1.5;
+  }
+
+  .nx-popup--window .nx-popup__maximize .nx-icon {
+    width: 13px;
+    height: 13px;
+    stroke-width: 1.75;
+  }
+
+  /* Touch screens get taller buttons. */
+  @media (pointer: coarse) {
+    .nx-popup--window {
+      --nx-popup-bar: 40px;
+    }
+
+    .nx-popup--window .nx-popup__control {
+      width: 48px;
+    }
+  }
+
+  /*
+   * Dialog (message boxes): a larger heading, the icon in a circle that carries the tone, the description under the
+   * title, and a small close button.
+   */
+  .nx-popup--dialog .nx-popup__head {
+    align-items: flex-start;
+    gap: var(--nx-space-3);
+    padding: var(--nx-space-5) var(--nx-space-5) 0;
+  }
+
+  .nx-popup--dialog .nx-popup__icon {
+    display: grid;
+    flex-shrink: 0;
+    place-items: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: var(--nx-primary-soft);
+    color: var(--nx-primary);
+  }
+
+  .nx-popup--dialog .nx-popup__icon .nx-icon {
+    width: 22px;
+    height: 22px;
+    vertical-align: 0;
+  }
+
+  .nx-popup--dialog .nx-popup__heading {
+    flex: 1 1 auto;
+    min-width: 0;
+    padding-top: 2px;
+  }
+
+  .nx-popup--dialog .nx-popup__title {
+    font-size: var(--nx-text-lg);
+    font-weight: 600;
+    line-height: 1.35;
+    overflow-wrap: anywhere;
+  }
+
+  .nx-popup--dialog .nx-popup__description {
+    margin-top: 4px;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+    line-height: 1.45;
+  }
+
+  .nx-popup--dialog .nx-popup__controls {
+    gap: 2px;
+    margin: -6px -8px 0 auto;
+  }
+
+  .nx-popup--dialog .nx-popup__control {
+    width: 30px;
+    height: 30px;
+    border-radius: var(--nx-radius);
+  }
+
+  .nx-popup--dialog .nx-popup__control:not(.nx-popup__close):hover {
+    background: var(--nx-surface-hover);
+    color: var(--nx-text);
+  }
+
+  .nx-popup--dialog .nx-popup__control:focus-visible {
+    outline: none;
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  .nx-popup--dialog .nx-popup__control .nx-icon {
+    width: 18px;
+    height: 18px;
+  }
+
+  .nx-popup--dialog .nx-popup__maximize .nx-icon {
+    width: 15px;
+    height: 15px;
+  }
+
+  /* Body: scrolls when the content is taller than the window allows. */
+  /*
+   * Focus scrolls a field's control to the body's edge: `scroll-padding` keeps room past it for what the field draws
+   * outside, an outlined field's raised label above (0.6em of the xs text, and the 2px outline) and the box's border and
+   * 3px focus ring below. A field first in the body has its padding for that.
+   */
+  .nx-popup__body {
+    flex: 1 1 auto;
+    min-height: 0;
+    padding: var(--nx-space-4) var(--nx-space-5) var(--nx-space-5);
+    overflow: auto;
+    overscroll-behavior: contain;
+    scroll-padding: calc(var(--nx-text-xs) * 0.6 + 2px) 4px 4px;
+  }
+
+  .nx-popup__head + .nx-popup__body:empty {
+    padding-top: var(--nx-space-2);
+  }
+
+  .nx-popup__body:only-child,
+  .nx-popup--window .nx-popup__body {
+    padding-top: var(--nx-space-5);
+  }
+
+  .nx-popup--flush .nx-popup__body {
+    padding: 0;
+  }
+
+  /* Footer: buttons at the end. */
+  .nx-popup__foot {
+    display: flex;
+    flex-shrink: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--nx-space-2);
+    padding: var(--nx-space-3) var(--nx-space-5);
+    border-top: 1px solid var(--nx-border);
+  }
+
+  /* A form's bar fills the foot, so its status line sits beside the buttons instead of on a row of its own. */
+  .nx-popup__foot > .nx-form-buttons {
+    flex: 1 1 auto;
+  }
+
+  /* Message boxes: a small popup whose icon carries the tone. */
+  .nx-popup--message .nx-popup__body {
+    padding-top: var(--nx-space-2);
+  }
+
+  .nx-popup--message .nx-popup__body:empty {
+    padding: var(--nx-space-3) 0 0;
+  }
+
+  .nx-message__text {
+    color: var(--nx-text-muted);
+    line-height: 1.5;
+  }
+
+  /* What a question is about, in full (`details`): read as content, so in the normal text colour, under the message. */
+  .nx-message__details {
+    color: var(--nx-text);
+  }
+
+  .nx-message__text + .nx-message__details {
+    margin-top: var(--nx-space-4);
+  }
+
+  .nx-message__form {
+    display: grid;
+    gap: var(--nx-space-4);
+  }
+
+  .nx-popup--tone-info .nx-popup__icon {
+    background: var(--nx-info-soft);
+    color: var(--nx-info);
+  }
+
+  .nx-popup--tone-success .nx-popup__icon {
+    background: var(--nx-success-soft);
+    color: var(--nx-success);
+  }
+
+  .nx-popup--tone-warning .nx-popup__icon {
+    background: var(--nx-warning-soft);
+    color: var(--nx-warning);
+  }
+
+  .nx-popup--tone-danger .nx-popup__icon {
+    background: var(--nx-danger-soft);
+    color: var(--nx-danger);
+  }
+
+  /*
+   * The dock: minimized popups as bars at the bottom right. Several stack behind the newest, with cards peeking out
+   * above it and a count that opens the whole list. It sits on the page, so an open popup's backdrop covers it.
+   */
+  .nx-dock {
+    --nx-dock-edge: 16px;
+
+    position: fixed;
+    right: calc(var(--nx-dock-edge) + env(safe-area-inset-right, 0px));
+    bottom: calc(var(--nx-dock-edge) + env(safe-area-inset-bottom, 0px));
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: var(--nx-space-2);
+    width: min(300px, calc(100% - 2 * var(--nx-dock-edge)));
+    max-height: calc(100dvh - 2 * var(--nx-dock-edge));
+    /* Only the bars and the count take clicks, not the space between them. */
+    pointer-events: none;
+  }
+
+  .nx-dock > * {
+    pointer-events: auto;
+  }
+
+  /* While a popup locks the page, its scrollbar's space is padding; the dock keeps its place beside it. */
+  :root:has(.nx-popup:modal) .nx-dock {
+    right: calc(var(--nx-dock-edge) + var(--nx-scrollbar-gap, 0px) + env(safe-area-inset-right, 0px));
+  }
+
+  .nx-dock__toggle {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 6px;
+    height: 28px;
+    padding: 0 10px 0 4px;
+    border: 1px solid var(--nx-border);
+    border-radius: var(--nx-radius-full);
+    background: light-dark(var(--nx-surface), var(--nx-surface-2));
+    color: var(--nx-text);
+    box-shadow: var(--nx-shadow-sm);
+    font: inherit;
+    font-size: var(--nx-text-sm);
+    font-weight: 600;
+    cursor: pointer;
+    transition: background-color var(--nx-duration);
+  }
+
+  .nx-dock__toggle:hover {
+    background: var(--nx-surface-hover);
+  }
+
+  .nx-dock__toggle:focus-visible {
+    outline: none;
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  .nx-dock__toggle .nx-icon {
+    width: 16px;
+    height: 16px;
+    color: var(--nx-text-muted);
+  }
+
+  .nx-dock__count {
+    display: grid;
+    place-items: center;
+    min-width: 20px;
+    height: 20px;
+    padding: 0 6px;
+    border-radius: var(--nx-radius-full);
+    background: var(--nx-primary-solid);
+    color: var(--nx-primary-text);
+    font-size: var(--nx-text-xs);
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+  }
+
+  .nx-dock__list {
+    position: relative;
+    isolation: isolate;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    width: 100%;
+    min-height: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  /* Open: the whole list, oldest at the top; it scrolls when taller than the window, with room for the shadows. */
+  .nx-dock--open .nx-dock__list {
+    margin: -8px;
+    padding: 8px;
+    width: calc(100% + 16px);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+
+  /* Stacked: one or two cards peek out above the newest bar; a click on them opens the list. */
+  .nx-dock__list[data-depth] {
+    margin-top: calc(var(--nx-dock-depth) * 5px);
+    cursor: pointer;
+  }
+
+  .nx-dock__list[data-depth="1"] {
+    --nx-dock-depth: 1;
+  }
+
+  .nx-dock__list[data-depth="2"] {
+    --nx-dock-depth: 2;
+  }
+
+  .nx-dock__list[data-depth]::before,
+  .nx-dock__list[data-depth="2"]::after {
+    content: "";
+    position: absolute;
+    top: -5px;
+    right: 8px;
+    left: 8px;
+    z-index: -1;
+    height: 24px;
+    border: 1px solid var(--nx-border);
+    border-radius: var(--nx-radius-lg);
+    background: light-dark(var(--nx-surface), var(--nx-surface-2));
+    box-shadow: var(--nx-shadow-sm);
+  }
+
+  .nx-dock__list[data-depth="2"]::after {
+    top: -10px;
+    right: 16px;
+    left: 16px;
+    z-index: -2;
+  }
+
+  .nx-dock__item {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 2px;
+    height: 44px;
+    padding-right: 6px;
+    border: 1px solid var(--nx-border);
+    border-radius: var(--nx-radius-lg);
+    background: light-dark(var(--nx-surface), var(--nx-surface-2));
+    color: var(--nx-text);
+    box-shadow: var(--nx-shadow);
+    cursor: default;
+    transition: background-color var(--nx-duration);
+    animation: nx-dock-in 180ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  .nx-dock__item:has(.nx-dock__window:hover) {
+    background: var(--nx-surface-hover);
+  }
+
+  .nx-dock__item:has(.nx-dock__window:focus-visible) {
+    box-shadow: var(--nx-focus-ring), var(--nx-shadow);
+  }
+
+  /* The bar's title part brings the popup back. */
+  .nx-dock__window {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    gap: 10px;
+    min-width: 0;
+    height: 100%;
+    padding: 0 6px 0 7px;
+    border: 0;
+    border-radius: inherit;
+    background: none;
+    color: inherit;
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+  }
+
+  .nx-dock__window:focus-visible {
+    outline: none;
+  }
+
+  .nx-dock__icon {
+    display: grid;
+    flex-shrink: 0;
+    place-items: center;
+    width: 28px;
+    height: 28px;
+    border-radius: var(--nx-radius);
+    background: var(--nx-primary-soft);
+    color: var(--nx-primary);
+  }
+
+  .nx-dock__icon .nx-icon {
+    width: 16px;
+    height: 16px;
+    vertical-align: 0;
+  }
+
+  /* The title, and under it what the window is about when it says (its description): the record, the place. */
+  .nx-dock__text {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .nx-dock__title {
+    min-width: 0;
+    overflow: hidden;
+    font-size: var(--nx-text-md);
+    font-weight: 600;
+    line-height: 1.3;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .nx-dock__description {
+    min-width: 0;
+    overflow: hidden;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+    line-height: 1.3;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Muted text on the hover tint moves toward the text color, so it keeps 4.5:1 in every theme. */
+  .nx-dock__window:hover .nx-dock__description {
+    color: color-mix(in oklab, var(--nx-text-muted), var(--nx-text) 35%);
+  }
+
+  .nx-dock__restore {
+    flex-shrink: 0;
+    width: 18px;
+    height: 18px;
+    color: var(--nx-text-muted);
+  }
+
+  .nx-dock__window:hover .nx-dock__restore {
+    color: var(--nx-text);
+  }
+
+  .nx-dock__close {
+    display: grid;
+    flex-shrink: 0;
+    place-items: center;
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    border: 0;
+    border-radius: var(--nx-radius);
+    background: none;
+    color: var(--nx-text-muted);
+    cursor: pointer;
+    transition:
+      background-color var(--nx-duration),
+      color var(--nx-duration);
+  }
+
+  .nx-dock__close:hover {
+    background: var(--nx-danger-solid);
+    color: var(--nx-danger-text);
+  }
+
+  .nx-dock__close:focus-visible {
+    outline: none;
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  .nx-dock__close .nx-icon {
+    width: 16px;
+    height: 16px;
+    vertical-align: 0;
+  }
+
+  @keyframes nx-dock-in {
+    from {
+      opacity: 0;
+      transform: translateY(8px);
+    }
+  }
+
+  @media (max-width: 600px) {
+    .nx-popup {
+      width: calc(100% - 16px);
+      max-height: min(calc(100vh - 16px), calc(100dvh - 16px));
+    }
+
+    .nx-popup--dialog .nx-popup__head {
+      padding: var(--nx-space-4) var(--nx-space-4) 0;
+    }
+
+    .nx-popup__body {
+      padding: var(--nx-space-3) var(--nx-space-4) var(--nx-space-4);
+    }
+
+    .nx-popup--window:not(.nx-popup--flush) .nx-popup__body {
+      padding-top: var(--nx-space-4);
+    }
+
+    .nx-popup__foot {
+      padding: var(--nx-space-3) var(--nx-space-4);
+    }
+
+    /*
+     * A phone has no room for the description after the title: it takes the lines under the title it needs, in full,
+     * and the bar grows with it. The icon and the window buttons keep the bar's first line; the title stays one line.
+     */
+    .nx-popup--window .nx-popup__head {
+      align-items: flex-start;
+      height: auto;
+      min-height: var(--nx-popup-bar);
+    }
+
+    .nx-popup--window .nx-popup__icon {
+      align-self: flex-start;
+      height: var(--nx-popup-bar);
+    }
+
+    .nx-popup--window .nx-popup__heading {
+      flex-wrap: wrap;
+      row-gap: 0;
+    }
+
+    .nx-popup--window .nx-popup__title {
+      flex-basis: 100%;
+    }
+
+    .nx-popup--window .nx-popup__description:not(:empty) {
+      flex-basis: 100%;
+      margin-top: calc(var(--nx-space-1) * -1);
+      padding-bottom: var(--nx-space-2);
+      overflow: visible;
+      line-height: 1.45;
+      white-space: normal;
+      overflow-wrap: anywhere;
+    }
+
+    .nx-popup--window .nx-popup__controls {
+      align-self: flex-start;
+      height: var(--nx-popup-bar);
+    }
+  }
+
+  [data-nx-motion="reduce"] .nx-popup[open],
+  [data-nx-motion="reduce"] .nx-popup--closing[open],
+  [data-nx-motion="reduce"] .nx-popup::backdrop,
+  [data-nx-motion="reduce"] .nx-popup--closing::backdrop,
+  [data-nx-motion="reduce"] .nx-popup[data-nx-minimizing]::backdrop,
+  [data-nx-motion="reduce"] .nx-dock__item {
+    animation: none;
+  }
+}