Pi Web fork: Settings switches centred in the pixels (no knob shadow, whole-pixel rows)

piweb/hf-design.patch

@@ -5888,7 +5888,7 @@ index 79c8282..97731f1 100644
      lang: "en",
      icons: [
 diff --git a/app/settings.css b/app/settings.css
-index 0bf21eb..ef0584d 100644
+index 0bf21eb..f8d9a86 100644
 --- a/app/settings.css
 +++ b/app/settings.css
 @@ -35,14 +35,15 @@
@@ -6399,7 +6399,7 @@ index 0bf21eb..ef0584d 100644
    outline-offset: 2px;
  }
  
-@@ -1248,33 +1273,39 @@
+@@ -1248,33 +1273,41 @@
    margin-left: auto;
  }
  
@@ -6407,7 +6407,9 @@ index 0bf21eb..ef0584d 100644
 +   track's height less 2px all round, so it sits centred in both states, and it
 +   travels the track's width less its height. Off, a muted knob on a quiet
 +   track; on, the ink-filled track with the page's colour for the knob (the
-+   accent is neutral, so a white knob would vanish on it in dark). */
++   accent is neutral, so a white knob would vanish on it in dark). The knob
++   casts no shadow: a shadow 1px below merged with the dark knob in light and
++   made it read low, though its box was centred. */
  .config-switch {
 +  --switch-h: 18px;
 +  --switch-w: 32px;
@@ -6451,7 +6453,7 @@ index 0bf21eb..ef0584d 100644
  .config-switch::before {
    content: "";
    position: absolute;
-@@ -1283,7 +1314,7 @@
+@@ -1283,7 +1316,7 @@
  
  .config-switch:disabled {
    cursor: default;
@@ -6460,7 +6462,7 @@ index 0bf21eb..ef0584d 100644
  }
  
  .config-switch.is-loading:disabled {
-@@ -1294,42 +1325,39 @@
+@@ -1294,42 +1327,38 @@
    position: absolute;
    top: 2px;
    left: 2px;
@@ -6471,7 +6473,6 @@ index 0bf21eb..ef0584d 100644
    border-radius: 50%;
    background: var(--text-muted);
 -  transition: transform 0.15s, background 0.15s;
-+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
 +  transition: transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1), background-color 0.15s ease;
  }
  
@@ -6518,7 +6519,7 @@ index 0bf21eb..ef0584d 100644
  }
  
  .config-list-action-button {
-@@ -1342,7 +1370,7 @@
+@@ -1342,7 +1371,7 @@
    min-height: 30px;
    padding: 0 8px;
    border: 0;
@@ -6527,7 +6528,7 @@ index 0bf21eb..ef0584d 100644
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
-@@ -1358,7 +1386,7 @@
+@@ -1358,7 +1387,7 @@
  
  .config-list-action-button[aria-current="page"] {
    background: var(--bg-selected);
@@ -6536,7 +6537,7 @@ index 0bf21eb..ef0584d 100644
  }
  
  .config-list-action-button:disabled {
-@@ -1382,6 +1410,14 @@
+@@ -1382,6 +1411,14 @@
    opacity: 0.7;
  }
  
@@ -6551,7 +6552,7 @@ index 0bf21eb..ef0584d 100644
  .settings-dialog-backdrop {
    position: fixed;
    inset: 0;
-@@ -1389,7 +1425,7 @@
+@@ -1389,7 +1426,7 @@
    display: flex;
    align-items: center;
    justify-content: center;
@@ -6560,7 +6561,7 @@ index 0bf21eb..ef0584d 100644
  }
  
  /* Focus moves to the dialog itself when Settings opens (tabIndex -1); it is not a control, so no ring. */
-@@ -1398,109 +1434,114 @@
+@@ -1398,109 +1435,114 @@
  }
  
  .settings-dialog-surface {
@@ -6741,7 +6742,7 @@ index 0bf21eb..ef0584d 100644
  }
  
  .settings-section-icon {
-@@ -1511,14 +1552,66 @@
+@@ -1511,14 +1553,66 @@
    transform: scale(1.25);
  }
  
@@ -6812,7 +6813,7 @@ index 0bf21eb..ef0584d 100644
  }
  
  .settings-dialog-main {
-@@ -1537,336 +1630,513 @@
+@@ -1537,136 +1631,197 @@
    min-height: 0;
  }
  
@@ -6868,11 +6869,14 @@ index 0bf21eb..ef0584d 100644
 +  color: var(--text-strong);
 +  font-size: 14px;
 +  font-weight: 600;
