diff --git a/CHANGELOG.md b/CHANGELOG.md
index b5e7546..ac975d7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -30,9 +30,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Fixed
-- Pinned and read look the same wherever they are shown, in every theme: the button lights up
- in the theme's accent colour when it is on. The read button used to show an envelope on a
- read item, the opposite of how the pin beside it worked.
+- The read button shows whether an item is read, as the pin beside it shows whether it is
+ pinned: a tick when read, an envelope when not. It used to show the opposite.
- In Directory and Popular, Subscribe is a plus again, not the tick that marks a feed you have.
- A web page with some non-ASCII characters no longer hides the feed it links, or crashes looking for it.
- Pulling the item list down to check for new items shows a spinner for a couple of seconds, and
diff --git a/tests/contrast.js b/tests/contrast.js
index df56e58..72245e5 100644
--- a/tests/contrast.js
+++ b/tests/contrast.js
@@ -27,7 +27,6 @@ const RULES = [
['dim', ['bg', 'panel', 'panel2'], 4.5], // metadata, labels
['faint', ['bg', 'panel', 'panel2'], 4.5], // hints, column headings, the status bar
['accent', ['bg', 'panel'], 4.5], // links, in the list and the reader
- ['accent', ['panel2', 'raise'], 3], // a toggle that is on: pinned, read
['ink', ['accent'], 4.5], // a primary button's label
['ink', ['accent2'], 4.5], // the unread count on its badge
['accent2', ['bg', 'panel', 'raise'], 3], // the unread dot, the EQ bars, download bars
diff --git a/web/app.css b/web/app.css
index 6548aac..2284605 100644
--- a/web/app.css
+++ b/web/app.css
@@ -817,10 +817,7 @@ body.adminpage #log{max-width:none}
icon, so it spilled 3px right of centre and off line with its heading. */
.ep .st,.ep .fl{width:22px;height:22px;padding:0;border-radius:5px;display:grid;place-items:center;font-size:11px;color:var(--accent2)}
.ep .fl{color:var(--faint);font-size:13px}
-.ep .fl.on{color:var(--accent)}
-/* A toggle that is on, the same everywhere: pinned or read, in the toolbar, beside an item's
- title and on a feed's page, as the feed list's pin mark already was (#74). */
-.btn.ico[aria-pressed="true"],.tgroup button[aria-pressed="true"]:not(:disabled){color:var(--accent)}
+.ep .fl.on{color:var(--fg)}
/* The icon's EQ bars mark what is playing: standing still, and moving only while it plays. A
paused animation was tried first; the frames it held were a pixel apart and read as dots. */
.eq{display:inline-flex;align-items:flex-end;gap:2px;width:13px;height:12px;flex:none}
@@ -1153,8 +1150,6 @@ body:has(#player.on) #status{padding-bottom:3px}
:root[data-theme="classic"] .tgroup a,
:root[data-theme="classic"] .btn,
:root[data-theme="classic"] .tabs{background:linear-gradient(#ffffff,#d9d9d9);border-color:#8e8e8e;color:#1a1a1a}
-:root[data-theme="classic"] .btn.ico[aria-pressed="true"],
-:root[data-theme="classic"] .tgroup button[aria-pressed="true"]:not(:disabled){color:var(--accent)}
:root[data-theme="classic"] .tabs{border:1px solid #8e8e8e;border-radius:6px}
:root[data-theme="classic"] .tgroup button:hover:not(:disabled),
:root[data-theme="classic"] .tgroup a:hover,
diff --git a/web/src/items.ts b/web/src/items.ts
index d08589d..9dc1889 100644
--- a/web/src/items.ts
+++ b/web/src/items.ts
@@ -221,8 +221,9 @@ function syncTools(e){
$('#tbPlay').disabled=!(e&&e.enclosures.some(isPlayable));
$('#tbRead').disabled=$('#tbFlag').disabled=!e;
// The same icons as the item's own buttons beside its title, so the two never disagree. Each
- // shows what is, pressed when on, as the pin always did; read showed what a click would do,
- // so the two side by side said opposite things (#74).
+ // shows what is, as the pin always did: read showed what a click would do, so the two side by
+ // side said opposite things (#74). The shape carries it, not the colour.
+ $('#tbRead').innerHTML=e&&!e.read?ICON.unread:ICON.check;
$('#tbRead').setAttribute('aria-pressed',String(!!(e&&e.read)));
$('#tbFlag').setAttribute('aria-pressed',String(!!(e&&e.flagged)));
$('#tbFlag').innerHTML=e&&e.flagged?ICON.pinOn:ICON.pin;
@@ -276,7 +277,7 @@ function detailHtml(e){
[f&&esc(f.title||f.id), num, dateOf(e.published), e.duration&&clock(e.duration)]
.filter(Boolean).map(s=>`${s}`).join('')}
+ aria-label="Mark ${e.read?'unread':'read'}" aria-pressed="${!!e.read}">${e.read?ICON.check:ICON.unread}
${e.link?`'), // solid/table-list
popular:fa('0 0 576 512',''), // solid/star
all:fa('0 0 512 512',''), // solid/layer-group
+ unread:fa('0 0 512 512',''), // solid/envelope: a closed letter, not a record button
audio:fa('0 0 448 512',''), // solid/headphones
video:fa('0 0 576 512',''), // solid/video
image:fa('0 0 448 512',''), // solid/image