clairity.css 0.1.0

data/lib/assets/css/clairity/components.css

@@ -0,0 +1,946 @@
+/******************************************************************************\
+  COMPONENTS - for more complex sites, composable components can provide
+               greater aesthetics and usability.
+\******************************************************************************/
+
+
+/* -----------------------------------------------------------------------------
+//  #sectioning #containers
+// -------------------------------------------------------------------------- */
+
+/* #body - auto-grid by default - overrides base.css default body definition. 
+   set --columns to the number of columns desired */
+body {
+  display:                grid;
+  grid-template-columns:  [full-start] var(--padding, var(--m))
+                          [padded-start] repeat(var(--columns, auto-fit), 
+                                         minmax(var(--grid), 1fr)) [padded-end]
+                                         var(--padding, var(--m))    [full-end];
+  column-gap:             var(--gap);     /* flexible between 400 - 800px */
+  max-width:              unset;
+}
+
+/* some containers should span full or padded width by default if in the grid */
+:where(:not(.grid)) > main { grid-column: padded; }
+nav, header, footer {
+  grid-column:            full;
+}
+
+/* the top header typically should sit flush to the top of the page and use 
+     padding; TODO: this seems to be over-specified */
+body > header:first-child {
+  margin-top:             0;
+}
+
+/* #footer - centered grid by default; this grid overrides base.css definition*/
+footer {
+  grid-template-columns:  [full-start] repeat(auto-fit, 
+                                       minmax(var(--column), 1fr)) [full-end];
+  grid-auto-rows:         min-content;     /* don't unnecessarily expand rows */
+  column-gap:             var(--m);
+  container-type:         unset;     /* safari doesn't like contain with grid */
+  padding-inline:         var(--padding, var(--m));       /* flexible padding */
+}
+
+footer > p { grid-column: 1 / -1; }        /* take up a whole row in the grid */
+
+
+/* -----------------------------------------------------------------------------
+//  #headings - 
+// -------------------------------------------------------------------------- */
+
+header:not(.banner) {
+  display:                flex;
+  flex-wrap:              wrap;
+  justify-content:        space-between;
+}
+
+header :where(h1,h2,h3,h4,h5,h6) {
+}
+
+header :where(p) {
+  flex:                   1 0 100%;
+}
+
+
+/* -----------------------------------------------------------------------------
+//  site #footer - typical fat footer; #footer is the singular site footer
+// -------------------------------------------------------------------------- */
+
+/* #fat footers are typically distinct and feature a set of columns with links*/
+.fat, :where(body) > :where(footer):last-of-type {      /* [0010] specificity */
+  grid-column:            1 / -1;               /* fat footers are full width */
+  max-width:              -webkit-fill-available;          /* take full width */
+  max-width:              -moz-available;       /* take full width on firefox */
+  --muted:                var(--300, GrayText);
+  color:                  var(--whitish);
+  background-color:       var(--blackish);
+}
+
+/* .nav - flex container to group/align columns of <nav>s - [0010] specificity*/
+.nav {
+  grid-column:            1 / -1;           /* break free of the grid, if any */
+  display:                flex;
+  flex-wrap:              wrap;
+  margin-inline:          var(--padding);  /* responsive inline, outer margin */
+  column-gap:             var(--l);                /* fixed inline, inner gap */
+}
+
+/* #nav - column-oriented navs                           - [0001] specificity */
+:where(.nav) nav {
+  grid-column:            unset;
+  flex-direction:         column;
+  flex-grow:              1;            /* take up the whole role if orphaned */
+  flex-basis:             calc((40vw - 100%) * 999);
+  align-items:            start;           /* some items will float otherwise */
+  row-gap:                var(--s);              /* add some vertical spacing */
+  justify-content:        start;
+  min-width:              var(--column);     /* 44vw/10rem for narrow screens */
+}
+
+/* style headers in the site footer */
+:where(.fat, body > footer:last-of-type) 
+    :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
+  color:                  var(--muted);
+  font-weight:            var(--light);
+}
+
+:where(.fat, body > footer:last-of-type) a {
+  font-weight:            var(--light);
+}
+
+:where(.fat, body > footer:last-of-type) a:not(:hover) {
+  color:                  var(--whitish);
+  text-decoration:        none;
+}
+
+
+/* -----------------------------------------------------------------------------
+//  #footnotes
+// -------------------------------------------------------------------------- */
+
+/* #footnotes - footnotes/endnotes typically should have the semantic marker of
+   [role="doc-endnote"]; :target doesn't depend on color-scheme here - it's 
+   always dark on light. transition to the highlight, to draw the eye to it.  */
+[role="doc-endnotes"] {
+  grid-column:            1 / -1;
+}
+
+:where([role="doc-endnote"]):target {                   /* [0010] specificity */
+  color:                  var(--blackish);
+  background-color:       hsl(var(--yellow), 90%, 75%);
+  transition:             color 1s 0.5s, background-color 1s 0.5s;
+}
+
+/* ::marker text is outside :target, so match color-scheme text color */
+:where([role="doc-endnote"]):target::marker {           /* [0011] specificity */
+  color:                  var(--text);
+}
+
+
+/* -----------------------------------------------------------------------------
+//  #icons - svg icons
+// -------------------------------------------------------------------------- */
+
+i[class^='i-'] {
+  --icon-color:           var(--color, currentColor);
+  -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);
+  min-height:             var(--ml); /* else naked icons collapse into a line */
+}
+
+
+/* -----------------------------------------------------------------------------
+//  #banner - header that usually includes a hero image and perhaps a nav
+// -------------------------------------------------------------------------- */
+
+.banner {
+  --content-width:        60ch;
+  --banner-height:        50vh;
+  --banner-max-height:    600px;
+  display:                grid;
+  grid-template-areas:    "banner";
+  place-items:            center;
+  align-self:             flex-start;
+  height:                 var(--banner-height);
+  /*max-height:             var(--banner-max-height);*/
+  /*background-color:       var(--primary-transparent);*/ /* bg color was meant 
+                            to provide contrast in case an image was missing, 
+                            but makes banners look weird */
+  overflow:               hidden;
+}
+
+/* extra margin for banner menu */
+/*.banner menu { margin-block: var(--ml); }*/
+
+/* banner #content - constrain content width with a css variable set on parent*/
+.banner .content { width: var(--content-width); }
+
+/* banner grid */
+.banner > * { grid-area:  banner; }
+.banner > nav {
+  place-self:             start center;
+  width:                  var(--line-length);
+}
+.banner nav menu { /*flex:  auto;*/ }
+
+.banner > img, .hero {
+  height:                 min(var(--banner-height), var(--banner-max-height));
+  width:                  100%;
+  max-width:              none;
+  z-index:                -1;
+}
+
+.banner figure {
+  --figure-max-height:    10rem;
+  grid-area:              unset;
+  max-height:             var(--figure-max-height);
+  background-color:       unset;
+  border:                 unset;
+  margin:                 unset;
+  padding:                unset;
+}
+
+.banner:has(figure) {
+  margin-bottom:          0;
+}
+
+/*remove top margin when the .banner is the first element on the page - [0010]*/
+:where(body) > :where(main) > :where(.banner):first-of-type {
+  margin-top:             0;
+}
+
+/* -----------------------------------------------------------------------------
+//  #alert - the alert flash message box for providing timely info to the user
+// -------------------------------------------------------------------------- */
+
+/* #alert - the default alert box is an info box */
+.alert {
+  color:                  var(--info);
+  background-color:       var(--bg-info);
+  border:                 var(--solid) var(--info-low);
+  border-radius:          var(--radius);
+  max-width:              var(--line-length);  /* don't just go max-width */
+  margin:                 var(--m) 0;
+  padding:                0 var(--m);
+}
+
+/* #headers - a single header style since alerts only need 1 header typically */
+.alert :where(h1,h2,h3,h4,h5,h6) {
+  color:                  var(--info-low);
+  font-size:              var(--large);
+  font-weight:            var(--bold);
+  margin-top:             var(--m);
+}
+
+/* #success #warning #error #alert - other alert types get their own colors */
+.success.alert {
+  color:                  var(--success);
+  background-color:       var(--bg-success);
+  border:                 var(--solid) var(--success-low);  
+}
+.warning.alert {
+  color:                  var(--warning);
+  background-color:       var(--bg-warning);
+  border:                 var(--solid) var(--warning-low);  
+}
+.error.alert {
+  color:                  var(--error);
+  background-color:       var(--bg-error);
+  border:                 var(--solid) var(--error-low);  
+}
+.success.alert :where(h1,h2,h3,h4,h5,h6) { color: var(--success-low); }
+.warning.alert :where(h1,h2,h3,h4,h5,h6) { color: var(--warning-low); }
+.error.alert   :where(h1,h2,h3,h4,h5,h6) { color: var(--error-low);   }
+
+
+/* -----------------------------------------------------------------------------
+//  main #nav - the body element should only ever have one main header element, 
+//              within which, we can assume any nav element is the main nav.
+// -------------------------------------------------------------------------- */
+
+body:has(> header > nav) {
+  /*padding-top:            0;*/
+}
+
+nav.horizontal {
+  align-items:            center;                       /* vertical alignment */
+}
+
+.column {
+  grid-column:            unset;
+  flex-direction:         column;
+  align-items:            start;           /* some items will float otherwise */
+  row-gap:                var(--s);              /* add some vertical spacing */
+}
+
+nav > div {
+  display:                inline-flex;
+  align-items:            center;
+  gap:                    var(--m);
+}
+
+/* both column menus & popup button sub-menus should flex vertically */
+.column menu, button[aria-haspopup="true"] + menu {
+  flex-direction:         column;
+  align-items:            start;                        /* left justify items */
+  /*justify-content:        center;*/
+}
+
+/* TODO: figure out why both a max-height of var(--height) and an unset 
+    max-height results in a vertical shift of #nav #a images */
+body > nav a, body > header > nav a {
+  max-height:             2.75rem;
+}
+/* visited links in the nav menu shouldn't be different colors */
+:where([aria-label="primary"], nav menu li) a:visited { color: var(--link); }
+
+/*body > nav a.button, body > header > nav a.button {
+  white-space:            nowrap;
+}*/
+
+/*body > nav > menu > li, body > header > nav > menu > li {
+  padding:                0 var(--m);
+}*/
+
+/* #nav #search - retracting nav search form - the background svg icon is used 
+              as the trigger to expand the search box via a :focus transition */
+:where(nav) [type="search"] {                           /* [0010] specificity */
+  /*background-color:       unset;*/
+  outline:                none;
+  border:                 none;
+  width:                  var(--height);             /* form icons are square */
+  min-width:              0;
+  padding:                0;
+  cursor:                 pointer;    /* unconventional usage for 'clickable' */
+  transition:             all var(--transition) ease-out;
+}
+/* expanded state of retracting nav search form - [0010] specificity */
+:where(nav) :where([type="search"]):focus, 
+:where(nav) :where([type="search"]):not(:placeholder-shown) {
+  background-color:       revert;
+  border:                 var(--solid) var(--highlighted);
+  width:                  auto;
+  padding-left:           var(--height);
+  cursor:                 text;
+  transition:             all var(--transition) ease-out;
+}
+/* <form>s by default subtract padding from max-width, so reset that */
+:where(nav) form { max-width: var(--line-length); }
+
+/*:where(nav) button {
+  min-height:             unset;
+}*/
+
+/* visually differentiate active page in nav menus */
+[aria-current="page"] {
+  /*color:                  var(--primary-900);*/
+  text-decoration:        unset;
+  pointer-events:         none;                    /* make link non-clickable */
+  cursor:                 default;
+}
+
+nav [aria-haspopup="true"] + menu > li {
+  display:                block;
+  max-width:              var(--line-length);
+}
+
+nav [aria-haspopup="true"] + menu {
+  position:               absolute;
+  visibility:             hidden;
+  margin:                 0;
+  padding:                var(--m);
+}
+
+nav.column [aria-haspopup="true"] + menu {
+  width:                  fit-content;
+  margin-block:           0;
+}
+
+nav:not(.column) [aria-haspopup="true"] + menu {
+  background-color:       var(--background);
+  border:                 var(--solid) var(--border);
+  border-radius:          var(--radius);
+}
+
+nav [aria-haspopup="true"]:focus-within + menu {
+  visibility:             visible;
+  transition:             visibility position var(--transition);
+}
+
+nav.column [aria-haspopup="true"]:focus-within + menu {
+  position:               relative;
+}
+
+nav [aria-haspopup="true"]:focus + menu {
+  visibility:             visible;
+  transition:             visibility position var(--transition);
+}
+nav.column [aria-haspopup="true"]:focus + menu {
+  position:               relative;
+}
+
+nav.column menu {
+  width:                  100%; /* otherwise menu items might wrap prematurely*/
+  margin-block:           var(--m); /* add back vertical spacing */
+}
+
+nav.column :where(button, .button):not(.toggle) {
+  width:                  100%;
+}
+
+/* TODO: this pushes padding into the next column */
+:not(aside) > nav.column {
+  /*padding:                0 var(--m) var(--m) 0;*/
+}
+
+menu > li > button, menu > li > button:hover {
+/*  display:                flex;
+  font-size:              var(--text);
+  line-height:            var(--normal);
+  color:                  var(--link);
+  background-color:       unset;
+  border:                 none;
+  text-transform:         revert;
+  text-decoration:        underline;
+  padding:                0;*/
+}
+
+
+/* -----------------------------------------------------------------------------
+// #buttons - button classes to mimic the styles of button types for other 
+               elements
+// -------------------------------------------------------------------------- */
+
+/* #primary #button - a button class that mirrors the primary button style
+// .......................................................................... */
+
+/* TODO: reconcile with button class in base.css; this is one instance where not
+   using SASS/SCSS hurts, but it's a minor pain for less tooling/dependencies.*/
+.button {                                               /* [0010] specificity */
+  -webkit-appearance:     button;                            /* normalize.css */
+  appearance:             button;
+  display:                inline-flex;         /* allows centering of content */
+  place-items:            center;                /* does the actual centering */
+  color:                  var(--action);
+  background-color:       var(--foreground);     /* inverted style for primary 
+                                       actions - will override for .secondary */
+  font-size:              var(--small);
+  font-weight:            var(--bold);
+  line-height:            1.15;
+  text-transform:         uppercase;
+  text-decoration:        none;
+  white-space:            nowrap;
+  text-align:             center;        /* centered text, not left justified */
+  justify-content:        center;
+  cursor:                 pointer;    /* controversial for buttons but common */
+  width:                  fit-content;       /* don't grow to container width */
+  height:                 fit-content;      /* don't grow to container height */
+  min-height:             var(--height);             /* to match input fields */
+  padding:                0 var(--m);
+  border:                 var(--solid) var(--transparent);
+  border-radius:          var(--radius);
+}
+
+.button:hover {                                         /* [0020] specificity */
+  color:                  var(--action);   /* needed to override anchor links */
+  background-color:       var(--bg-highlight);
+  border-color:           var(--transparent);
+}
+
+/* #secondary #button - less emphasized than the standard button
+// .......................................................................... */
+
+button.secondary, .secondary.button {          /* [0011] / [0020] specificity */
+  color:                  var(--foreground);  /* invert foreground/background */
+  background-color:       var(--background);  /* invert foreground/background */
+  border-color:           var(--foreground);
+}
+
+:where(button, .button).secondary:hover {               /* [0020] specificity */
+  background-color:       var(--contrast);    /* TODO: make grey in dark mode */
+}
+
+/* #tertiary #button - a link-like button
+// .......................................................................... */
+
+button.tertiary, .tertiary.button {            /* [0011] / [0020] specificity */
+  color:                  var(--foreground);  /* invert foreground/background */
+  background-color:       unset;                     /* border is transparent */
+  padding-inline:         var(--xxs);
+}
+
+:where(button, .button).tertiary:hover {  /* [0020] specificity */
+  text-decoration:        underline;      /* TODO: make grey in dark mode */
+  border-color:           var(--transparent);
+}
+
+
+/* #warning - a button for major changes TEMP: 
+// .......................................................................... */
+
+:where(button, .button).warning {
+  --icon-color:           var(--warning-low);
+  color:                  var(--warning-low);
+  background-color:       var(--warning);
+}
+
+:where(button, .button).warning:hover {
+  --icon-color:           var(--warning);
+  color:                  var(--warning);
+  background-color:       var(--warning-low);
+  border-color:           var(--warning);  
+}
+
+:where(button, .button).secondary.warning {
+  --icon-color:           var(--warning);
+  color:                  var(--warning);
+  background-color:       unset;
+  border-color:           var(--warning);  
+}
+
+:where(button, .button).secondary.warning:hover {
+  background-color:       var(--warning-low);
+}
+
+:where(button, .button).tertiary.warning {
+  --icon-color:           var(--warning);
+  color:                  var(--warning);
+}
+
+:where(button, .button).tertiary.warning:hover {
+  background-color:       unset;
+  border-color:           var(--transparent);
+}
+
+
+/* #danger - a button for irrevocable actions TEMP: --secondary should be 
+             replaced by --error or perhaps --danger
+// .......................................................................... */
+
+.danger {
+  --icon-color:           var(--secondary-100);
+  color:                  var(--secondary-100);
+  background-color:       var(--secondary);
+}
+
+.danger:hover {
+  --icon-color:           var(--secondary);
+  color:                  var(--secondary);
+  background-color:       var(--secondary-100);
+  border-color:           var(--secondary);  
+}
+
+.secondary.danger {
+  --icon-color:           var(--secondary);
+  color:                  var(--secondary);
+  background-color:       unset;
+  border-color:           var(--secondary);  
+}
+
+.secondary.danger:hover {
+  background-color:       var(--secondary-200);
+}
+
+.tertiary.danger {
+  --icon-color:           var(--secondary);
+  color:                  var(--secondary);
+}
+
+.tertiary.danger:hover {
+  background-color:       unset;
+  border-color:           var(--transparent);
+}
+
+
+/* #buttons - a flex container for inlining buttons, typically a <div>
+// .......................................................................... */
+
+/* TODO: the main form grid should inline elements rather than forcing it here
+  .bottons inlines/wraps multiple buttons where necessary - [0010] specificity*/
+.buttons {
+  list-style:             none;
+  display:                flex;                   /* overwrite display: grid; */
+  flex-wrap:              wrap;                /* wrap buttons when necessary */
+  /*justify-content:        flex-end;*/     /* looks better on narrow screens */
+  gap:                    var(--s);       /* don't let adjacent buttons touch */
+  grid-column:            elements;  /* put buttons in the inputs grid column */
+}
+/* menu buttons can delegate spacing to the parent <menu> - [0011] specificity*/
+menu.buttons { margin-inline: 0; }
+/* <p>s take up a whole grid row, so no need to column it - [0012] specificity*/
+.buttons p :is(button, input) { grid-column: none; }
+
+form .buttons { max-width: var(--field-max) }
+
+/*form .buttons.right { padding-right: calc(var(--xl) - var(--s)) }*/
+
+.roomy.buttons { gap:     var(--ml); }
+
+/* fix buttons floating and getting squished at smaller screen widths */
+@container (max-width: 28rem) {
+  form { max-width:       unset; }
+  form .buttons {
+    max-width:            unset;
+    grid-column:          -1/1;
+  }
+  label { font-size:      var(--small); }
+}
+
+/* #popup #button - actuates a popup section - currently for dropdown menu items
+// .......................................................................... */
+
+button[aria-haspopup="true"] {
+  all:                    unset;
+  color:                  var(--link);
+  font-weight:            var(--bold);
+  text-decoration:        underline;
+}
+
+button[aria-haspopup="true"]::after {
+  display:                inline-block;            /* negates text-decoration */
+  content:                '\00A0\25be';          /* appends inverted triangle */
+}
+
+button[aria-haspopup="true"]:hover {
+  color:                  var(--active);
+  text-decoration:        none;
+  cursor:                 pointer; /* controversial for buttons but common*/
+}
+
+/* #toggle - hamburger button for toggling sections of pages
+// .......................................................................... */
+.toggle {                                                /* [0010] specifitiy */
+  color:                  var(--background);
+  padding:                0;
+  aspect-ratio:           1;
+  height:                 2.75rem;
+  width:                  fit-content;
+}
+
+.toggle::before {                                        /* [0011] specifitiy */
+  content:                '≡';  /* '\2261'; */
+  font-size:              2rem;
+  vertical-align:         super;
+}
+
+.tertiary.toggle:hover { /* .tertiary has inverted colors so invert the hover */
+  color:                  var(--active);
+  background-color:       unset;
+  text-decoration:        none;
+}
+
+/* HACK: fixes offset on toggle (hamburger) buttons      - [0020] specificity */
+.toggle.button {  display:unset; }
+
+/* TODO: see if we can use only css to toggle the menu into the burger menu   */
+nav:has(.toggle[aria-expanded]) > menu {
+  /*visibility:             visible;*/
+}
+
+nav:has(.toggle[aria-expanded=false]) > menu {
+  /*visibility:             hidden;*/
+}
+
+
+/* TODO: moved from states.css - make sure these get applied correctly */
+[rel~="external"].button { padding: 0 var(--ms); }
+[rel~="external"].button::after {
+  padding:                var(--button-padding);
+  mask-position-x:        right;
+}
+[rel~="external"].button:hover::after { background-color: var(--foreground); }
+
+
+
+/* -----------------------------------------------------------------------------
+//  #selectmenu - Open UI replacement to the standard select element - 
+                  https://open-ui.org/prototypes/selectmenu
+// -------------------------------------------------------------------------- */
+
+selectmenu {  }
+
+selectmenu::part(button) {
+  color:                  var(--text);
+  background-color:       var(--bg-field);
+  min-width:              var(--width);
+  height:                 var(--height);
+  border-radius:          var(--radius);
+}
+
+selectmenu::part(listbox) {
+  margin-top:             var(--m);
+  border:                 var(--solid) var(--border);
+  border-radius:          var(--radius);
+}
+
+
+/* -----------------------------------------------------------------------------
+//  #card - general purpose card - cards should appear in a container to get the
+//          benefits of container query-based responsiveness. cards are composed
+//          of an image plus some content. note that content should go in a
+//          content div due to limitations of css grid not allowing content flow
+//          in a grid area: https://github.com/w3c/csswg-drafts/issues/4416
+// -------------------------------------------------------------------------- */
+
+/* cards should typically be lists of articles */
+.cards {
+   display:               grid;
+   grid-template-columns: repeat(auto-fit, minmax(var(--container), 1fr));
+   gap:                   var(--m);
+
+/*  display:                flex;
+  flex-wrap:              wrap;
+  max-width:              var(--line-length);*/
+  column-gap:             var(--m);    /* gap only for side-by-side placement */
+}
+
+/* in most cases .cards should contain a set of articles, otherwise use .card */
+.card, .cards > article {
+  flex:                   1 0 calc((11rem - 100%) * 999);
+  /*display:                block;*/
+  display:                flex;
+  flex-direction:         column;
+  column-gap:             var(--m);    /* gap only for side-by-side placement */
+  margin:                 var(--m) 0;
+}
+
+.cards .contents {
+  display:                flex;
+  flex-direction:         column;
+}
+
+.cards .meta {
+  margin:                 0;
+}
+
+:where(.card, .cards) :where(h1,h2,h3,h4,h5,h6):first-child {
+  margin-top:             0;
+}
+
+:where(.card) > *, :where(.cards) > article > * {
+  margin-block:           var(--ms);    /* margin rather than gap for control */
+}
+
+.card > .buttons:last-child, .cards > article > .buttons:last-child {
+  margin-top:             auto;        /* make sure buttons are at the bottom */
+}
+
+@container (min-width: 35rem) {
+  /*.card { flex-direction: row; }*/  /* interferes with single-card section */
+  .card > img, .cards > article > img {
+    max-height:           var(--width);
+    max-width:            var(--width);
+  }
+  /* change orphaned last item to row layout for 3-wide grid */
+  .cards :last-child:nth-child(3n - 2) {
+    grid-column:          span 3;
+    flex-direction:       row;
+  }
+}
+
+/* TEMP: use media queries for browsers that don't support container queries */
+@supports not (container-type: inline-size) {
+@media (min-width: 47rem) {
+  /*.card { flex-direction: row; }*/  /* interferes with single-card section */
+  .card > img, .cards > article > img {
+    max-height:           var(--width);
+    max-width:            var(--width);
+  }  
+  .cards :last-child:nth-child(3n - 2) {
+    grid-column-end:      span 3;
+    flex-direction:       row;
+  }
+}}
+
+/* -----------------------------------------------------------------------------
+//  #tags - an inline list of metatags; can be text, links, icons, or other
+//          inline list content.
+// -------------------------------------------------------------------------- */
+
+/* .tags should generally be an unordered list. margin/padding get in the way of
+   a compact presentation of tags. */
+.tags {
+  margin:                 0;
+  padding:                0;
+}
+
+.tags > li {
+  display:                inline-block;
+  color:                  var(--secondary);
+  font-size:              var(--small);
+  font-weight:            var(--bold);
+  text-transform:         uppercase;
+  letter-spacing:         0.02em;
+}
+
+.tags > li + li {
+  margin-left:            var(--m);
+}
+
+.tags + :where(h1,h2,h3,h4,h5,h6) {
+  margin-top:             var(--s);
+}
+
+/* .tags should add spacing if inserted elsewhere */
+.tags:has(+ .buttons) {
+  margin-bottom:          var(--m);
+}
+
+/* TEMP: add margin-top to buttons for browsers that don't support :has() */
+@supports not (:has(a)) {
+.tags + .buttons {
+  margin-top:             var(--m);
+}}
+
+
+/* -----------------------------------------------------------------------------
+//  #grid - multi-column grid adjustments
+// -------------------------------------------------------------------------- */
+
+/* #grid - apply grid with columns of width var(--column) to an element - [0010]
+// .......................................................................... */
+.grid {
+  display:                grid;
+  grid-template-columns:  [full-start] repeat(auto-fit, 
+                                       minmax(var(--column), 1fr)) [full-end];
+  column-gap:             var(--m);
+  container-type:         none;    /* containment clashes with grid on safari */
+}
+
+/* for layouts with left & right asides, put main in the middle grid columns  */
+/* grrr, firefox is not forgiving with :has() rules, so this must be separated*/
+.dual-aside {
+  grid-column:            2 / -2;
+}
+
+/*full is a grid area for a row that spans all columns   - [0000] specificity */
+:where(.grid) > :where(header,hgroup,h1,h2,h3,h4,h5,h6,nav:not(.column),footer){
+  grid-column:            full;
+}
+/* apply default padding/border to .grid asides          - [0001] specificity */
+:where(.grid) > aside {
+  padding:                var(--xs) var(--s) var(--s);
+  border-radius:          var(--radius);
+}
+/* apply default margin to nav menus inside .grid asides - [0001] specificity */
+:where(.grid) > :where(aside) > :where(nav) > menu {
+  margin:                 var(--m) 0;
+}
+/* put the first aside in the first grid column */
+:where(.grid:has(> aside)) > :where(aside):first-of-type {/*[0010] specificity*/
+  grid-column:            1;
+}
+/* spread main across the remaining grid columns */
+:where(.grid) > :where(aside) + main,                   /* [0001] specificity */
+:where(.grid) :where(aside, nav.column) + :where(main, .main) {     /* [0000] */
+  grid-column:            2 / -1;
+}
+
+/* TODO: double check this selector for unintended consequences - [0001] */
+:where(.grid) :where(aside, nav.column) + :where(main, .main) p {
+  margin-top:             0;
+}
+
+/* HACK: full-width paragraphs in .grid to ...           - [0001] specificity */
+:where(.grid) > p { grid-column: full; }
+
+/* remove top margin from the very first heading and no more than that */
+.grid > :where(main) > :where(header):first-child,
+.grid > :where(main) > :where(section) > :where(header):first-child,
+.grid > :where(main) > :where(section) > :where(header) > 
+    :where(h1,h2,h3,h4,h5,h6):first-child {
+  margin-top:             0;
+}
+
+/* :has() is preferred over using classes, but firefox lacks support so far */
+@supports selector(:has(*)) {
+  :where(.grid:has(> aside, > main)) > main {           /* [0001] specificity */
+    grid-column:          2 / -1;
+  }
+
+  :where(.grid:has(> aside + main + aside)) > main {    /* [0001] specificity */
+    grid-column:          2 / -2;
+  }
+  /* [0010] specificity */
+  :where(.grid:has(> aside + main + aside)) > :where(aside):nth-of-type(2n) {
+    grid-column:          -2;
+  }
+}
+
+/* #form #grid - general purpose 2-column grid, as used on forms by default
+// .......................................................................... */
+.form.grid {
+  display:                grid; 
+  grid-template-columns:  [labels full-start]  3fr  [elements]  7fr  [full-end];
+  gap:                    var(--m);
+  /*grid-row:               auto;*/
+  /*max-width:              calc(var(--line-length) - 2 * var(--m));*/
+}
+.form.grid :is(h3, p) {
+  grid-column:            full;
+  margin:                 0;
+}
+.form.grid h3 { margin-top: var(--m); }
+.form.grid label:not(.visually-hidden) { display: contents; }
+.form.grid :is(meter, progress) { grid-column: elements; }
+
+/* #label - class to emulate the form label grid style    - [0010] specificity
+// .......................................................................... */
+.label {
+  display:                inline-block;
+  grid-column:            labels;
+  text-align:             right;
+}
+
+/* #input - class to emulate the form input grid style    - [0010] specificity
+// .......................................................................... */
+.input {                      
+  display:                inline-block;
+  grid-column:            elements;
+}
+
+
+/* -----------------------------------------------------------------------------
+//  #progressbar - a circular progress bar component - from almond.css
+// -------------------------------------------------------------------------- */
+
+[role="progressbar"]  {
+  --value:                50;
+  --thick:                50%;
+  --medium:               58%;
+  --thin:                 67%;
+  --thickness:            var(--medium);
+  aspect-ratio:           1;
+  border-radius:          50%;
+  display:                grid;
+  font-size:              2em;
+  overflow:               hidden;
+  place-items:            center;
+  position:               relative;
+  width:                  100%;
+}
+
+[role="progressbar"]::before {
+  content:                "";
+  background:             conic-gradient(var(--primary) calc(var(--value) * 1%),
+                                         #0000 0);
+  background-color:       var(--primary-100);
+  height:                 100%;
+  left:                   0;
+  -webkit-mask:           radial-gradient(#0000 var(--thickness), #000 0);
+  mask:                   radial-gradient(#0000 var(--thickness), #000 0);
+  position:               absolute;
+  top:                    0;
+  transition:             background-color 0.5s;
+  width:                  100%;
+}
+[role="progressbar"]::after {
+  counter-reset:          percentage var(--value);
+  content:                counter(percentage) "%";
+}
+[role="progressbar"]:hover::before {
+  background-color:       var(--primary-300);
+}