@nordcode/ui 1.1.7 → 1.3.0

package/out/complete.css

@@ -12,14 +12,15 @@
     --line-height-base: 1.55;
     --line-height-small: 1.1;
     --tracking-base: normal;
-    --tracking-tight: -.04ch;
-    --tracking-wide: .06ch;
-    --measure-large: 88ch;
-    --measure-base: 72ch;
-    --measure-small: 44ch;
+    --tracking-tight: -.02em;
+    --tracking-wide: .03em;
+    --measure-large: 44em;
+    --measure-base: 36em;
+    --measure-small: 22em;
     --font-size-smallest: max(.75rem, 12px);
     --font-size-small: max(.875rem, 14px);
     --font-size-base: 1rem;
+    --font-size-medium: 1.125rem;
     --font-size-large: 1.25rem;
     --font-size-largest: 1.5rem;
     --font-size-display: 3.5rem;
@@ -221,71 +222,84 @@
 
 @layer theme {
   :where(html) {
+    --lightningcss-light: initial;
+    --lightningcss-dark: ;
     color-scheme: light dark;
   }
 
+  @media (prefers-color-scheme: dark) {
+    :where(html) {
+      --lightningcss-light: ;
+      --lightningcss-dark: initial;
+    }
+  }
+
   :where([data-theme="light"]) {
+    --lightningcss-light: initial;
+    --lightningcss-dark: ;
     color-scheme: light;
   }
 
   :where([data-theme="dark"]) {
+    --lightningcss-light: ;
+    --lightningcss-dark: initial;
     color-scheme: dark;
   }
 
   :where(:root) {
-    --l-brand-primary: light-dark(var(--l-brand-primary-light), var(--l-brand-primary-dark));
-    --color-brand-primary-emphasis: light-dark(var(--color-brand-primary-emphasis-light), var(--color-brand-primary-emphasis-dark));
-    --color-brand-primary-base: light-dark(var(--color-brand-primary-base-light), var(--color-brand-primary-base-dark));
-    --color-brand-primary-surface: light-dark(var(--color-brand-primary-surface-light), var(--color-brand-primary-surface-dark));
-    --color-brand-primary-hover: light-dark(var(--color-brand-primary-hover-light), var(--color-brand-primary-hover-light));
-    --color-brand-primary-contrast-lightness: light-dark(var(--color-brand-primary-contrast-lightness-light), var(--color-brand-primary-contrast-lightness-dark));
-    --color-brand-primary-contrast: light-dark(var(--color-brand-primary-contrast-light), var(--color-brand-primary-contrast-dark));
-    --color-brand-secondary-emphasis: light-dark(var(--color-brand-secondary-emphasis-light), var(--color-brand-secondary-emphasis-dark));
-    --color-brand-secondary-base: light-dark(var(--color-brand-secondary-base-light), var(--color-brand-secondary-base-dark));
-    --color-brand-secondary-surface: light-dark(var(--color-brand-secondary-surface-light), var(--color-brand-secondary-surface-dark));
-    --color-brand-secondary-hover: light-dark(var(--color-brand-secondary-hover-light), var(--color-brand-secondary-hover-dark));
-    --color-brand-secondary-contrast: light-dark(var(--color-brand-secondary-contrast-light), var(--color-brand-secondary-contrast-dark));
-    --color-text-base: light-dark(var(--color-text-base-light), var(--color-text-base-dark));
-    --color-text-muted: light-dark(var(--color-text-muted-light), var(--color-text-muted-dark));
-    --color-text-subtle: light-dark(var(--color-text-subtle-light), var(--color-text-subtle-dark));
-    --color-text-on-emphasis: light-dark(var(--color-text-on-emphasis-light), var(--color-text-on-emphasis-dark));
-    --color-text-hover: light-dark(var(--color-text-hover-light), var(--color-text-hover-dark));
-    --color-surface-base: light-dark(var(--color-surface-base-light), var(--color-surface-base-dark));
-    --color-surface-muted: light-dark(var(--color-surface-muted-light), var(--color-surface-muted-dark));
-    --color-surface-subtle: light-dark(var(--color-surface-subtle-light), var(--color-surface-subtle-dark));
-    --color-surface-emphasis: light-dark(var(--color-surface-emphasis-light), var(--color-surface-emphasis-dark));
-    --color-border-base: light-dark(var(--color-border-base-light), var(--color-border-base-dark));
-    --color-border-muted: light-dark(var(--color-border-muted-light), var(--color-border-muted-dark));
-    --color-border-subtle: light-dark(var(--color-border-subtle-light), var(--color-border-subtle-dark));
-    --color-border-on-emphasis: light-dark(var(--color-border-on-emphasis-light), var(--color-border-on-emphasis-dark));
-    --color-border-hover: light-dark(var(--color-border-hover-light), var(--color-border-hover-dark));
-    --color-status-info-emphasis: light-dark(var(--color-status-info-emphasis-light), var(--color-status-info-emphasis-dark));
-    --color-status-info-base: light-dark(var(--color-status-info-base-light), var(--color-status-info-base-dark));
-    --color-status-info-surface: light-dark(var(--color-status-info-surface-light), var(--color-status-info-surface-dark));
-    --color-status-info-hover: light-dark(var(--color-status-info-hover-light), var(--color-status-info-hover-light));
-    --color-status-info-contrast-lightness: light-dark(var(--color-status-info-contrast-lightness-light), var(--color-status-info-contrast-lightness-dark));
-    --color-status-info-contrast: light-dark(var(--color-status-info-contrast-light), var(--color-status-info-contrast-dark));
-    --color-status-success-emphasis: light-dark(var(--color-status-success-emphasis-light), var(--color-status-success-emphasis-dark));
-    --color-status-success-base: light-dark(var(--color-status-success-base-light), var(--color-status-success-base-dark));
-    --color-status-success-surface: light-dark(var(--color-status-success-surface-light), var(--color-status-success-surface-dark));
-    --color-status-success-hover: light-dark(var(--color-status-success-hover-light), var(--color-status-success-hover-light));
-    --color-status-success-contrast-lightness: light-dark(var(--color-status-success-contrast-lightness-light), var(--color-status-success-contrast-lightness-dark));
-    --color-status-success-contrast: light-dark(var(--color-status-success-contrast-light), var(--color-status-success-contrast-dark));
-    --color-status-warning-emphasis: light-dark(var(--color-status-warning-emphasis-light), var(--color-status-warning-emphasis-dark));
-    --color-status-warning-base: light-dark(var(--color-status-warning-base-light), var(--color-status-warning-base-dark));
-    --color-status-warning-surface: light-dark(var(--color-status-warning-surface-light), var(--color-status-warning-surface-dark));
-    --color-status-warning-hover: light-dark(var(--color-status-warning-hover-light), var(--color-status-warning-hover-light));
-    --color-status-warning-contrast-lightness: light-dark(var(--color-status-warning-contrast-lightness-light), var(--color-status-warning-contrast-lightness-dark));
-    --color-status-warning-contrast: light-dark(var(--color-status-warning-contrast-light), var(--color-status-warning-contrast-dark));
-    --color-status-danger-emphasis: light-dark(var(--color-status-danger-emphasis-light), var(--color-status-danger-emphasis-dark));
-    --color-status-danger-base: light-dark(var(--color-status-danger-base-light), var(--color-status-danger-base-dark));
-    --color-status-danger-surface: light-dark(var(--color-status-danger-surface-light), var(--color-status-danger-surface-dark));
-    --color-status-danger-hover: light-dark(var(--color-status-danger-hover-light), var(--color-status-danger-hover-light));
-    --color-status-danger-contrast-lightness: light-dark(var(--color-status-danger-contrast-lightness-light), var(--color-status-danger-contrast-lightness-dark));
-    --color-status-danger-contrast: light-dark(var(--color-status-danger-contrast-light), var(--color-status-danger-contrast-dark));
-    --shadow-color: light-dark(var(--shadow-color-light), var(--shadow-color-dark));
-    --triangle-down-url: light-dark(var(--triangle-down-url-light), var(--triangle-down-url-dark));
-    --triangle-up-url: light-dark(var(--triangle-up-url-light), var(--triangle-up-url-dark));
+    --l-brand-primary: var(--lightningcss-light, var(--l-brand-primary-light)) var(--lightningcss-dark, var(--l-brand-primary-dark));
+    --color-brand-primary-emphasis: var(--lightningcss-light, var(--color-brand-primary-emphasis-light)) var(--lightningcss-dark, var(--color-brand-primary-emphasis-dark));
+    --color-brand-primary-base: var(--lightningcss-light, var(--color-brand-primary-base-light)) var(--lightningcss-dark, var(--color-brand-primary-base-dark));
+    --color-brand-primary-surface: var(--lightningcss-light, var(--color-brand-primary-surface-light)) var(--lightningcss-dark, var(--color-brand-primary-surface-dark));
+    --color-brand-primary-hover: var(--lightningcss-light, var(--color-brand-primary-hover-light)) var(--lightningcss-dark, var(--color-brand-primary-hover-light));
+    --color-brand-primary-contrast-lightness: var(--lightningcss-light, var(--color-brand-primary-contrast-lightness-light)) var(--lightningcss-dark, var(--color-brand-primary-contrast-lightness-dark));
+    --color-brand-primary-contrast: var(--lightningcss-light, var(--color-brand-primary-contrast-light)) var(--lightningcss-dark, var(--color-brand-primary-contrast-dark));
+    --color-brand-secondary-emphasis: var(--lightningcss-light, var(--color-brand-secondary-emphasis-light)) var(--lightningcss-dark, var(--color-brand-secondary-emphasis-dark));
+    --color-brand-secondary-base: var(--lightningcss-light, var(--color-brand-secondary-base-light)) var(--lightningcss-dark, var(--color-brand-secondary-base-dark));
+    --color-brand-secondary-surface: var(--lightningcss-light, var(--color-brand-secondary-surface-light)) var(--lightningcss-dark, var(--color-brand-secondary-surface-dark));
+    --color-brand-secondary-hover: var(--lightningcss-light, var(--color-brand-secondary-hover-light)) var(--lightningcss-dark, var(--color-brand-secondary-hover-dark));
+    --color-brand-secondary-contrast: var(--lightningcss-light, var(--color-brand-secondary-contrast-light)) var(--lightningcss-dark, var(--color-brand-secondary-contrast-dark));
+    --color-text-base: var(--lightningcss-light, var(--color-text-base-light)) var(--lightningcss-dark, var(--color-text-base-dark));
+    --color-text-muted: var(--lightningcss-light, var(--color-text-muted-light)) var(--lightningcss-dark, var(--color-text-muted-dark));
+    --color-text-subtle: var(--lightningcss-light, var(--color-text-subtle-light)) var(--lightningcss-dark, var(--color-text-subtle-dark));
+    --color-text-on-emphasis: var(--lightningcss-light, var(--color-text-on-emphasis-light)) var(--lightningcss-dark, var(--color-text-on-emphasis-dark));
+    --color-text-hover: var(--lightningcss-light, var(--color-text-hover-light)) var(--lightningcss-dark, var(--color-text-hover-dark));
+    --color-surface-base: var(--lightningcss-light, var(--color-surface-base-light)) var(--lightningcss-dark, var(--color-surface-base-dark));
+    --color-surface-muted: var(--lightningcss-light, var(--color-surface-muted-light)) var(--lightningcss-dark, var(--color-surface-muted-dark));
+    --color-surface-subtle: var(--lightningcss-light, var(--color-surface-subtle-light)) var(--lightningcss-dark, var(--color-surface-subtle-dark));
+    --color-surface-emphasis: var(--lightningcss-light, var(--color-surface-emphasis-light)) var(--lightningcss-dark, var(--color-surface-emphasis-dark));
+    --color-border-base: var(--lightningcss-light, var(--color-border-base-light)) var(--lightningcss-dark, var(--color-border-base-dark));
+    --color-border-muted: var(--lightningcss-light, var(--color-border-muted-light)) var(--lightningcss-dark, var(--color-border-muted-dark));
+    --color-border-subtle: var(--lightningcss-light, var(--color-border-subtle-light)) var(--lightningcss-dark, var(--color-border-subtle-dark));
+    --color-border-on-emphasis: var(--lightningcss-light, var(--color-border-on-emphasis-light)) var(--lightningcss-dark, var(--color-border-on-emphasis-dark));
+    --color-border-hover: var(--lightningcss-light, var(--color-border-hover-light)) var(--lightningcss-dark, var(--color-border-hover-dark));
+    --color-status-info-emphasis: var(--lightningcss-light, var(--color-status-info-emphasis-light)) var(--lightningcss-dark, var(--color-status-info-emphasis-dark));
+    --color-status-info-base: var(--lightningcss-light, var(--color-status-info-base-light)) var(--lightningcss-dark, var(--color-status-info-base-dark));
+    --color-status-info-surface: var(--lightningcss-light, var(--color-status-info-surface-light)) var(--lightningcss-dark, var(--color-status-info-surface-dark));
+    --color-status-info-hover: var(--lightningcss-light, var(--color-status-info-hover-light)) var(--lightningcss-dark, var(--color-status-info-hover-light));
+    --color-status-info-contrast-lightness: var(--lightningcss-light, var(--color-status-info-contrast-lightness-light)) var(--lightningcss-dark, var(--color-status-info-contrast-lightness-dark));
+    --color-status-info-contrast: var(--lightningcss-light, var(--color-status-info-contrast-light)) var(--lightningcss-dark, var(--color-status-info-contrast-dark));
+    --color-status-success-emphasis: var(--lightningcss-light, var(--color-status-success-emphasis-light)) var(--lightningcss-dark, var(--color-status-success-emphasis-dark));
+    --color-status-success-base: var(--lightningcss-light, var(--color-status-success-base-light)) var(--lightningcss-dark, var(--color-status-success-base-dark));
+    --color-status-success-surface: var(--lightningcss-light, var(--color-status-success-surface-light)) var(--lightningcss-dark, var(--color-status-success-surface-dark));
+    --color-status-success-hover: var(--lightningcss-light, var(--color-status-success-hover-light)) var(--lightningcss-dark, var(--color-status-success-hover-light));
+    --color-status-success-contrast-lightness: var(--lightningcss-light, var(--color-status-success-contrast-lightness-light)) var(--lightningcss-dark, var(--color-status-success-contrast-lightness-dark));
+    --color-status-success-contrast: var(--lightningcss-light, var(--color-status-success-contrast-light)) var(--lightningcss-dark, var(--color-status-success-contrast-dark));
+    --color-status-warning-emphasis: var(--lightningcss-light, var(--color-status-warning-emphasis-light)) var(--lightningcss-dark, var(--color-status-warning-emphasis-dark));
+    --color-status-warning-base: var(--lightningcss-light, var(--color-status-warning-base-light)) var(--lightningcss-dark, var(--color-status-warning-base-dark));
+    --color-status-warning-surface: var(--lightningcss-light, var(--color-status-warning-surface-light)) var(--lightningcss-dark, var(--color-status-warning-surface-dark));
+    --color-status-warning-hover: var(--lightningcss-light, var(--color-status-warning-hover-light)) var(--lightningcss-dark, var(--color-status-warning-hover-light));
+    --color-status-warning-contrast-lightness: var(--lightningcss-light, var(--color-status-warning-contrast-lightness-light)) var(--lightningcss-dark, var(--color-status-warning-contrast-lightness-dark));
+    --color-status-warning-contrast: var(--lightningcss-light, var(--color-status-warning-contrast-light)) var(--lightningcss-dark, var(--color-status-warning-contrast-dark));
+    --color-status-danger-emphasis: var(--lightningcss-light, var(--color-status-danger-emphasis-light)) var(--lightningcss-dark, var(--color-status-danger-emphasis-dark));
+    --color-status-danger-base: var(--lightningcss-light, var(--color-status-danger-base-light)) var(--lightningcss-dark, var(--color-status-danger-base-dark));
+    --color-status-danger-surface: var(--lightningcss-light, var(--color-status-danger-surface-light)) var(--lightningcss-dark, var(--color-status-danger-surface-dark));
+    --color-status-danger-hover: var(--lightningcss-light, var(--color-status-danger-hover-light)) var(--lightningcss-dark, var(--color-status-danger-hover-light));
+    --color-status-danger-contrast-lightness: var(--lightningcss-light, var(--color-status-danger-contrast-lightness-light)) var(--lightningcss-dark, var(--color-status-danger-contrast-lightness-dark));
+    --color-status-danger-contrast: var(--lightningcss-light, var(--color-status-danger-contrast-light)) var(--lightningcss-dark, var(--color-status-danger-contrast-dark));
+    --shadow-color: var(--lightningcss-light, var(--shadow-color-light)) var(--lightningcss-dark, var(--shadow-color-dark));
+    --triangle-down-url: var(--lightningcss-light, var(--triangle-down-url-light)) var(--lightningcss-dark, var(--triangle-down-url-dark));
+    --triangle-up-url: var(--lightningcss-light, var(--triangle-up-url-light)) var(--lightningcss-dark, var(--triangle-up-url-dark));
   }
 }
 
