@tiagojct/subsub 0.18.0 → 0.19.0

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 Sub-Sub follows the version numbers of npm: a change in the second number (0.13) adds features or changes how you use it; a change in the third (0.13.1) only fixes.
 
+## 0.19.0 (2026-10-16)
+
+A new look for the browser view, the website, the tutorial and the workshop, after the engraved plates of 19th-century natural history books.
+
+- A grey-green paper, blue-black ink, and four colours with one meaning each: blue for the Researcher and for links, madder red for the Librarian, green for what is applied or checked, ochre for a preview. In dark mode the page is a blue-black plate.
+- Type: Literata for text, with true italics; Atkinson Hyperlegible Next for the interface; Atkinson Hyperlegible Mono for commands. They replace IBM Plex.
+- The notes pane shows what a note was written from: a line under `evidence:`, solid for the full text, dashed for the abstract, dotted for the metadata.
+- Reading mode in the notes pane: larger type and more space between lines, for long notes. Sub-Sub remembers it on this computer. The tutorial has the same button.
+- In a preview, a tag that would be removed is struck through instead of red. Errors show in ink, with a word, so that red belongs to the Librarian only. Each mode button keeps its own colour, selected or not.
+- A preview has a dashed frame: nothing has changed yet.
+
 ## 0.18.0 (2026-10-15)
 
 - Figures and tables from the PDF. With the Zotero server 0.6.0, Sub-Sub can cut a figure or a table out of an item's PDF (`zotero_get_figure`, with the label of its caption, such as "Figure 2" or "Table 1") and show it in a note, with its caption and a link to the page. `/read critique` shows the table or figure with the main result. The images are PNG files in `Literature/figures/`; the notes pane and Obsidian show them. When the figure cannot be cut out, Sub-Sub takes the whole page and says so.

package/README.md

@@ -1,6 +1,6 @@
 # Sub-Sub
 
