diff --git a/tonalmine/stylesheets/components.css b/tonalmine/stylesheets/components.css
index 31cea75..4bc2cfc 100644
--- a/tonalmine/stylesheets/components.css
+++ b/tonalmine/stylesheets/components.css
@@ -6,7 +6,7 @@
 
 /***** Buttons *****/
 input[type="submit"], input[type="button"], input[type="reset"], button[type="submit"] {
-  block-size: 40px;
+  block-size: calc(40px + var(--nm-density));
   padding-block: 0;
   padding-inline: 24px;
   margin-block: 4px;
@@ -51,8 +51,8 @@ input[type="submit"]:disabled, input[type="button"]:disabled, button:disabled {
 /***** Text fields (outlined) *****/
 input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="number"],
 input[type="date"], input[type="search"], input[type="tel"], input:not([type]), select, textarea {
-  min-block-size: 40px;
-  padding-block: 8px;
+  min-block-size: calc(40px + var(--nm-density));
+  padding-block: calc(8px + min(var(--nm-density), 0px) / 2);
   padding-inline: 12px;
   border: 1px solid var(--md-sys-color-outline);
   border-radius: var(--md-sys-shape-corner-extra-small);
@@ -104,7 +104,7 @@ input::placeholder, textarea::placeholder { color: var(--md-sys-color-outline);
 input[type="checkbox"], input[type="radio"] { accent-color: var(--md-sys-color-primary); }
 input[type="file"] { color: var(--md-sys-color-on-surface-variant); }
 input[type="file"]::file-selector-button {
-  block-size: 40px;
+  block-size: calc(40px + var(--nm-density));
   margin-inline-end: 12px;
   padding-inline: 24px;
   border: 0;
@@ -165,10 +165,10 @@ fieldset.collapsible > legend { display: flex; align-items: center; gap: 4px; }
 .tabular label { color: var(--md-sys-color-on-surface-variant); font-weight: 500; }
 .tabular p { padding-block: 4px; }
 /* Center the 24px label line on the 40px fields next to it */
-.tabular label:not(.floating):not(.block):not(.inline):not(.no-css) { padding-block-start: 8px; }
+.tabular label:not(.floating):not(.block):not(.inline):not(.no-css) { padding-block-start: calc(8px + var(--nm-density) / 2); }
 /* Checkboxes and radios placed directly in a row align with that label line too */
 /* Checkboxes and radios next to such a label align with its text line */
-.tabular p:has(> label:not(.floating):not(.block):not(.inline):not(.no-css)) > input:is([type="checkbox"], [type="radio"]) { margin-block: 13px 0; }
+.tabular p:has(> label:not(.floating):not(.block):not(.inline):not(.no-css)) > input:is([type="checkbox"], [type="radio"]) { margin-block: calc(13px + var(--nm-density) / 2) 0; }
 /* Rows without a field at the label's height start at the top: checkbox lists (watchers)
    and the issue description, whose editor stays hidden until "Edit" is clicked */
 .tabular p:is(:has(label.floating), :has(> #issue_description_and_toolbar[style*="none"])) > label:not(.floating):not(.block):not(.inline):not(.no-css) { padding-block-start: 0; }
@@ -251,7 +251,7 @@ div.flash.error svg.icon-svg, #errorExplanation svg.icon-svg,
 div.flash.notice svg.icon-svg, div.flash.warning svg.icon-svg, .conflict svg.icon-svg { stroke: currentColor; }
 
 /***** Secondary tabs (settings, history, admin) *****/
-#content .tabs { block-size: 48px; margin-block-end: 16px; }
+#content .tabs { block-size: calc(48px + var(--nm-density)); margin-block-end: 16px; }
 #content .tabs ul { padding-inline-start: 0; border-block-end: 1px solid var(--md-sys-color-outline-variant); }
 #content .tabs ul li { margin-inline-end: 0; margin-block-end: 0; }
 #content .tabs ul li a, #content .tabs ul li a:hover {
@@ -280,7 +280,7 @@ div.flash.notice svg.icon-svg, div.flash.warning svg.icon-svg, .conflict svg.ico
   justify-content: end;
   gap: 4px;
   inline-size: auto;
-  block-size: 48px;
+  block-size: calc(48px + var(--nm-density));
   padding-inline-start: 8px;
   box-sizing: border-box;
   background: var(--md-sys-color-surface);
@@ -292,8 +292,8 @@ div.flash.notice svg.icon-svg, div.flash.warning svg.icon-svg, .conflict svg.ico
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  inline-size: 40px;
-  block-size: 40px;
+  inline-size: calc(40px + var(--nm-density));
+  block-size: calc(40px + var(--nm-density));
   padding: 0;
   border: 0;
   border-radius: var(--md-sys-shape-corner-full);
@@ -335,8 +335,8 @@ span.pagination { margin-inline-start: 0; color: var(--md-sys-color-on-surface-v
   margin-inline-end: 4px;
   border: 0;
   border-radius: var(--md-sys-shape-corner-full);
-  line-height: 40px;
-  min-inline-size: 40px;
+  line-height: calc(40px + var(--nm-density));
+  min-inline-size: calc(40px + var(--nm-density));
 }
 .pagination ul.pages li a, .pagination ul.pages li span {
   display: block;
@@ -451,8 +451,8 @@ div.tooltip span.nm-tip .nm-tip__fields > span {
 .ui-dialog .ui-dialog-title { font: var(--md-sys-typescale-headline-small); }
 .ui-dialog .ui-dialog-content { padding-inline: 16px; }
 .ui-dialog .ui-dialog-titlebar-close {
-  inline-size: 40px;
-  block-size: 40px;
+  inline-size: calc(40px + var(--nm-density));
+  block-size: calc(40px + var(--nm-density));
   margin-block-start: -20px;
   border: 0;
   border-radius: var(--md-sys-shape-corner-full);
@@ -520,8 +520,8 @@ html .context-menu-selection svg.icon-svg { color: var(--md-sys-color-on-seconda
 html .jstElements { block-size: auto; padding-block-end: 4px; }
 html .jstElements button {
   position: relative;
-  inline-size: 32px;
-  block-size: 32px;
+  inline-size: calc(32px + var(--nm-density));
+  block-size: calc(32px + var(--nm-density));
   margin-inline-end: 0;
   padding: 0;
   border: 0;
@@ -577,7 +577,7 @@ html .table-generator td.selected-cell, html .table-generator td:hover { backgro
 .nm-segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-block-end: 12px; } /* equal segments */
 .nm-segmented button {
   border-radius: 0;
-  block-size: 32px;
+  block-size: calc(32px + var(--nm-density));
   padding-inline: 8px;
   border: 1px solid var(--md-sys-color-outline);
   background: transparent;
@@ -613,7 +613,7 @@ label.nm-swatch--custom { position: relative; inline-size: 28px; background: var
 /* Reset to default: M3 text button, shown once the user changed something */
 .nm-appearance__reset {
   margin-block-start: 12px;
-  block-size: 32px;
+  block-size: calc(32px + var(--nm-density));
   padding-inline: 12px;
   border: 0;
   border-radius: var(--md-sys-shape-corner-full);
@@ -628,8 +628,8 @@ label.nm-swatch--custom { position: relative; inline-size: 28px; background: var
 /* Each group is its own form row: 40px tall like the fields (M3 segmented button height), so
    the label lines up; the row padding spaces them */
 .nm-appearance--default .nm-segmented { margin: 0; }
-.nm-appearance--default .nm-segmented button { block-size: 40px; margin-block: 0; }
-.nm-appearance--default .nm-swatches { min-block-size: 40px; align-items: center; }
+.nm-appearance--default .nm-segmented button { block-size: calc(40px + var(--nm-density)); margin-block: 0; }
+.nm-appearance--default .nm-swatches { min-block-size: calc(40px + var(--nm-density)); align-items: center; }
 /* The custom swatch is a <label class="no-css">; also undo .tabular.settings label margins and mobile full width */
 html .tabular label.nm-swatch--custom { display: block; margin: 0; inline-size: 28px; }
 html .flyout-menu .nm-appearance { padding-inline: 16px; }
diff --git a/tonalmine/stylesheets/layout.css b/tonalmine/stylesheets/layout.css
index 5e36aab..c8f7c5c 100644
--- a/tonalmine/stylesheets/layout.css
+++ b/tonalmine/stylesheets/layout.css
@@ -68,7 +68,7 @@ body.has-main-menu #header { padding-block-end: 48px; }
 #quick-search { min-block-size: 3rem; color: var(--md-sys-color-on-surface-variant); }
 #quick-search #q {
   inline-size: 220px;
-  block-size: 40px;
+  block-size: calc(40px + var(--nm-density));
   padding-inline: 16px;
   border: 0;
   border-radius: var(--md-sys-shape-corner-full);
@@ -81,14 +81,14 @@ body.has-main-menu #header { padding-block-end: 48px; }
 
 #project-jump.drdn { margin-inline-start: 8px; }
 #project-jump .drdn-trigger {
-  block-size: 40px;
+  block-size: calc(40px + var(--nm-density));
   padding-inline: 16px 36px;
   border: 1px solid var(--md-sys-color-outline-variant);
   border-radius: var(--md-sys-shape-corner-full);
   background-color: transparent;
   color: var(--md-sys-color-on-surface);
   font: var(--md-sys-typescale-label-large);
-  line-height: 38px;
+  line-height: calc(38px + var(--nm-density));
 }
 #project-jump .drdn-trigger:hover { background-image: var(--nm-state-hover); }
 
@@ -99,7 +99,7 @@ body.has-main-menu #header { padding-block-end: 48px; }
   padding-block: 0;
   padding-inline: 16px;
 }
-#main-menu ul { min-block-size: 48px; }
+#main-menu ul { min-block-size: calc(48px + var(--nm-density)); }
 #main-menu li a {
   position: relative;
   color: var(--md-sys-color-on-surface-variant);
@@ -136,8 +136,8 @@ body.has-main-menu #header { padding-block-end: 48px; }
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  inline-size: 40px;
-  block-size: 40px;
+  inline-size: calc(40px + var(--nm-density));
+  block-size: calc(40px + var(--nm-density));
   padding: 0;
   margin-block: 0;
   border: 0;
@@ -158,7 +158,7 @@ body.has-main-menu #header { padding-block-end: 48px; }
   align-items: center;
   gap: 4px;
   inline-size: auto;
-  block-size: 48px;
+  block-size: calc(48px + var(--nm-density));
   inset-inline-end: 0;
   padding-inline: 8px;
   border: 0;
@@ -290,7 +290,7 @@ div + .drdn-items, .dropdown-divider, #account .dropdown-content .logout { borde
   display: flex;
   align-items: center;
   gap: 12px;
-  min-block-size: 32px;
+  min-block-size: calc(32px + var(--nm-density));
 }
 #sidebar :is(li, form > p) > label:has(input[type="checkbox"]) { flex: 1; }
 #sidebar input[type="checkbox"] { inline-size: 18px; block-size: 18px; margin: 0; flex-shrink: 0; }
@@ -302,7 +302,7 @@ div + .drdn-items, .dropdown-divider, #account .dropdown-content .logout { borde
 #sidebar li > a:is(:only-child, .query), #admin-menu li a {
   display: flex;
   align-items: center;
-  min-block-size: 36px;
+  min-block-size: calc(36px + var(--nm-density));
   padding-block: 8px; /* long names wrap: keep the items apart */
   padding-inline: 12px;
   box-sizing: border-box;
@@ -345,4 +345,4 @@ div + .drdn-items, .dropdown-divider, #account .dropdown-content .logout { borde
   border-radius: var(--md-sys-shape-corner-extra-large);
 }
 #login-form label { font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-on-surface-variant); }
-#login-form input { block-size: 40px; }
+#login-form input { block-size: calc(40px + var(--nm-density)); }
diff --git a/tonalmine/stylesheets/mobile.css b/tonalmine/stylesheets/mobile.css
index 71cc620..7b71b3f 100644
--- a/tonalmine/stylesheets/mobile.css
+++ b/tonalmine/stylesheets/mobile.css
@@ -12,7 +12,7 @@
     border: 0;
     color: var(--md-sys-color-on-surface);
     font: var(--md-sys-typescale-title-large);
-    line-height: 50px;
+    line-height: calc(50px + var(--nm-density));
   }
   html #project-jump.drdn { padding-inline-start: 8px; }
   /* Header icons: Material Symbols masks instead of core's scaled "^" and "≡" text glyphs */
@@ -29,8 +29,8 @@
     mask: url(../images/arrow-drop-down.svg) center / 24px no-repeat;
   }
   html #header a.mobile-toggle-button {
-    inline-size: 48px;
-    block-size: 48px;
+    inline-size: calc(48px + var(--nm-density));
+    block-size: calc(48px + var(--nm-density));
     margin-block-start: 8px;
     margin-inline-end: 8px;
     border-radius: var(--md-sys-shape-corner-full);
@@ -107,19 +107,19 @@
     font: var(--md-sys-typescale-label-large);
   }
   html .flyout-menu__sidebar p > :is(select, input:not([type="submit"], [type="checkbox"], [type="radio"])) { inline-size: 100%; box-sizing: border-box; }
-  html .flyout-menu__sidebar li:has(> input[type="checkbox"]) { display: flex; align-items: center; gap: 12px; min-block-size: 40px; border: 0; }
+  html .flyout-menu__sidebar li:has(> input[type="checkbox"]) { display: flex; align-items: center; gap: 12px; min-block-size: calc(40px + var(--nm-density)); border: 0; }
   html .flyout-menu .flyout-menu__sidebar li:has(> input[type="checkbox"]) a { block-size: auto; padding: 0; line-height: inherit; }
   html .flyout-menu h4 { color: var(--md-sys-color-on-surface); }
   html .flyout-menu a { color: var(--md-sys-color-on-surface-variant); }
   html .flyout-menu ul li a, html .flyout-menu ul li:first-child a {
-    block-size: 48px;
+    block-size: calc(48px + var(--nm-density));
     line-height: 48px;
     margin-inline-start: 0;
     padding-inline: 16px;
     border: 0;
     border-radius: var(--md-sys-shape-corner-full);
     font: var(--md-sys-typescale-label-large);
-    line-height: 48px;
+    line-height: calc(48px + var(--nm-density));
   }
   html .flyout-menu ul li a:hover { background-image: var(--nm-state-hover); }
   html .flyout-menu ul li a.selected {
@@ -129,7 +129,7 @@
   html .flyout-menu #watchers ul li, html .flyout-menu ul.queries li, html .flyout-menu__avatar { border-block-start: 0; }
   html .flyout-menu .icon svg, html .flyout-menu .icon-only svg { color: inherit; stroke: currentColor; }
   html .flyout-menu__search input[type='text'] {
-    block-size: 48px;
+    block-size: calc(48px + var(--nm-density));
     border-radius: var(--md-sys-shape-corner-full);
     background-color: var(--md-sys-color-surface-container-highest);
     color: var(--md-sys-color-on-surface);
diff --git a/tonalmine/stylesheets/tables.css b/tonalmine/stylesheets/tables.css
index 66c9af3..0be96c6 100644
--- a/tonalmine/stylesheets/tables.css
+++ b/tonalmine/stylesheets/tables.css
@@ -29,13 +29,13 @@ table.list th, .table-list-header {
   color: var(--md-sys-color-on-surface-variant);
   font: var(--md-sys-typescale-title-small);
   letter-spacing: var(--md-sys-typescale-title-small-tracking);
-  padding-block: 10px;
+  padding-block: calc(10px + var(--nm-density) / 2);
   padding-inline: 8px;
   border-block-end: 1px solid var(--md-sys-color-outline-variant);
 }
 table.list th a, table.list th a:link, table.list th a:visited { color: var(--md-sys-color-on-surface-variant); }
 table.list td {
-  block-size: 40px;
+  block-size: calc(40px + var(--nm-density));
   padding-block: 4px;
   padding-inline: 8px;
   border-block-start: 1px solid var(--md-sys-color-outline-variant);
diff --git a/tonalmine/stylesheets/tokens.css b/tonalmine/stylesheets/tokens.css
index cdd27e4..9f5160c 100644
--- a/tonalmine/stylesheets/tokens.css
+++ b/tonalmine/stylesheets/tokens.css
@@ -71,4 +71,11 @@
   --md-sys-elevation-level3: 0 1px 3px rgb(0 0 0 / 30%), 0 4px 8px 3px rgb(0 0 0 / 15%);
   --md-sys-elevation-level4: 0 2px 3px rgb(0 0 0 / 30%), 0 6px 10px 4px rgb(0 0 0 / 15%);
   --md-sys-elevation-level5: 0 4px 4px rgb(0 0 0 / 30%), 0 8px 12px 6px rgb(0 0 0 / 15%);
+
+  /* Size mode (theme.js sets data-size): added to control heights, e.g. calc(40px + var(--nm-density)) */
+  --nm-density: 0px;
 }
+
+/* Text is in rem, so the root size scales it; percent keeps the browser's font setting */
+:root[data-size="compact"] { font-size: 92.857%; --nm-density: -8px; } /* 13px body, M3 density -2 */
+:root[data-size="large"] { font-size: 114.286%; --nm-density: 8px; } /* 16px body */