@@ -317,7 +331,7 @@
 
   :where(:not(:active):focus-visible) {
     outline: var(--border-width-medium) solid var(--color-brand-primary-base);
-    outline-offset: 1ch;
+    outline-offset: .5em;
   }
 
   :where(:focus:not(:focus-visible)) {
@@ -427,7 +441,7 @@
   }
 
   :where(dl:not([class]), .nc-description-list) {
-    word-break: break-word;
+    overflow-wrap: anywhere;
     grid-template-columns: .25fr .75fr;
     align-items: flex-start;
     row-gap: .5lh;
@@ -447,7 +461,7 @@
       grid-column: 1 / 1;
       min-block-size: 100%;
       padding-block-end: 0;
-      padding-inline-end: 2ch;
+      padding-inline-end: 1em;
     }
 
     :where(dt):not(:last-of-type) {
@@ -483,19 +497,19 @@
   :where(figcaption) {
     color: var(--color-surface-subtle);
     background-color: var(--color-text-base);
-    padding: .25lh 1ch;
+    padding: .35em .5em;
     display: block;
   }
 
   :where(details) {
-    --p-x-details: 2ch;
-    --p-y-details: .75lh;
+    --p-x-details: 1em;
+    --p-y-details: 1em;
     --b-r-details: var(--border-radius-medium);
     background-color: var(--color-surface-muted);
     border-radius: var(--b-r-details);
-    border: var(--border-width-thin) solid var(--color-border-base);
     padding: var(--p-y-details) var(--p-x-details);
     inline-size: 100%;
+    box-shadow: 0 0 0 var(--border-width-thin) var(--color-border-base);
   }
 
   :where(details) > summary {
@@ -504,7 +518,7 @@
     font-weight: var(--font-weight-heading);
     border-radius: var(--b-r-details);
     padding: var(--p-y-details) var(--p-x-details);
-    margin: calc(-1 * var(--p-y-details)) calc(-1 * var(--p-x-details)  + var(--border-width-thin));
+    margin: calc(-1 * var(--p-y-details)) calc(-1 * var(--p-x-details));
   }
 
   :where(details)[open] > summary {
@@ -521,7 +535,7 @@
     font-size: var(--font-size-large);
     margin-inline: 0;
     padding: 0;
-    padding-inline-start: 2ch;
+    padding-inline-start: 1em;
     position: relative;
   }
 
@@ -548,7 +562,7 @@
 
   :is(.note, blockquote) cite:before {
     content: "—";
-    margin-inline-end: .5ch;
+    margin-inline-end: .5em;
   }
 
   cite {
@@ -611,7 +625,7 @@
   :where(a, .nc-link) {
     color: inherit;
     font-family: var(--font-family-link);
-    text-underline-offset: .25lh;
+    text-underline-offset: .35em;
     font-weight: var(--font-weight-default);
     cursor: pointer;
     letter-spacing: var(--tracking-tight);
@@ -662,7 +676,7 @@
     line-height: inherit;
     -webkit-box-decoration-break: clone;
     box-decoration-break: clone;
-    padding-inline: .5ch;
+    padding-inline: .25em;
   }
 
   :where(code, kbd, var) {
@@ -674,10 +688,9 @@
     tab-size: 4;
     text-align: left;
     word-spacing: normal;
-    word-break: normal;
-    word-wrap: normal;
+    overflow-wrap: normal;
     max-inline-size: fit-content;
-    padding-block: .125lh;
+    padding-block: .2em;
     font-style: normal;
   }
 
@@ -704,7 +717,7 @@
     border-radius: var(--border-radius-medium);
     background: var(--color-surface-subtle);
     -webkit-overflow-scrolling: touch;
-    padding: .5lh 2ch;
+    padding: 1em;
     overflow-x: auto;
   }
 
@@ -745,7 +758,7 @@
     line-height: var(--line-height-small);
     white-space: nowrap;
     font-variant-numeric: tabular-nums;
-    padding: .4lh 1ch;
+    padding: .5em;
   }
 
   :where(td), :where(thead th) {
@@ -815,15 +828,11 @@
   }
 
   :where(ul, ol) {
-    padding-inline-start: 2ch;
-  }
-
-  :where(li + li) {
-    margin-block-start: .5lh;
+    padding-inline-start: 1em;
   }
 
