fix: contrast of progress bars, selections and selected query

At medium and high contrast, secondary-container turns dark. The empty
part of progress bars, highlighted code lines and a targeted roadmap
header now use surface-container-highest, so the fill and the text stay
readable. The selected project in the project jump is light at these
levels too; its check mark marks it.

The selected sidebar query gets the pill style even with its "clear"
icon next to it. The icon sits inside the pill and takes the pill's
text color.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

tonalmine/stylesheets/components.css

@@ -359,8 +359,9 @@ table.progress { border-radius: var(--md-sys-shape-corner-full); overflow: hidde
 table.progress td { block-size: 4px; padding: 0; }
 .version-overview table.progress td { block-size: 8px; }
 table.progress td.closed { background: var(--md-sys-color-primary); }
-table.progress td.done { background: color-mix(in srgb, var(--md-sys-color-primary) 55%, var(--md-sys-color-secondary-container)); }
+table.progress td.done { background: color-mix(in srgb, var(--md-sys-color-primary) 55%, var(--md-sys-color-surface-container-highest)); }
-table.progress td.todo { background: var(--md-sys-color-secondary-container); }
+/* Not secondary-container: at medium/high contrast it is dark and the empty track looks filled */
+table.progress td.todo { background: var(--md-sys-color-surface-container-highest); }
 
 /***** Tooltips (plain) *****/
 /* jQuery UI also adds .ui-widget.ui-widget-content, which would win over a bare .ui-tooltip. */
@@ -510,7 +511,7 @@ a.icon:hover .icon-svg, a.icon-only:hover .icon-svg, span.icon-actions:hover .ic
 .icon-warning svg.icon-svg { color: var(--md-sys-color-warning); }
 div.flash svg.icon-svg, #errorExplanation svg.icon-svg, .conflict svg.icon-svg,
 .top-menu__links svg.icon-svg, #account .dropdown-trigger .icon-svg,
-#main-menu svg.icon-svg, #sidebar a.selected svg.icon-svg, .drdn-items svg.icon-svg { color: inherit; }
+#main-menu svg.icon-svg, #sidebar :is(a.selected, .icon-clear-query) svg.icon-svg, .drdn-items svg.icon-svg { color: inherit; }
 html .context-menu-selection svg.icon-svg { color: var(--md-sys-color-on-secondary-container) !important; }
 
 /***** Wiki toolbar (jstoolbar.css loads after the theme) *****/

tonalmine/stylesheets/layout.css

@@ -202,6 +202,8 @@ html .dropdown-content .dropdown-items a:hover,
 }
 #main-menu .menu-children li a:hover::after { display: none; }
 .drdn-items > .selected { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
+/* At medium/high contrast secondary-container turns into a dark block; the check mark already marks the item */
+:root:is([data-contrast="medium"], [data-contrast="high"]) .drdn-items > .selected { background-color: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); }
 #project-jump .drdn-items > a:hover { background-color: transparent; color: var(--md-sys-color-on-surface) !important; }
 div + .drdn-items, .dropdown-divider, #account .dropdown-content .logout { border-color: var(--md-sys-color-outline-variant); }
 #account .dropdown-content .user-info { color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-medium); }
@@ -288,8 +290,8 @@ div + .drdn-items, .dropdown-divider, #account .dropdown-content .logout { borde
 #sidebar ul + ul, #sidebar ul + p { margin-block-start: 12px; }
 
 /* Navigation-drawer style items for plain link lists in the sidebar (queries, sort order,
-   versions, wiki index, …): a link that is alone in its list item */
+   versions, wiki index, …): a link that is alone in its list item, or a saved query */
-#sidebar li > a:only-child, #admin-menu li a {
+#sidebar li > a:is(:only-child, .query), #admin-menu li a {
   display: flex;
   align-items: center;
   min-block-size: 36px;
@@ -300,8 +302,8 @@ div + .drdn-items, .dropdown-divider, #account .dropdown-content .logout { borde
   letter-spacing: var(--md-sys-typescale-label-large-tracking);
   transition: var(--nm-transition);
 }
-#sidebar li > a:only-child:hover, #admin-menu li a:hover { background-image: var(--nm-state-hover); text-decoration: none; }
+#sidebar li > a:is(:only-child, .query):hover, #admin-menu li a:hover { background-image: var(--nm-state-hover); text-decoration: none; }
-#sidebar li > a.selected:only-child, #admin-menu li a.selected {
+#sidebar li > a.selected:is(:only-child, .query), #admin-menu li a.selected {
   margin-inline-start: 0; /* core: -6px, inset marker bar */
   padding-block: 0;
   box-shadow: none;
@@ -310,6 +312,11 @@ div + .drdn-items, .dropdown-divider, #account .dropdown-content .logout { borde
   color: var(--md-sys-color-on-secondary-container);
 }
 #admin-menu li { padding-block-end: 2px; }
+/* The selected query also holds its "clear" icon: it sits at the end, inside the pill */
+#sidebar li:has(> .icon-clear-query) { display: grid; align-items: center; }
+#sidebar li:has(> .icon-clear-query) > * { grid-area: 1 / 1; }
+#sidebar li:has(> .icon-clear-query) > a.query { padding-inline-end: 40px; }
+#sidebar li > .icon-clear-query { justify-self: end; margin-inline-end: 12px; color: var(--md-sys-color-on-secondary-container); }
 
 /***** Footer *****/
 #footer {

tonalmine/stylesheets/pages.css

@@ -122,7 +122,7 @@ div.wiki *:not(pre) > code, div.wiki > code {
 .syntaxhl :is(.nv, .vc, .vg, .vi, .vm, .nl, .ni) { color: var(--md-sys-color-warning); font-weight: normal; }
 .syntaxhl :is(.err, .gd, .gr, .ne, .gt) { color: var(--md-sys-color-error); background-color: transparent; }
 .syntaxhl :is(.o) { color: var(--md-sys-color-on-surface); }
-.syntaxhl .hll { background-color: var(--md-sys-color-secondary-container); }
+.syntaxhl .hll { background-color: var(--md-sys-color-surface-container-highest); } /* stays a surface tone at every contrast, so token colors stay readable */
 
 /***** Activity *****/
 /* One card per day (the <dl>), entries are M3 list rows. Each entry is a <dt> + <dd> pair:
@@ -342,7 +342,7 @@ div#roadmap .version-article {
   border: 1px solid var(--md-sys-color-outline-variant);
   border-radius: var(--md-sys-shape-corner-medium);
 }
-div#roadmap header:target { background-color: var(--md-sys-color-secondary-container); }
+div#roadmap header:target { background-color: var(--md-sys-color-surface-container-highest); }
 div#version-summary { background-color: transparent; }
 
 /* Overview and issue table share one left edge (core indents the overview by 1.5rem) */