u2ui 1.0.1 → 1.4.5

package/css/classless/variables.css

@@ -1,99 +1,132 @@
-html {
-    --hsl-h: 188.9;
-    --hsl-s: 55.1%;
-    --hsl-l: 38.4%;
-
-    /* misc */
-    --width:42rem; /* rename? --main-width, --content-width */
-    --line-width: 1px;
-    /* --gap:1rem; deprecated? */
-    --radius: .3rem;
-
-    --shadow-x:0;
-    --shadow-y:.25rem;
-    --shadow-blur:.7rem;
-    --shadow: var(--shadow-x) var(--shadow-y) var(--shadow-blur) #0003;
-    color-scheme: light; /* todo: change when using light-dark */
-}
-
-/* all composite variables must be entered here, as they must be calculated for elements with [u2-skin]. */
-html, [u2-skin], [u2-skin=light] {
-  --hs:var(--hsl-h), var(--hsl-s);
-  --hsl:var(--hs), var(--hsl-l);
-
-  --color:       hsl(var(--hsl));
-  --color-light: hsl(var(--hs), calc(var(--hsl-l) + (100% - var(--hsl-l)) * .9 ) );
-  --color-dark:  hsl(var(--hs), calc(var(--hsl-l) * .7 ) );
-
-  /* named */
-  --color-bg:   hsl(var(--hs), 99.5%);
-  --color-text: hsl(var(--hs), calc(var(--hsl-l) * .4 ) );
-  --color-area: var(--color-light);
-  --color-line: var(--color-text);
-}
-
-
-[u2-skin=dark] {
-    --color-light: hsl(var(--hs), calc(var(--hsl-l) * .7 ) );
-    --color-dark:  hsl(var(--hs), calc(var(--hsl-l) + (100% - var(--hsl-l)) * .9 ) );
-    --color-bg:   hsl(var(--hs), calc(var(--hsl-l) * .4 ) );
-    --color-text: hsl(var(--hs), 99.5%);
-}
-
-/*
-@media (prefers-color-scheme: dark) {
-  html {
-    --color-light:   hsl(var(--hs), calc(var(--hsl-l) * .1 ) );
-    --color-dark:    hsl(var(--hs), calc(var(--hsl-l) + (100% - var(--hsl-l)) * .7 ) );
-
-    --color-bg:    hsl(var(--hs), calc(var(--hsl-l) * .4 ) );
-    --color-text:  hsl(var(--hs), 99.5%);
-  }
-}
-*/
-
-/*
-
-# Some ideas:
-
---gap\.5:calc(var(--gap)/2);
---gap2:calc(var(--gap)*2);
-
---gap-xs:.25rem;
---gap-s:.5rem;
---gap-m:2rem;
-
-## golden ratio?
---gap-xs: calc(var(--gap-s) / 1.618);
---gap-s:  calc(var(--gap)   / 1.618);
---gap-m:  calc(var(--gap)   * 1.618);
---gap-l:  calc(var(--gap-m) * 1.618);
---gap-x:  calc(var(--gap-l) * 1.618);
-
---color-red :     hsl(0deg,   var(--hsl-s), var(--hsl-l));
---color-orange :  hsl(30deg,  var(--hsl-s), var(--hsl-l));
---color-yellow :  hsl(60deg,  var(--hsl-s), var(--hsl-l));
---color-green :   hsl(120deg, var(--hsl-s), var(--hsl-l));
---color-cyan :    hsl(180deg, var(--hsl-s), var(--hsl-l));
---color-blue :    hsl(240deg, var(--hsl-s), var(--hsl-l));
---color-violet :  hsl(270deg, var(--hsl-s), var(--hsl-l));
---color-purple :  hsl(285deg, var(--hsl-s), var(--hsl-l));
---color-magenta : hsl(300deg, var(--hsl-s), var(--hsl-l));
-
---color-gray:       hsl(var(--hsl-h), 4%, 60%);
---color-gray-light: hsl(var(--hsl-h), 4%, 90%);
---color-gray-dark:  hsl(var(--hsl-h), 4%, 40%);
-
-from pico.css
---icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
---icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
---icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
---icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
---icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
---icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
---icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(198, 40, 40, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
---icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
---icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
---icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
---icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(56, 142, 60, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
-*/
+@layer normalize {
+
+html {
+    /* compatibility *
+    --hsl-h: 210; /* Blauer Farbton * /
+    --hsl-s: 90%; /* Sättigung * /
+    --hsl-l: 45%; /* Helligkeit * /
+    --color: hsl(var(--hsl-h), var(--hsl-s), var(--hsl-l));
+    /* */
+
+    --color: #207acc;
+
+    --accent: var(--color);
+    /*--color-contrast: oklch(from var(--color) l c calc(h + 180deg)); dafari?
+    --color-contrast: oklch(from var(--color) l c calc(h + 180));
+    --accent: var(--color-contrast);
+     */
+    --color-space: oklch;
+    --hue-shift: 0;
+
+    /* misc */
+    --width: 50rem; /* rename? --main-width, --content-width */
+    --gap: 1rem;
+
+    --line-width: 1px;
+    --radius: .3rem;
+
+    --shadow-x:0rem; /* unit needed for calc! */
+    --shadow-y:.1rem;
+
+    /* form controls */
+    --control-padding-x: .4em;
+    --control-padding-y: .3em;
+    --control-border-width: var(--line-width);
+    --control-radius: var(--radius);
+
+    --line-height: calc(var(--line-height-absolute) + var(--line-height-relative));
+    --font-1: system-ui, sans-serif;
+    --font-2: system-ui, sans-serif;
+
+    --font-1-variation: 
+        "wdth" var(--font-1-wdth, 100), 
+        "opsz" var(--font-1-opsz, 14), 
+        "GRAD" var(--font-1-grad, 0),
+        "MONO" var(--font-1-mono, 0),
+        "CASL" var(--font-1-casl, 0);
+
+    --font-2-variation: 
+        "wdth" var(--font-2-wdth, 100), 
+        "opsz" var(--font-2-opsz, 14), 
+        "GRAD" var(--font-2-grad, 0),
+        "MONO" var(--font-2-mono, 0),
+        "CASL" var(--font-2-casl, 0);
+
+}
+
+html, [u2-skin] {
+
+    color-scheme: light dark;
+
+    --color-lightest: color-mix(in var(--color-space), var(--color), #fff 97%);
+    --color-lighter:  color-mix(in var(--color-space), var(--color), #fff 85%);
+    --color-light:    color-mix(in var(--color-space), var(--color), #fff 50%);
+    --color-dark:     color-mix(in var(--color-space), var(--color), #000 30%);
+    --color-darker:   color-mix(in var(--color-space), var(--color), #000 60%);
+    --color-darkest:  color-mix(in var(--color-space), var(--color), #000 87%);
+
+    --accent-lightest: color-mix(in var(--color-space), var(--accent), #fff 97%);
+    --accent-lighter:  color-mix(in var(--color-space), var(--accent), #fff 85%);
+    --accent-light:    color-mix(in var(--color-space), var(--accent), #fff 50%);
+    --accent-dark:     color-mix(in var(--color-space), var(--accent), #000 30%);
+    --accent-darker:   color-mix(in var(--color-space), var(--accent), #000 60%);
+    --accent-darkest:  color-mix(in var(--color-space), var(--accent), #000 87%);
+
+    --gray:          oklch(from var(--color) l min(c,0.01) h);
+    --gray-lighter:  color-mix(in var(--color-space), var(--gray), #fff 85%);
+    --gray-light:    color-mix(in var(--color-space), var(--gray), #fff 50%);
+    --gray-dark:     color-mix(in var(--color-space), var(--gray), #000 30%);
+    --gray-darker:   color-mix(in var(--color-space), var(--gray), #000 60%);
+
+    /* Semantic - automatisch aus Grundfarbe */
+    --color-bg:   light-dark(var(--color-lightest), var(--color-darkest));
+    --color-text: light-dark(var(--color-darkest), var(--color-lightest));
+    --color-line: var(--color-text);
+    --color-area: light-dark(var(--color-lighter), var(--color-darker));
+
+    /* Farbpalette - Hue-Rotation */
+    --palette-base: oklch(from var(--color) max(l, 0.4) max(c, 0.15) h);
+
+    --red:    oklch(from var(--palette-base) l c calc(25 + var(--hue-shift)));
+    --orange: oklch(from var(--palette-base) l c calc(60 + var(--hue-shift)));
+    --yellow: oklch(from var(--palette-base) l c calc(95 + var(--hue-shift)));
+    --lime:   oklch(from var(--palette-base) l c calc(125 + var(--hue-shift)));
+    --green:  oklch(from var(--palette-base) l c calc(155 + var(--hue-shift)));
+    --cyan:   oklch(from var(--palette-base) l c calc(195 + var(--hue-shift)));
+    --blue:   oklch(from var(--palette-base) l c calc(240 + var(--hue-shift)));
+    --purple: oklch(from var(--palette-base) l c calc(285 + var(--hue-shift)));
+    --pink:   oklch(from var(--palette-base) l c calc(340 + var(--hue-shift)));
+
+    --shadow-blur: var(--gap);
+    --shadow-color: color-mix(in srgb, var(--color-text), transparent 60%);
+    --shadow: var(--shadow-x) var(--shadow-y) var(--shadow-blur) var(--shadow-color);
+    --shadow-s: calc(var(--shadow-x) * 0.5) calc(var(--shadow-y) * 0.5) calc(var(--shadow-blur) * 0.5) var(--shadow-color);
+    --shadow-l: calc(var(--shadow-x) * 1.5) calc(var(--shadow-y) * 1.5) calc(var(--shadow-blur) * 1.5) var(--shadow-color);
+
+}
+
+
+[u2-skin=dark] { color-scheme: dark; }
+[u2-skin=light] { color-scheme: light; }
+
+}
+
+/*
+@property --min-font-size {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 12px;
+}
+from pico.css
+--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+--icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+--icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
+--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
+--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(198, 40, 40, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
+--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
+--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
+--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
+--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(56, 142, 60, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+*/

package/css/norm/README.md

@@ -1,5 +1,5 @@
 # norm.css
-CSS normalization for crossbrowser compatibility
+Browser normalization CSS – nothing else!
 
 ## Features
 
@@ -7,6 +7,12 @@ CSS normalization for crossbrowser compatibility
 - maintained & up to date
 - ***No opinionated styles.*** (use https://github.com/u2ui/base.css for it).
 
+## Install
+
+```html
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@main/css/norm/norm.css" rel=stylesheet>
+```
+
 ## Demos
 
 [test.html](http://gcdn.li/u2ui/u2@main/css/norm/tests/test.html)  

package/css/norm/beta.css

@@ -1,40 +1,42 @@
-/* performance? ~7% faster? is it worth it?
-svg:not(:root), input, textarea, select, symbol, image, marker, pattern, foreignObject {
-    overflow:clip;
-}
-*/
-/*
-chrome uses "Consolas"
-"Courier New" is available everywhere? https://www.granneman.com/webdev/coding/css/fonts-and-formatting/web-browser-font-defaults
-Can not reproduce need of bug fix "monospace, monospace"
-needed? font-size: 1em; /* Correct the odd `em` font sizing in all browsers.
-*/
-pre, code, kbd, samp {
-    font-family: "Courier New", monospace;
-}
-:where([contenteditable]) {
-	text-wrap: stable; /* how exactly does it work? */
-}
-
-/*
-if attr supported something like this
-
-input:not([type=radio], [type=checkbox], [type=date], [type=color]...) {
-    width: calc(attr(size, 20) * .6em + 1em);
-}
-*/
-
-/*
-chrome adds a border-radius, but if reseted, input styles are resetted to old school inputs *
-
-input:not([type=radio], [type=checkbox]) {
-    border-radius:0;
-    border:1px solid #000;
-}
-
-i can not reproduce
-:where(::-webkit-inner-spin-button, ::-webkit-outer-spin-button) {
-	height: auto; /* Correct the cursor style of increment and decrement buttons in Safari * /
-}
-
+@layer normalize {
+
+/* performance? ~7% faster? is it worth it?
+svg:not(:root), input, textarea, select, symbol, image, marker, pattern, foreignObject {
+    overflow:clip;
+}
+*/
+/*
+chrome uses "Consolas"
+"Courier New" is available everywhere? https://www.granneman.com/webdev/coding/css/fonts-and-formatting/web-browser-font-defaults
+Can not reproduce need of bug fix "monospace, monospace"
+needed? font-size: 1em; /* Correct the odd `em` font sizing in all browsers.
+*/
+pre, code, kbd, samp {
+    font-family: "Courier New", monospace;
+}
+[contenteditable] {
+	text-wrap: stable; /* how exactly does it work? */
+}
+
+/*
+if attr supported something like this
+
+input:not([type=radio], [type=checkbox], [type=date], [type=color]...) {
+    width: calc(attr(size, 20) * .6em + 1em);
+}
+*/
+
+/*
+chrome adds a border-radius, but if reseted, input styles are resetted to old school inputs *
+
+input:not([type=radio], [type=checkbox]) {
+    border-radius:0;
+    border:1px solid #000;
+}
+
+i can not reproduce
+:where(::-webkit-inner-spin-button, ::-webkit-outer-spin-button) {
+	height: auto; /* Correct the cursor style of increment and decrement buttons in Safari * /
+}
+
 */

package/css/norm/norm.css

@@ -1,98 +1,89 @@
-:where(html) {
-	/* Chrome rounds computed line-height:
-	16px (font-size) * 1.15 (line-height) = 18.4px (line-height);
-	But chrome uses 18px. So use a number that gives full pixels. (1.124 or 1.1875) */
-	line-height: 1.1875;
-	-webkit-text-size-adjust: none;
-	text-size-adjust: none;
-}
-:where(h1) {
-	font-size: 2em; /* Correct the font size and margin on `h1` elements within `section` and `article` contexts in Chrome, Firefox, and Safari. */
-	margin-block: 0.67em;
-}
-:where(dl, ol, ul) :where(dl, ol, ul) {
-	margin: 0; /* Remove the margin on nested lists in Chrome and Safari. */
-}
-:where(hr) {
-	color: inherit; /* Correct the inheritance of border color in Firefox. */
-}
-:where(abbr[title]) {
-	-webkit-text-decoration: underline dotted; /* safari (does not support unprefixed shorthand) */
-    text-decoration-thickness: .08em; /* safari, chrome to match firefox */
-	text-underline-offset: 0.1em; /* safari, chrome to match firefox */
-}
-:where(b, strong) {
-	font-weight: bolder; /* Add the correct font weight in Chrome and Safari. */
-}
-:where(small) {
-	font-size: 80%; /* Add the correct font size in all browsers. */
-}
-:where(table) {
-	border-color: currentColor; /* Correct table border color in Chrome and Safari. */
-	/* text-indent: 0; will enable it if someone has a need for it */
-}
-:where(textarea, button, input, select) { /* textarea: Firefox, all:Safari */
-	margin: 0;
-}
-:where(textarea) { /* behave like in firefox */
-	baseline-source: first; /* available in chrome 111, safari no */
-}
-:where(button, input:is([type="button"], [type="reset"], [type="submit"])) {
-	-webkit-appearance: button; /* Correct the inability to style buttons in iOS and Safari. */
-}
-:where([type="search"]) {
-	-webkit-appearance: textfield; /* Correct the odd appearance in Chrome and Safari. */
-	/* outline-offset: -2px; /* Correct the outline style in Safari. Get worse in chrome... */
-}
-:where(::-webkit-search-decoration) {
-	-webkit-appearance: none; /* Remove the inner padding in Chrome and Safari on macOS. */
-}
-:where(::placeholder) { /* Correct the text style of placeholders in Chrome and Safari. */
-	color: inherit;
-	opacity: .54;
-}
-:where(::-webkit-file-upload-button) {
-	-webkit-appearance: button; /* Correct the inability to style upload buttons in iOS and Safari. */
-	font: inherit; /* Change font properties to `inherit` in Safari. */
-}
-:where(:-moz-ui-invalid) { /* Remove the additional :invalid styles in Firefox. */
-	box-shadow: none;
-}
-:where(summary) { /* Add the correct display in safari 14 */
-	display: list-item;
-}
-:where(search) {
-	display:block;
-}
-:where([inert]) { /* ch < 102 sf < 15.5 ff < 112 */
-	pointer-events: none;
-	cursor: default;
-	-webkit-user-select: none;
-	user-select: none;
-}
-/* :where([inert], [inert] *) { too slow
-	/* user-modify: read-only !important; no effect? * /
-	-webkit-user-select: none;
-	user-select: none;
-} */
-
-:where([popover]) {
-    position: fixed;
-    width: fit-content;
-    height: fit-content;
-    color: canvastext;
-    background-color: canvas;
-    inset: 0;
-    margin: auto;
-    border-width: initial;
-    border-style: solid;
-    border-color: initial;
-    border-image: initial;
-    padding: 0.25em;
-    overflow: auto;
-}
-@supports not selector(:popover-open) {
-    :where([popover]) {
-        display: none;
-    }
-}
+@layer normalize {
+
+html {
+	/* Chrome rounds computed line-height:
+	16px (font-size) * 1.15 (line-height) = 18.4px (line-height);
+	But chrome uses 18px. So use a number that gives full pixels. (1.124 or 1.1875) */
+	line-height: 1.1875;
+	-webkit-text-size-adjust: none;
+	text-size-adjust: none;
+}
+h1 {
+	font-size: 2em; /* Correct the font size and margin on `h1` elements within `section` and `article` contexts in Chrome, Firefox, and Safari. */
+	margin-block: 0.67em;
+}
+:is(dl, ol, ul) :is(dl, ol, ul) {
+	margin: 0; /* Remove the margin on nested lists in Chrome and Safari. */
+}
+hr {
+	color: inherit; /* Correct the inheritance of border color in Firefox. */
+}
+abbr[title] {
+	-webkit-text-decoration: underline dotted; /* safari (does not support unprefixed shorthand) */
+    text-decoration-thickness: .08em; /* safari, chrome to match firefox */
+	text-underline-offset: 0.1em; /* safari, chrome to match firefox */
+}
+b, strong {
+	font-weight: bolder; /* Add the correct font weight in Chrome and Safari. */
+}
+small {
+	font-size: 80%; /* Add the correct font size in all browsers. Standard is "smaller" but it is not clearly specified what smaller means */
+}
+table {
+	border-color: currentColor; /* Correct table border color in Chrome < 149 and Safari < 18.4. */
+}
+textarea, button, input, select { /* textarea: Firefox, all:Safari */
+	margin: 0;
+}
+textarea { /* behave like in firefox */
+	baseline-source: first; /* available in chrome 111, ff 115, safari no */
+}
+button, input:is([type="button"], [type="reset"], [type="submit"]) {
+	-webkit-appearance: button; /* Correct the inability to style buttons in iOS and Safari. */
+}
+input[type="search"] {
+	-webkit-appearance: textfield; /* Correct the odd appearance in Chrome and Safari. */
+	/* outline-offset: -2px; /* Correct the outline style in Safari. Get worse in chrome... */
+}
+::-webkit-search-decoration {
+	-webkit-appearance: none; /* Remove the inner padding in Chrome and Safari on macOS. */
+}
+::placeholder { /* Correct the text style of placeholders in Chrome and Safari. */
+	color: inherit;
+	opacity: .54;
+}
+::-webkit-file-upload-button {
+	-webkit-appearance: button; /* Correct the inability to style upload buttons in iOS and Safari. */
+	font: inherit; /* Change font properties to `inherit` in Safari. */
+}
+:-moz-ui-invalid { /* Remove the additional :invalid styles in Firefox. */
+	box-shadow: none;
+}
+summary { /* Add the correct display in safari */
+	display: list-item;
+}
+search {
+	display:block; /* sf < 17 */
+}
+[popover] { /* sf < 18.3 */
+    position: fixed;
+    width: fit-content;
+    height: fit-content;
+    color: canvastext;
+    background-color: canvas;
+    inset: 0;
+    margin: auto;
+    border-width: initial;
+    border-style: solid;
+    border-color: initial;
+    border-image: initial;
+    padding: 0.25em;
+    overflow: auto;
+}
+@supports not selector(:popover-open) {
+    [popover] {
+        display: none;
+    }
+}
+
+}