RC2

Tweaks and new pulldowns

assets/css/table.css

@@ -138,7 +138,7 @@
 
 .filter-profiles-label {
   font-family: JetBrains Mono, monospace;
-  font-size: 9px;
+  font-size: 12px;
   text-transform: uppercase;
   letter-spacing: 0.18em;
   color: #b09870;
@@ -147,13 +147,13 @@
 }
 
 .profile-btn {
-  padding: 4px 11px;
+  padding: 5px 13px;
   cursor: pointer;
   border: 1.5px solid #c9b08a;
   background: #f5edd6;
   color: #9a7d5a;
   font-family: JetBrains Mono, monospace;
-  font-size: 11px;
+  font-size: 13px;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   transition: all 0.15s;
@@ -189,7 +189,7 @@
 
 .col-toggles-label {
   font-family: JetBrains Mono, monospace;
-  font-size: 9px;
+  font-size: 12px;
   text-transform: uppercase;
   letter-spacing: 0.18em;
   color: #b09870;
@@ -199,13 +199,13 @@
 
 /* The little pill buttons */
 .col-toggle {
-  padding: 4px 11px;
+  padding: 5px 13px;
   cursor: pointer;
   border: 1.5px solid #c9b08a;
   background: #f5edd6;
   color: #9a7d5a;
   font-family: JetBrains Mono, monospace;
-  font-size: 9px;
+  font-size: 12px;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   transition: all 0.15s;
@@ -226,16 +226,29 @@
   color: #fff;
 }
 
-/* Burn select — looks like a col-toggle pill but is a <select>.
-   The native dropdown arrow is kept (no appearance:none) so users
-   know it's a dropdown. Active (burn on) state uses the same brass
-   as .col-toggle.on and the label updates to show the chosen skin. */
+/* Burn select — unlike regular col-toggle buttons, the select never
+   goes full-brass background so the native dropdown list stays readable.
+   Active state = brass border + brass text on parchment.
+   Inactive state = same as a regular col-toggle pill. */
 .burn-select {
   cursor: pointer;
   outline: none;
 }
+/* Override the inherited .col-toggle.on brass background */
+.col-toggle.burn-select.on {
+  background: #f5edd6;
+  color: #c8922a;
+  border-color: #c8922a;
+  font-weight: 600;
+}
+.col-toggle.burn-select.on:hover {
+  background: #fef3dc;
+  color: #c8922a;
+  border-color: #c8922a;
+}
 .burn-select:focus {
   border-color: #c8922a;
+  outline: none;
 }
 
 /* ── Vehicle group: select + windows-open checkbox fused together ── */
@@ -243,18 +256,28 @@
   display: inline-flex;
   align-items: stretch;
   gap: 0;
+  /* Collapse any whitespace-node gap between the cs-wrap span and cs-vent */
+  font-size: 0;
+}
+.col-toggle-group > * {
+  font-size: 12px; /* restore font size for children */
 }
 
-/* Remove the right border + radius on the select so it butts up flush
-   with the checkbox label. When the label is absent (hide state), the
-   select is the only child and :last-child restores full pill rounding. */
-.col-toggle-group .grouped-left {
-  border-right: none;
-  border-radius: 20px 0 0 20px;
+/* Remove the right border + radius on the cs-wrap/cs-btn so it butts
+   flush with the VentPill. The cs-wrap is the direct child, so we
+   target its inner cs-btn via the grouped-left class on the button. */
+.col-toggle-group .cs-wrap {
+  display: inline-flex;
+  align-items: stretch;
 }
-.col-toggle-group .grouped-left:last-child {
-  border-right: 1.5px solid #c9b08a;
-  border-radius: 20px;
+.col-toggle-group .grouped-left {
+  border-right: none !important;
+  border-radius: 20px 0 0 20px !important;
+}
+.col-toggle-group .cs-wrap:only-child .grouped-left,
+.col-toggle-group .cs-wrap:last-child .grouped-left {
+  border-right: 1.5px solid #c9b08a !important;
+  border-radius: 20px !important;
 }
 
 /* The checkbox pill — same height/padding as a col-toggle but styled as a label */
@@ -262,8 +285,8 @@
   display: inline-flex;
   align-items: center;
   gap: 5px;
-  padding: 4px 10px 4px 9px;
-  font-size: 9px;
+  padding: 5px 12px 5px 10px;
+  font-size: 12px;
   font-family: JetBrains Mono, monospace;
   letter-spacing: 0.08em;
   text-transform: uppercase;
@@ -433,15 +456,22 @@
   background: #f0e4c4;
   color: #6b4f2a;
   font-family: JetBrains Mono, monospace;
-  font-size: 10px;
+  font-size: 12px;
   text-transform: uppercase;
-  letter-spacing: 0.14em;
+  letter-spacing: 0.12em;
   font-weight: 600;
   padding: 14px 12px;
   text-align: right;
   white-space: nowrap;
 }
 
+@media (max-width: 800px) {
+  .utci-table th {
+    font-size: 10px;
+    letter-spacing: 0.14em;
+  }
+}
+
 /* The Hour column aligns left, the rest align right */
 .utci-table th:first-child,
 .utci-table td:first-child {
@@ -452,10 +482,16 @@
 .utci-table th .col-unit {
   display: block;
   color: #c8922a;
-  font-size: 9px;
+  font-size: 10px;
   margin-top: 2px;
 }
 
+@media (max-width: 800px) {
+  .utci-table th .col-unit {
+    font-size: 9px;
+  }
+}
+
 .utci-table tbody tr {
   border-bottom: 1px solid #ede4cc;
   transition: background 0.1s;