-  :where(li > :is(ul, ol)) {
-    margin-block-start: .25lh;
+  :where(li + li), :where(li > :is(ul, ol)) {
+    margin-block-start: .5em;
   }
 
   @supports (font-variant-position: sub) {
@@ -857,7 +866,7 @@
     content: close-quote;
     content: "“";
     content: "”";
-    margin-inline-start: -.87ch;
+    margin-inline-start: -.5em;
   }
 
   :where(.quoted p) {
@@ -950,11 +959,11 @@
   }
 
   :where(.nc-flow) > * {
-    max-inline-size: var(--flow-base-meassure, 72ch);
+    max-inline-size: var(--flow-base-meassure, 36em);
   }
 
   :where(.nc-flow) > :is(h1, h2, h3, h4, h5, h6) {
-    max-inline-size: var(--flow-headline-meassure, 32ch);
+    max-inline-size: var(--flow-headline-meassure, 16em);
     --flow-gap: 1.5lh;
   }
 
@@ -1432,7 +1441,7 @@
   :where(.nc-alert) {
     background: var(--surface);
     color: var(--text);
-    gap: 1ch;
+    gap: .75em;
   }
 
   :where(.nc-alert) > .nc-icon {
@@ -1459,7 +1468,7 @@
     border-radius: var(--border-radius-small);
     background: var(--surface, transparent);
     inline-size: max-content;
-    padding: .5lh 1ch;
+    padding: .5em;
     line-height: 1;
   }
 }
