clairity.css 0.1.0

data/lib/assets/css/clairity/states.css

@@ -0,0 +1,756 @@
+/******************************************************************************\
+STATES - these are convenience styles that go beyond defining the base elements.
+         in general, these add richness to the UI/UX while still being minimal 
+         and "classless", but not pseudo-classless.
+
+         regarding new selectors, :not() for a single element is well-supported 
+         but not so for a list of selectors (until very recently). :has() is 
+         only safari 15.4+ and chrome 105+, with firefox support on the way.
+\******************************************************************************/
+
+
+/* -----------------------------------------------------------------------------
+//  #root - global states - listed first so they can be overriden subsequently
+// -------------------------------------------------------------------------- */
+
+/* #:hover - default :hover border for form inputs and buttons */
+:hover { border-color:    var(--highlighted); }     /* [0010] specificity */
+
+/* #disabled #hover - must be >= specificity of equivablent non-disabled field*/
+:is([disabled], :disabled):hover {                      /* [0020] specificity */
+  color:                  var(--inactive);              /* for select options */
+  background-color:       var(--bg-inactive);    /* messes up unchecked radio */
+  border:                 var(--solid) var(--border);   /* to overcome :hover */
+  cursor:                 not-allowed;          /* TODO: shouldn't need this? */
+  --icon-color:           unset;       /* revert icon color to previous value */
+}
+
+/* #:focus - the focused pseudo-class, used by links, form fields, etc. */
+:focus {  }
+/* #:focus-visible - applies to keyboard-focused buttons but not mouse-focused.
+   note safari only started supporting this with 15.4 - [0010] specificity */
+:focus-visible {
+  outline:                var(--dashed) var(--emphasized);
+  outline-offset:         var(--thick);
+}
+
+/* #:active - actuated element, typically also has :focus, useful for keyboard 
+   users and accessibility in general */
+:active {  }                  /* TODO: consider low-vision/keyboard users */
+
+/* #:empty - has no children and no content other than certain whitespace */
+:empty {  }
+
+
+/* -----------------------------------------------------------------------------
+//  #sectioning - block type elements meant to hold other content elements
+// -------------------------------------------------------------------------- */
+
+
+
+/* -----------------------------------------------------------------------------
+//  #headers - heading-related elements
+// -------------------------------------------------------------------------- */
+
+/*style header fragment no differently to headers- [0001] / [0011] specificity*/
+:is(h1, h2, h3, h4, h5, h6) :where([href^="#"]),
+:is(h1, h2, h3, h4, h5, h6) :where([href^="#"]):hover,
+:is(h1, h2, h3, h4, h5, h6) :where([href^="#"]):visited {
+  color:                  unset;
+  font-weight:            unset;
+  text-decoration:        unset;
+}
+
+/* header fragment indicator - [0001] specificity */
+:where(h1, h2, h3, h4, h5, h6) :where([href^="#"]:hover)::after {
+  /*display:                inline-flex;*/
+  font-size:              var(--smaller);
+  color:                  var(--inactive);
+  content:                "#";
+  margin-left:            var(--s);
+}
+
+
+/* -----------------------------------------------------------------------------
+//  #links - for linking to other documents
+// -------------------------------------------------------------------------- */
+
+/* placeholder links shouldn't be styled like links until an href is added    */
+:where(a, a:hover):not([href]) {             /* [0011]/[0021] specificity */
+  color:                  inherit;
+  text-decoration:        none;
+}
+
+/* #mailto #tel #sms #file #external #bookmark #download - special link icons -
+   this uses the svg mask technique to place & color icons on hover; as such, it
+   must be in a separate pseudo-element so masking doesn't bleed out to text  */
+/* #icons - set --icon to an svg from icons.css, set color with --icon-color  */
+[href^="tel:"]          { --icon: var(--i-phone);         }
+[href^="sms:"]          { --icon: var(--i-message-2);     }
+[href^="file:"]         { --icon: var(--i-file);          }
+[download]              { --icon: var(--i-file-download); }
+[href^="mailto:"]       { --icon: var(--i-mail);          }
+[rel~="external"]       { --icon: var(--i-external-link); }
+[rel~="bookmark"]       { --icon: var(--i-bookmark);      }
+
+/* chrome still needs prefixed -webkit-mask as of 20221001 */
+:where([href^="tel:"], [href^="sms:"], [href^="file:"], [download])::before, 
+:where([href^="mailto:"], [rel~="external"], [rel~="bookmark"])::after {
+  content:                '';         /* without content, no icon appears */
+  -webkit-mask:           var(--icon) no-repeat center / var(--field-icon);
+  mask:                   var(--icon) no-repeat center / var(--field-icon);
+  background-color:       var(--icon-color);
+  padding:                var(--inline-padding);
+}
+
+:where([href^="mailto:"], [rel~="external"], [rel~="bookmark"])::after {
+  margin-left:            var(--xs);
+  padding-top:            var(--xs);
+}
+
+a:where([href^="mailto:"], [href^="tel:"], [href^="sms:"], [href^="file:"], 
+[rel~="external"], [rel~="bookmark"], [download]):hover {
+  --icon-color:           var(--active);
+}
+
+/* give followed fragment links some room at the top - [0010] specificity */
+[id] { scroll-margin-top: var(--l); }
+
+/* #:any-link matches both :link and :visited for anchors with an href; safari
+   support is currently lagging, so don't use for now */
+:any-link {  }
+/* #:local-link - targets same-document links - currently unspported */
+/*:local-link {  }*/
+
+
+/* -----------------------------------------------------------------------------
+//  #lists - ordered and unordered lists of items
+// -------------------------------------------------------------------------- */
+/* #ul #ol - removes vertical gaps for lists within lists - uses :where() to get
+   [0001] specificity rather than [0002] */
+:where(ul, ol) :is(ul, ol) { margin: 0; }
+
+
+/* -----------------------------------------------------------------------------
+//  #tables - for tabular data
+// -------------------------------------------------------------------------- */
+
+/* makes the first column sticky                         - [0012] specificity */
+:not(tfoot) > tr th:first-of-type {
+  position:               sticky;    /* works best w/ <table> display ≅ block */
+  left:                   0;
+  background-color:       var(--background);      /* is transparent otherwise */
+}
+/* makes the table header row sticky                     - [0002] specificity */
+thead th {
+  position:               sticky;
+  top:                    0;
+  z-index:                1;  /* puts header row on top of tbody rows, including
+                                                                header column */
+  background-color:       var(--background);      /* is transparent otherwise */
+}
+/* sticks top left box on top of both header columns/rows - [0012] specificity*/
+thead th:first-child { z-index: 2; }
+
+/* zebra-striping of table rows                          - [0013] specificity */
+tbody tr:nth-child(even), tbody tr:nth-child(even) th {
+  background-color:       var(--bg-contrast);
+}
+/* this is more robust because it excludes hidden rows, but only safari and 
+   chrome support this syntax                            - [0023] specificity */
+@supports selector(:nth-child(even of :not([hidden]))) {
+tbody tr:where(:nth-child( even of :not([hidden]) )), 
+tbody tr:where(:nth-child( even of :not([hidden]) )) th {
+  background-color:       var(--bg-contrast);
+}}
+
+/* hover effect for table rows */
+tbody tr:hover, tbody tr:hover th {
+  background-color:       var(--contrast);
+}
+/* adds sticky borders below thead and above tfoot */
+thead tr:last-of-type th {box-shadow: inset 0 -2px var(--secondary, --neutral);}
+tfoot :where(td, th)     {box-shadow: inset 0  2px var(--secondary, --neutral);}
+
+
+/* -----------------------------------------------------------------------------
+//  #forms - for submitting data to the server
+// -------------------------------------------------------------------------- */
+/* #form #fieldset #focus-within - highlight whole forms & fieldsets when one of
+   its contained elements is focused - [0010] specificity */
+:where(form, fieldset):focus-within {
+  /*background-color:       var(--bg-contrast);*/
+}
+/* #legend #fieldset #hover - remove :hover effect on legend & fieldset by 
+   setting the same border color - [0010] specificity */
+:where(legend, fieldset):hover {
+  border-color:           var(--border);
+}
+
+/* #form #ul - since lists in forms typically list out form controls, remove
+   the bullet styling from them - [0002] specificity */
+form ul { list-style:     none; }
+
+/* #form #section #p #div - subgrid is firefox 71+ & safari 16+ only 20221001 */
+@supports (grid-template-columns: subgrid) {
+  /* :where() can be used here, since @supports is also a recent addition */
+form :where(section, p, div) {                        /* [0001] specificity */
+  grid-column:            full;
+  display:                grid;
+  grid-template-columns:  subgrid;
+  gap:                    inherit;
+}}
+/*form section :where(h1,h2,h3,h4,h5,h6) + p { display: block; }*/
+
+/* chrome/edge doesn't support subgrid yet but does support :has() & :where() */
+@supports selector(:has(*)) {
+  fieldset:where(:has(label, input, button, textarea, select, fieldset)) {
+    margin:               0;
+    display:              grid;
+    grid-template-columns:[labels full-start] 3fr [elements] 7fr [full-end];
+    gap:                  var(--m);
+  }
+  fieldset:where(:has(p :is([type='checkbox'], [type='radio'])):not(:has(select,
+      textarea, [type="text"], [type="date"], [type="email"], [type="password"],
+      [type="datetime-local"], [type="search"]))) {
+    row-gap:              0;
+  }
+  /* since grid properties fall through p tags, assign margin-top to first child
+  elements to get a gap between paragraphs of different input types */
+  fieldset p:has([type='checkbox'], [type='radio']) + p:has([type='radio'], 
+      [type='checkbox']) :is([type='radio'], [type='checkbox'], 
+      label):first-of-type {
+    margin-top:           var(--m);
+  }
+  /* chrome/edge doesn't support subgrid, so pierce the grid barrier instead  */
+  fieldset :where(p:has(label, input, button, textarea, select, fieldset)) {
+    display:              contents;
+  }
+  /* labels go on the labels gridline */
+  :where(fieldset :is(p, div)) label {
+    grid-column:          labels;
+  }
+  /* lists that contain radios/checkboxes go on the elements gridline */
+  form:has(fieldset :where(select, textarea, [type="text"], [type="date"], 
+      [type="email"], [type="password"], [type="datetime-local"], 
+      [type="search"])) fieldset ul:has(li label :where([type='radio'], 
+      [type='checkbox'])) {
+    grid-column:          elements;
+  }
+
+  /* inputs on the elements gridline; pad right side away from fieldset line  */
+  :where(fieldset) :where(p):has(input, button, textarea, select, fieldset) 
+      :where(input:not(:is([type='checkbox'],[type='radio']), button, 
+      textarea, select, fieldset)) {
+    grid-column:          elements;
+    margin-right:         var(--m);
+  }
+  /* for radios & checks, invert the placement of the input and label */
+  :where(fieldset) :where(p):has(label) :where([type='checkbox'], 
+      [type='radio']):has(+ label) {
+    grid-column:          labels;
+    align-self:           center;
+    justify-self:         end;
+  }
+  :where(fieldset p:has(label) :is([type='checkbox'], 
+      [type='radio']):has(+ label)) + label {
+    grid-column:          elements;
+    justify-self:         start;
+  }
+  /* for paragraph tags that aren't form element containers, span the grid */
+  :where(fieldset) :where(p, div, h2, h3, h4, h5, h6):not(:has(label, input, 
+      button, textarea, select, fieldset)) {
+    display:              block;
+    grid-column:          full;
+  }
+}
+/*form :where(fieldset, input, select, button, input[type="button"]) { 
+  grid-column:            elements; 
+}*/
+
+fieldset > :last-child {
+  margin-bottom:          0;
+}
+
+
+/* -----------------------------------------------------------------------------
+//  #inputs - standard form input elements
+// -------------------------------------------------------------------------- */
+
+/* if [size] is set on an input, respect that choice - [0011] specificity */
+input[size] {
+  width:                  fit-content;
+  min-width:              unset;
+  max-width:              unset;
+}
+
+/* #input #optgroup #option #textarea #select #read-only #focus - bg field icons
+   are Field system color by default, and --icon-color on focus/hover */
+:where(input, optgroup, option, textarea, select):focus {
+  border-color:           var(--highlighted);
+  --icon-color:           var(--primary);
+}
+
+/* input images */
+[type="date"],   [type="time"],  [type="datetime"], [type="datetime-local"], 
+[type="month"],  [type="week"],  [type="url"],      [type="email"], 
+[type="number"], [type="tel"],   [type="password"], [type="search"] {
+  padding-left:           var(--height);
+  background-blend-mode:  var(--icon-blend-mode);
+}
+[type="date"], [type="month"], [type="week"] {
+                    background-image: var(--colorize-icon), var(--i-calendar); }
+[type="datetime"], [type="datetime-local"], [type="time"] {
+               background-image: var(--colorize-icon), var(--i-calendar-time); }
+[type="url"]     { background-image: var(--colorize-icon), var(--i-browser);   }
+[type="email"]   { background-image: var(--colorize-icon), var(--i-mail);      }
+[type="number"]  { background-image: var(--colorize-icon), var(--i-numbers);   }
+[type="tel"]     { background-image: var(--colorize-icon), var(--i-phone);     }
+[type="password"]{ background-image: var(--colorize-icon), var(--i-lock);      }
+[type="search"]  { background-image: var(--colorize-icon), var(--i-search);    }
+
+/*@media (prefers-color-scheme: dark) {
+[type="date"],   [type="time"],  [type="datetime"], [type="datetime-local"], 
+[type="week"],   [type="month"], [type="url"],      [type="email"], 
+[type="number"], [type="tel"],   [type="password"], [type="search"] {
+  mask:                   var(--icon) no-repeat center left / var(--field-icon);
+  background-color:       var(--icon-color);
+  mask-repeat:            no-repeat;
+  background-image:       unset;
+}
+[type="date"], [type="month"], [type="week"] { --icon: var(--i-calendar);  }
+[type="datetime"], [type="datetime-local"], [type="time"] {
+                   --icon: var(--i-calendar-time); }
+[type="url"]     { --icon: var(--i-browser);   }
+[type="email"]   { --icon: var(--i-mail);      }
+[type="number"]  { --icon: var(--i-numbers);   }
+[type="tel"]     { --icon: var(--i-phone);     }
+[type="password"]{ --icon: var(--i-lock);      }
+[type="search"]  { --icon: var(--i-search);    }
+}*/
+
+/* hide nav search's placeholder text if the background icon is present; opacity
+   is used here because other methods are disallowed on ::placeholder - [0001]*/
+:where(nav) :where([type="search"])::placeholder { opacity: 0; }
+
+:where(input, optgroup, option, textarea, select):required:is(:valid,:in-range){
+  border-color:           var(--success-high, forestgreen);
+}
+:where(input, optgroup, option, textarea, select):required:is(:valid, 
+    :in-range):hover, :where(input, optgroup, option, textarea, 
+    select):required:is(:valid, :in-range):focus {
+  border-color:           var(--success, limegreen);
+}
+/* remove borders on :read-only text and textarea fields */
+:where(textarea, [type="text"], [type="date"], [type="time"], [type="datetime"],
+      [type="datetime-local"],  [type="month"],[type="week"], [type="email"],
+      [type="password"],        [type="url"],  [type="tel"],  [type="number"], 
+      [type="search"]):read-only:enabled {
+  border-style:           none;
+}
+
+/*:read-only text fields shouldn't look editable on hover - [0040] specificity*/
+:where(textarea, input:not([type="radio"],[type="checkbox"],[type="button"],
+      [type="reset"],[type="submit"],[type="image"])):read-only:enabled:hover {
+  border-style:           none;
+  border-color:           var(--emphasized);
+}
+/* deemphasize :read-only text fields on :focus - [0030] specificity*/
+:where(textarea, [type="text"], [type="date"], [type="time"], [type="datetime"],
+      [type="datetime-local"],  [type="month"],[type="week"], [type="email"],
+      [type="password"],        [type="url"],  [type="tel"],  [type="number"],
+      [type="search"]):read-only:focus {
+  border-style:           none;
+  border-color:           var(--deemphasized);
+}
+
+:where(textarea, [type="text"], [type="date"], [type="time"], [type="datetime"],
+      [type="datetime-local"],  [type="month"],[type="week"], [type="email"],
+      [type="password"],        [type="url"],  [type="tel"],  [type="number"],
+      [type="search"]):hover {
+  --icon-color:           var(--primary);
+}
+
+/* #:invalid - :invalid pseudo-class for when a field fails validation */
+/*:where(input, optgroup, option, textarea, select):required:empty,*/
+:where(input, optgroup, option, textarea, select):is(:invalid, :out-of-range) {
+  border-color:           var(--warning-high, gold);
+}
+/* #invalid:hover - for when an :invalid field is also :hover'ed */
+/*:where(input, optgroup, option, textarea, select):required:empty:hover,*/
+:where(input, optgroup, option, textarea, select):is(:invalid, 
+    :out-of-range):hover, :where(input, optgroup, option, textarea, 
+    select):is(:invalid, :out-of-range):focus {
+  border-color:           var(--warning, khaki);
+}
+
+/* HACK: these two rules undo validation borders on initial load because 
+   browsers other than firefox don't support :user-invalid */
+/*:is(input, optgroup, option, textarea, select):optional:not(:valid, 
+    [type="button"], [type="reset"]) {
+  border-color:               var(--border);
+}
+:is(input, optgroup, option, textarea, select):optional:not(:valid, :disabled, 
+    [type="button"], [type="reset"]):hover {
+  border-color:               var(--highlighted);
+}
+*/
+/* #:user-invalid - experimental - firefox only for now */
+:where(input, optgroup, option, textarea, select):user-invalid {
+  border-color:           var(--error-high, firebrick);
+}
+:where(input, optgroup, option, textarea, select):user-invalid:hover,
+:where(input, optgroup, option, textarea, select):user-invalid:focus {
+  border-color:           var(--error, red);
+}
+
+
+/* -----------------------------------------------------------------------------
+//  #radio #checkbox - radio buttons and checkboxes
+// -------------------------------------------------------------------------- */
+
+/* indeterminate checkboxes - activated only via js - [0010] specificity */
+:where([type="checkbox"]):indeterminate {
+  border-color:           var(--warning);
+  background-image:       var(--colorize-icon), var(--i-dash);
+  background-blend-mode:  var(--icon-blend-mode);
+  background-position:    center;
+  background-size:        1.1em;
+  box-shadow:             unset;
+}
+:where([type="checkbox"]):indeterminate:required { /* [0020] specificity */
+  border-color:           var(--error);
+}
+:where([type="checkbox"]):indeterminate:hover {
+  --icon-color:           var(--300);
+}
+
+/* #radio #checkbox #label #disabled #checked - these 3 rules style the disabled
+   radio/checkbox and its subsequent label - [0010] specificity using :where();
+   don't want first rule to be [0001] as regular label rules would override it*/
+:where([type="radio"], [type="checkbox"]):disabled + :where(label) {
+  color:                  var(--inactive);
+  cursor:                 not-allowed;
+}
+/* needs to be >= specificity of global :disabled:hover rule to override it   */
+:is([type="radio"], [type="checkbox"]):disabled {       /* [0020] specificity */
+  background-color:       var(--unchecked);                /* removes "check" */
+  border:                 var(--solid) var(--deemphasized);    /* grey border */
+  box-shadow:             var(--inset) var(--unchecked);          /* inset bg */
+}
+:is([type="radio"]:checked, [type="checkbox"]:checked):disabled {
+  background-color:       var(--deactivated);           /* greyed-out "check" */
+}
+
+/* if radios/checkboxes are inline, insert a gap between them for readability */
+:where([type="radio"] + label, [type="checkbox"] + label) +
+               :is([type="radio"], [type="checkbox"]) { /* [0010] specificity */
+  margin-left:            var(--m);
+}
+
+/* inputs are (somewhat unspecified as) "replaced elements" & therefore can't
+   have ::before or ::after pseudo-elements on itself; use on label instead */
+/* mark required fields' labels; labels usually follow checkboxes & radios */
+/* :has() is only safari 16+ and chrome 105+ for now */
+@supports selector(:has(*)) {
+  label:has(+ :is(input, select):not([type="checkbox"], [type="radio"]):required)::after,
+  input:where([type="checkbox"], [type="radio"]):required + label::after {
+    content:              " *";
+  }
+  /* mark as successful the fieldset & legend borders for valid radio buttons */
+  /* :has() is safari only for now */
+
+  fieldset:has([type="radio"]:required:checked), 
+  fieldset:has([type="radio"]:required:checked) legend {
+    border-color:         var(--success, forestgreen);
+  }
+}
+
+[type="checkbox"]:required:user-invalid + label {
+  color:                  var(--error, red);
+}
+
+
+/* -----------------------------------------------------------------------------
+//  specialized inputs - #date #time #datetime-local #month #week #datetime 
+//                       #email #password #search #file #image #url #tel #color 
+//                       #range #number #hidden
+// -------------------------------------------------------------------------- */
+
+/* search decorations - [0011] specificity */
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  appearance:             none; /* needed? */
+}
+
+
+/* -----------------------------------------------------------------------------
+//  #buttons - <button>s and <input>s of type=button, reset, and submit
+// -------------------------------------------------------------------------- */
+
+/* #button #submit #hover -                                [0010] specificity */
+:where(button, [type="button"], [type="submit"]):hover, 
+::file-selector-button:hover {
+  background-color:       var(--bg-highlight);
+  border-color:           var(--foreground);
+}
+/* #reset #hover */
+:where([type="reset"]):hover {                          /* [0010] specificity */
+  background-color:       var(--contrast);    /* TODO: make grey in dark mode */
+}
+
+/* #disabled & disabled #hover button states - needs >= specificity of
+   non-disabled versions */
+:is(button, button:hover, [type="button"], [type="submit"]):disabled,
+[type="file"]:disabled::file-selector-button {          /* [0020] specificity */
+  color:                  var(--inactive);
+  background-color:       var(--bg-inactive);
+  border-color:           var(--deemphasized);
+  cursor:                 not-allowed;
+}
+
+[type="file"]:disabled {
+  background-color:       unset;
+  border:                 unset;
+  cursor:                 not-allowed;
+}
+
+[type="reset"]:disabled {
+  color:                  var(--inactive);  
+  background-color:       var(--background);
+  border-color:           var(--deemphasized);
+  cursor:                 not-allowed;
+}
+
+/* highlights the :focus style */
+:where(button, [type="button"], [type="reset"], [type="submit"], 
+                                         [type="image"]):not(:disabled):active {
+  outline:                var(--dashed) var(--bg-highlight);
+  outline-offset:         var(--thick);
+}
+
+/* includes css from .tertiary.button - [00xx] specificity */
+[role="alert"] button:empty {
+  color:                  currentColor;       /* invert foreground/background */
+  background-color:       unset;                     /* border is transparent */
+  padding-inline:         var(--xxs);
+  float:                  right;
+}
+
+[role="alert"] button:empty::after {
+  content:                '⨉';
+  font-weight:            var(--boldest);
+}
+
+[role="alert"] button:empty:hover {
+  text-decoration:        underline;          /* TODO: make grey in dark mode */
+  border-color:           var(--transparent);
+}
+
+/*form:has(button[aria-label="close" i]:empty) {
+  padding-inline:         var(--xxs);
+  float:                  right;
+}
+*/
+/* -----------------------------------------------------------------------------
+//  #selections - dropdown/multi-item single-/multiple-selection form controls
+// -------------------------------------------------------------------------- */
+
+/* #option #hover #disabled */
+option:not(:disabled, [disabled]):hover {               /* [0011] specificity */
+  color:                  var(--whitish);
+  background-color:       var(--bg-highlight);
+}
+option:disabled, option:disabled:hover {       /* [0011] / [0021] specificity */
+  border-color:           var(--transparent);
+  background-color:       unset;
+}
+
+/* #select #multiple #hover #active - dropdown selection form controls- [0011]*/
+select:not(:disabled, [disabled]):hover, select:active { /* dropdown chevron  */
+  background-image:       url("data:image/svg+xml;utf8,<svg \
+   xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path \
+   d='M0,10 20,30 40,10' fill='none' stroke='%23666' stroke-width='2'/></svg>");
+}
+/* multi-selects shouldn't have chevron - [0020] specificity */
+[multiple]:hover, [multiple]:active, select[size]:hover, select[size]:active {
+  background-image:       none;
+}
+/* #multiple #option #checked */
+[multiple] option:disabled:checked {
+  background-color:       var(--deactivated) linear-gradient(0deg, 
+                                var(--deactivated) 0%, var(--deactivated) 100%);
+}
+/* #multiple #focus #option #disabled #checked */
+:where(select[size], [multiple]):focus option:not(:disabled):checked {
+  /* --checked may be invalid due to SelectedItem, so provide a fallback */
+  background-color:       var(--checked, LinkText) linear-gradient(0deg, 
+                    var(--checked, LinkText) 0%, var(--checked, LinkText) 100%);
+}
+
+/* #label for taller #multiple #textarea should align top - firefox 106 still 
+    doesn't properly support :has() with combinator selectors */
+@supports selector(:has(*)) {
+label:where(:has(+ [multiple],+ textarea,+ select[size])){/*[0001] specificity*/
+  vertical-align:         top;
+  align-self:             start;
+}}
+
+
+/* -----------------------------------------------------------------------------
+//  #outputs - informational output/display
+// -------------------------------------------------------------------------- */
+
+progress:hover { border-color: revert; }
+
+/* specify theme colors for chrome - [0011] specificity */
+:-moz-meter-optimum::-moz-meter-bar         { background-color: var(--success);}
+:-moz-meter-sub-optimum::-moz-meter-bar     { background-color: var(--warning);}
+:-moz-meter-sub-sub-optimum::-moz-meter-bar { background-color: var(--error);  }
+
+
+/* -----------------------------------------------------------------------------
+//  #block text elements - elements that contain text blocks
+// -------------------------------------------------------------------------- */
+
+blockquote::before {         /* [0002] specificity is the least possible here */
+  content:                open-quote;
+  color:                  var(--pale);
+  font-size:              5rem;
+  font-family:            var(--serif);
+  left:                   var(--xs);
+  line-height:            1;
+  position:               absolute;
+  top:                    0;
+  z-index:                -1;
+}
+blockquote > :first-child {                             /* [0011] specificity */
+  margin-top:             0;
+  text-indent:            var(--m);
+}
+blockquote > :last-child {                              /* [0011] specificity */
+  margin-bottom:          0;
+}
+
+
+/* -----------------------------------------------------------------------------
+//  #inline elements - elements that occur principally within text blocks
+// -------------------------------------------------------------------------- */
+
+/* #q - inline quotations -note that you must add the closing smart quote as 
+   <q>'s automatic quotes are added via pseudo elements */
+q[cite]::after { content: "” (cf. " attr(cite) ") "; }
+
+/* #kbd #hover - remove default :hover styles - [0011] specificity */
+kbd:hover { border:       var(--solid) var(--distinguished); }
+
+/* #:dir, #:lang - linguistic pseudo-classes */
+/*:dir {  }*/                /* experimental */
+/*:lang {  }*/
+
+
+/* -----------------------------------------------------------------------------
+//  #media / #embedded - elements that add multimedia to a page
+// -------------------------------------------------------------------------- */
+
+/* #figure */
+figure:hover { border-color:  var(--border); }
+/* #figure #headings - #h1 #h2 #h3 #h4 #h5 #h6 ~*/
+figure > :where(h1,h2,h3,h4,h5,h6):first-child { margin-top: 0; }
+
+/* #blockquote inside #figure - safari only for now - :where is older than :has
+   so it can be used here to reduce specificity          - [0001] specificity */
+figure:where(:has(blockquote)) {
+  background-color:       revert;
+}
+/* fix doubled margin of a blockquote in a figure        - [0002] specificity */
+figure > blockquote {
+  text-align:             start;
+  margin:                 var(--ms);
+  padding:                var(--ms);
+  max-width:              calc(var(--line-length) - (var(--ms) * 2));
+}
+
+/* #svg - [0001] specificity */
+svg:not(:where(:root)) {
+  width:                  var(--m);
+  /*max-width:              100%;*/
+  overflow:               hidden;
+}
+
+/* #audio - audio w/p controls shouldn't take up space   - [0011] specificity */
+audio:not([controls]) {
+  display:                none;
+  height:                 0;
+}
+
+/* resource state pseudo-classes */
+/*:playing {  }*/
+/*:paused {  }*/
+/*:fullscreen {  }*/
+/*:picture-in-picture {  }*/
+/* time-dimensional pseudo-classes */
+/*:current {  }*/         /* experimental */
+/*:past {  }*/            /* experimental */
+/*:future {  }*/          /* experimental */
+
+
+/* -----------------------------------------------------------------------------
+//  #interactive - built-in interactive components
+// -------------------------------------------------------------------------- */
+
+/* #dialog - built-in modal overlay - comes with 'Esc' support with no js! */
+/* wrap long dialogs in a container to scroll the body content sans button */
+dialog > :where(div, section, article) {
+  overflow-y:             auto;     /* scrolls as necessary w/ height set */
+  max-height:             calc(80vh * 0.8); /* container queries needed! */
+}
+
+dialog button {
+  margin-top:             var(--ms);
+}
+
+dialog :where(h1, h2, h3, h4, h5, h6) {
+  border-bottom:          var(--solid) var(--border);
+  border-radius:          var(--radius) var(--radius) 0 0;
+  color:                  var(--distinct);   /* differentiate dialog headings */
+  font-size:              var(--large); /* dialogs typically only need 1 heading
+                                          level, so make it all the same size */
+  margin:                 0 0 0 calc(-1 * var(--m)); /* negative left margin
+                                         lines up heading with paragraph text */
+  padding:                0 var(--m) var(--m); /* top padding provided by dialog
+                                                    padding so remove it here */
+}
+
+/* #details - an accordion-like widget for question & answer style layouts */
+/* #summary - the 'question' sub-element of details */
+details:where([open]) summary {
+  border-bottom:          var(--solid) var(--border);
+}
+
+details + details {
+  border-top:             0;
+  border-radius:          0;
+}
+
+details:first-of-type {
+  border-top-left-radius:     var(--radius);
+  border-top-right-radius:    var(--radius);
+}
+
+details:last-of-type {
+  border-bottom-left-radius:  var(--radius);
+  border-bottom-right-radius: var(--radius);
+}
+
+
+/* -----------------------------------------------------------------------------
+//  #breaks - spacing elements
+// -------------------------------------------------------------------------- */
+
+
+/* -----------------------------------------------------------------------------
+//  #@page - fixed page-oriented class, usually for print layouts
+// -------------------------------------------------------------------------- */
+/* @page pseudo-classes */
+/* @page :first, @page :left, @page :right, @page :blank {  } */