rebuilt css files, For some reason was having issues with the line endings, hopefully the editorconfig will fix it.

Author: Yohn

.editorconfig

@@ -0,0 +1,33 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+charset = utf-8
+trim_trailing_whitespace = true
+indent_style = space
+indent_size = 2
+
+# JavaScript and JSON files
+[*.{js,json}]
+indent_size = 2
+
+# SCSS files
+[*.scss]
+indent_size = 2
+
+# Markdown files
+[*.md]
+trim_trailing_whitespace = false
+
+# Package files
+[package.json]
+indent_size = 2
+
+# Config files
+[*.{yml,yaml}]
+indent_size = 2

css/pico.amber.css

@@ -6,7 +6,8 @@
 /**
  * Styles
  */
-:root {
+:root,
+:host {
   --pico-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --pico-font-family-sans-serif: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, var(--pico-font-family-emoji);
   --pico-font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, var(--pico-font-family-emoji);
@@ -47,27 +48,32 @@
   --pico-icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 145, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
 }
 @media (min-width: 576px) {
-  :root {
+  :root,
+  :host {
     --pico-font-size: 106.25%;
   }
 }
 @media (min-width: 768px) {
-  :root {
+  :root,
+  :host {
     --pico-font-size: 112.5%;
   }
 }
 @media (min-width: 1024px) {
-  :root {
+  :root,
+  :host {
     --pico-font-size: 118.75%;
   }
 }
 @media (min-width: 1280px) {
-  :root {
+  :root,
+  :host {
     --pico-font-size: 125%;
   }
 }
 @media (min-width: 1536px) {
-  :root {
+  :root,
+  :host {
     --pico-font-size: 131.25%;
   }
 }
@@ -225,7 +231,8 @@ details summary[role=button]:not(.outline)::after {
  * Color schemes
  */
 [data-theme=light],
-:root:not([data-theme=dark]) {
+:root:not([data-theme=dark]),
+:host(:not([data-theme=dark])) {
   color-scheme: light;
   --pico-background-color: #fff;
   --pico-color: #373c44;
@@ -344,12 +351,19 @@ details summary[role=button]:not(.outline)::after {
 [type=reset],
 [type=checkbox],
 [type=radio],
+[type=file]),
+:host(:not([data-theme=dark])) input:is([type=submit],
+[type=button],
+[type=reset],
+[type=checkbox],
+[type=radio],
 [type=file]) {
   --pico-form-element-focus-color: var(--pico-primary-focus);
 }
 
 @media only screen and (prefers-color-scheme: dark) {
-  :root:not([data-theme]) {
+  :root:not([data-theme]),
+  :host(:not([data-theme])) {
     color-scheme: dark;
     --pico-background-color: rgb(19, 22.5, 30.5);
     --pico-color: #c2c7d0;
@@ -461,6 +475,11 @@ details summary[role=button]:not(.outline)::after {
   [type=submit],
   [type=button],
   [type=reset],
+  [role=button]):not(.outline)::before,
+  :host(:not([data-theme])) [aria-busy=true]:not(input, select, textarea).contrast:is(button,
+  [type=submit],
+  [type=button],
+  [type=reset],
   [role=button]):not(.outline)::before {
     filter: brightness(0);
   }
@@ -469,10 +488,17 @@ details summary[role=button]:not(.outline)::after {
   [type=reset],
   [type=checkbox],
   [type=radio],
+  [type=file]),
+  :host(:not([data-theme])) input:is([type=submit],
+  [type=button],
+  [type=reset],
+  [type=checkbox],
+  [type=radio],
   [type=file]) {
     --pico-form-element-focus-color: var(--pico-primary-focus);
   }
-  :root:not([data-theme]) details summary[role=button].contrast:not(.outline)::after {
+  :root:not([data-theme]) details summary[role=button].contrast:not(.outline)::after,
+  :host(:not([data-theme])) details summary[role=button].contrast:not(.outline)::after {
     filter: brightness(0);
   }
 }
@@ -627,7 +653,8 @@ progress,
   vertical-align: inherit;
 }
 
-:where(:root) {
+:where(:root),
+:where(:host) {
   -webkit-tap-highlight-color: transparent;
   -webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
@@ -1500,7 +1527,6 @@ button,
   line-height: var(--pico-line-height);
   text-align: center;
   text-decoration: none;
-  cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
@@ -1681,7 +1707,8 @@ img {
   fill: currentColor;
 }
 
-svg:not(:root) {
+svg:not(:root),
+svg:not(:host) {
   overflow: hidden;
 }
 
@@ -2652,23 +2679,27 @@ details[open] > summary::after {
 }
 
 /**
- * Card (<article>)
+ * Card (<article>, role="article")
  */
-article {
+article,
+[role=article] {
   margin-bottom: var(--pico-block-spacing-vertical);
   padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
   border-radius: var(--pico-border-radius);
   background: var(--pico-card-background-color);
   box-shadow: var(--pico-card-box-shadow);
 }
 article > header,
-article > footer {
+article > footer,
+[role=article] > header,
+[role=article] > footer {
   margin-right: calc(var(--pico-block-spacing-horizontal) * -1);
   margin-left: calc(var(--pico-block-spacing-horizontal) * -1);
   padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
   background-color: var(--pico-card-sectioning-background-color);
 }
-article > header {
+article > header,
+[role=article] > header {
   margin-top: calc(var(--pico-block-spacing-vertical) * -1);
   margin-bottom: var(--pico-block-spacing-vertical);
   border-bottom: var(--pico-border-width) solid var(--pico-card-border-color);
@@ -2680,10 +2711,17 @@ article > header > h2,
 article > header > h3,
 article > header > h4,
 article > header > h5,
-article > header > h6 {
+article > header > h6,
+[role=article] > header > h1,
+[role=article] > header > h2,
+[role=article] > header > h3,
+[role=article] > header > h4,
+[role=article] > header > h5,
+[role=article] > header > h6 {
   margin-bottom: 0;
 }
-article > footer {
+article > footer,
+[role=article] > footer {
   margin-top: var(--pico-block-spacing-vertical);
   margin-bottom: calc(var(--pico-block-spacing-vertical) * -1);
   border-top: var(--pico-border-width) solid var(--pico-card-border-color);
@@ -3037,7 +3075,8 @@ a[aria-busy=true] {
 /**
  * Modal (<dialog>)
  */
-:root {
+:root,
+:host {
   --pico-scrollbar-width: 0px;
 }