@@ -1484,7 +1493,7 @@
     color: inherit;
     content: "›";
     font-size: inherit;
-    padding-inline: 1ch;
+    padding-inline: .5em;
   }
 
   :where(.nc-breadcrumb-link) {
@@ -1617,7 +1626,7 @@
   }
 
   :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button).-small {
-    --_button-padding-inline: 1ch;
+    --_button-padding-inline: .5em;
     min-block-size: var(--button-height-small);
   }
 
@@ -1626,8 +1635,8 @@
   }
 
   :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button).-offset {
-    --_button-offset-distance: var(--button-offset-distance, -.1lh);
-    --_button-offset-distance-hover: var(--button-offset-distance-hover, -.05lh);
+    --_button-offset-distance: var(--button-offset-distance, -.15em);
+    --_button-offset-distance-hover: var(--button-offset-distance-hover, -.075em);
     --_button-transform: translate(var(--_button-offset-distance), var(--_button-offset-distance));
     --_button-hover-transform: translate(var(--_button-offset-distance-hover), var(--_button-offset-distance-hover));
     --button-box-shadow: calc(var(--_button-offset-distance) / -2) calc(var(--_button-offset-distance) / -2) 0 0 var(--shadow-color), calc(var(--_button-offset-distance) * -1) calc(var(--_button-offset-distance) * -1) 0 0 var(--shadow-color), calc(var(--_button-offset-distance) * -1) calc(var(--_button-offset-distance) * -1) calc(var(--_button-offset-distance) * -2) 0 var(--shadow-color);
@@ -1642,7 +1651,7 @@
   }
 
   :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button):has(svg) {
-    gap: .5ch;
+    gap: .25em;
   }
 
   :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button)[aria-label], :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button).-icon {
@@ -1683,7 +1692,7 @@
     border: var(--_input-border);
     min-block-size: var(--button-height-base);
     border-radius: var(--_input-border-radius);
-    padding-inline: 0 1ch;
+    padding-inline: 0 .5em;
   }
 
   :where(input[type="file"]:not([class]))::-webkit-file-upload-button {
@@ -1697,7 +1706,7 @@
     border-inline-end: var(--border-width-thin) solid var(--color-border-base);
     border-start-end-radius: 0;
     border-end-end-radius: 0;
-    margin-inline-end: 1ch;
+    margin-inline-end: .5em;
     inset-block-start: 0;
     inset-inline-start: 0;
     transform: none;
@@ -1714,7 +1723,7 @@
     border-inline-end: var(--border-width-thin) solid var(--color-border-base);
     border-start-end-radius: 0;
     border-end-end-radius: 0;
-    margin-inline-end: 1ch;
+    margin-inline-end: .5em;
     inset-block-start: 0;
     inset-inline-start: 0;
     transform: none;
@@ -1747,7 +1756,7 @@
     padding-block: var(--_card-padding-block);
     color: var(--_card-color);
     appearance: none;
-    border: 1px solid var(--_card-border-color);
+    border: var(--border-width-thin) solid var(--_card-border-color);
     background-color: var(--_card-background-color);
     border-radius: var(--_card-border-radius);
     box-shadow: var(--_card-shadow);
@@ -1786,6 +1795,34 @@
   :where(.nc-card):is([href], button):hover {
     border-color: var(--color-brand-primary-base);
   }
+
+  :where(.nc-clickable-card) {
+    cursor: pointer;
+    position: relative;
+  }
+
+  :where(.nc-clickable-card):focus-within, :where(.nc-clickable-card):hover {
+    outline: var(--border-width-medium) solid var(--color-brand-primary-base);
+  }
+
+  :where(.nc-clickable-card) a[data-link="main"] {
+    font: inherit;
+    text-decoration: none;
+  }
+
+  :where(.nc-clickable-card) a[data-link="main"]:focus-within:focus-visible, :where(.nc-clickable-card) a[data-link="main"]:hover {
+    outline: none;
+  }
+
+  :where(.nc-clickable-card) a[data-link="main"]:before {
+    content: "";
+    position: absolute;
+    inset: 0;
+  }
+
+  :where(.nc-clickable-card) a[data-link="extra"] {
+    position: relative;
+  }
 }
 
 @layer components.dialogs {
@@ -1806,7 +1843,7 @@
     max-inline-size: var(--_dialog-max-inline-size);
     background: var(--color-surface-base);
     border-radius: var(--_dialog-radius);
-    overflow-clip-margin: 1rem;
+    overflow-clip-margin: 1em;
     pointer-events: all;
     max-block-size: 100dvh;
     margin: auto 0;
@@ -1846,7 +1883,7 @@
     block-size: max-content;
     inline-size: 100%;
     max-block-size: var(--_dialog-max-block-size);
-    overflow-clip-margin: 1rem;
+    overflow-clip-margin: 1em;
     grid-template: "header header"
                    "content content" 1fr
                    "footer footer"
@@ -1943,7 +1980,7 @@
   :where(.nc-form-hint) {
     font-size: var(--font-size-large);
     color: var(--color-text-muted);
-    margin-block: .5lh;
+    margin-block: .75em;
   }
 
   :where(fieldset:not([class]), .nc-fieldset) {
@@ -1961,12 +1998,12 @@
   }
 
   :where(legend:not([class]), .nc-legend) + * {
-    margin-block-start: var(--nc-legend-spacing, .8lh);
+    margin-block-start: var(--nc-legend-spacing, 1em);
   }
 
   :where(:is(fieldset:not([class]), .nc-fieldset):has(:is(.nc-legend + .nc-hint, legend:not([class]) + .nc-hint)) > :is(legend:not([class]), .nc-legend) + .nc-hint) {
-    --nc-legend-spacing: .125lh;
-    margin-block-end: .5lh;
+    --nc-legend-spacing: .2em;
+    margin-block-end: .75em;
   }
 }
 
