@leftium/nimble.css 0.6.0 → 0.8.0

package/dist/nimble-core.css

@@ -166,653 +166,41 @@
     grid-template-columns: 1fr min(var(--nc-content-width), calc(100% - 2 * var(--nc-spacing))) 1fr;
     min-height: 100dvh;
   }
-  body > * {
-    grid-column: 2;
-    min-width: 0;
-  }
-  body > [style*="display: contents"] > * {
-    grid-column: 2;
-    min-width: 0;
-  }
   ::selection {
     background-color: var(--nc-primary-focus);
     color: var(--nc-text);
   }
 }
 @layer nimble.base {
-  h1 {
-    font-size: 2rem;
-    line-height: 1.1;
-    margin-top: 0;
-    margin-bottom: var(--nc-spacing);
-    font-weight: 700;
-    text-wrap: balance;
-  }
-  h2 {
-    font-size: 1.75rem;
-    line-height: 1.15;
-    margin-top: 2rem;
-    margin-bottom: var(--nc-spacing);
-    font-weight: 700;
-    text-wrap: balance;
-  }
-  h3 {
-    font-size: 1.5rem;
-    line-height: 1.2;
-    margin-top: 1.5rem;
-    margin-bottom: var(--nc-spacing);
-    font-weight: 700;
-    text-wrap: balance;
-  }
-  h4 {
-    font-size: 1.25rem;
-    line-height: 1.3;
-    margin-top: 1.5rem;
-    margin-bottom: var(--nc-spacing);
-    font-weight: 700;
-    text-wrap: balance;
-  }
-  h5 {
-    font-size: 1.125rem;
-    line-height: 1.4;
-    margin-top: 1.5rem;
-    margin-bottom: var(--nc-spacing);
-    font-weight: 700;
-    text-wrap: balance;
-  }
-  h6 {
-    font-size: 1rem;
-    line-height: 1.5;
-    margin-top: 1.5rem;
-    margin-bottom: var(--nc-spacing);
-    font-weight: 700;
-    text-wrap: balance;
-  }
-  @media (max-width: 720px) {
-    h1 {
-      font-size: 1.75rem;
-    }
-    h2 {
-      font-size: 1.5rem;
-    }
-    h3 {
-      font-size: 1.3rem;
-    }
-  }
-  p, ul, ol, dl, blockquote, pre, table, figure, form, fieldset {
-    margin-top: 0;
-    margin-bottom: var(--nc-spacing);
-  }
-  ul, ol {
-    padding-inline-start: 1.5em;
-  }
-  :where(li) {
-    margin-bottom: 0.25em;
-  }
-  :where(li) > :where(ul, ol) {
-    margin-bottom: 0;
-  }
-  dt {
-    font-weight: 600;
-  }
-  dd {
-    margin-inline-start: 1.5em;
-    margin-bottom: 0.5em;
-  }
-  blockquote {
-    margin-block: var(--nc-spacing);
-    margin-inline: 0;
-    padding: 0.25em var(--nc-spacing);
-    border-inline-start: 0.25rem solid var(--nc-border);
-    font-style: italic;
-  }
-  :where(blockquote) footer,
-  :where(blockquote) cite {
-    font-style: normal;
-    font-size: 0.9em;
-    color: color-mix(in oklch, var(--nc-text), transparent 40%);
-  }
-  hr {
-    border: none;
-    height: 1px;
-    background-color: color-mix(in oklch, var(--nc-border), transparent 40%);
-    margin: var(--nc-spacing) 0;
-  }
-  mark {
-    padding: 0.1em 0.25em;
-    background-color: light-dark(#fde68a, oklch(0.55 0.12 85));
-    color: light-dark(inherit, oklch(0.95 0.01 85));
-    border-radius: 2px;
-  }
-  address {
-    font-style: normal;
-  }
-}
-@layer nimble.base {
-  :where(a:not([role=button])) {
-    color: var(--nc-primary);
-    text-decoration: underline;
-    text-underline-offset: 0.15em;
-    text-decoration-color: color-mix(in oklch, var(--nc-primary), transparent 50%);
-    transition: color 0.2s, text-decoration-color 0.2s;
-  }
-  :where(a:not([role=button])):visited {
-    color: color-mix(in oklch, var(--nc-primary) 40%, oklch(0.38 0.15 310));
-    text-decoration-color: color-mix(in oklch, var(--nc-primary) 40%, oklch(0.38 0.15 310) 30%);
-  }
-  :where(a:not([role=button])):hover {
-    color: var(--nc-primary-hover);
-    text-decoration-color: var(--nc-primary-hover);
-  }
-}
-@layer nimble.base {
-  :where(button, [type=submit], [type=reset], [type=button], [role=button]) {
-    --_btn-padding-v: 0.5em;
-    --_btn-padding-h: 1em;
-    padding: var(--_btn-padding-v) var(--_btn-padding-h);
-    background-color: var(--nc-primary);
-    color: var(--nc-primary-contrast);
-    border: 1px solid var(--nc-primary);
-    border-radius: var(--nc-radius);
-    font: inherit;
-    font-size: 1rem;
-    line-height: 1.5;
-    cursor: pointer;
-    text-decoration: none;
-    display: inline-block;
-    text-align: center;
-    margin: 0;
-    transition: background-color 0.2s, border-color 0.2s;
-  }
-  :where(button, [type=submit], [type=reset], [type=button], [role=button]):hover {
-    background-color: var(--nc-primary-hover);
-    border-color: var(--nc-primary-hover);
-  }
-  :where(button, [type=submit], [type=reset], [type=button], [role=button]):focus-visible {
-    box-shadow: 0 0 0 2px var(--nc-primary-focus);
-    outline: none;
-  }
-  :where([type=reset]) {
-    background-color: var(--nc-secondary);
-    border-color: var(--nc-secondary);
-    color: var(--nc-secondary-contrast);
-  }
-  :where([type=reset]):hover {
-    background-color: var(--nc-secondary-hover);
-    border-color: var(--nc-secondary-hover);
-  }
-  :where([type=reset]):focus-visible {
-    box-shadow: 0 0 0 2px var(--nc-secondary-focus);
-  }
-  :where(button, [type=submit], [type=reset], [type=button], [role=button]).inline {
-    --_btn-padding-v: 0.05em;
-    --_btn-padding-h: 0.4em;
-    margin: 0.1em 0.15em;
-    font-size: 0.875em;
-    vertical-align: baseline;
-  }
-  :where(button, [type=submit], [type=reset], [type=button], [role=button]):disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-  :where([role=group]) {
-    display: inline-flex;
-    margin-bottom: var(--nc-spacing);
-  }
-  [role=group] > * {
-    border-radius: 0;
-    margin: 0;
-    position: relative;
-  }
-  [role=group] > * + * {
-    --_divider: "";
-  }
-  [role=group] > * + *::before {
-    content: var(--_divider);
-    position: absolute;
-    inset-inline-start: 0;
-    top: 20%;
-    bottom: 20%;
-    width: 1px;
-    background: rgba(255, 255, 255, 0.3);
-    pointer-events: none;
-  }
-  [role=group] > :not(.secondary):not(.outline) + .secondary,
-  [role=group] > .secondary + :not(.secondary):not(.outline) {
-    --_divider: none;
-  }
-  [role=group] > :not(.secondary):not(.outline) + .outline,
-  [role=group] > .outline + :not(.secondary):not(.outline) {
-    --_divider: none;
-  }
-  [role=group] > .secondary + .outline,
-  [role=group] > .outline + .secondary {
-    --_divider: none;
-  }
-  [role=group] > input + *,
-  [role=group] > select + * {
-    --_divider: none;
-  }
-  [role=group] > :first-child {
-    border-start-start-radius: var(--nc-radius);
-    border-end-start-radius: var(--nc-radius);
-  }
-  [role=group] > :last-child {
-    border-start-end-radius: var(--nc-radius);
-    border-end-end-radius: var(--nc-radius);
-  }
-  [role=group]:has(.outline):not(:has(> :not(.outline))) {
-    border: 1px solid var(--nc-primary);
-    border-radius: var(--nc-radius);
-  }
-  [role=group]:has(.outline):not(:has(> :not(.outline))) > .outline {
-    border: none;
-  }
-  [role=group] > .outline + .outline::before {
-    background: var(--nc-primary);
-  }
-  [role=search] [role=group] > :first-child {
-    border-start-start-radius: 5rem;
-    border-end-start-radius: 5rem;
-    padding-inline-start: 1.25em;
+  body > * {
+    grid-column: 2;
+    min-width: 0;
   }
-  [role=search] [role=group] > :last-child {
-    border-start-end-radius: 5rem;
-    border-end-end-radius: 5rem;
-    padding-inline-end: 1.25em;
+  body > [style*="display: contents"] > * {
+    grid-column: 2;
+    min-width: 0;
   }
 }
 @layer nimble.utilities {
-  .secondary:not(a:not([role=button])) {
-    background-color: var(--nc-secondary);
-    border-color: var(--nc-secondary);
-    color: var(--nc-secondary-contrast);
-  }
-  .secondary:not(a:not([role=button])):hover {
-    background-color: var(--nc-secondary-hover);
-    border-color: var(--nc-secondary-hover);
-  }
-  .secondary:not(a:not([role=button])):focus-visible {
-    box-shadow: 0 0 0 2px var(--nc-secondary-focus);
-  }
-  a:not([role=button]).secondary {
-    color: var(--nc-secondary);
-    text-decoration-color: color-mix(in oklch, var(--nc-secondary), transparent 50%);
-  }
-  a:not([role=button]).secondary:hover {
-    color: var(--nc-secondary-hover);
-    text-decoration-color: var(--nc-secondary-hover);
-  }
-  .outline:not(a:not([role=button])) {
-    background-color: transparent;
-    color: var(--nc-primary);
-  }
-  .outline:not(a:not([role=button])):hover {
-    background-color: var(--nc-primary-focus);
-    color: var(--nc-primary-hover);
-    border-color: var(--nc-primary-hover);
-  }
-}
-@layer nimble.base {
-  :where(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=submit], [type=button], [type=reset]),
-  select, textarea) {
-    --_input-bg: color-mix(in oklch, var(--nc-surface-1), var(--nc-surface-2) 20%);
-    padding: 0.5em 0.75em;
-    min-height: calc(2.5em + 2px);
-    background-color: var(--_input-bg);
-    border: 1px solid var(--nc-border);
-    border-radius: var(--nc-radius);
-    color: var(--nc-text);
-    font: inherit;
-    font-size: 1rem;
-    transition: border-color 0.2s, box-shadow 0.2s;
-  }
-  :where(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=submit], [type=button], [type=reset], [type=date], [type=month], [type=week], [type=time], [type=datetime-local]),
-  select, textarea) {
-    width: 100%;
-    margin-bottom: var(--nc-spacing);
-  }
-  :where(input, select, textarea):focus-visible {
-    border-color: var(--nc-primary);
-    box-shadow: 0 0 0 2px var(--nc-primary-focus);
-    outline: none;
-  }
-  :where(input:not([type=submit], [type=button], [type=reset]), select, textarea) + :where(small) {
-    display: block;
-    margin-top: calc(var(--nc-spacing) * -0.75);
-    margin-bottom: var(--nc-spacing);
-    font-size: 0.875em;
-    color: color-mix(in oklch, var(--nc-text), transparent 40%);
-  }
-  :where(input, select, textarea)[aria-invalid=false] {
-    border-color: var(--nc-valid);
-  }
-  :where(input, select, textarea)[aria-invalid=true] {
-    border-color: var(--nc-invalid);
-  }
-  :where(input:not([type=submit], [type=button], [type=reset]), select, textarea)[aria-invalid=false] + :where(small) {
-    color: var(--nc-valid);
-  }
-  :where(input:not([type=submit], [type=button], [type=reset]), select, textarea)[aria-invalid=true] + :where(small) {
-    color: var(--nc-invalid);
+  .container {
+    max-width: var(--nc-content-width);
+    margin-inline: auto;
+    padding-inline: var(--nc-spacing);
   }
-  :where(label) {
+  .fluid {
     display: block;
-    margin-bottom: 0.25em;
-  }
-  :where(label:has(+ input, + select, + textarea)) {
-    font-weight: 600;
-  }
-  :where(label:has(+ [type=file], + [type=range])) {
-    margin-bottom: 0.5em;
-  }
-  :where(fieldset) {
-    border: 1px solid var(--nc-border);
-    border-radius: var(--nc-radius);
-    padding: var(--nc-spacing);
-    min-width: 0;
-    max-width: 100%;
-  }
-  :where(legend) {
-    font-weight: 600;
-    padding-inline: 0.25em;
-  }
-  :where([type=checkbox], [type=radio]) {
-    accent-color: var(--nc-primary);
-    width: 1.125em;
-    height: 1.125em;
-    margin: 0;
-  }
-  :where(label:has([type=checkbox], [type=radio])) {
-    display: flex;
-    align-items: center;
-    gap: 0.35em;
-    margin-bottom: 0.5em;
-  }
-  :where(label:has([type=checkbox], [type=radio]):last-child) {
-    margin-bottom: 0;
-  }
-  :where([type=search]) {
-    border-radius: 5rem;
-    padding-inline: 1.25em;
-  }
-  :where([type=range]) {
-    accent-color: var(--nc-primary);
-    width: 100%;
-    margin-bottom: var(--nc-spacing);
-  }
-  :where(input[list]) {
-    width: auto;
-  }
-  :where([type=file]) {
-    color: var(--nc-text);
-    font: inherit;
-    cursor: pointer;
-    max-width: 100%;
-    margin-bottom: var(--nc-spacing);
-  }
-  :where([type=file])::file-selector-button {
-    padding: 0.5em 1em;
-    margin-right: 0.75em;
-    margin-inline-end: 0.75em;
-    background-color: var(--nc-primary);
-    color: var(--nc-primary-contrast);
-    border: 1px solid var(--nc-primary);
-    border-radius: var(--nc-radius);
-    font: inherit;
-    cursor: pointer;
-    transition: background-color 0.2s, border-color 0.2s;
-  }
-  :where([type=file])::file-selector-button:hover {
-    background-color: var(--nc-primary-hover);
-    border-color: var(--nc-primary-hover);
-  }
-  :where([type=date], [type=month], [type=week], [type=time], [type=datetime-local]) {
-    min-width: 10em;
-    margin-bottom: var(--nc-spacing);
-  }
-  :where([type=color]) {
-    --_color-size: calc(1em * 1.5 + 1em + 2px);
-    margin-bottom: var(--nc-spacing);
-    --_color-pad: 0.25em;
-    height: var(--_color-size);
-    width: calc((var(--_color-size) - 2 * var(--_color-pad)) * 1.618 + 2 * var(--_color-pad));
-    padding: var(--_color-pad);
-    background-color: color-mix(in oklch, var(--nc-surface-1), var(--nc-surface-2) 20%);
-    border: 1px solid var(--nc-border);
-    border-radius: var(--nc-radius);
-    cursor: pointer;
-  }
-  :where([type=color])::-webkit-color-swatch-wrapper {
-    padding: 0;
-  }
-  :where([type=color])::-webkit-color-swatch {
-    border: none;
-    border-radius: calc(var(--nc-radius) * 0.5);
-  }
-  :where(label:has([type=checkbox][role=switch])) {
-    display: flex;
-    align-items: center;
-    gap: 0.5em;
-  }
-  :where([type=checkbox][role=switch]) {
-    appearance: none;
-    width: 2.5em;
-    height: 1.25em;
-    border-radius: 1em;
-    background-color: var(--nc-border);
-    position: relative;
-    cursor: pointer;
-    flex-shrink: 0;
-    margin: 0;
-    transition: background-color 0.2s;
-  }
-  :where([type=checkbox][role=switch])::before {
-    content: "";
-    position: absolute;
-    top: 2px;
-    left: 2px;
-    width: calc(1.25em - 4px);
-    height: calc(1.25em - 4px);
-    border-radius: 50%;
-    background-color: #fff;
-    transition: transform 0.2s;
-  }
-  :where([type=checkbox][role=switch]):checked {
-    background-color: var(--nc-primary);
+    max-width: none;
+    padding-inline: var(--nc-spacing);
   }
-  :where([type=checkbox][role=switch]):checked::before {
-    transform: translateX(1.25em);
+  .full-bleed {
+    grid-column: 1/-1;
   }
-}
-[type=date],
-[type=month],
-[type=week],
-[type=time],
-[type=datetime-local] {
-  -webkit-appearance: none;
-  appearance: none;
-}
-
-@layer nimble.base {
-  :where(table) {
+  .wide {
+    grid-column: 1/-1;
     width: 100%;
-    border-collapse: collapse;
-  }
-  :where(th, td) {
-    padding: 0.5em 0.75em;
-    border-bottom: 1px solid color-mix(in oklch, var(--nc-border), transparent 40%);
-    text-align: start;
-  }
-  :where(thead th, thead td) {
-    font-weight: 600;
-    border-bottom-width: 2px;
-    background-color: var(--nc-surface-2);
-    text-wrap: balance;
-  }
-  :where(figure:has(table)) {
-    overflow-x: auto;
-  }
-}
-@layer nimble.base {
-  :where(code, kbd, samp) {
-    font-family: var(--nc-font-mono);
-    font-size: 0.875em;
-    background-color: var(--nc-surface-2);
-    border-radius: var(--nc-radius);
-    padding: 0.15em 0.35em;
-  }
-  :where(pre) {
-    background-color: var(--nc-surface-2);
-    border-radius: var(--nc-radius);
-    padding: var(--nc-spacing);
-    overflow-x: auto;
-  }
-  :where(pre code) {
-    background: none;
-    padding: 0;
-    font-size: inherit;
-  }
-  :where(kbd) {
-    border: 1px solid var(--nc-border);
-    border-bottom-width: 2px;
-  }
-}
-@layer nimble.base {
-  :where(img, video, canvas, svg) {
-    max-width: 100%;
-    height: auto;
-  }
-  :where(figure) {
-    margin: 0;
-  }
-  :where(figcaption) {
-    font-size: 0.9em;
-    color: color-mix(in oklch, var(--nc-text), transparent 40%);
-    margin-top: 0.5em;
-  }
-}
-@layer nimble.base {
-  :where(article) {
-    background-color: var(--nc-surface-1);
-    border: 1px solid var(--nc-border);
-    border-radius: var(--nc-radius);
-    padding: var(--nc-spacing);
-    margin-bottom: var(--nc-spacing);
-  }
-  :where(article > header),
-  :where(article > footer) {
-    background-color: color-mix(in oklch, var(--nc-surface-1), var(--nc-surface-2) 20%);
-    padding: var(--nc-spacing);
-  }
-  :where(article > header) {
-    margin: calc(var(--nc-spacing) * -1) calc(var(--nc-spacing) * -1) var(--nc-spacing);
-    border-bottom: 1px solid var(--nc-border);
-    border-radius: var(--nc-radius) var(--nc-radius) 0 0;
-  }
-  :where(article > footer) {
-    margin: var(--nc-spacing) calc(var(--nc-spacing) * -1) calc(var(--nc-spacing) * -1);
-    border-top: 1px solid var(--nc-border);
-    border-radius: 0 0 var(--nc-radius) var(--nc-radius);
-  }
-  :where(article) > :last-child:not(footer) {
-    margin-bottom: 0;
-  }
-  :where(article > header, article > footer) > :last-child {
-    margin-bottom: 0;
-  }
-  :where(article > header, article > footer) > h1,
-  :where(article > header, article > footer) > h2,
-  :where(article > header, article > footer) > h3,
-  :where(article > header, article > footer) > h4,
-  :where(article > header, article > footer) > h5,
-  :where(article > header, article > footer) > h6 {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-}
-@layer nimble.base {
-  :where(details) {
-    border: 1px solid var(--nc-border);
-    border-radius: var(--nc-radius);
-    padding: 0 1em;
-  }
-  :where(details) {
-    margin-bottom: 0.5em;
-  }
-  :where(summary) {
-    cursor: pointer;
-    font-weight: 600;
-    margin: 0 -1em;
-    padding: 0.5em 1em;
-    list-style-type: "▶ ";
-  }
-  :where(details[open] > summary) {
-    list-style-type: "▼ ";
-  }
-  :where(summary[role=button]) {
-    display: block;
-    width: auto;
-    margin: 0 -1em;
-    list-style: none;
-  }
-  :where(summary[role=button])::before {
-    content: "▶ ";
-    display: inline-block;
-    transition: transform 0.2s ease;
-    font-size: 0.75em;
-    vertical-align: middle;
-  }
-  :where(details[open] > summary[role=button])::before {
-    transform: rotate(90deg);
-  }
-  :where(details[open]) {
-    padding-bottom: 0.5em;
-  }
-  details :last-child {
-    margin-bottom: 0;
-  }
-}
-@supports selector(details::details-content) {
-  details::details-content {
-    transition: opacity 0.3s ease, content-visibility 0.3s ease allow-discrete;
-    opacity: 0;
-  }
-  details[open]::details-content {
-    opacity: 1;
-  }
-  @supports (interpolate-size: allow-keywords) {
-    details {
-      interpolate-size: allow-keywords;
-    }
-    details::details-content {
-      transition: height 0.3s ease, opacity 0.3s ease, content-visibility 0.3s ease allow-discrete;
-      height: 0;
-      overflow: clip;
-    }
-    details[open]::details-content {
-      height: auto;
-    }
-  }
-}
-@layer nimble.base {
-  :where(dialog) {
-    background-color: var(--nc-surface-4);
-    border: 1px solid var(--nc-border);
-    border-radius: var(--nc-radius);
-    max-width: min(90vw, 40rem);
-    padding: var(--nc-spacing);
-  }
-  dialog::backdrop {
-    background: rgba(0, 0, 0, 0.5);
-    backdrop-filter: blur(4px);
-    animation: nc-backdrop-in 0.2s ease;
-  }
-  @keyframes nc-backdrop-in {
-    from {
-      opacity: 0;
-    }
+    max-width: 1200px;
+    margin-inline: auto;
+    padding-inline: var(--nc-spacing);
   }
 }
 @media print {
@@ -842,42 +230,659 @@
     margin: 2cm;
   }
 }
-@layer nimble.utilities {
-  .container {
-    max-width: var(--nc-content-width);
-    margin-inline: auto;
-    padding-inline: var(--nc-spacing);
+@scope (:root) to (.no-nimble) {
+  @layer nimble.base {
+    h1 {
+      font-size: 2rem;
+      line-height: 1.1;
+      margin-top: 0;
+      margin-bottom: var(--nc-spacing);
+      font-weight: 700;
+      text-wrap: balance;
+    }
+    h2 {
+      font-size: 1.75rem;
+      line-height: 1.15;
+      margin-top: 2rem;
+      margin-bottom: var(--nc-spacing);
+      font-weight: 700;
+      text-wrap: balance;
+    }
+    h3 {
+      font-size: 1.5rem;
+      line-height: 1.2;
+      margin-top: 1.5rem;
+      margin-bottom: var(--nc-spacing);
+      font-weight: 700;
+      text-wrap: balance;
+    }
+    h4 {
+      font-size: 1.25rem;
+      line-height: 1.3;
+      margin-top: 1.5rem;
+      margin-bottom: var(--nc-spacing);
+      font-weight: 700;
+      text-wrap: balance;
+    }
+    h5 {
+      font-size: 1.125rem;
+      line-height: 1.4;
+      margin-top: 1.5rem;
+      margin-bottom: var(--nc-spacing);
+      font-weight: 700;
+      text-wrap: balance;
+    }
+    h6 {
+      font-size: 1rem;
+      line-height: 1.5;
+      margin-top: 1.5rem;
+      margin-bottom: var(--nc-spacing);
+      font-weight: 700;
+      text-wrap: balance;
+    }
+    @media (max-width: 720px) {
+      h1 {
+        font-size: 1.75rem;
+      }
+      h2 {
+        font-size: 1.5rem;
+      }
+      h3 {
+        font-size: 1.3rem;
+      }
+    }
+    p, ul, ol, dl, blockquote, pre, table, figure, form, fieldset {
+      margin-top: 0;
+      margin-bottom: var(--nc-spacing);
+    }
+    ul, ol {
+      padding-inline-start: 1.5em;
+    }
+    :where(li) {
+      margin-bottom: 0.25em;
+    }
+    :where(li) > :where(ul, ol) {
+      margin-bottom: 0;
+    }
+    dt {
+      font-weight: 600;
+    }
+    dd {
+      margin-inline-start: 1.5em;
+      margin-bottom: 0.5em;
+    }
+    blockquote {
+      margin-block: var(--nc-spacing);
+      margin-inline: 0;
+      padding: 0.25em var(--nc-spacing);
+      border-inline-start: 0.25rem solid var(--nc-border);
+      font-style: italic;
+    }
+    :where(blockquote) footer,
+    :where(blockquote) cite {
+      font-style: normal;
+      font-size: 0.9em;
+      color: color-mix(in oklch, var(--nc-text), transparent 40%);
+    }
+    hr {
+      border: none;
+      height: 1px;
+      background-color: color-mix(in oklch, var(--nc-border), transparent 40%);
+      margin: var(--nc-spacing) 0;
+    }
+    mark {
+      padding: 0.1em 0.25em;
+      background-color: light-dark(#fde68a, oklch(0.55 0.12 85));
+      color: light-dark(inherit, oklch(0.95 0.01 85));
+      border-radius: 2px;
+    }
+    address {
+      font-style: normal;
+    }
   }
-  .fluid {
-    display: block;
-    max-width: none;
-    padding-inline: var(--nc-spacing);
+  @layer nimble.base {
+    :where(a:not([role=button])) {
+      color: var(--nc-primary);
+      text-decoration: underline;
+      text-underline-offset: 0.15em;
+      text-decoration-color: color-mix(in oklch, var(--nc-primary), transparent 50%);
+      transition: color 0.2s, text-decoration-color 0.2s;
+    }
+    :where(a:not([role=button])):visited {
+      color: color-mix(in oklch, var(--nc-primary) 40%, oklch(0.38 0.15 310));
+      text-decoration-color: color-mix(in oklch, var(--nc-primary) 40%, oklch(0.38 0.15 310) 30%);
+    }
+    :where(a:not([role=button])):hover {
+      color: var(--nc-primary-hover);
+      text-decoration-color: var(--nc-primary-hover);
+    }
   }
-  .full-bleed {
-    grid-column: 1/-1;
+  @layer nimble.base {
+    :where(button, [type=submit], [type=reset], [type=button], [role=button]) {
+      --_btn-padding-v: 0.5em;
+      --_btn-padding-h: 1em;
+      padding: var(--_btn-padding-v) var(--_btn-padding-h);
+      background-color: var(--nc-primary);
+      color: var(--nc-primary-contrast);
+      border: 1px solid var(--nc-primary);
+      border-radius: var(--nc-radius);
+      font: inherit;
+      font-size: 1rem;
+      line-height: 1.5;
+      cursor: pointer;
+      text-decoration: none;
+      display: inline-block;
+      text-align: center;
+      margin: 0;
+      transition: background-color 0.2s, border-color 0.2s;
+    }
+    :where(button, [type=submit], [type=reset], [type=button], [role=button]):hover {
+      background-color: var(--nc-primary-hover);
+      border-color: var(--nc-primary-hover);
+    }
+    :where(button, [type=submit], [type=reset], [type=button], [role=button]):focus-visible {
+      box-shadow: 0 0 0 2px var(--nc-primary-focus);
+      outline: none;
+    }
+    :where([type=reset]) {
+      background-color: var(--nc-secondary);
+      border-color: var(--nc-secondary);
+      color: var(--nc-secondary-contrast);
+    }
+    :where([type=reset]):hover {
+      background-color: var(--nc-secondary-hover);
+      border-color: var(--nc-secondary-hover);
+    }
+    :where([type=reset]):focus-visible {
+      box-shadow: 0 0 0 2px var(--nc-secondary-focus);
+    }
+    :where(button, [type=submit], [type=reset], [type=button], [role=button]).inline {
+      --_btn-padding-v: 0.05em;
+      --_btn-padding-h: 0.4em;
+      margin: 0.1em 0.15em;
+      font-size: 0.875em;
+      vertical-align: baseline;
+    }
+    :where(button, [type=submit], [type=reset], [type=button], [role=button]):disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+    :where([role=group]) {
+      display: inline-flex;
+      margin-bottom: var(--nc-spacing);
+    }
+    [role=group] > * {
+      border-radius: 0;
+      margin: 0;
+      position: relative;
+    }
+    [role=group] > * + * {
+      --_divider: "";
+    }
+    [role=group] > * + *::before {
+      content: var(--_divider);
+      position: absolute;
+      inset-inline-start: 0;
+      top: 20%;
+      bottom: 20%;
+      width: 1px;
+      background: rgba(255, 255, 255, 0.3);
+      pointer-events: none;
+    }
+    [role=group] > :not(.secondary):not(.outline) + .secondary,
+    [role=group] > .secondary + :not(.secondary):not(.outline) {
+      --_divider: none;
+    }
+    [role=group] > :not(.secondary):not(.outline) + .outline,
+    [role=group] > .outline + :not(.secondary):not(.outline) {
+      --_divider: none;
+    }
+    [role=group] > .secondary + .outline,
+    [role=group] > .outline + .secondary {
+      --_divider: none;
+    }
+    [role=group] > input + *,
+    [role=group] > select + * {
+      --_divider: none;
+    }
+    [role=group] > :first-child {
+      border-start-start-radius: var(--nc-radius);
+      border-end-start-radius: var(--nc-radius);
+    }
+    [role=group] > :last-child {
+      border-start-end-radius: var(--nc-radius);
+      border-end-end-radius: var(--nc-radius);
+    }
+    [role=group]:has(.outline):not(:has(> :not(.outline))) {
+      border: 1px solid var(--nc-primary);
+      border-radius: var(--nc-radius);
+    }
+    [role=group]:has(.outline):not(:has(> :not(.outline))) > .outline {
+      border: none;
+    }
+    [role=group] > .outline + .outline::before {
+      background: var(--nc-primary);
+    }
+    [role=search] [role=group] > :first-child {
+      border-start-start-radius: 5rem;
+      border-end-start-radius: 5rem;
+      padding-inline-start: 1.25em;
+    }
+    [role=search] [role=group] > :last-child {
+      border-start-end-radius: 5rem;
+      border-end-end-radius: 5rem;
+      padding-inline-end: 1.25em;
+    }
   }
-  .wide {
-    grid-column: 1/-1;
-    width: 100%;
-    max-width: 1200px;
-    margin-inline: auto;
-    padding-inline: var(--nc-spacing);
+  @layer nimble.utilities {
+    .secondary:not(a:not([role=button])) {
+      background-color: var(--nc-secondary);
+      border-color: var(--nc-secondary);
+      color: var(--nc-secondary-contrast);
+    }
+    .secondary:not(a:not([role=button])):hover {
+      background-color: var(--nc-secondary-hover);
+      border-color: var(--nc-secondary-hover);
+    }
+    .secondary:not(a:not([role=button])):focus-visible {
+      box-shadow: 0 0 0 2px var(--nc-secondary-focus);
+    }
+    a:not([role=button]).secondary {
+      color: var(--nc-secondary);
+      text-decoration-color: color-mix(in oklch, var(--nc-secondary), transparent 50%);
+    }
+    a:not([role=button]).secondary:hover {
+      color: var(--nc-secondary-hover);
+      text-decoration-color: var(--nc-secondary-hover);
+    }
+    .outline:not(a:not([role=button])) {
+      background-color: transparent;
+      color: var(--nc-primary);
+    }
+    .outline:not(a:not([role=button])):hover {
+      background-color: var(--nc-primary-focus);
+      color: var(--nc-primary-hover);
+      border-color: var(--nc-primary-hover);
+    }
+  }
+  @layer nimble.base {
+    :where(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=submit], [type=button], [type=reset]),
+    select, textarea) {
+      --_input-bg: color-mix(in oklch, var(--nc-surface-1), var(--nc-surface-2) 20%);
+      padding: 0.5em 0.75em;
+      min-height: calc(2.5em + 2px);
+      background-color: var(--_input-bg);
+      border: 1px solid var(--nc-border);
+      border-radius: var(--nc-radius);
+      color: var(--nc-text);
+      font: inherit;
+      font-size: 1rem;
+      transition: border-color 0.2s, box-shadow 0.2s;
+    }
+    :where(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=submit], [type=button], [type=reset], [type=date], [type=month], [type=week], [type=time], [type=datetime-local]),
+    select, textarea) {
+      width: 100%;
+      margin-bottom: var(--nc-spacing);
+    }
+    :where(input, select, textarea):focus-visible {
+      border-color: var(--nc-primary);
+      box-shadow: 0 0 0 2px var(--nc-primary-focus);
+      outline: none;
+    }
+    :where(input:not([type=submit], [type=button], [type=reset]), select, textarea) + :where(small) {
+      display: block;
+      margin-top: calc(var(--nc-spacing) * -0.75);
+      margin-bottom: var(--nc-spacing);
+      font-size: 0.875em;
+      color: color-mix(in oklch, var(--nc-text), transparent 40%);
+    }
+    :where(input, select, textarea)[aria-invalid=false] {
+      border-color: var(--nc-valid);
+    }
+    :where(input, select, textarea)[aria-invalid=true] {
+      border-color: var(--nc-invalid);
+    }
+    :where(input:not([type=submit], [type=button], [type=reset]), select, textarea)[aria-invalid=false] + :where(small) {
+      color: var(--nc-valid);
+    }
+    :where(input:not([type=submit], [type=button], [type=reset]), select, textarea)[aria-invalid=true] + :where(small) {
+      color: var(--nc-invalid);
+    }
+    :where(label) {
+      display: block;
+      margin-bottom: 0.25em;
+    }
+    :where(label:has(+ input, + select, + textarea)) {
+      font-weight: 600;
+    }
+    :where(label:has(+ [type=file], + [type=range])) {
+      margin-bottom: 0.5em;
+    }
+    :where(fieldset) {
+      border: 1px solid var(--nc-border);
+      border-radius: var(--nc-radius);
+      padding: var(--nc-spacing);
+      min-width: 0;
+      max-width: 100%;
+    }
+    :where(legend) {
+      font-weight: 600;
+      padding-inline: 0.25em;
+    }
+    :where([type=checkbox], [type=radio]) {
+      accent-color: var(--nc-primary);
+      width: 1.125em;
+      height: 1.125em;
+      margin: 0;
+    }
+    :where(label:has([type=checkbox], [type=radio])) {
+      display: flex;
+      align-items: center;
+      gap: 0.35em;
+      margin-bottom: 0.5em;
+    }
+    :where(label:has([type=checkbox], [type=radio]):last-child) {
+      margin-bottom: 0;
+    }
+    :where([type=search]) {
+      border-radius: 5rem;
+      padding-inline: 1.25em;
+    }
+    :where([type=range]) {
+      accent-color: var(--nc-primary);
+      width: 100%;
+      margin-bottom: var(--nc-spacing);
+    }
+    :where(input[list]) {
+      width: auto;
+    }
+    :where([type=file]) {
+      color: var(--nc-text);
+      font: inherit;
+      cursor: pointer;
+      max-width: 100%;
+      margin-bottom: var(--nc-spacing);
+    }
+    :where([type=file])::file-selector-button {
+      padding: 0.5em 1em;
+      margin-right: 0.75em;
+      margin-inline-end: 0.75em;
+      background-color: var(--nc-primary);
+      color: var(--nc-primary-contrast);
+      border: 1px solid var(--nc-primary);
+      border-radius: var(--nc-radius);
+      font: inherit;
+      cursor: pointer;
+      transition: background-color 0.2s, border-color 0.2s;
+    }
+    :where([type=file])::file-selector-button:hover {
+      background-color: var(--nc-primary-hover);
+      border-color: var(--nc-primary-hover);
+    }
+    :where([type=date], [type=month], [type=week], [type=time], [type=datetime-local]) {
+      min-width: 10em;
+      margin-bottom: var(--nc-spacing);
+    }
+    :where([type=color]) {
+      --_color-size: calc(1em * 1.5 + 1em + 2px);
+      margin-bottom: var(--nc-spacing);
+      --_color-pad: 0.25em;
+      height: var(--_color-size);
+      width: calc((var(--_color-size) - 2 * var(--_color-pad)) * 1.618 + 2 * var(--_color-pad));
+      padding: var(--_color-pad);
+      background-color: color-mix(in oklch, var(--nc-surface-1), var(--nc-surface-2) 20%);
+      border: 1px solid var(--nc-border);
+      border-radius: var(--nc-radius);
+      cursor: pointer;
+    }
+    :where([type=color])::-webkit-color-swatch-wrapper {
+      padding: 0;
+    }
+    :where([type=color])::-webkit-color-swatch {
+      border: none;
+      border-radius: calc(var(--nc-radius) * 0.5);
+    }
+    :where(label:has([type=checkbox][role=switch])) {
+      display: flex;
+      align-items: center;
+      gap: 0.5em;
+    }
+    :where([type=checkbox][role=switch]) {
+      appearance: none;
+      width: 2.5em;
+      height: 1.25em;
+      border-radius: 1em;
+      background-color: var(--nc-border);
+      position: relative;
+      cursor: pointer;
+      flex-shrink: 0;
+      margin: 0;
+      transition: background-color 0.2s;
+    }
+    :where([type=checkbox][role=switch])::before {
+      content: "";
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      width: calc(1.25em - 4px);
+      height: calc(1.25em - 4px);
+      border-radius: 50%;
+      background-color: #fff;
+      transition: transform 0.2s;
+    }
+    :where([type=checkbox][role=switch]):checked {
+      background-color: var(--nc-primary);
+    }
+    :where([type=checkbox][role=switch]):checked::before {
+      transform: translateX(1.25em);
+    }
   }
-  .striped :where(tbody tr:nth-child(even)) {
-    background-color: var(--nc-surface-2);
+  [type=date],
+  [type=month],
+  [type=week],
+  [type=time],
+  [type=datetime-local] {
+    -webkit-appearance: none;
+    appearance: none;
   }
-  .visually-hidden {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip-path: inset(50%);
-    white-space: nowrap;
-    border: 0;
+  @layer nimble.base {
+    :where(table) {
+      width: 100%;
+      border-collapse: collapse;
+    }
+    :where(th, td) {
+      padding: 0.5em 0.75em;
+      border-bottom: 1px solid color-mix(in oklch, var(--nc-border), transparent 40%);
+      text-align: start;
+    }
+    :where(thead th, thead td) {
+      font-weight: 600;
+      border-bottom-width: 2px;
+      background-color: var(--nc-surface-2);
+      text-wrap: balance;
+    }
+    :where(figure:has(table)) {
+      overflow-x: auto;
+    }
   }
-  .overflow-auto {
-    overflow: auto;
+  @layer nimble.base {
+    :where(code, kbd, samp) {
+      font-family: var(--nc-font-mono);
+      font-size: 0.875em;
+      background-color: var(--nc-surface-2);
+      border-radius: var(--nc-radius);
+      padding: 0.15em 0.35em;
+    }
+    :where(pre) {
+      background-color: var(--nc-surface-2);
+      border-radius: var(--nc-radius);
+      padding: var(--nc-spacing);
+      overflow-x: auto;
+    }
+    :where(pre code) {
+      background: none;
+      padding: 0;
+      font-size: inherit;
+    }
+    :where(kbd) {
+      border: 1px solid var(--nc-border);
+      border-bottom-width: 2px;
+    }
+  }
+  @layer nimble.base {
+    :where(img, video, canvas, svg) {
+      max-width: 100%;
+      height: auto;
+    }
+    :where(figure) {
+      margin: 0;
+    }
+    :where(figcaption) {
+      font-size: 0.9em;
+      color: color-mix(in oklch, var(--nc-text), transparent 40%);
+      margin-top: 0.5em;
+    }
+  }
+  @layer nimble.base {
+    :where(article) {
+      background-color: var(--nc-surface-1);
+      border: 1px solid var(--nc-border);
+      border-radius: var(--nc-radius);
+      padding: var(--nc-spacing);
+      margin-bottom: var(--nc-spacing);
+    }
+    :where(article > header),
+    :where(article > footer) {
+      background-color: color-mix(in oklch, var(--nc-surface-1), var(--nc-surface-2) 20%);
+      padding: var(--nc-spacing);
+    }
+    :where(article > header) {
+      margin: calc(var(--nc-spacing) * -1) calc(var(--nc-spacing) * -1) var(--nc-spacing);
+      border-bottom: 1px solid var(--nc-border);
+      border-radius: var(--nc-radius) var(--nc-radius) 0 0;
+    }
+    :where(article > footer) {
+      margin: var(--nc-spacing) calc(var(--nc-spacing) * -1) calc(var(--nc-spacing) * -1);
+      border-top: 1px solid var(--nc-border);
+      border-radius: 0 0 var(--nc-radius) var(--nc-radius);
+    }
+    :where(article) > :last-child:not(footer) {
+      margin-bottom: 0;
+    }
+    :where(article > header, article > footer) > :last-child {
+      margin-bottom: 0;
+    }
+    :where(article > header, article > footer) > h1,
+    :where(article > header, article > footer) > h2,
+    :where(article > header, article > footer) > h3,
+    :where(article > header, article > footer) > h4,
+    :where(article > header, article > footer) > h5,
+    :where(article > header, article > footer) > h6 {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+  @layer nimble.base {
+    :where(details) {
+      border: 1px solid var(--nc-border);
+      border-radius: var(--nc-radius);
+      padding: 0 1em;
+    }
+    :where(details) {
+      margin-bottom: 0.5em;
+    }
+    :where(summary) {
+      cursor: pointer;
+      font-weight: 600;
+      margin: 0 -1em;
+      padding: 0.5em 1em;
+      list-style-type: "▶ ";
+    }
+    :where(details[open] > summary) {
+      list-style-type: "▼ ";
+    }
+    :where(summary[role=button]) {
+      display: block;
+      width: auto;
+      margin: 0 -1em;
+      list-style: none;
+    }
+    :where(summary[role=button])::before {
+      content: "▶ ";
+      display: inline-block;
+      transition: transform 0.2s ease;
+      font-size: 0.75em;
+      vertical-align: middle;
+    }
+    :where(details[open] > summary[role=button])::before {
+      transform: rotate(90deg);
+    }
+    :where(details[open]) {
+      padding-bottom: 0.5em;
+    }
+  }
+  details :last-child:last-child {
+    margin-bottom: 0;
+  }
+  @supports selector(details::details-content) {
+    details::details-content {
+      transition: opacity 0.3s ease, content-visibility 0.3s ease allow-discrete;
+      opacity: 0;
+    }
+    details[open]::details-content {
+      opacity: 1;
+    }
+    @supports (interpolate-size: allow-keywords) {
+      details {
+        interpolate-size: allow-keywords;
+      }
+      details::details-content {
+        transition: height 0.3s ease, opacity 0.3s ease, content-visibility 0.3s ease allow-discrete;
+        height: 0;
+        overflow: clip;
+      }
+      details[open]::details-content {
+        height: auto;
+      }
+    }
+  }
+  @layer nimble.base {
+    :where(dialog) {
+      background-color: var(--nc-surface-4);
+      border: 1px solid var(--nc-border);
+      border-radius: var(--nc-radius);
+      max-width: min(90vw, 40rem);
+      padding: var(--nc-spacing);
+    }
+    dialog::backdrop {
+      background: rgba(0, 0, 0, 0.5);
+      backdrop-filter: blur(4px);
+      animation: nc-backdrop-in 0.2s ease;
+    }
+    @keyframes nc-backdrop-in {
+      from {
+        opacity: 0;
+      }
+    }
+  }
+  @layer nimble.utilities {
+    .striped :where(tbody tr:nth-child(even)) {
+      background-color: var(--nc-surface-2);
+    }
+    .visually-hidden {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+      border: 0;
+    }
+    .overflow-auto {
+      overflow: auto;
+    }
   }
 }