-[![npm](https://img.shields.io/npm/v/@tiagojct/subsub.svg?style=flat-square&color=1d4f7c)](https://www.npmjs.com/package/@tiagojct/subsub)
+[![npm](https://img.shields.io/npm/v/@tiagojct/subsub.svg?style=flat-square&color=2c5d87)](https://www.npmjs.com/package/@tiagojct/subsub)
 [![Website](https://img.shields.io/badge/website-subsub.tiagojacinto.eu-a33b14.svg?style=flat-square)](https://subsub.tiagojacinto.eu)
 [![Licence: MIT](https://img.shields.io/badge/licence-MIT-5f5c55.svg?style=flat-square)](LICENSE)
 
@@ -24,7 +24,7 @@ Each mode can have its own model. Switch with `/researcher` and `/librarian`, or
 
 Every library change works the same way in both modes:
 
-- The Zotero server computes the change first. Sub-Sub shows it to you (added tags in green, removed tags in red) and applies it only when you select Yes. The check is in the program, so the model cannot skip it.
+- The Zotero server computes the change first. Sub-Sub shows it to you (the tags it adds and the tags it removes) and applies it only when you select Yes. The check is in the program, so the model cannot skip it.
 - If you edit an item in Zotero while the preview is open, Sub-Sub shows you the new preview before it changes anything. Each change also sends the item's version, so a field you edit at the moment of writing is not overwritten.
 - Every change is journaled, including new collections. `/undo` reverts the last one, and the browser view shows an Undo button under each change.
 - Nothing is deleted: items go to the Zotero trash. Only tags from your tag list can be added.
@@ -183,4 +183,4 @@ This DOI always points to the latest version; each version also has its own DOI
 
 ## Licence
 
-[MIT](LICENSE), Tiago Jacinto. The `/lit`, `/compare` and `/review` prompts adapt text from [Feynman](https://github.com/Companion-Inc/feynman) (MIT); see [THIRD_PARTY_NOTICES](THIRD_PARTY_NOTICES). IBM Plex fonts: SIL Open Font License.
+[MIT](LICENSE), Tiago Jacinto. The `/lit`, `/compare` and `/review` prompts adapt text from [Feynman](https://github.com/Companion-Inc/feynman) (MIT); see [THIRD_PARTY_NOTICES](THIRD_PARTY_NOTICES). Literata and Atkinson Hyperlegible fonts: SIL Open Font License.

package/THIRD_PARTY_NOTICES

@@ -55,99 +55,101 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 
 
-web/fonts/ and the website use IBM Plex Sans, IBM Plex Serif and IBM Plex Mono,
-https://github.com/IBM/plex. Their licence:
-
-Copyright © 2017 IBM Corp. with Reserved Font Name "Plex"
-
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-
-This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL
-
-
------------------------------------------------------------
-SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
------------------------------------------------------------
-
-PREAMBLE
-The goals of the Open Font License (OFL) are to stimulate worldwide
-development of collaborative font projects, to support the font creation
-efforts of academic and linguistic communities, and to provide a free and
-open framework in which fonts may be shared and improved in partnership
-with others.
-
-The OFL allows the licensed fonts to be used, studied, modified and
-redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded, 
-redistributed and/or sold with any software provided that any reserved
-names are not used by derivative works. The fonts and derivatives,
-however, cannot be released under any other type of license. The
-requirement for fonts to remain under this license does not apply
-to any document created using the fonts or their derivatives.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this license and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Reserved Font Name" refers to any names specified as such after the
-copyright statement(s).
-
-"Original Version" refers to the collection of Font Software components as
-distributed by the Copyright Holder(s).
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting -- in part or in whole -- any of the components of the
-Original Version, by changing formats or by porting the Font Software to a
-new environment.
-
-"Author" refers to any designer, engineer, programmer, technical
-writer or other person who contributed to the Font Software.
-
-PERMISSION & CONDITIONS
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of the Font Software, to use, study, copy, merge, embed, modify,
-redistribute, and sell modified and unmodified copies of the Font
-Software, subject to the following conditions:
-
-1) Neither the Font Software nor any of its individual components,
-in Original or Modified Versions, may be sold by itself.
-
-2) Original or Modified Versions of the Font Software may be bundled,
-redistributed and/or sold with any software, provided that each copy
-contains the above copyright notice and this license. These can be
-included either as stand-alone text files, human-readable headers or
-in the appropriate machine-readable metadata fields within text or
-binary files as long as those fields can be easily viewed by the user.
-
-3) No Modified Version of the Font Software may use the Reserved Font
-Name(s) unless explicit written permission is granted by the corresponding
-Copyright Holder. This restriction only applies to the primary font name as
-presented to the users.
-
-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
-Software shall not be used to promote, endorse or advertise any
-Modified Version, except to acknowledge the contribution(s) of the
-Copyright Holder(s) and the Author(s) or with their explicit written
-permission.
-
-5) The Font Software, modified or unmodified, in part or in whole,
-must be distributed entirely under this license, and must not be
-distributed under any other license. The requirement for fonts to
-remain under this license does not apply to any document created
-using the Font Software.
-
-TERMINATION
-This license becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
-OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
-OTHER DEALINGS IN THE FONT SOFTWARE.
+web/fonts/, the website, the tutorial and the workshop use Literata, Atkinson
+Hyperlegible Next and Atkinson Hyperlegible Mono, subset to Latin. Their licence:
+
+Copyright 2017 The Literata Project Authors (https://github.com/googlefonts/literata)
+Copyright 2020-2024 The Atkinson Hyperlegible Next Project Authors (https://github.com/googlefonts/atkinson-hyperlegible-next)
+Copyright 2020-2024 The Atkinson Hyperlegible Mono Project Authors (https://github.com/googlefonts/atkinson-hyperlegible-next-mono)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+
+This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tiagojct/subsub",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "Sub-Sub: a research assistant that works from your own Zotero library, in the browser or the terminal, built on pi",
   "type": "module",
   "license": "MIT",

package/web/app.css

@@ -1,93 +1,97 @@
-/* Sub-Sub web view.
-   Type: IBM Plex Sans for the interface, IBM Plex Serif for replies, IBM Plex Mono for commands.
-   The fonts are local: the page's CSP allows no other origin. */
+/* Sub-Sub web view: the plate, at work.
+   A grey-green sheet, a lighter field, copperplate ink, and four washes as the only colour:
+   Prussian blue (the Researcher), madder (the Librarian), sap green (applied), gamboge (a preview).
+   Type: Atkinson Hyperlegible Next for the interface, Literata for replies and notes (true italics),
+   Atkinson Hyperlegible Mono for commands. The fonts are local: the page's CSP allows no other origin. */
 
-@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/IBMPlexSans.woff2") format("woff2"); font-weight: 100 700; font-stretch: 75% 100%; font-display: swap; }
-@font-face { font-family: "IBM Plex Serif"; src: url("/fonts/IBMPlexSerif.woff2") format("woff2"); font-weight: 100 700; font-display: swap; }
-@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono.woff2") format("woff2"); font-weight: 400; font-display: swap; }
+@font-face { font-family: "Literata"; src: url("/fonts/Literata.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
+@font-face { font-family: "Literata"; src: url("/fonts/Literata-Italic.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
+@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/fonts/AtkinsonHyperlegibleNext.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
+@font-face { font-family: "Atkinson Hyperlegible Mono"; src: url("/fonts/AtkinsonHyperlegibleMono.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
 
 /* ---------------------------------------------------------------- tokens */
 
 :root {
-	--sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
-	--serif: "IBM Plex Serif", Georgia, serif;
-	--mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
-
-	--bg: #f7f6f2;
-	--surface: #efede7;
-	--raised: #ffffff;
-	--text: #1c1b19;
-	--muted: #5f5c55;
-	--faint: #8a867d;
-	--rule: #e0ddd4;
-	--rule-strong: #c8c3b8;
-	--shadow: 0 1px 2px rgb(28 27 25 / 0.05), 0 8px 24px -12px rgb(28 27 25 / 0.18);
-
-	--researcher: #1d4f7c;
-	--researcher-soft: #e3ebf3;
-	--librarian: #a33b14;
-	--librarian-soft: #f5e6de;
-	--on-accent: #ffffff;
-
-	--add: #256b3b;
-	--add-soft: #e2f0e5;
-	--rem: #a8321d;
-	--rem-soft: #f7e3de;
-	--warn: #946412;
-
-	--radius: 6px;
-	--radius-lg: 10px;
+	--sans: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
+	--serif: "Literata", Georgia, serif;
+	--mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+
+	--bg: #e9ece6;
+	--surface: #dfe3dc;
+	--raised: #f4f5f1;
+	--text: #16202a;
+	--muted: #44505b;
+	--faint: #5d6870;
+	--rule: #c6ccc6;
+	--rule-strong: #7d878e;
+
+	--researcher: #2c5d87;
+	--researcher-soft: #d8e2eb;
+	--librarian: #a8432d;
+	--librarian-soft: #f0ddd6;
+	--on-accent: #f4f5f1;
+
+	--add: #4f6a2e;
+	--add-soft: #dfe7d2;
+	--rem: #a8432d;
+	--rem-soft: #f0ddd6;
+	--warn: #86601a;
+	--warn-soft: #f2e5c6;
+
+	--radius: 2px;
+	--radius-lg: 3px;
 	--side-w: 17rem;
 	--measure: 46rem;
 }
 
+/* Dark: the steel plate. */
 @media (prefers-color-scheme: dark) {
 	:root:not([data-theme="light"]) {
-		--bg: #141413;
-		--surface: #1c1c1a;
-		--raised: #232320;
-		--text: #ebe8e1;
-		--muted: #a7a399;
-		--faint: #7b776f;
-		--rule: #2e2d2a;
-		--rule-strong: #45433e;
-		--shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 12px 32px -12px rgb(0 0 0 / 0.6);
-		--researcher: #7fb0de;
-		--researcher-soft: #1b2733;
-		--librarian: #e48a5f;
-		--librarian-soft: #33221a;
-		--on-accent: #141413;
-		--add: #7cc493;
-		--add-soft: #1a2c20;
-		--rem: #ec8a70;
-		--rem-soft: #36201b;
-		--warn: #d6a84e;
+		--bg: #12171c;
+		--surface: #0d1115;
+		--raised: #192128;
+		--text: #dce1de;
+		--muted: #a6b0b3;
+		--faint: #8d989d;
+		--rule: #2c363f;
+		--rule-strong: #66727c;
+		--researcher: #86b4da;
+		--researcher-soft: #1e3042;
+		--librarian: #e6866d;
+		--librarian-soft: #3d2620;
+		--on-accent: #12171c;
+		--add: #a3c078;
+		--add-soft: #253220;
+		--rem: #e6866d;
+		--rem-soft: #3d2620;
+		--warn: #e2b45a;
+		--warn-soft: #3a3019;
 	}
 }
 
 :root[data-theme="dark"] {
-	--bg: #141413;
-	--surface: #1c1c1a;
-	--raised: #232320;
-	--text: #ebe8e1;
-	--muted: #a7a399;
-	--faint: #7b776f;
-	--rule: #2e2d2a;
-	--rule-strong: #45433e;
-	--shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 12px 32px -12px rgb(0 0 0 / 0.6);
-	--researcher: #7fb0de;
-	--researcher-soft: #1b2733;
-	--librarian: #e48a5f;
-	--librarian-soft: #33221a;
-	--on-accent: #141413;
-	--add: #7cc493;
-	--add-soft: #1a2c20;
-	--rem: #ec8a70;
-	--rem-soft: #36201b;
-	--warn: #d6a84e;
-}
-
-/* The mode sets the accent: blue for the Researcher, rust for the Librarian. */
+	--bg: #12171c;
+	--surface: #0d1115;
+	--raised: #192128;
+	--text: #dce1de;
+	--muted: #a6b0b3;
+	--faint: #8d989d;
+	--rule: #2c363f;
+	--rule-strong: #66727c;
+	--researcher: #86b4da;
+	--researcher-soft: #1e3042;
+	--librarian: #e6866d;
+	--librarian-soft: #3d2620;
+	--on-accent: #12171c;
+	--add: #a3c078;
+	--add-soft: #253220;
+	--rem: #e6866d;
+	--rem-soft: #3d2620;
+	--warn: #e2b45a;
+	--warn-soft: #3a3019;
+}
+
+/* The mode sets the accent: Prussian blue for the Researcher, madder for the Librarian. */
 body { --accent: var(--researcher); --accent-soft: var(--researcher-soft); }
 body[data-mode="librarian"] { --accent: var(--librarian); --accent-soft: var(--librarian-soft); }
 
@@ -106,6 +110,8 @@ body {
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 	text-rendering: optimizeLegibility;
+	caret-color: var(--accent);
+	scrollbar-color: var(--rule-strong) transparent;
 }
 
 button, input, select, textarea { font: inherit; color: inherit; }
@@ -116,7 +122,7 @@ svg { flex: none; }
 .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
 [hidden] { display: none !important; }
 :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
-::selection { background: var(--accent-soft); }
+::selection { background: var(--accent-soft); color: var(--text); }
 
 /* Icons drawn with strokes, at the size of the text. */
 .icon-btn svg, .new-btn svg, .brand .mark, .icon {
@@ -135,7 +141,7 @@ button { cursor: pointer; background: none; border: 1px solid transparent; borde
 button:disabled { opacity: 0.45; cursor: default; }
 
 .primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 550; }
-.primary:hover:not(:disabled) { filter: brightness(1.08); }
+.primary:hover:not(:disabled) { background: var(--text); border-color: var(--text); color: var(--bg); }
 .secondary { background: var(--raised); border-color: var(--rule-strong); }
 .secondary:hover:not(:disabled) { border-color: var(--text); }
 .ghost { color: var(--muted); }
@@ -215,9 +221,9 @@ select:hover { border-color: var(--rule-strong); }
 	display: flex;
 	align-items: center;
 	gap: 0.45rem;
+	font-family: var(--serif);
 	font-weight: 600;
-	font-size: 1.02rem;
-	letter-spacing: -0.01em;
+	font-size: 1.1rem;
 	margin-right: 0.25rem;
 }
 .brand .mark { color: var(--accent); }
@@ -225,24 +231,25 @@ select:hover { border-color: var(--rule-strong); }
 
 .modes {
 	display: inline-flex;
-	padding: 3px;
-	border-radius: 8px;
-	background: var(--surface);
-	border: 1px solid var(--rule);
+	border: 1px solid var(--rule-strong);
+	background: var(--raised);
 }
 .modes button {
-	padding: 0.28rem 0.8rem;
-	border-radius: 5px;
+	padding: 0.3rem 0.8rem;
+	border-radius: 0;
 	font-size: 0.86rem;
 	color: var(--muted);
 	border: 0;
 }
 .modes button:hover { color: var(--text); }
+/* Each mode keeps its own colour, chosen or not. */
+.modes button[data-mode="researcher"] { color: var(--researcher); }
+.modes button[data-mode="librarian"] { color: var(--librarian); }
 .modes button[aria-pressed="true"] {
-	background: var(--raised);
+	background: var(--accent-soft);
 	color: var(--accent);
 	font-weight: 600;
-	box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 0 0 1px var(--rule);
+	box-shadow: inset 0 -2px 0 var(--accent);
 }
 
 .status {
@@ -258,7 +265,6 @@ select:hover { border-color: var(--rule-strong); }
 	align-items: center;
 	gap: 0.45rem;
 	padding: 0.3rem 0.7rem;
-	border-radius: 999px;
 	font-size: 0.8rem;
 	color: var(--muted);
 	white-space: nowrap;
@@ -268,9 +274,10 @@ select:hover { border-color: var(--rule-strong); }
 	font-variant-numeric: tabular-nums;
 }
 .library-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rule-strong); flex: none; }
-.library.reachable .library-dot { background: var(--add); box-shadow: 0 0 0 3px var(--add-soft); }
-.library.down { color: var(--rem); background: var(--rem-soft); font-weight: 550; }
-.library.down .library-dot { background: var(--rem); }
+.library.reachable .library-dot { background: var(--add); }
+/* Errors are drawn in ink, with a hollow mark and a word: madder means only the Librarian. */
+.library.down { color: var(--text); background: var(--surface); font-weight: 600; }
+.library.down .library-dot { background: none; border: 1.5px solid var(--text); }
 .library.checking .library-dot { background: var(--warn); animation: pulse 1.2s ease-in-out infinite; }
 
 /* ---------------------------------------------------------------- side panel */
@@ -289,11 +296,12 @@ select:hover { border-color: var(--rule-strong); }
 }
 
 .side h2 {
-	font-size: 0.7rem;
-	font-weight: 600;
+	font-family: var(--serif);
+	font-size: 0.98rem;
+	font-weight: 400;
+	font-variant-caps: all-small-caps;
 	letter-spacing: 0.08em;
-	text-transform: uppercase;
-	color: var(--faint);
+	color: var(--muted);
 	margin: 0 0 0.35rem;
 	padding: 0 0.5rem;
 }
@@ -306,10 +314,9 @@ select:hover { border-color: var(--rule-strong); }
 	padding: 0.5rem 0.7rem;
 	background: var(--raised);
 	border: 1px solid var(--rule);
-	font-weight: 550;
-	box-shadow: 0 1px 1px rgb(0 0 0 / 0.03);
+	font-weight: 600;
 }
-.new-btn:hover { border-color: var(--rule-strong); }
+.new-btn:hover { border-color: var(--text); }
 .new-btn svg { width: 16px; height: 16px; color: var(--accent); }
 
 .actions { display: flex; flex-direction: column; }
@@ -318,10 +325,10 @@ select:hover { border-color: var(--rule-strong); }
 	padding: 0.32rem 0.5rem;
 	font-size: 0.88rem;
 	color: var(--text);
-	border-radius: 5px;
+	border-radius: 0;
 }
 .actions button:hover { background: var(--bg); }
-.actions .group { margin: 0.55rem 0 0.15rem; padding: 0 0.5rem; font-size: 0.74rem; font-weight: 600; color: var(--muted); }
+.actions .group { margin: 0.6rem 0 0.15rem; padding: 0 0.5rem; font-family: var(--serif); font-style: italic; font-size: 0.86rem; color: var(--muted); }
 .actions .group:first-child { margin-top: 0; }
 
 .side .grow { flex: 1; display: flex; flex-direction: column; min-height: 8rem; }
@@ -345,10 +352,10 @@ select:hover { border-color: var(--rule-strong); }
 	text-align: left;
 	padding: 0.42rem 0.5rem;
 	display: block;
-	border-radius: 5px;
+	border-radius: 0;
 }
 .sessions button:hover { background: var(--bg); }
-.sessions .current button { background: var(--raised); box-shadow: inset 2px 0 0 var(--accent), 0 0 0 1px var(--rule); }
+.sessions .current button { background: var(--raised); outline: 1px solid var(--rule-strong); outline-offset: -1px; }
 .sessions .what {
 	display: -webkit-box;
 	-webkit-line-clamp: 2;
@@ -384,7 +391,7 @@ select:hover { border-color: var(--rule-strong); }
 	flex: none;
 	width: 28px;
 	height: 16px;
-	border-radius: 999px;
+	border-radius: var(--radius);
 	background: var(--rule-strong);
 	transition: background-color 0.15s ease;
 }
@@ -395,9 +402,8 @@ select:hover { border-color: var(--rule-strong); }
 	left: 2px;
 	width: 12px;
 	height: 12px;
-	border-radius: 50%;
-	background: #fff;
-	box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
+	border-radius: 1px;
+	background: var(--raised);
 	transition: transform 0.15s ease;
 }
 .switch input:checked + .track { background: var(--accent); }
@@ -416,7 +422,7 @@ body.layout-full { --measure: 72rem; }
 	margin: 0.9rem auto 0;
 	padding: 0.6rem 0.6rem 0.6rem 0.9rem;
 	border: 1px solid var(--rule);
-	border-left: 3px solid var(--warn);
+	border-top: 2px solid var(--warn);
 	border-radius: var(--radius);
 	background: var(--raised);
 	display: flex;
@@ -441,7 +447,7 @@ body.layout-full { --measure: 72rem; }
 .msg.user .bubble {
 	background: var(--raised);
 	border: 1px solid var(--rule);
-	border-radius: var(--radius-lg) var(--radius-lg) 3px var(--radius-lg);
+	border-radius: var(--radius-lg);
 	padding: 0.6rem 0.95rem;
 	max-width: min(36rem, 88%);
 	white-space: pre-wrap;
@@ -456,6 +462,7 @@ body.layout-full { --measure: 72rem; }
 	font-family: var(--serif);
 	font-size: 1.02rem;
 	line-height: 1.68;
+	font-variant-numeric: oldstyle-nums proportional-nums;
 	overflow-wrap: anywhere;
 }
 .md > :first-child { margin-top: 0; }
@@ -464,9 +471,8 @@ body.layout-full { --measure: 72rem; }
 .md li { margin: 0.2rem 0; }
 .md li::marker { color: var(--faint); }
 .md h1, .md h2, .md h3, .md h4 {
-	font-family: var(--sans);
+	font-family: var(--serif);
 	line-height: 1.3;
-	letter-spacing: -0.01em;
 	margin: 1.6rem 0 0.5rem;
 	font-weight: 600;
 }
@@ -484,14 +490,17 @@ body.layout-full { --measure: 72rem; }
 	padding: 0.1rem 0 0.1rem 1rem;
 	border-left: 2px solid var(--accent);
 	color: var(--muted);
+	font-style: italic;
 }
+.md blockquote code, .md blockquote a { font-style: normal; }
+/* A page link stays whole: (p. 12) never breaks after "p.". */
+.md a[href^="zotero://open-pdf"] { white-space: nowrap; }
 
 .md code {
 	font-family: var(--mono);
 	font-size: 0.84em;
 	background: var(--surface);
-	border: 1px solid var(--rule);
-	border-radius: 4px;
+	border-radius: var(--radius);
 	padding: 0.05em 0.32em;
 }
 
@@ -530,9 +539,8 @@ body.layout-full { --measure: 72rem; }
 .md-table-wrap {
 	overflow-x: auto;
 	margin: 1.1rem 0;
-	border: 1px solid var(--rule);
-	border-radius: var(--radius);
-	background: var(--raised);
+	border-top: 1.5px solid var(--text);
+	border-bottom: 1.5px solid var(--text);
 }
 .md table {
 	border-collapse: collapse;
@@ -540,18 +548,19 @@ body.layout-full { --measure: 72rem; }
 	font-family: var(--sans);
 	font-size: 0.86rem;
 	line-height: 1.45;
-	font-variant-numeric: tabular-nums;
+	font-variant-numeric: lining-nums tabular-nums;
 }
 .md th, .md td { padding: 0.5rem 0.75rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
 .md tr:last-child td { border-bottom: 0; }
 .md th {
-	font-size: 0.72rem;
-	font-weight: 600;
-	letter-spacing: 0.04em;
-	text-transform: uppercase;
+	font-family: var(--serif);
+	font-size: 0.98rem;
+	font-weight: 400;
+	font-variant-caps: all-small-caps;
+	letter-spacing: 0.07em;
 	color: var(--muted);
 	white-space: nowrap;
-	background: var(--surface);
+	border-bottom-color: var(--text);
 }
 .md td:first-child { white-space: nowrap; }
 .md td code { white-space: nowrap; }
@@ -576,7 +585,7 @@ body.layout-full { --measure: 72rem; }
 	align-items: baseline;
 	padding: 0.28rem 0.55rem;
 	margin-left: -0.55rem;
-	border-radius: 5px;
+	border-radius: 0;
 	width: fit-content;
 	max-width: calc(100% + 0.55rem);
 }
@@ -594,8 +603,8 @@ body.layout-full { --measure: 72rem; }
 .tool .label { color: var(--text); white-space: nowrap; }
 .tool.running summary::before { background: var(--accent); animation: pulse 1.1s ease-in-out infinite; }
 .tool.done summary::before { background: var(--add); }
-.tool.error summary::before { background: var(--rem); }
-.tool.error .label { color: var(--rem); }
+.tool.error summary::before { background: none; border: 1.5px solid var(--text); }
+.tool.error .label { color: var(--text); font-weight: 600; }
 .tool .args { font-family: var(--mono); font-size: 0.74rem; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
 .tool[open] .args { white-space: normal; overflow-wrap: anywhere; }
 .tool pre {
@@ -631,8 +640,8 @@ body.layout-full { --measure: 72rem; }
 	white-space: pre-wrap;
 	overflow-wrap: anywhere;
 }
-.note.warning { border-left: 3px solid var(--warn); }
-.note.error { border-left: 3px solid var(--rem); }
+.note.warning { border-top: 2px solid var(--warn); }
+.note.error { border-top: 2px solid var(--text); }
 .note.mono { font-family: var(--mono); font-size: 0.76rem; line-height: 1.55; }
 .note pre { font-family: var(--mono); font-size: 0.74rem; white-space: pre-wrap; }
 .note button { margin-top: 0.5rem; }
@@ -640,7 +649,7 @@ body.layout-full { --measure: 72rem; }
 .note details { margin-top: 0.4rem; color: var(--muted); }
 .note details summary { cursor: pointer; font-size: 0.78rem; }
 .note details pre { margin: 0.3rem 0 0; overflow-wrap: anywhere; }
-.free-note { border-left: 3px solid var(--accent); padding-left: 0.6rem; }
+.free-note { border-top: 1px solid var(--accent); padding-top: 0.4rem; }
 
 .working {
 	margin-top: 1rem;
@@ -665,13 +674,18 @@ body.layout-full { --measure: 72rem; }
 /* Empty conversation. */
 .empty { padding-top: 11vh; }
 .empty .kicker {
-	font-size: 0.72rem;
-	font-weight: 600;
+	display: flex;
+	justify-content: space-between;
+	margin: 0 0 1.5rem;
+	padding-bottom: 0.3rem;
+	border-bottom: 1px solid var(--text);
+	font-family: var(--serif);
+	font-size: 1rem;
+	font-variant-caps: all-small-caps;
 	letter-spacing: 0.08em;
-	text-transform: uppercase;
 	color: var(--accent);
-	margin: 0 0 0.6rem;
 }
+.empty .kicker::before { content: "Sub-Sub"; color: var(--muted); order: -1; }
 .empty h1 {
 	font-family: var(--serif);
 	font-weight: 500;
@@ -681,17 +695,18 @@ body.layout-full { --measure: 72rem; }
 	margin: 0 0 0.6rem;
 }
 .empty .lede { color: var(--muted); max-width: 34rem; margin: 0 0 1.75rem; }
-.chips { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
+/* Suggestions: a short list of lines to start from, not a row of cards. */
+.chips { display: grid; max-width: 34rem; border-bottom: 1px solid var(--rule-strong); }
 .chips button {
 	text-align: left;
-	border: 1px solid var(--rule);
-	border-radius: var(--radius-lg);
-	background: var(--raised);
-	padding: 0.75rem 0.9rem;
-	font-size: 0.9rem;
+	border: 0;
+	border-top: 1px solid var(--rule-strong);
+	border-radius: 0;
+	padding: 0.6rem 0.25rem;
+	font-size: 0.95rem;
 	line-height: 1.4;
 }
-.chips button:hover { border-color: var(--accent); }
+.chips button:hover { background: var(--accent-soft); color: var(--accent); }
 
 body > p.empty { text-align: center; color: var(--muted); padding: 30vh 1rem 0; margin: 0; }
 
@@ -702,12 +717,11 @@ body > p.empty { text-align: center; color: var(--muted); padding: 30vh 1rem 0;
 	width: min(100%, var(--measure));
 	margin-inline: auto;
 	border: 1px solid var(--rule-strong);
-	border-radius: 12px;
+	border-radius: var(--radius-lg);
 	background: var(--raised);
-	box-shadow: var(--shadow);
 	transition: border-color 0.12s ease, box-shadow 0.12s ease;
 }
-.composer-box:focus-within { border-color: var(--accent); box-shadow: var(--shadow), 0 0 0 3px var(--accent-soft); }
+.composer-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
 .composer textarea {
 	display: block;
 	width: 100%;
@@ -737,11 +751,10 @@ body > p.empty { text-align: center; color: var(--muted); padding: 30vh 1rem 0;
 	background: var(--raised);
 	border: 1px solid var(--rule-strong);
 	border-radius: var(--radius-lg);
-	box-shadow: var(--shadow);
 	padding: 0.3rem;
 	z-index: 5;
 }
-.suggest button, .suggest .hint-row { display: flex; align-items: baseline; gap: 0.6rem; width: 100%; text-align: left; padding: 0.38rem 0.55rem; border-radius: 5px; }
+.suggest button, .suggest .hint-row { display: flex; align-items: baseline; gap: 0.6rem; width: 100%; text-align: left; padding: 0.38rem 0.55rem; border-radius: 0; }
 .suggest button[aria-selected="true"], .suggest button:hover { background: var(--accent-soft); }
 .suggest .name { font-family: var(--mono); font-size: 0.8rem; color: var(--accent); white-space: nowrap; }
 .suggest .desc { color: var(--muted); font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -749,32 +762,38 @@ body > p.empty { text-align: center; color: var(--muted); padding: 30vh 1rem 0;
 /* ---------------------------------------------------------------- dialogs */
 
 .modal {
-	border: 1px solid var(--rule-strong);
-	border-radius: 12px;
+	border: 1px solid var(--text);
+	border-radius: var(--radius-lg);
 	background: var(--raised);
 	color: var(--text);
 	padding: 1.4rem 1.5rem 1.25rem;
 	width: min(40rem, calc(100vw - 2rem));
 	max-height: calc(100dvh - 2rem);
 	overflow-y: auto;
-	box-shadow: 0 24px 60px -16px rgb(0 0 0 / 0.45);
 }
 .modal.wide { width: min(44rem, calc(100vw - 2rem)); }
-.modal::backdrop { background: rgb(20 20 19 / 0.45); backdrop-filter: blur(2px); }
+.modal::backdrop { background: rgb(18 23 28 / 0.5); }
 .modal[open] { animation: rise 0.16s ease-out; }
 @keyframes rise { from { opacity: 0; transform: translateY(6px); } }
 
+/* A preview is gamboge, and drawn dashed: nothing has happened yet. Its label is the dialog's
+   running head, with "Sub-Sub" opposite, as on the website's plates. */
 .modal-kicker {
-	margin: 0 0 0.3rem;
-	font-size: 0.7rem;
-	font-weight: 600;
+	display: flex;
+	justify-content: space-between;
+	margin: 0 0 0.9rem;
+	padding-bottom: 0.25rem;
+	border-bottom: 1px dashed var(--warn);
+	font-family: var(--serif);
+	font-size: 1rem;
+	font-variant-caps: all-small-caps;
 	letter-spacing: 0.08em;
-	text-transform: uppercase;
-	color: var(--accent);
+	color: var(--warn);
 }
+.modal-kicker::after { content: "Sub-Sub"; color: var(--muted); }
 .modal-kicker:empty { display: none; }
-.modal h2 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; margin: 0 0 0.3rem; overflow-wrap: anywhere; }
-.modal h3 { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin: 1.4rem 0 0.5rem; }
+.modal h2 { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; line-height: 1.3; margin: 0 0 0.3rem; overflow-wrap: anywhere; }
+.modal h3 { font-family: var(--serif); font-size: 0.98rem; font-weight: 400; font-variant-caps: all-small-caps; letter-spacing: 0.08em; color: var(--muted); margin: 1.4rem 0 0.5rem; }
 .modal .hint { color: var(--muted); margin: 0 0 1rem; font-size: 0.88rem; }
 
 .preview {
@@ -784,16 +803,17 @@ body > p.empty { text-align: center; color: var(--muted); padding: 30vh 1rem 0;
 	white-space: pre-wrap;
 	overflow-wrap: anywhere;
 	background: var(--bg);
-	border: 1px solid var(--rule);
-	border-radius: var(--radius);
+	border: 1px dashed var(--warn);
+	border-radius: 0;
 	padding: 0.8rem 0.95rem;
 	max-height: 55vh;
 	overflow-y: auto;
 	margin: 0 0 1.1rem;
 }
-.preview .add, .preview .rem { border-radius: 3px; padding: 0.1em 0.3em; }
+.preview .add, .preview .rem { padding: 0.1em 0.3em; }
 .preview .add { color: var(--add); background: var(--add-soft); }
-.preview .rem { color: var(--rem); background: var(--rem-soft); }
+.preview .rem { color: var(--muted); background: none; text-decoration: line-through; text-decoration-thickness: 1px; }
+/* A removal is struck through: madder stays the Librarian's colour. */
 
 .modal-buttons { display: flex; justify-content: flex-end; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; }
 .modal-buttons button { min-width: 5.5rem; }
@@ -846,7 +866,7 @@ body > p.empty { text-align: center; color: var(--muted); padding: 30vh 1rem 0;
 .models button { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; }
 .models .needs-key { opacity: 0.65; }
 .models .model-name { min-width: 0; overflow-wrap: anywhere; }
-.models .model-tag { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; color: var(--accent); border: 1px solid currentColor; border-radius: 999px; padding: 0 0.45rem; }
+.models .model-tag { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; color: var(--accent); border: 1px solid currentColor; padding: 0 0.45rem; }
 .models .model-why { font-family: var(--sans); font-size: 0.75rem; color: var(--muted); }
 
 /* ---------------------------------------------------------------- narrow screens */
@@ -873,7 +893,7 @@ body > p.empty { text-align: center; color: var(--muted); padding: 30vh 1rem 0;
 
 .items { list-style: none; margin: 0; padding: 0; max-height: 18rem; overflow-y: auto; }
 .items:empty { display: none; }
-.items > li { padding: 0.4rem 0.5rem; border-radius: 5px; }
+.items > li { padding: 0.4rem 0.5rem; }
 .items > li:hover { background: var(--bg); }
 .items > li.muted { font-size: 0.82rem; }
 .item-title { font-size: 0.86rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@@ -883,7 +903,7 @@ body > p.empty { text-align: center; color: var(--muted); padding: 30vh 1rem 0;
 .item-actions button:hover, .item-actions a:hover { text-decoration: underline; text-underline-offset: 0.18em; }
 
 .sessions li { position: relative; }
-.session-tools { position: absolute; top: 0.3rem; right: 0.3rem; display: none; gap: 0.3rem; background: var(--raised); border-radius: 4px; }
+.session-tools { position: absolute; top: 0.3rem; right: 0.3rem; display: none; gap: 0.3rem; background: var(--raised); }
 .sessions li:hover .session-tools, .sessions li:focus-within .session-tools { display: flex; }
 /* No hover on a touch screen: the buttons stay under the conversation. */
 @media (hover: none) { .session-tools { display: flex; position: static; justify-content: flex-end; background: none; } }
@@ -902,14 +922,26 @@ body > p.empty { text-align: center; color: var(--muted); padding: 30vh 1rem 0;
 }
 .note-pane[hidden] { display: none; }
 .note-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--rule); }
-.note-name { flex: 1; min-width: 0; font-size: 0.84rem; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.note-name { flex: 1; min-width: 0; font-family: var(--mono); font-size: 0.8rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .note-pane > .search { margin: 0.6rem 0.9rem 0; width: auto; }
 .note-body { flex: 1; overflow-y: auto; padding: 0.9rem 1.1rem 1.5rem; }
 .note-body .front { font-size: 0.74rem; color: var(--muted); margin: 0 0 1rem; }
+/* What a note was written from, drawn by line: solid for the full text, dashed for the abstract,
+   dotted for the metadata. The same lines as on the website's Plate II. */
+.evidence { margin: 0 0 0.6rem; font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }
+.evidence span { color: var(--text); padding-bottom: 2px; border-bottom: 2px solid var(--rule-strong); }
+.evidence.ev-full span { border-bottom-style: solid; border-color: var(--add); }
+.evidence.ev-abstract span { border-bottom-style: dashed; border-color: var(--warn); }
+.evidence.ev-meta span { border-bottom-style: dotted; border-color: var(--muted); }
+/* Reading mode: larger type, wider lines and spacing, a shorter measure. */
+.note-pane.reading .note-body { padding: 1.4rem 1.6rem 2.5rem; }
+.note-pane.reading .note-body .md { font-size: 1.2rem; line-height: 1.9; word-spacing: 0.06em; max-width: 36rem; }
+.note-pane.reading .note-body .md p, .note-pane.reading .note-body .md li { margin-block: 0.9rem; }
+#note-read[aria-pressed="true"] { color: var(--accent); text-decoration: underline; }
 .note-body .front summary { cursor: pointer; }
 .note-body .front pre { background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.5rem 0.7rem; margin: 0.4rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
 .note-list { list-style: none; margin: 0; padding: 0; }
-.note-list button { width: 100%; text-align: left; padding: 0.4rem 0.5rem; border-radius: 5px; display: grid; gap: 0.1rem; }
+.note-list button { width: 100%; text-align: left; padding: 0.4rem 0.5rem; border-radius: 0; display: grid; gap: 0.1rem; }
 .note-list button:hover { background: var(--bg); }
 .note-list .rel { font-size: 0.84rem; overflow-wrap: anywhere; }
 .note-list .when { font-size: 0.72rem; color: var(--faint); }
@@ -930,7 +962,7 @@ a[data-note] { color: var(--accent); text-decoration: underline; text-decoration
 		width: min(19rem, 86vw);
 		transform: translateX(-100%);
 		transition: transform 0.2s ease;
-		box-shadow: var(--shadow);
+		border-right: 1px solid var(--text);
 	}
 	.side.open { transform: none; }
 	.app.note-open, .app.note-open.side-collapsed { grid-template-columns: minmax(0, 1fr); }
@@ -955,12 +987,12 @@ a[data-note] { color: var(--accent); text-decoration: underline; text-decoration
 }
 
 /* First run: what is still missing */
-.setup { margin-block: 1.4rem 1rem; padding: 0.9rem 1rem; border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 6px; background: var(--raised); text-align: left; max-width: 40rem; }
-.setup h2 { margin: 0 0 0.5rem; font-size: 0.95rem; }
+.setup { margin-block: 1.4rem 1rem; padding: 0.9rem 1rem; border: 1px solid var(--rule-strong); border-top: 2px solid var(--accent); background: var(--raised); text-align: left; max-width: 40rem; }
+.setup h2 { margin: 0 0 0.5rem; font-family: var(--serif); font-size: 1.02rem; }
 .setup ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
 .setup li { display: grid; grid-template-columns: 4.5rem 1fr auto; gap: 0.6rem; align-items: start; font-size: 0.88rem; line-height: 1.45; }
 .setup li > * { min-width: 0; }
-.setup .mark { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; padding-top: 0.15rem; color: var(--muted); }
-.setup li.todo .mark { color: var(--rem); }
+.setup .mark { font-family: var(--serif); font-size: 0.95rem; font-variant-caps: all-small-caps; letter-spacing: 0.07em; color: var(--muted); }
+.setup li.todo .mark { color: var(--warn); }
 .setup li.ok .step-text { color: var(--muted); }
 @media (max-width: 560px) { .setup li { grid-template-columns: 1fr; gap: 0.2rem; } }

package/web/app.js

@@ -429,6 +429,7 @@ async function showNoteList() {
 	$("note-name").textContent = t("notes");
 	$("note-back").hidden = true;
 	$("note-app").hidden = true;
+	$("note-read").hidden = true;
 	$("note-filter").hidden = false;
 	showPane(true);
 	try {
@@ -461,7 +462,15 @@ async function openNote(path) {
 	noteDir = "";
 	attachCopyButtons(content);
 	attachTableButtons(content, data.name.replace(/\.md$/i, ""));
-	$("note-body").replaceChildren(front ? el("details", { class: "front" }, el("summary", { text: t("properties") }), el("pre", { text: front[1] })) : "", content);
+	// The evidence line: what the note was written from, drawn solid, dashed or dotted.
+	const evidence = front && /^evidence:\s*(.+?)\s*$/m.exec(front[1])?.[1];
+	const kind = evidence && (/full/i.test(evidence) ? "ev-full" : /abstract/i.test(evidence) ? "ev-abstract" : /metadata/i.test(evidence) ? "ev-meta" : "");
+	$("note-body").replaceChildren(
+		evidence ? el("p", { class: `evidence ${kind}` }, "evidence: ", el("span", { text: evidence })) : "",
+		front ? el("details", { class: "front" }, el("summary", { text: t("properties") }), el("pre", { text: front[1] })) : "",
+		content,
+	);
+	$("note-read").hidden = false;
 	$("note-body").scrollTop = 0;
 	showPane(true);
 }
@@ -1513,6 +1522,14 @@ $("library-search").addEventListener("input", searchLibrary);
 $("notes-btn").addEventListener("click", () => ($("note-pane").hidden ? showNoteList() : showPane(false)));
 $("note-back").addEventListener("click", showNoteList);
 $("note-close").addEventListener("click", () => showPane(false));
+// Reading mode for notes: larger type and wider spacing, remembered on this computer.
+function setReading(on) {
+	$("note-pane").classList.toggle("reading", on);
+	$("note-read").setAttribute("aria-pressed", String(on));
+	localStorage.setItem("subsub-reading", String(on));
+}
+$("note-read").addEventListener("click", () => setReading(!$("note-pane").classList.contains("reading")));
+setReading(localStorage.getItem("subsub-reading") === "true");
 $("note-app").addEventListener("click", () => noteShown && api("/api/open", { path: noteShown.path }).catch((err) => note(err.message, "warning")));
 $("note-filter").addEventListener("input", renderNoteList);
 $("note-pane").addEventListener("keydown", (e) => {

package/web/i18n.js

@@ -109,6 +109,8 @@ export const STRINGS = {
 		notesHint: "The notes in your Sub-Sub folder",
 		allNotes: "All notes",
 		properties: "Properties",
+		readingMode: "Reading mode",
+		readingModeHint: "Larger type and wider line spacing for the note",
 		downloadCsv: "Download CSV",
 		filterNotes: "Filter notes",
 		noNotes: "No notes yet.",
@@ -249,6 +251,8 @@ export const STRINGS = {
 		notesHint: "As notas da sua pasta do Sub-Sub",
 		allNotes: "Todas as notas",
 		properties: "Propriedades",
+		readingMode: "Modo de leitura",
+		readingModeHint: "Letra maior e mais espaço entre linhas na nota",
 		downloadCsv: "Transferir CSV",
 		filterNotes: "Filtrar notas",
 		noNotes: "Ainda não há notas.",

package/web/icon.svg

@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-  <rect width="32" height="32" rx="7" fill="#1d4f7c"/>
-  <rect x="5.5" y="8" width="21" height="16" rx="1.5" fill="#f7f6f2"/>
-  <path d="M9 12.5h8M9 16h14" stroke="#1d4f7c" stroke-width="1.6" stroke-linecap="round"/>
-  <circle cx="16" cy="20.3" r="1.5" fill="#1d4f7c"/>
+  <rect width="32" height="32" rx="7" fill="#2c5d87"/>
+  <rect x="5.5" y="8" width="21" height="16" rx="1.5" fill="#f4f5f1"/>
+  <path d="M9 12.5h8M9 16h14" stroke="#2c5d87" stroke-width="1.6" stroke-linecap="round"/>
+  <circle cx="16" cy="20.3" r="1.5" fill="#2c5d87"/>
 </svg>

package/web/index.html

@@ -6,7 +6,7 @@
 	<meta name="color-scheme" content="light dark">
 	<title>Sub-Sub</title>
 	<link rel="icon" href="/icon.svg" type="image/svg+xml">
-	<link rel="preload" href="/fonts/IBMPlexSans.woff2" as="font" type="font/woff2" crossorigin>
+	<link rel="preload" href="/fonts/AtkinsonHyperlegibleNext.woff2" as="font" type="font/woff2" crossorigin>
 	<link rel="stylesheet" href="/app.css">
 	<script type="module" src="/app.js"></script>
 </head>
@@ -86,6 +86,7 @@
 			<div class="note-head">
 				<button type="button" class="link-btn" id="note-back" data-i18n="allNotes">All notes</button>
 				<span class="note-name" id="note-name"></span>
+				<button type="button" class="link-btn" id="note-read" aria-pressed="false" data-i18n="readingMode" data-i18n-title="readingModeHint" hidden>Reading mode</button>
 				<button type="button" class="link-btn" id="note-app" data-i18n="openInApp" hidden>Open in app</button>
 				<button type="button" class="link-btn" id="note-close" data-i18n="close">Close</button>
 			</div>