@@ -2146,9 +2183,9 @@
 
   :where(select:not([class]), .nc-select) {
     background-image: var(--triangle-down-url);
-    background-position: right 1ch top 50%;
-    background-size: 1.5ch 1.25ch;
-    padding-inline-end: 3.5ch;
+    background-position: right .5em top 50%;
+    background-size: 1em .75em;
+    padding-inline-end: 1.75em;
   }
 
   :where(textarea:not([class]), .nc-textarea) {
@@ -2283,11 +2320,11 @@
     --_tag-select-checked-text-color: var(--tag-select-checked-text-color, var(--color-brand-primary-contrast));
     --_tag-select-checked-surface-color: var(--tag-select-checked-surface-color, var(--color-brand-primary-base));
     --_tag-select-border-radius: var(--tag-select-border-radius, var(--_input-border-radius));
-    --nc-legend-spacing: .25lh;
+    --nc-legend-spacing: .35em;
   }
 
   :where(.nc-tag-select-field):focus-within:has(:focus-visible) {
-    outline-offset: 1ch;
+    outline-offset: .5em;
     outline: var(--_input-outline);
     border-radius: var(--_tag-select-border-radius);
   }
@@ -2324,7 +2361,7 @@
     max-inline-size: var(--input-field-max-inline-size);
     grid-template-columns: minmax(0, 1fr);
     place-items: start;