-+  line-height: 1.4;
++  line-height: 20px;
  }
  
 -.settings-general-description {
 -  margin: 0 0 12px;
++/* Line heights here are whole pixels (not 1.4 × 13px = 18.2px), and so are the
++   theme cards: the rows below them, and their switches, then sit on whole
++   pixels, so the knob's and the track's edges render alike. */
 +.config-group-description {
 +  max-width: 520px;
 +  margin: 4px 0 0;
@@ -6880,7 +6884,7 @@ index 0bf21eb..ef0584d 100644
 -  font-size: 11px;
 -  line-height: 1.5;
 +  font-size: 13px;
-+  line-height: 1.45;
++  line-height: 18px;
  }
  
 -/* A note on the options above it, not an introduction to them. */
@@ -6919,76 +6923,65 @@ index 0bf21eb..ef0584d 100644
 -  cursor: pointer;
 -  font-size: 12px;
 -  font-weight: 400;
--}
--
++  padding: 12px 0;
+ }
+ 
 -.settings-theme-option:has(input:checked) {
 -  background: var(--bg-selected);
 -  color: var(--accent);
 -  font-weight: 600;
-+  padding: 12px 0;
- }
- 
--.settings-theme-option:not(:has(input:checked)):hover {
--  background: var(--bg-hover);
--}
--
--.settings-theme-option:has(input:focus-visible) {
--  outline: 2px solid var(--accent);
--  outline-offset: 1px;
++/* The divider takes its pixel from the padding, so the content box stays even
++   and what is centred in it lands on a whole pixel. */
 +.config-row + .config-row {
++  padding-top: 11px;
 +  border-top: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
  }
  
--.settings-theme-option-label {
+-.settings-theme-option:not(:has(input:checked)):hover {
+-  background: var(--bg-hover);
 +.config-row-text {
 +  display: flex;
 +  flex: 1 1 auto;
 +  flex-direction: column;
 +  gap: 4px;
-   min-width: 0;
--  overflow-wrap: anywhere;
--}
--
--.settings-font-rows {
--  display: grid;
--  grid-template-columns: max-content minmax(0, 1fr) auto 28px;
--  gap: 12px 8px;
++  min-width: 0;
  }
  
--.settings-font-rows > .settings-font-row {
--  display: grid;
--  grid-column: 1 / -1;
--  grid-template-columns: max-content minmax(0, 1fr) auto 28px;
--  grid-template-columns: subgrid;
--  row-gap: 0;
+-.settings-theme-option:has(input:focus-visible) {
+-  outline: 2px solid var(--accent);
+-  outline-offset: 1px;
 +.config-row-label {
 +  color: var(--text);
 +  font-size: 13px;
 +  font-weight: 400;
-+  line-height: 1.4;
++  line-height: 18px;
  }
  
--.settings-font-rows > .settings-font-row > input[type="range"] {
--  grid-column: 1 / -1;
+-.settings-theme-option-label {
+-  min-width: 0;
+-  overflow-wrap: anywhere;
 +label.config-row-label {
 +  cursor: pointer;
  }
  
--.settings-chat-range-header.settings-font-header {
--  grid-column: 1 / -1;
+-.settings-font-rows {
+-  display: grid;
 -  grid-template-columns: max-content minmax(0, 1fr) auto 28px;
--  grid-template-columns: subgrid;
+-  gap: 12px 8px;
 +.config-row-description {
 +  max-width: 420px;
 +  margin: 0;
 +  color: var(--text-dim);
 +  font-size: 13px;
-+  line-height: 1.45;
++  line-height: 18px;
  }
  
--.settings-chat-range-header.settings-font-header label {
--  padding-right: 4px;
--}
+-.settings-font-rows > .settings-font-row {
+-  display: grid;
+-  grid-column: 1 / -1;
+-  grid-template-columns: max-content minmax(0, 1fr) auto 28px;
+-  grid-template-columns: subgrid;
+-  row-gap: 0;
 +.config-row-control {
 +  display: flex;
 +  flex-shrink: 0;
@@ -6996,35 +6989,20 @@ index 0bf21eb..ef0584d 100644
 +  justify-content: flex-end;
 +  gap: 8px;
 +  min-width: 0;
-+}
+ }
  
--/* Drawn in the font it names: the live preview. */
--.settings-chat-range-option .settings-font-input {
--  height: 26px;
--  margin: 0;
--  padding: 0 8px;
--  border: 1px solid var(--border);
--  border-radius: 5px;
--  background: var(--bg);
--  color: var(--text);
--  font-family: var(--font-ui);
--  font-weight: var(--font-ui-weight);
--  font-size: 12px;
+-.settings-font-rows > .settings-font-row > input[type="range"] {
+-  grid-column: 1 / -1;
 +.config-row.is-stacked {
 +  flex-direction: column;
 +  align-items: stretch;
 +  gap: 10px;
- }
- 
--.settings-chat-range-option .settings-font-input.is-mono {
--  font-family: var(--font-mono);
--  font-weight: var(--font-mono-weight);
++}
++
 +.config-row.is-stacked > .config-row-control {
 +  justify-content: flex-start;
- }
- 
--.settings-font-input::placeholder {
--  color: var(--text-dim);
++}
++
 +/* Sliders and the font fields share one column: field or slider, value, reset. */
 +.settings-range-row > .config-row-control,
 +.settings-font-row > .config-row-control {
@@ -7033,125 +7011,106 @@ index 0bf21eb..ef0584d 100644
 +  align-items: center;
 +  gap: 6px 4px;
 +  width: 300px;
- }
- 
--.settings-font-input:focus-visible {
--  outline: 2px solid var(--accent);
--  outline-offset: 1px;
++}
++
 +.settings-range-row > .config-row-control > input[type="range"] {
 +  grid-column: 1;
- }
- 
--@media (max-width: 640px) {
--  /* Phones get 16px form text (no focus zoom), so the name field needs the height. */
--  .settings-chat-range-option .settings-font-input {
--    height: 32px;
--  }
++}
++
 +.settings-font-row > .config-row-control > .settings-font-input {
 +  grid-column: 1 / 3;
- }
- 
--.settings-chat-options {
--  display: flex;
--  flex-direction: column;
--  gap: 12px;
--  width: 100%;
--  max-width: 420px;
++}
++
 +.settings-font-row > .config-row-control > input[type="range"] {
 +  grid-column: 1;
- }
- 
--.settings-chat-option {
--  width: 100%;
--  color: var(--text);
-+.settings-font-row {
-+  align-items: flex-start;
 +}
 +
++.settings-font-row {
++  align-items: flex-start;
+ }
+ 
+-.settings-chat-range-header.settings-font-header {
+-  grid-column: 1 / -1;
+-  grid-template-columns: max-content minmax(0, 1fr) auto 28px;
+-  grid-template-columns: subgrid;
 +.settings-font-row > .config-row-text {
 +  padding-top: 7px;
-+}
-+
+ }
+ 
+-.settings-chat-range-header.settings-font-header label {
+-  padding-right: 4px;
 +.settings-range-value {
 +  color: var(--text-muted);
 +  font-family: var(--font-ui);
-   font-size: 12px;
++  font-size: 12px;
 +  font-variant-numeric: tabular-nums;
 +  text-align: right;
- }
- 
--.settings-chat-switch-option {
--  display: flex;
--  align-items: center;
--  justify-content: space-between;
--  gap: 16px;
--  min-height: 28px;
++}
++
 +.config-row-control input[type="range"] {
 +  display: block;
 +  width: 100%;
 +  min-width: 0;
 +  margin: 0;
 +  accent-color: var(--text-strong);
- }
- 
--.settings-chat-range-option {
++}
++
 +.settings-chat-reset {
 +  width: 28px;
 +  height: 28px;
-   padding: 0;
++  padding: 0;
  }
  
--.settings-chat-range-header {
--  display: grid;
--  grid-template-columns: minmax(0, 1fr) auto 28px;
--  align-items: center;
--  gap: 8px;
-+/* Drawn in the font it names: the live preview. */
+ /* Drawn in the font it names: the live preview. */
+-.settings-chat-range-option .settings-font-input {
+-  height: 26px;
 +.settings-font-input {
 +  width: 100%;
 +  min-width: 0;
 +  height: var(--size-control);
-+  margin: 0;
+   margin: 0;
+-  padding: 0 8px;
+-  border: 1px solid var(--border);
+-  border-radius: 5px;
+-  background: var(--bg);
 +  padding: 0 10px;
 +  border: 0;
 +  border-radius: var(--radius-md);
 +  background: var(--bg-surface);
-+  color: var(--text);
-+  font-family: var(--font-ui);
-+  font-weight: var(--font-ui-weight);
+   color: var(--text);
+   font-family: var(--font-ui);
+   font-weight: var(--font-ui-weight);
+-  font-size: 12px;
 +  font-size: 13px;
  }
  
--.settings-chat-range-header output {
--  color: var(--text-muted);
+-.settings-chat-range-option .settings-font-input.is-mono {
 +.settings-font-input.is-mono {
    font-family: var(--font-mono);
--  font-size: 11px;
-+  font-weight: var(--font-mono-weight);
+   font-weight: var(--font-mono-weight);
+ }
+@@ -1676,197 +1831,324 @@
  }
  
--.settings-send-mode-options {
--  display: flex;
-+.settings-font-input::placeholder {
-+  color: var(--text-dim);
-+}
-+
-+.settings-font-input:focus-visible {
+ .settings-font-input:focus-visible {
+-  outline: 2px solid var(--accent);
+-  outline-offset: 1px;
 +  outline: 1px solid var(--focus-line);
 +  outline-offset: -1px;
 +  box-shadow: var(--focus-glow);
-+}
-+
+ }
+ 
+-@media (max-width: 640px) {
+-  /* Phones get 16px form text (no focus zoom), so the name field needs the height. */
+-  .settings-chat-range-option .settings-font-input {
+-    height: 32px;
+-  }
 +/* ---------------------------------------------------------------- a segmented choice
 +   Claude's: 32px, options on a 5% track 1px in, the chosen one on the dialog's
 +   own surface with a 1px 10% ring inside (a fill a step up in dark). */
 +.config-segmented {
 +  display: inline-flex;
-   flex-shrink: 0;
--  gap: 3px;
--  padding: 3px;
--  border: 1px solid var(--border);
--  border-radius: 6px;
++  flex-shrink: 0;
 +  gap: 0;
 +  max-width: 100%;
 +  padding: 1px;
@@ -7159,43 +7118,46 @@ index 0bf21eb..ef0584d 100644
 +  background: color-mix(in srgb, var(--text) 5%, transparent);
  }
  
--.settings-send-mode-option {
-+.config-segmented-option {
-   position: relative;
+-.settings-chat-options {
 -  display: flex;
+-  flex-direction: column;
+-  gap: 12px;
+-  width: 100%;
+-  max-width: 420px;
++.config-segmented-option {
++  position: relative;
 +  display: inline-flex;
-   flex: 1 0 auto;
-   align-items: center;
-   justify-content: center;
--  min-height: 26px;
--  padding: 0 10px;
++  flex: 1 0 auto;
++  align-items: center;
++  justify-content: center;
 +  min-width: 0;
 +  height: 30px;
 +  padding: 0 12px;
-   border: 0;
--  border-radius: 4px;
++  border: 0;
 +  border-radius: calc(var(--radius-md) - 1px);
-   background: transparent;
-   color: var(--text-muted);
-   cursor: pointer;
--  font-size: 12px;
++  background: transparent;
++  color: var(--text-muted);
++  cursor: pointer;
 +  font: inherit;
 +  font-size: 13px;
-   font-weight: 400;
++  font-weight: 400;
 +  white-space: nowrap;
 +  transition: background-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
  }
  
--.settings-send-mode-option:has(input:checked) {
--  background: var(--bg-selected);
--  color: var(--accent);
--  font-weight: 600;
+-.settings-chat-option {
+-  width: 100%;
 +.config-segmented-option:hover {
-+  color: var(--text);
+   color: var(--text);
+-  font-size: 12px;
  }
  
--.settings-send-mode-option:not(:has(input:checked)):hover {
--  background: var(--bg-hover);
+-.settings-chat-switch-option {
+-  display: flex;
+-  align-items: center;
+-  justify-content: space-between;
+-  gap: 16px;
+-  min-height: 28px;
 +.config-segmented-option:has(input:checked),
 +.config-segmented-option[aria-checked="true"] {
 +  background: var(--bg-elevated);
@@ -7204,33 +7166,40 @@ index 0bf21eb..ef0584d 100644
 +  font-weight: 500;
  }
  
--.settings-send-mode-option:has(input:focus-visible) {
--  outline: 2px solid var(--accent);
--  outline-offset: 1px;
+-.settings-chat-range-option {
+-  padding: 0;
 +html.dark .config-segmented-option:has(input:checked),
 +html.dark .config-segmented-option[aria-checked="true"] {
 +  background: color-mix(in srgb, var(--text) 12%, transparent);
  }
  
--.settings-send-mode-label {
--  white-space: nowrap;
+-.settings-chat-range-header {
+-  display: grid;
+-  grid-template-columns: minmax(0, 1fr) auto 28px;
+-  align-items: center;
+-  gap: 8px;
 +.config-segmented-option:has(input:focus-visible) {
 +  outline: 1px solid var(--focus-line);
 +  outline-offset: -1px;
 +  box-shadow: var(--focus-glow);
  }
  
--.settings-chat-reset {
--  width: 28px;
--  height: 28px;
--  padding: 0;
+-.settings-chat-range-header output {
+-  color: var(--text-muted);
+-  font-family: var(--font-mono);
+-  font-size: 11px;
 +.config-segmented-label {
 +  overflow: hidden;
 +  text-overflow: ellipsis;
  }
  
--.settings-chat-range-option input {
--  display: block;
+-.settings-send-mode-options {
+-  display: flex;
+-  flex-shrink: 0;
+-  gap: 3px;
+-  padding: 3px;
+-  border: 1px solid var(--border);
+-  border-radius: 6px;
 +/* ---------------------------------------------------------------- theme cards
 +   Each card draws a small window in its theme's own tokens ([data-theme] scopes
 +   them), so the palette shows instead of being named; System halves Light and
@@ -7239,143 +7208,149 @@ index 0bf21eb..ef0584d 100644
 +  display: grid;
 +  grid-template-columns: repeat(6, minmax(0, 1fr));
 +  gap: 12px;
-   width: 100%;
--  margin-top: 2px;
--  accent-color: var(--accent);
++  width: 100%;
  }
  
--.settings-language-options {
+-.settings-send-mode-option {
 +.settings-theme-option {
-+  position: relative;
+   position: relative;
    display: flex;
-   flex-direction: column;
--  gap: 3px;
--  width: 100%;
--  max-width: 420px;
--}
--
--.settings-language-option {
--  display: flex;
+-  flex: 1 0 auto;
 -  align-items: center;
--  gap: 10px;
--  height: 44px;
+-  justify-content: center;
+-  min-height: 26px;
 -  padding: 0 10px;
 -  border: 0;
--  border-radius: 5px;
+-  border-radius: 4px;
 -  background: transparent;
--  color: var(--text);
++  flex-direction: column;
 +  align-items: stretch;
 +  gap: 7px;
 +  min-width: 0;
-+  color: var(--text-muted);
+   color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
--  text-align: left;
+-  font-weight: 400;
  }
  
--.settings-language-option[aria-checked="true"] {
+-.settings-send-mode-option:has(input:checked) {
 -  background: var(--bg-selected);
+-  color: var(--accent);
+-  font-weight: 600;
 +.settings-theme-preview {
 +  display: flex;
-+  aspect-ratio: 8 / 5;
++  height: 76px;
 +  overflow: hidden;
 +  border-radius: var(--radius-md);
 +  box-shadow: 0 0 0 1px var(--line);
 +  transition: box-shadow 0.12s ease;
  }
  
--.settings-language-option:not([aria-checked="true"]):hover,
--.settings-language-option:focus-visible {
+-.settings-send-mode-option:not(:has(input:checked)):hover {
 -  background: var(--bg-hover);
--  outline: none;
 +.settings-theme-option:hover .settings-theme-preview {
 +  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 30%, transparent);
  }
  
--.settings-language-radio {
--  display: grid;
--  flex-shrink: 0;
--  place-items: center;
--  width: 16px;
--  height: 16px;
--  border: 1px solid var(--border);
--  border-radius: 50%;
+-.settings-send-mode-option:has(input:focus-visible) {
+-  outline: 2px solid var(--accent);
+-  outline-offset: 1px;
 +.settings-theme-option:has(input:checked) {
 +  color: var(--text-strong);
 +  font-weight: 500;
  }
  
--.settings-language-option[aria-checked="true"] .settings-language-radio {
--  border-color: var(--accent);
+-.settings-send-mode-label {
+-  white-space: nowrap;
 +.settings-theme-option:has(input:checked) .settings-theme-preview {
 +  box-shadow: 0 0 0 1.5px var(--text-strong);
  }
  
--.settings-language-radio-dot {
--  width: 8px;
--  height: 8px;
--  border-radius: 50%;
--  background: var(--accent);
+-.settings-chat-reset {
+-  width: 28px;
+-  height: 28px;
+-  padding: 0;
 +.settings-theme-option-label {
 +  min-width: 0;
++  line-height: 16px;
 +  overflow-wrap: anywhere;
 +  text-align: center;
  }
  
--.settings-language-label {
+-.settings-chat-range-option input {
+-  display: block;
+-  width: 100%;
+-  margin-top: 2px;
+-  accent-color: var(--accent);
 +.settings-theme-preview-half {
 +  display: flex;
-   flex: 1;
++  flex: 1;
 +  min-width: 0;
 +  background: var(--bg);
  }
  
--.settings-language-code {
--  color: var(--text-dim);
--  font-family: var(--font-mono);
--  font-size: 10px;
+-.settings-language-options {
 +.settings-theme-preview-sidebar {
-+  display: flex;
+   display: flex;
 +  flex: 0 0 30%;
-+  flex-direction: column;
-+  gap: 3px;
+   flex-direction: column;
+   gap: 3px;
+-  width: 100%;
+-  max-width: 420px;
 +  padding: 7px 5px;
 +  background: var(--bg-panel);
-+}
-+
+ }
+ 
+-.settings-language-option {
+-  display: flex;
+-  align-items: center;
+-  gap: 10px;
+-  height: 44px;
+-  padding: 0 10px;
+-  border: 0;
+-  border-radius: 5px;
+-  background: transparent;
+-  color: var(--text);
+-  cursor: pointer;
+-  font-size: 12px;
+-  text-align: left;
 +.settings-theme-preview-half + .settings-theme-preview-half .settings-theme-preview-sidebar {
 +  display: none;
-+}
-+
+ }
+ 
+-.settings-language-option[aria-checked="true"] {
+-  background: var(--bg-selected);
 +.settings-theme-preview i {
 +  display: block;
 +  height: 3px;
 +  border-radius: 2px;
 +  background: color-mix(in srgb, var(--text) 22%, transparent);
-+}
-+
+ }
+ 
+-.settings-language-option:not([aria-checked="true"]):hover,
+-.settings-language-option:focus-visible {
+-  background: var(--bg-hover);
+-  outline: none;
 +.settings-theme-preview-sidebar i:first-child {
 +  background: color-mix(in srgb, var(--text) 40%, transparent);
  }
  
--.settings-shell-option {
+-.settings-language-radio {
+-  display: grid;
+-  flex-shrink: 0;
+-  place-items: center;
+-  width: 16px;
+-  height: 16px;
+-  border: 1px solid var(--border);
+-  border-radius: 50%;
 +.settings-theme-preview-sidebar i:nth-child(2) {
 +  width: 80%;
-+}
-+
+ }
+ 
+-.settings-language-option[aria-checked="true"] .settings-language-radio {
+-  border-color: var(--accent);
 +.settings-theme-preview-chat {
-   display: flex;
--  align-items: center;
--  justify-content: space-between;
--  gap: 16px;
--  width: 100%;
--  max-width: 420px;
--  min-height: 44px;
--  padding: 0 10px;
--  border-radius: 5px;
--  background: var(--bg-panel);
--  color: var(--text);
--  font-size: 12px;
++  display: flex;
 +  flex: 1;
 +  flex-direction: column;
 +  gap: 3px;
@@ -7383,10 +7358,11 @@ index 0bf21eb..ef0584d 100644
 +  padding: 7px 7px 6px;
  }
  
--.settings-general-error {
--  margin: 8px 0 0;
--  color: #ef4444;
--  font-size: 11px;
+-.settings-language-radio-dot {
+-  width: 8px;
+-  height: 8px;
+-  border-radius: 50%;
+-  background: var(--accent);
 +.settings-theme-preview-chat i.is-bubble {
 +  align-self: flex-end;
 +  width: 55%;
@@ -7394,20 +7370,40 @@ index 0bf21eb..ef0584d 100644
 +  margin-bottom: 2px;
 +  border-radius: 3px;
 +  background: var(--user-bg);
-+}
-+
+ }
+ 
+-.settings-language-label {
+-  flex: 1;
 +.settings-theme-preview-chat i.is-short {
 +  width: 60%;
-+}
-+
+ }
+ 
+-.settings-language-code {
+-  color: var(--text-dim);
+-  font-family: var(--font-mono);
+-  font-size: 10px;
 +.settings-theme-preview-chat i.is-composer {
 +  height: 9px;
 +  margin-top: auto;
 +  border-radius: 3px;
 +  background: var(--bg-surface);
 +  box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--text) 14%, transparent);
-+}
-+
+ }
+ 
+-.settings-shell-option {
+-  display: flex;
+-  align-items: center;
+-  justify-content: space-between;
+-  gap: 16px;
+-  width: 100%;
+-  max-width: 420px;
+-  min-height: 44px;
+-  padding: 0 10px;
+-  border-radius: 5px;
+-  background: var(--bg-panel);
+-  color: var(--text);
+-  font-size: 12px;
+-}
 +/* ---------------------------------------------------------------- phones
 +   The column and the page take turns, each across the dialog: the sections as
 +   a list with chevrons, then the page with a back button before its title.
@@ -7421,7 +7417,11 @@ index 0bf21eb..ef0584d 100644
 +    height: calc(100dvh - 12px);
 +    max-height: none;
 +  }
-+
+ 
+-.settings-general-error {
+-  margin: 8px 0 0;
+-  color: #ef4444;
+-  font-size: 11px;
 +  .settings-nav-column {
 +    flex: 1 1 auto;
 +    border-right: 0;
@@ -7499,6 +7499,10 @@ index 0bf21eb..ef0584d 100644
 +    padding: 12px 0;
 +  }
 +
++  .config-row + .config-row {
++    padding-top: 11px;
++  }
++
 +  .config-row-control {
 +    justify-content: flex-start;
 +  }
@@ -7541,7 +7545,7 @@ index 0bf21eb..ef0584d 100644
  }
  
  @media (max-width: 640px) {
-@@ -1887,13 +2157,13 @@
+@@ -1887,13 +2169,13 @@
      width: 100%;
      height: 190px;
      border-right: 0;
@@ -7557,7 +7561,7 @@ index 0bf21eb..ef0584d 100644
    }
  
    .agents-feature-actions {
-@@ -1905,29 +2175,6 @@
+@@ -1905,29 +2187,6 @@
      padding: 14px;
    }
  
@@ -7587,7 +7591,7 @@ index 0bf21eb..ef0584d 100644
  }
  
  @keyframes saved-pop {
-@@ -2066,7 +2313,7 @@
+@@ -2066,7 +2325,7 @@
    max-width: 100%;
    padding: 0 5px;
    border: 1px solid var(--border);
@@ -7596,7 +7600,7 @@ index 0bf21eb..ef0584d 100644
    background: var(--bg-panel);
    color: var(--text);
    font-family: var(--font-mono);
-@@ -2085,7 +2332,7 @@
+@@ -2085,7 +2344,7 @@
    padding: 6px 8px;
    overflow: auto;
    border: 1px solid var(--border);
@@ -7605,7 +7609,7 @@ index 0bf21eb..ef0584d 100644
    background: var(--bg-panel);
    color: var(--text-muted);
    font-family: var(--font-mono);
-@@ -2172,9 +2419,8 @@
+@@ -2172,9 +2431,8 @@
    min-width: 0;
    height: 32px;
    padding: 0 10px;
@@ -7617,7 +7621,7 @@ index 0bf21eb..ef0584d 100644
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 12px;
-@@ -2266,10 +2512,9 @@ select.mcp-add-input {
+@@ -2266,10 +2524,9 @@ select.mcp-add-input {
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
@@ -7631,7 +7635,7 @@ index 0bf21eb..ef0584d 100644
  }
  
  /* Focus moves to the dialog itself when it opens (tabIndex -1); it is not a control, so no ring. */
-@@ -2282,7 +2527,7 @@ select.mcp-add-input {
+@@ -2282,7 +2539,7 @@ select.mcp-add-input {
    flex: 1 1 auto;
    gap: 12px;
    min-height: 0;
@@ -7640,7 +7644,7 @@ index 0bf21eb..ef0584d 100644
    overflow: auto;
    overscroll-behavior: contain;
  }
-@@ -2315,7 +2560,7 @@ select.mcp-add-input {
+@@ -2315,7 +2572,7 @@ select.mcp-add-input {
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border);
@@ -7649,7 +7653,7 @@ index 0bf21eb..ef0584d 100644
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-mono);
-@@ -2333,7 +2578,7 @@ select.mcp-add-input {
+@@ -2333,7 +2590,7 @@ select.mcp-add-input {
  .project-trust-error {
    flex-shrink: 0;
    max-height: 30vh;
@@ -7658,7 +7662,7 @@ index 0bf21eb..ef0584d 100644
    overflow: auto;
    color: #ef4444;
    font-size: 12px;
-@@ -2353,19 +2598,20 @@ select.mcp-add-input {
+@@ -2353,19 +2610,20 @@ select.mcp-add-input {
    flex-shrink: 0;
    justify-content: flex-end;
    gap: 8px;
@@ -7686,7 +7690,7 @@ index 0bf21eb..ef0584d 100644
  }
  
  .project-trust-button:disabled {
-@@ -2373,10 +2619,8 @@ select.mcp-add-input {
+@@ -2373,10 +2631,8 @@ select.mcp-add-input {
  }
  
  .project-trust-button.is-primary {
@@ -7699,7 +7703,7 @@ index 0bf21eb..ef0584d 100644
  }
  
  .project-trust-button.is-primary:disabled {
-@@ -2450,7 +2694,7 @@ select.mcp-add-input {
+@@ -2450,7 +2706,7 @@ select.mcp-add-input {
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--border);
@@ -7708,7 +7712,7 @@ index 0bf21eb..ef0584d 100644
    background: var(--bg);
  }
  
-@@ -2472,7 +2716,7 @@ select.mcp-add-input {
+@@ -2472,7 +2728,7 @@ select.mcp-add-input {
  .project-trust-mcp-tag {
    flex-shrink: 0;
    padding: 1px 5px;
@@ -7717,7 +7721,7 @@ index 0bf21eb..ef0584d 100644
    background: rgba(120, 120, 120, 0.12);
    color: var(--text-dim);
    font-size: 10px;
-@@ -2493,7 +2737,7 @@ select.mcp-add-input {
+@@ -2493,7 +2749,7 @@ select.mcp-add-input {
    display: inline-block;
    margin: 2px 4px 0 0;
    padding: 0 4px;
@@ -24779,10 +24783,10 @@ index 9f12e18..3f4126f 100644
      </div>
    );
 diff --git a/components/SettingsUi.test.mjs b/components/SettingsUi.test.mjs
-index 30e33f5..e31f4a5 100644
+index 30e33f5..1796163 100644
 --- a/components/SettingsUi.test.mjs
 +++ b/components/SettingsUi.test.mjs
-@@ -29,3 +29,27 @@ test("the MCP panel's reasons are visible text, never only a tooltip", () => {
+@@ -29,3 +29,42 @@ test("the MCP panel's reasons are visible text, never only a tooltip", () => {
    // The panel's own title is the only one: no reason hides in a tooltip.
    assert.deepEqual(mcp.match(/\btitle=\{[^}]*\}/g), ['title={t("settings.mcp")}']);
  });
@@ -24810,6 +24814,21 @@ index 30e33f5..e31f4a5 100644
 +  }
 +  assert.deepEqual([px(track, "--switch-h"), px(track, "--switch-w")], [18, 32]);
 +});
++
++test("a switch's knob looks centred, not only measures so: no shadow, and rows on whole pixels", async () => {
++  const css = await readFile(new URL("../app/settings.css", import.meta.url), "utf8");
++  const body = (selector) => css.match(new RegExp(`(?:^|\\n)${selector.replace(/[.[\]"=+]/g, "\\$&")} \\{([^}]*)\\}`))?.[1] ?? "";
++  // A shadow 1px below merged with the dark knob in light and made it read low (design/toggle-centering-feedback.jpg).
++  assert.doesNotMatch(body(".config-switch-knob"), /box-shadow/);
++  // Fractional line heights (1.4 × 13px) put switches at y = 745.9; every row metric above them is whole pixels.
++  for (const selector of [".config-group-title", ".config-group-description", ".config-row-label", ".config-row-description", ".settings-theme-option-label"]) {
++    assert.match(body(selector), /line-height: \d+px;/, selector);
++  }
++  assert.match(body(".settings-theme-preview"), /height: \d+px;/);
++  assert.doesNotMatch(body(".settings-theme-preview"), /aspect-ratio/);
++  // A row's divider takes its pixel from the padding, so its content box stays even.
++  assert.match(body(".config-row + .config-row"), /padding-top: 11px;/);
++});
 diff --git a/components/SettingsUi.tsx b/components/SettingsUi.tsx
 index 1f1ae33..27ed896 100644
 --- a/components/SettingsUi.tsx
@@ -30075,7 +30094,7 @@ index 42e1816..3dbf55f 100644
 +- The viewers render in shadow roots. Their colours and type come from CSS variables in `app/globals.css` (`.code-diff, .code-file`); the background is set on the host (`diffs-container`) because the library's theme sets it there (`:host`), which beats an inherited value. A text selection inside a viewer reaches the document through `Selection.getComposedRanges` (the file viewer's "mention selected lines"); an extension dialog measures the viewer's scrolling `[data-code]` to widen for code. More than 400 lines with a scroll box (the file viewer's panel, a tool's 400px box) render only the rows in view (`useScrollRootVirtualizer`, set up in a passive effect: the panel mounts in the same commit as the code).
 +- Library quirks handled here: a token's bold/italic is applied in the shadow root (the library sets them through `light-dark()`, which only takes colours); the expand controls get a tab stop, a name and Enter/Space; its "modified" accent is overridden to gray (it is blue); its lookbehind literal `/(?<=\n)/` is rewritten at build time (`lib/pierre-diffs-split-loader.cjs`, as for #753), and Safari before 16.4 highlights with Shiki's Oniguruma (WASM) engine since the JavaScript engine compiles grammars to lookbehind RegExps.
 diff --git a/docs/agents/settings-ui.md b/docs/agents/settings-ui.md
-index b23f1c7..b2f46ee 100644
+index b23f1c7..31dbd68 100644
 --- a/docs/agents/settings-ui.md
 +++ b/docs/agents/settings-ui.md
 @@ -1,10 +1,19 @@
@@ -30086,7 +30105,7 @@ index b23f1c7..b2f46ee 100644
 +- **Phones** (≤640px): the column and the page take turns across the dialog (`data-view` on the surface, `nav` or `page`). Settings opens on the page of its section, with a back button before the title; the column lists the sections at 44px with chevrons and carries the close button. Whichever side shows takes focus (the back button, or the open section's row), since the button that was pressed is hidden.
 +- **Embedded sections** have no fill of their own: the list (`.config-sidebar`) sits on the page's surface with a hairline (`--line`) to its detail, and its rows' text under the page title (the list's left padding is the side less a row's 8px); a section's own top line (the Models banner, Sub-agents' switch) is a line under the page title with a hairline under it; a `ConfigNotice` is a rounded callout on a 5% tint; the footer has a hairline above. Inner fills (`.enabled-models-list`, examples) are `--bg-surface`, as fields are, never `--bg-panel`, which reads as a hole in the dialog.
 +- **Rows** (`ConfigGroup`, `ConfigRow`, `ConfigSegmented` in `SettingsUi.tsx`): a group is its title (13px, 600), an optional line about it, then rows divided by hairlines; a row is the label (13px) and its description (12px, `--text-dim`, at most 400px) on the left and the control on the right, centred on the row (52px at least). `htmlFor` makes the label the control's, so a click on "Expand thinking blocks…" switches it (`ConfigSwitch` takes an `id`). Sliders and the font fields share one 300px control column (field or slider, value, reset). On a phone rows stack, the control under its label at the row's width, except a lone switch, which stays at the right of its label.
-+- **Switches** (`ConfigSwitch`) are Claude's design system's Switch: the knob is the track's height less 4px, 2px from every edge in both states, travelling the width less the height (18 × 32, small 14 × 24). Off, a `--text-muted` knob on a 16% tint of the text; on, the ink (`--accent`) with an `--accent-contrast` knob (the accent is neutral, so a white knob would vanish on it in dark). `components/SettingsUi.test.mjs` checks the geometry and `design/tests/piweb.py` measures it on the page in both states.
++- **Switches** (`ConfigSwitch`) are Claude's design system's Switch: the knob is the track's height less 4px, 2px from every edge in both states, travelling the width less the height (18 × 32, small 14 × 24). Off, a `--text-muted` knob on a 16% tint of the text; on, the ink (`--accent`) with an `--accent-contrast` knob (the accent is neutral, so a white knob would vanish on it in dark). The knob casts **no shadow** (one 1px below merged with the dark knob in light and made it read low), and every row metric above a switch is a whole pixel (line heights in px, theme cards a fixed 76px tall, a row's divider taking its pixel from the top padding), so switches land on whole pixels and their edges render alike. Boxes cannot show either fault: `components/SettingsUi.test.mjs` checks the geometry and those rules, and `design/tests/switch_pixels.py` reads the knob's edges from the rendered pixels, off and on, light and dark, at 1x–3x.
 +- **A segmented choice** (`ConfigSegmented`; the send key, the file browser, the language): native radios hidden in their options on one quiet track (6% tint), the chosen option lifted on `--bg-elevated` with a soft shadow in light, a 14% tint in dark. The language keeps its `role="radio"` buttons on the same track (`.settings-language-options`).
 +
  ## General appearance