simplify some css selectors

(by adding more classes & ids :( )

style/shiny/base.css

@@ -94,7 +94,28 @@ footer {
 }
 
 
-.buttonbar.choice input {
+.buttonbar {
+  padding: 0;
+  display: flex;
+  align-items: flex-start;
+  flex-flow: row wrap;
+  margin-bottom: -0.5em;
+}
+
+.buttonbar li {
+  list-style: none;
+  margin-bottom: 0.5em;
+}
+
+.buttonbar a {
+  text-decoration: none;
+}
+
+.bb-choice {
+  justify-content: center;
+}
+
+.bb-choice input {
   display: inline;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -104,25 +125,7 @@ footer {
   width: 0;
 }
 
-.buttonbar {
-  padding: 0;
-  display: flex;
-  align-items: flex-start;
-  flex-flow: row wrap;
-  margin-bottom: -0.5em;
-}
-
-.buttonbar.choice {
-  justify-content: center;
-}
-
-.buttonbar li {
-  list-style: none;
-  margin-bottom: 0.5em;
-}
-
-.buttonbar.choice label,
-.buttonbar:not(.choice) li {
+.bb-choice label, .bb-links li {
   --button-bg: hsl(330deg, 40%, 16%, 100%);
   margin-right: 0.5em;
   padding: 0 0.35em;
@@ -133,22 +136,18 @@ footer {
   text-shadow: none;
 }
 
-.buttonbar.choice :focus + label,
-.buttonbar:not(.choice) li:focus-within {
+.bb-choice :focus ~ label, .bb-links li:focus-within {
   box-shadow: var(--focus-box);
 }
 
-.buttonbar.choice :checked + label {
+.bb-choice :checked ~ label {
   color: var(--button-bg);
   background: var(--text-col);
 }
 
-.buttonbar a {
-  text-decoration: none;
-}
 
 
-summary h1, summary h2, summary h3, summary h4 {
+summary > * {
   display: inline;
 }