A UI pass: contrast in every theme, and a sign-in page that fits

Measured every theme's palette against WCAG AA. The unread badge's count
on its --accent2 fill fell as low as 2.6:1 (Flat Remix light), and the
unread dot with it; each theme's --accent2 is taken down until white on
it clears 4.5. Tags were --warn or --bad on --raise, short of AA in most
light themes, so they are outlined on the row's own ground instead.

Nordic dark had --line equal to --panel2, so bordered buttons on a
panel2 ground drew no edge at all. Classic's selected row left the
row's icon buttons grey on the blue. A zero badge on a selected row was
--raise on --raise and vanished.

login.html never had a doctype or viewport meta, so it rendered in
quirks mode and at desktop width on a phone, and its light palette sat
under data-theme="light", which nothing ever set. It follows
prefers-color-scheme now, signed out having no account to ask.

Dropped the unused log and users icons. The Classic theme's label is
now just "Classic".

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

web/app.css

@@ -32,12 +32,12 @@
   --line:#d6d6d6;    /* #D6D6D6 device edge */
   --fg:#1a1a1a;      /* #1A1A1A icon outline */
   --dim:#606060;     /* #606060 */
-  --faint:#767676;   /* between the icon's #929292 and #606060, to clear AA */
+  --faint:#6b6b6b;  /* between the icon's #929292 and #606060, to clear AA on the page ground */
   --accent:#2d5391;  /* #2D5391 the deep screen blue reads better on white */
-  --accent2:#9a5f0a;  /* the EQ amber, taken down until white on it clears AA */
+  --accent2:#985e0a;  /* the EQ amber, taken down until white on it clears AA */
   --ink:#ffffff;
   --good:#2f7d4f;
-  --warn:#b06f10;
+  --warn:#985e0a;  /* the same amber; the lighter one failed AA as text */
   --bad:#b3402f;
   --shadow:0 8px 28px rgba(45,83,145,.14);
 }
@@ -124,7 +124,7 @@
   --dim:#c4c4c8;
   --faint:#a0a0a7;
   --accent:#81d0ff;
-  --accent2:#3584e4;
+  --accent2:#3685e4;  /* a hair lighter so the badge's dark count clears AA */
   --ink:#1d1d20;
   --good:#78e9ab;
   --warn:#ffc252;
@@ -141,7 +141,7 @@
   --dim:#57575d;
   --faint:#66666c;
   --accent:#0461be;
-  --accent2:#3584e4;
+  --accent2:#1c71d8;  /* blue 4, a step down from the accent blue, so white on it clears AA */
   --ink:#ffffff;
   --good:#00753a;
   --warn:#905400;
@@ -177,7 +177,7 @@
   --dim:#5c616c;     /* fg */
   --faint:#686d78;
   --accent:#0060f0;  /* link */
-  --accent2:#fd7d00;
+  --accent2:#bb5c00;  /* the warning orange taken down until white on it clears AA */
   --ink:#ffffff;
   --good:#23794f;
   --warn:#a85400;
@@ -196,7 +196,7 @@
   --dim:#3d3a33;
   --faint:#5a564c;
   --accent:#1a5fae;
-  --accent2:#b58900;
+  --accent2:#957100;  /* taken down until white on it clears AA */
   --ink:#ffffff;
   --good:#216609;
   --warn:#795a00;
@@ -210,7 +210,7 @@
   --panel:#3b4252;   /* nord1 */
   --panel2:#434c5e;  /* nord2 */
   --raise:#4c566a;   /* nord3 */
-  --line:#434c5e;
+  --line:#4c566a;    /* nord3: nord2 is --panel2, and borders on it vanished */
   --fg:#eceff4;      /* nord6 */
   --dim:#d8dee9;     /* nord4 */
   --faint:#b4bccb;
@@ -232,7 +232,7 @@
   --dim:#3b4252;     /* nord1 */
   --faint:#4c566a;   /* nord3 */
   --accent:#3a5e8a;
-  --accent2:#b0674e;
+  --accent2:#ab644c;
   --ink:#ffffff;
   --good:#446632;
   --warn:#7e590e;
@@ -254,7 +254,7 @@
   --accent2:#2a5db0;
   --ink:#ffffff;
   --good:#237a23;
-  --warn:#a15f00;
+  --warn:#9b5b00;
   --bad:#c42b1c;
   --shadow:0 4px 16px rgba(0,0,0,.28);
 }
@@ -428,9 +428,11 @@ input:focus,select:focus{outline:0;border-color:var(--accent)}
 .tile .txt b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;font-weight:500;font-size:13px;line-height:1.3}
 .tile .txt small{display:block;color:var(--faint);font-size:11.5px}
 .tile:hover .txt b{color:var(--accent)}
+/* Outlined, not filled: on --raise the warning and error colours fell short of AA in most light
+   themes, where on the row's own ground they clear it. */
 .tag{
   font-size:11px;font-weight:600;
-  padding:1px 5px;border-radius:4px;background:var(--raise);color:var(--warn);flex:none;
+  padding:0 4px;border-radius:4px;border:1px solid;color:var(--warn);flex:none;
 }
 .art{
   border-radius:7px;object-fit:cover;background:var(--raise);flex:none;
@@ -451,6 +453,8 @@ input:focus,select:focus{outline:0;border-color:var(--accent)}
   font-size:11px;font-weight:600;flex:none;min-width:26px;text-align:center;
 }
 .badge.zero{background:var(--raise);color:var(--faint)}
+/* A selected row is --raise too, and the zero count's pill vanished into it. */
+.sel .badge.zero{background:var(--bg)}
 /* Counts, sizes and times that change in place should not jiggle the text around them. */
 .badge,.feed small,.childrow small,.tile small,.ep,.fhead .sub,.dmeta,#status,#seekrow{font-variant-numeric:tabular-nums}
 
@@ -845,7 +849,8 @@ input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radiu
 :root[data-theme="classic"] .ep.sel .st,
 :root[data-theme="classic"] .ep.sel .fl,
 :root[data-theme="classic"] .ep.sel .file,
-:root[data-theme="classic"] .ep.sel .kind{color:#fff}
+:root[data-theme="classic"] .ep.sel .kind,
+:root[data-theme="classic"] .ep.sel .iconbtn:not(:hover){color:#fff}
 /* Green and red stay green and red on the blue, just lighter so they read. */
 :root[data-theme="classic"] .ep.sel .kind.here{color:#a6f3a6}
 :root[data-theme="classic"] .ep.sel .kind.bad{color:#ffb8ad}