-    gap: .25lh;
+    gap: .35em;
     display: grid;
   }
 
@@ -2333,7 +2370,7 @@
   }
 
   :where(.nc-input-field) > .nc-cluster {
-    gap: 1ch;
+    gap: .5em;
   }
 
   :where(.nc-input-error) {
@@ -2354,7 +2391,7 @@
     align-items: center;
     block-size: 1em;
     inline-size: 1em;
-    margin-inline-end: 1ch;
+    margin-inline-end: .5em;
     display: inline-flex;
   }
 
@@ -2368,7 +2405,7 @@
 
   :where(.nc-checkbox-wrapper) > [data-label] {
     grid-area: label;
-    padding-inline-start: 1ch;
+    padding-inline-start: .5em;
   }
 
   :where(.nc-checkbox-wrapper) .nc-input-label {
@@ -2388,7 +2425,7 @@
   }
 
   :where(.nc-radio-field, .nc-checkbox-field) > :not(:first-child) {
-    margin-block-start: .6lh;
+    margin-block-start: .75em;
   }
 }
 
@@ -2397,7 +2434,7 @@
     --_segmented-control-border-radius: var(--segmented-control-border-radius, var(--_input-border-radius));
     --_segmented-control-checked-text-color: var(--segmented-control-checked-text-color, var(--color-brand-primary-contrast));
     --_segmented-control-checked-surface-color: var(--segmented-control-checked-surface-color, var(--color-brand-primary-base));
-    --nc-legend-spacing: .25lh;
+    --nc-legend-spacing: .35em;
     container: segmented-control / inline-size;
   }
 
@@ -2554,7 +2591,7 @@
   }
 
   :where(.nc-meta-list-item):not(:last-child) {
-    margin-block-end: 1ch;
+    margin-block-end: .5em;
   }
 
   @container metalist (width >= 20rem) {
@@ -2566,7 +2603,7 @@
       content: "";
       border-right: var(--border-width-medium) solid var(--color-border-muted);
       transform: calc(var(--border-width-medium) / 2);
-      margin: 0 1ch;
+      margin: 0 .5em;
     }
   }
 
@@ -2586,7 +2623,7 @@
     --_notification-max-width: var(--notifications-max-width, 20rem);
     --_notification-gap: var(--notification-gap, var(--spacing-base));
     --_notification-border-color: var(--notification-border-color, var(--color-border-base));
-    --_notification-center-background: var(--notification-center-background, color-mix(in oklch, var(---color-surface-subtle), transparent 95%) ;);
+    --_notification-center-background: var(--notification-center-background, color-mix(in oklch, var(---color-surface-subtle), transparent 95%));
   }
 
   :where(.nc-notification-center, .nc-notification-output) {
@@ -2651,7 +2688,7 @@
     color: var(--color-text-base);
     pointer-events: all;
     flex-direction: column;
-    padding: .5lh 2ch;
+    padding: .5em 1em;
     display: flex;
   }
 
@@ -2678,7 +2715,7 @@
     justify-content: space-between;
     align-items: flex-end;
     inline-size: 100%;
-    margin-block-start: .5ch;
+    margin-block-start: .25em;
     display: flex;
   }