Record the phone catching up in the design-import log

docs/design-import-gaps.md

@@ -188,9 +188,21 @@ the chrome, hosts and terminals, file transfer, the vault, teams, and preference
 > project rather than requested by name and left to whatever the machine happens to have, the way `WithInterFont`
 > alone used to leave Inter registered but unused. Montserrat is the default sans now, with Inter kept as its
 > fallback rather than the whole answer; `MonoFont` gains JetBrains Mono at the front of its own list, ahead of
-> the system-mono stack that is still behind it for a glyph JetBrains Mono does not cover. Android recolours
+> the system-mono stack that is still behind it for a glyph JetBrains Mono does not cover. **Android recoloured
-> with the shared palette and keeps its own default sans — fonts are per-head by decision, only colour is
+> with the shared palette and kept its own default sans when this paragraph was first written; it does not any
-> shared.
+> more** — see "the phone catches up", directly below.
+>
+> **The phone catches up.** A later reversal than the one above, on the same reasoning: a face is not a
+> colour, and the user decided the phone should share both rather than only the second. `WithInterFont` gains
+> the same `FontManagerOptions` block `Program.cs` sets, off the same embedded Montserrat, no new asset
+> required. `Theme/Phone.axaml`'s six-rung v2 ladder — 4/9/10/11/12/14 — collapses to the desktop's three:
+> chip or tag 6, button or field 10, card or output 12; `Button.fab`'s 28 and every sheet's 22 survive
+> unchanged, being geometry rather than ladder rungs. `Button.primary` and `Button.fab` take `AccentGradient`
+> and `AccentGlow` in place of a flat fill, the same swap `Button.accent` made on the desktop, `BoxShadow`
+> cleared the same way on disabled. And the phone's own chrome — the vault header, the bottom bar, the shells
+> strip, `HostActionBar`, the editor headers, the terminal's collapsed bar and every screen's raised selection
+> bar — moves from `Chrome`/`Sidebar` to `DeepChrome`, joining the desktop's own v5b titlebar-and-rail move;
+> `PhoneRail`'s hover takes `Track`, which `Palette.axaml` already names for that row. Borders stay keyed.
 >
 > **Flat sections replace the grid of group cards and the breadcrumb trail — reversing v3, on the user's own
 > approval rather than a defect found in it.** v3's grid held one level of the group tree at a time, opened by

src/DodoSSH.Client.Android/DodoSshAndroidApplication.cs

@@ -1,6 +1,7 @@
 // See the note at the top of MainActivity for why the platform namespaces are reached through `global::`.
 using Avalonia;
 using Avalonia.Android;
+using Avalonia.Media;
 using DodoSSH.Client.Android.Platform;
 using global::Android.App;
 using global::Android.Runtime;
@@ -46,6 +47,30 @@ public sealed class DodoSshAndroidApplication : AvaloniaAndroidApplication<DodoS
     }
 
     /// <inheritdoc />
+    /// <remarks>
+    /// This used to be the one place the two heads disagreed on purpose: the recorded v2 decision was
+    /// "Android recolours with the shared palette and keeps its own default sans", on the reasoning that a
+    /// phone's system font is a phone's own business. The user has reversed that, this pass — the phone now
+    /// takes the desktop's face as well as its colours, and <c>docs/design-import-gaps.md</c> is corrected
+    /// to say so rather than left asserting a decision that no longer holds.
+    ///
+    /// <c>WithInterFont</c> still registers Inter, for the same reason <c>Program.cs</c> keeps it on the
+    /// desktop: it is what the layout suite pins and what a glyph Montserrat does not cover falls back to.
+    /// What changes is which face answers first. Montserrat ships embedded in
+    /// <c>DodoSSH.Client.Shell/Assets/Fonts</c> already — this project references that assembly for
+    /// <c>Theme/Phone.axaml</c>'s own <c>MonoFont</c>, so no csproj or asset work was needed to reach it
+    /// from here, only the same <see cref="FontManagerOptions"/> block the desktop's
+    /// <c>Program.BuildAvaloniaApp</c> sets.
+    /// </remarks>
     protected override AppBuilder CustomizeAppBuilder(AppBuilder builder) =>
-        base.CustomizeAppBuilder(builder).WithInterFont();
+        base.CustomizeAppBuilder(builder)
+            .WithInterFont()
+            .With(new FontManagerOptions
+            {
+                DefaultFamilyName = "avares://DodoSSH.Client.Shell/Assets/Fonts#Montserrat",
+                FontFallbacks =
+                [
+                    new FontFallback { FontFamily = new FontFamily("avares://Avalonia.Fonts.Inter/Assets#Inter") },
+                ],
+            });
 }

src/DodoSSH.Client.Android/Theme/Phone.axaml

@@ -12,10 +12,28 @@
     the alternative, and the red one is the one that costs something.
 
     ── v2 ──────────────────────────────────────────────────────────────────────────────────────────────
-    The second design rounds everything. The corner radii below are the design's own — 4 for a tag, 9 for a
+    The second design rounded everything on its own ladder — 4 for a tag, 9 for a button or a pill, 10 for
-    button or a pill, 10 for a list row, 11 for the search well, 12 for a card, 14 for a block of
+    a list row, 11 for the search well, 12 for a card, 14 for a block of monospaced output — and the numbers
-    monospaced output — and they are a ladder rather than a set of preferences: the radius says how big the
+    below carried it for three passes: the radius said how big the thing was, so a 12 on a chip or a 4 on a
-    thing is, so a 12 on a chip or a 4 on a card reads as the wrong size before it reads as the wrong shape.
+    card read as the wrong size before it read as the wrong shape. Left as a record of that reasoning rather
+    than deleted, because the reasoning still holds; only the numbers it was reasoning about have moved.
+
+    ── v5 ──────────────────────────────────────────────────────────────────────────────────────────────
+    This pass takes the desktop's v5 ladder instead of v2's own, on the same reversal recorded for the
+    fonts: the phone now matches the desktop's shape as well as its face. Three rungs rather than six —
+    cards and sections stay 12, a button or a field is 10, a chip or a tag is 6 — collapsing v2's 9/10/11
+    into the one value the desktop's buttons and fields already use, and moving its 4 up to 6 and its 14
+    down to 12 to land on the desktop's own chip and card numbers. The ladder still says how big a thing
+    is before it says what shape it is; it is just a shorter ladder now, because the desktop it is copying
+    never drew v2's 11-radius search well or a card any rounder than a chip's neighbour a step away, and the
+    same case that closed the gap between 9, 10 and 11 closes the one between 12 and 14.
+
+    Not every radius on this head belongs to this ladder. The floating action button is 28 — half its own
+    56, which is a circle rather than a ladder rung — and the sheets stay at 22 on their top corners only,
+    which is a phone idiom this codebase's own bottom sheets have used since v2 and the desktop draws
+    nothing like. Both are documented where they are set rather than here, for the reason FAB and sheet
+    radii are always documented locally: a reader who only ever meets one of them should not have to find
+    this paragraph to learn it was deliberate.
   -->
 
   <Style Selector="Button.primary">
@@ -23,15 +41,32 @@
     <Setter Property="HorizontalAlignment" Value="Stretch" />
     <Setter Property="HorizontalContentAlignment" Value="Center" />
     <Setter Property="VerticalContentAlignment" Value="Center" />
-    <Setter Property="Background" Value="{StaticResource Accent}" />
     <Setter Property="Foreground" Value="{StaticResource AccentInk}" />
-    <Setter Property="CornerRadius" Value="9" />
+    <Setter Property="CornerRadius" Value="10" />
     <Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
     <Setter Property="FontSize" Value="12" />
     <Setter Property="FontWeight" Value="SemiBold" />
   </Style>
+
+  <!--
+    ◆ Gradient and glow, replacing a flat Accent fill — the same swap App.axaml's Button.accent made on the
+    desktop, and for the same reason: this design draws every primary button top-to-bottom from a lighter
+    violet into the accent proper, lifted off the surface with a soft violet glow rather than a border. Both
+    live in Palette.axaml as AccentGradient and AccentGlow, already resolvable here because the palette is
+    shared — this is a resource-key swap, not new colour.
+
+    Background and BoxShadow are set here rather than as plain Setters above, because Fluent's default
+    button template only lets a style reach the fill and the glow through the ContentPresenter it draws
+    itself around — the same reason the desktop's rule targets /template/ ContentPresenter rather than the
+    Button. Height, radius and the rest stay ordinary Setters on Button.primary itself; only the two the
+    template intercepts move down here.
+  -->
+  <Style Selector="Button.primary /template/ ContentPresenter">
+    <Setter Property="Background" Value="{StaticResource AccentGradient}" />
+    <Setter Property="BoxShadow" Value="{StaticResource AccentGlow}" />
+  </Style>
   <Style Selector="Button.primary:pressed /template/ ContentPresenter">
-    <Setter Property="Background" Value="{StaticResource Accent}" />
+    <Setter Property="Background" Value="{StaticResource AccentGradient}" />
     <Setter Property="Opacity" Value="0.82" />
   </Style>
 
@@ -39,9 +74,15 @@
     Disabled is drawn as flat and unlit rather than merely dimmed. The design's CONTINUE button on the
     recovery screen is disabled until the checkbox is ticked, and a user who cannot tell it is disabled
     reads the screen as broken rather than as waiting for them.
+
+    BoxShadow has to be cleared here too, as "none" rather than left unset — see the remark on
+    Button.accent:disabled in the desktop's App.axaml for why the literal string is required and an empty
+    BoxShadows is not: the base rule's glow Setter is still in effect wherever a more specific one does not
+    override it, and a disabled primary button lit with a glow would read as wanting to be pressed.
   -->
   <Style Selector="Button.primary:disabled /template/ ContentPresenter">
     <Setter Property="Background" Value="{StaticResource Raised}" />
+    <Setter Property="BoxShadow" Value="none" />
     <Setter Property="TextElement.Foreground" Value="{StaticResource TextFaint}" />
   </Style>
 
@@ -54,7 +95,7 @@
     <Setter Property="BorderBrush" Value="{StaticResource BorderMid}" />
     <Setter Property="BorderThickness" Value="1" />
     <Setter Property="Foreground" Value="{StaticResource Text}" />
-    <Setter Property="CornerRadius" Value="9" />
+    <Setter Property="CornerRadius" Value="10" />
     <Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
     <Setter Property="FontSize" Value="11.5" />
     <Setter Property="FontWeight" Value="SemiBold" />
@@ -69,7 +110,7 @@
     <Setter Property="BorderBrush" Value="{StaticResource DangerSoft}" />
     <Setter Property="BorderThickness" Value="1" />
     <Setter Property="Foreground" Value="{StaticResource Danger}" />
-    <Setter Property="CornerRadius" Value="9" />
+    <Setter Property="CornerRadius" Value="10" />
     <Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
     <Setter Property="FontSize" Value="10.5" />
     <Setter Property="FontWeight" Value="SemiBold" />
@@ -126,7 +167,17 @@
 
     Accent-filled, which it shares with Button.primary and with nothing else — and it means the same thing
     in both places: the one action on the surface that is not a choice between peers. Circular by radius
-    rather than by a Path, so the pressed state the template draws is the same shape as the button.
+    rather than by a Path, so the pressed state the template draws is the same shape as the button — 28,
+    exactly half its own 56, which is a geometric constraint rather than a ladder rung and does not move
+    with the rest of this file's radii.
+
+    ◆ Gradient and glow since v5, matching Button.primary rather than staying a flat fill once that one
+    moved. The two are the only accent-filled controls on this head and are read as one idea — "the thing
+    this surface wants you to do" — so a flat FAB beside a gradient primary button would be the seam this
+    codebase's palette file keeps warning about, one screenshot over from the button it echoes. The glow
+    reads as well on a floating circle as it does on a bar-anchored rectangle: if anything a control that
+    already floats over content earns a lift more than one sitting in a row of chrome does, so it is kept
+    rather than dropped for the FAB's own shape.
 
     Still only on HOSTS. The design puts a second one on S3 and that editor genuinely does not exist yet, so
     the style being here is not permission to draw one there.
@@ -135,7 +186,6 @@
     <Setter Property="Width" Value="56" />
     <Setter Property="Height" Value="56" />
     <Setter Property="Padding" Value="0" />
-    <Setter Property="Background" Value="{StaticResource Accent}" />
     <Setter Property="BorderThickness" Value="0" />
     <Setter Property="CornerRadius" Value="28" />
     <Setter Property="HorizontalContentAlignment" Value="Center" />
@@ -145,8 +195,14 @@
     <Setter Property="FontSize" Value="24" />
     <Setter Property="FontWeight" Value="SemiBold" />
   </Style>
+  <!-- See the remark above Button.primary's own /template/ ContentPresenter rule: BoxShadow has no home on
+       a Button itself, so the fill moves down here alongside it rather than staying a plain Setter. -->
+  <Style Selector="Button.fab /template/ ContentPresenter">
+    <Setter Property="Background" Value="{StaticResource AccentGradient}" />
+    <Setter Property="BoxShadow" Value="{StaticResource AccentGlow}" />
+  </Style>
   <Style Selector="Button.fab:pressed /template/ ContentPresenter">
-    <Setter Property="Background" Value="{StaticResource Accent}" />
+    <Setter Property="Background" Value="{StaticResource AccentGradient}" />
     <Setter Property="Opacity" Value="0.82" />
   </Style>
 
@@ -194,7 +250,7 @@
   -->
   <Style Selector="Border.output">
     <Setter Property="Background" Value="{StaticResource TerminalSurface}" />
-    <Setter Property="CornerRadius" Value="14" />
+    <Setter Property="CornerRadius" Value="12" />
     <Setter Property="Padding" Value="12" />
   </Style>
 
@@ -205,7 +261,7 @@
   -->
   <Style Selector="Border.tag">
     <Setter Property="Background" Value="{StaticResource Chip}" />
-    <Setter Property="CornerRadius" Value="4" />
+    <Setter Property="CornerRadius" Value="6" />
     <Setter Property="Padding" Value="7,2" />
     <Setter Property="VerticalAlignment" Value="Center" />
   </Style>
@@ -231,7 +287,7 @@
     <Setter Property="Background" Value="Transparent" />
     <Setter Property="BorderBrush" Value="{StaticResource BorderMid}" />
     <Setter Property="BorderThickness" Value="1" />
-    <Setter Property="CornerRadius" Value="4" />
+    <Setter Property="CornerRadius" Value="6" />
     <Setter Property="Padding" Value="11,0" />
     <Setter Property="Foreground" Value="{StaticResource TextDim}" />
     <Setter Property="VerticalContentAlignment" Value="Center" />
@@ -267,11 +323,17 @@
     Checked is a filled surface with accent *text*, not an accent fill. v2 makes that distinction
     everywhere — see the remark on AccentText in Palette.axaml — and a chip is where it matters most: a row
     of four solid blue lozenges is a row of four things that all look like the primary action.
+
+    ◆ Its own radius rather than Border.tag's or Button.chiptoggle's, despite the name. v2 drew this control
+    on the ladder's button-or-pill rung rather than its tag rung — 9, not 4 — and the v5 pass carries the
+    same rung forward to 10 rather than to Border.tag's 6: it is a much larger control at 34 tall against a
+    tag's line-height, and a radius picked for a 34-pixel chip is not the one a 20-pixel tag needs, whatever
+    the class is called. See the remark on Phone.axaml's own ladder, above.
   -->
   <Style Selector="RadioButton.chip">
     <Setter Property="MinHeight" Value="34" />
     <Setter Property="Padding" Value="13,6" />
-    <Setter Property="CornerRadius" Value="9" />
+    <Setter Property="CornerRadius" Value="10" />
     <Setter Property="Background" Value="Transparent" />
     <Setter Property="BorderBrush" Value="{StaticResource BorderMid}" />
     <Setter Property="BorderThickness" Value="1" />
@@ -314,7 +376,7 @@
     <Setter Property="Background" Value="{StaticResource Field}" />
     <Setter Property="BorderBrush" Value="{StaticResource BorderMid}" />
     <Setter Property="BorderThickness" Value="1" />
-    <Setter Property="CornerRadius" Value="11" />
+    <Setter Property="CornerRadius" Value="10" />
     <Setter Property="Foreground" Value="{StaticResource Text}" />
     <Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
     <Setter Property="FontSize" Value="12" />

src/DodoSSH.Client.Android/Views/FilesScreen.axaml

@@ -178,7 +178,7 @@
     <ScrollViewer Grid.Row="3" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled"
                   IsVisible="{Binding IsConnected}" Margin="0,0,0,4">
       <StackPanel Orientation="Horizontal" Spacing="4" Margin="14,0" VerticalAlignment="Center">
-        <Button Classes="row" MinHeight="36" Padding="9,0" CornerRadius="9"
+        <Button Classes="row" MinHeight="36" Padding="9,0" CornerRadius="10"
                 Command="{Binding RemoteUpCommand}">
           <TextBlock Classes="mono" FontSize="12" Text="↑" Foreground="{StaticResource AccentText}" />
         </Button>
@@ -188,7 +188,7 @@
           </ItemsControl.ItemsPanel>
           <ItemsControl.ItemTemplate>
             <DataTemplate x:DataType="vm:CrumbViewModel">
-              <Button Classes="row" MinHeight="36" Padding="7,0" CornerRadius="9"
+              <Button Classes="row" MinHeight="36" Padding="7,0" CornerRadius="10"
                       Command="{Binding $parent[views:FilesScreen].((vm:TransfersViewModel)DataContext).GoRemoteCommand}"
                       CommandParameter="{Binding Path}">
                 <TextBlock Classes="detail" FontSize="11" Text="{Binding Name}" />
@@ -265,7 +265,8 @@
     </Panel>
 
     <!-- ============ what to do with the chosen entry ============ -->
-    <Border Grid.Row="5" IsVisible="{Binding IsConnected}" Background="{StaticResource Chrome}"
+    <!-- DeepChrome rather than Chrome, since v5 — see the remark on PhoneShell's vault header. -->
+    <Border Grid.Row="5" IsVisible="{Binding IsConnected}" Background="{StaticResource DeepChrome}"
             BorderBrush="{StaticResource Border}" BorderThickness="0,1,0,0" Padding="12,10">
       <StackPanel Spacing="9">
 

src/DodoSSH.Client.Android/Views/HostActionBar.axaml

@@ -29,7 +29,9 @@
     of "edit these six". The three that stay are the ones a count makes better rather than worse.
   -->
 
-  <Border Background="{StaticResource Chrome}" BorderBrush="{StaticResource Border}"
+  <!-- DeepChrome rather than Chrome, since v5: this bar takes the vault header's own place, so it takes
+       the vault header's own surface too — see the remark on that header in PhoneShell.axaml. -->
+  <Border Background="{StaticResource DeepChrome}" BorderBrush="{StaticResource Border}"
           BorderThickness="0,0,0,1" Padding="6,0" Height="56">
     <Grid ColumnDefinitions="Auto,*,Auto,Auto">
 

src/DodoSSH.Client.Android/Views/HostsScreen.axaml

@@ -68,7 +68,7 @@
       of a selection and ticking it is a thing this screen supports rather than merely survives.
     -->
     <Border Grid.Row="0" Margin="14,10,14,4" Background="{StaticResource Field}"
-            BorderBrush="{StaticResource BorderMid}" BorderThickness="1" CornerRadius="11" Height="44">
+            BorderBrush="{StaticResource BorderMid}" BorderThickness="1" CornerRadius="10" Height="44">
       <Grid ColumnDefinitions="Auto,*">
         <TextBlock Grid.Column="0" Text="⌕" Foreground="{StaticResource TextFaint}" FontSize="13"
                    Margin="13,0,0,0" VerticalAlignment="Center" />
@@ -974,7 +974,10 @@
     <Grid IsVisible="{Binding IsEditing}" RowDefinitions="Auto,*"
           Background="{StaticResource Canvas}">
 
-      <Border Grid.Row="0" Background="{StaticResource Chrome}" BorderBrush="{StaticResource Border}"
+      <!-- DeepChrome rather than Chrome, since v5: "its header carries what the surrounding chrome no longer
+           can" below is still true, and now the header itself carries the darker chrome the rest of this
+           head's frame does — see the remark on PhoneShell's vault header. -->
+      <Border Grid.Row="0" Background="{StaticResource DeepChrome}" BorderBrush="{StaticResource Border}"
               BorderThickness="0,0,0,1" Padding="6,0" Height="56">
         <Grid ColumnDefinitions="Auto,*,Auto">
           <Button Grid.Column="0" Classes="icon" Content="←" Command="{Binding CancelEditCommand}"

src/DodoSSH.Client.Android/Views/LockedScreen.axaml

@@ -91,8 +91,8 @@
 
           Not Border.card, and neither are its two counterparts on HOSTS and FILES: that class is a panel,
           and this is a warning, so the background and the border are the warn pair rather than the chrome
-          one. What it does take is the radius the v2 ladder gives anything card-sized, which is what the
+          one. What it does take is the radius the ladder gives anything card-sized — 12, unchanged from v2
-          other two already draw.
+          to v5 — which is what the other two already draw.
         -->
         <Border IsVisible="{Binding HasLiveSessions}" Margin="0,22,0,0"
                 Background="{StaticResource WarnWash}" BorderBrush="{StaticResource WarnSoft}"

src/DodoSSH.Client.Android/Views/PhoneRail.axaml

@@ -36,6 +36,18 @@
     The .railentry styles live in this file because they are this control's own shape and nothing else wears
     them; every colour in them is resolved from Theme/Palette.axaml by key, which is the rule that matters —
     a rail that named its own blues is how a fifth surface colour ends up in the application.
+
+    ── DEEP CHROME, SINCE v5 ───────────────────────────────────────────────────────────────────────────────
+    This rail's own surface moves from Sidebar to DeepChrome in this pass, matching the desktop's NavRail —
+    which is exactly what this control is standing in for on a wide phone, and which took the same v5b move
+    itself: Palette.axaml's own remark on DeepChrome names "the rail down the side" as one of the five things
+    that colour is for. Sidebar stays what a card sits on; this is the frame the cards sit inside, the same
+    distinction PhoneShell's header, strip and bottom bar are drawing at the same time.
+
+    The hover fill moves too, from Panel to Track — and Track rather than Hover, because Palette.axaml's own
+    remark on Track names "the rail row a pointer sits over" as one of the three things that colour is for,
+    literally. Panel was never named for this; it read close enough that nobody had gone looking for the
+    seam, which is exactly the kind of gap Track exists to close.
   -->
 
   <UserControl.Styles>
@@ -54,7 +66,7 @@
     </Style>
 
     <Style Selector="Button.railentry:pointerover /template/ ContentPresenter">
-      <Setter Property="Background" Value="{StaticResource Panel}" />
+      <Setter Property="Background" Value="{StaticResource Track}" />
     </Style>
 
     <Style Selector="Button.railentry.active /template/ ContentPresenter">
@@ -96,7 +108,7 @@
     </Style>
   </UserControl.Styles>
 
-  <Border Width="188" Background="{StaticResource Sidebar}"
+  <Border Width="188" Background="{StaticResource DeepChrome}"
           BorderBrush="{StaticResource Border}" BorderThickness="0,0,1,0">
 
     <!--

src/DodoSSH.Client.Android/Views/PhoneShell.axaml

@@ -97,7 +97,16 @@
         the surface. See PhoneShell.ShowsVaultHeader.
       -->
       <Panel Grid.Row="0" IsVisible="{Binding $parent[views:PhoneShell].ShowsVaultHeader}">
-        <Border Background="{StaticResource Chrome}" BorderBrush="{StaticResource Border}"
+        <!--
+          ◆ DeepChrome rather than Chrome, since v5. The desktop's own titlebar and nav rail made the same
+          move in v5b — one step darker than Chrome, #0B0B14 against #10111E, so the frame reads as what
+          holds the glass rather than as another pane of it — and this header is the phone's equivalent
+          furniture: it is what the desktop's titlebar is, on the surface that has no window to carry one.
+          HostActionBar, which takes this header's own place while hosts are selected, and the editor's
+          header in HostsScreen, which the header stands down for, both move with it for the same reason;
+          see the remark on each.
+        -->
+        <Border Background="{StaticResource DeepChrome}" BorderBrush="{StaticResource Border}"
                 BorderThickness="0,0,0,1" Padding="14,0" Height="56">
           <Grid ColumnDefinitions="Auto,*,Auto,Auto">
 
@@ -288,7 +297,10 @@
         PhoneShell.ShowsShellStrip, which is where that "and" is made, Avalonia's bindings having none.
       -->
       <Panel Grid.Row="2" IsVisible="{Binding $parent[views:PhoneShell].ShowsShellStrip}">
-        <Border IsVisible="{Binding HasTabs}" Background="{StaticResource Sidebar}"
+        <!-- DeepChrome rather than Sidebar, since v5, joining the header and the bar above and below it:
+             the strip is chrome the same way they are — a frame around the screen rather than a pane of
+             it — and Sidebar is what a card sits on, which this row is not. -->
+        <Border IsVisible="{Binding HasTabs}" Background="{StaticResource DeepChrome}"
                 BorderBrush="{StaticResource Border}" BorderThickness="0,1,0,0" Height="46">
           <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
             <ItemsControl ItemsSource="{Binding Tabs}" Margin="12,0" VerticalAlignment="Center">
@@ -297,7 +309,7 @@
               </ItemsControl.ItemsPanel>
               <ItemsControl.ItemTemplate>
                 <DataTemplate x:DataType="vm:TerminalTabViewModel">
-                  <Button Classes="row" MinHeight="34" Padding="13,0" CornerRadius="9"
+                  <Button Classes="row" MinHeight="34" Padding="13,0" CornerRadius="10"
                           Background="{StaticResource Panel}" BorderBrush="{StaticResource BorderMid}"
                           BorderThickness="1"
                           Command="{Binding $parent[views:PhoneShell].((vm:MainWindowViewModel)DataContext).SelectTabCommand}"
@@ -341,8 +353,10 @@
         shape of everything else already behind the hub. What is left is the two halves of using this
         application, and the drawer holding the rest.
       -->
+      <!-- DeepChrome rather than Chrome, since v5 — see the remark on the vault header, above, which this
+           bar is the foot of the same frame the header is the top of. -->
       <Border Grid.Row="3" IsVisible="{Binding $parent[views:PhoneShell].ShowsBottomBar}"
-              Background="{StaticResource Chrome}" BorderBrush="{StaticResource Border}"
+              Background="{StaticResource DeepChrome}" BorderBrush="{StaticResource Border}"
               BorderThickness="0,1,0,0" Height="64">
         <Grid ColumnDefinitions="*,*,*">
 

src/DodoSSH.Client.Android/Views/RecoveryCodeScreen.axaml

@@ -36,8 +36,16 @@
         good way to read a code and a bad way to copy one: a user who cannot select it will photograph the
         screen, and that is a worse home for it than their clipboard.
       -->
+      <!--
+        ◆ CornerRadius 12, not 6. Its padding, 14,13, is Border.card's own — this box was already drawn to a
+        card's proportions, in every dimension but the corner — so under v2's ladder 6 was an outlier this
+        file never explained. It is worse than unexplained now: v5's ladder gives 6 to a chip, and a
+        full-width box holding the one secret this whole screen exists to show is not a chip wearing a
+        card's padding by coincidence. 12 is what a card-shaped box gets on this ladder, and this one always
+        was one.
+      -->
       <Border Margin="0,20,0,0" Background="{StaticResource Field}" BorderBrush="{StaticResource BorderMid}"
-              BorderThickness="1" CornerRadius="6" Padding="14,13">
+              BorderThickness="1" CornerRadius="12" Padding="14,13">
         <SelectableTextBlock Text="{Binding RecoveryCode}"
                              FontFamily="{StaticResource MonoFont}" FontSize="14"
                              Foreground="{StaticResource Accent}"

src/DodoSSH.Client.Android/Views/ServerScreen.axaml

@@ -20,9 +20,17 @@
       <StackPanel Spacing="10" HorizontalAlignment="Center" Margin="0,48,0,36">
         <!--
           Filled rather than outlined since v2, the same mark the header, the desktop titlebar and the
-          launcher icon carry. The radius is not picked: the mark runs 6 at 20 and 8 at 26, which is a
+          launcher icon carry. The radius is not picked: the mark runs 6 at 20 and 8 at 26, a third of a
-          third of a unit per unit of tile and lands on 14 at 44 — and 14 is a rung of Phone.axaml's
+          unit per unit of tile, and lands on 14 at 44.
-          ladder, the one for a block of monospaced output, which is what this is.
+
+          ◆ That used to be a rung of Phone.axaml's own ladder too — 14, the one for a block of monospaced
+          output, which this glyph reads as — and the coincidence was worth a sentence: one fewer number
+          the ladder had to introduce. It is a coincidence no longer. v5's ladder moves output to 12 and
+          never reaches 14 at all, so the mark's own 6/8/14 progression stands on its own now rather than
+          borrowing a card- or output-shaped justification — a self-contained proportion for a badge that
+          answers to nothing but its own three sizes. Left at 14 rather than moved to 12 with everything
+          else: the ladder governs content surfaces, and this is a mark, sized off its own tile rather than
+          off what it holds.
         -->
         <Border Width="44" Height="44" CornerRadius="14" Background="{StaticResource Accent}"
                 HorizontalAlignment="Center">

src/DodoSSH.Client.Android/Views/SnippetsScreen.axaml

@@ -156,8 +156,12 @@
                   </Border>
                 </StackPanel>
 
-                <!-- The command, on the surface every block of monospace in this design is drawn on. -->
+                <!-- The command, on the surface every block of monospace in this design is drawn on.
-                <Border Classes="output" CornerRadius="9" Padding="11,9">
+                     No radius override any more: it diverged from Border.output's own 14 under v2 for a
+                     smaller card-nested block, and now that the style's own value has moved to 12 there is
+                     no gap left worth a second number for — it takes the class's, like every other output
+                     block on this head. -->
+                <Border Classes="output" Padding="11,9">
                   <TextBlock Classes="mono" FontSize="11" Text="{Binding Preview}"
                              Foreground="{StaticResource Text}" TextTrimming="CharacterEllipsis" />
                 </Border>
@@ -174,8 +178,12 @@
       second column to put it in. Both buttons name the terminal — "TYPE INTO pg-primary" — because on a
       phone the tab strip may be scrolled away and "whatever is in the terminal receives this" is not a
       sentence anybody should have to guess the subject of.
+
+      DeepChrome rather than Chrome, since v5: this bar is chrome furniture in the same sense the bottom
+      nav bar it sits above is — a raised strip of frame rather than a pane of content — and joins the same
+      DeepChrome decision PhoneShell's header, strip and bar made. See the remark there.
     -->
-    <Border Grid.Row="4" IsVisible="{Binding HasSelection}" Background="{StaticResource Chrome}"
+    <Border Grid.Row="4" IsVisible="{Binding HasSelection}" Background="{StaticResource DeepChrome}"
             BorderBrush="{StaticResource Border}" BorderThickness="0,1,0,0" Padding="14,12"
             IsEnabled="{Binding !IsEditing}">
       <StackPanel Spacing="9">

src/DodoSSH.Client.Android/Views/TerminalScreen.axaml

@@ -49,7 +49,10 @@
       to 34, the pills to 30 — because a bar that shrank around controls that did not would only have moved
       the clipping somewhere harder to see.
     -->
-    <Border Grid.Row="0" Height="35" Background="{StaticResource Chrome}"
+    <!-- DeepChrome rather than Chrome, since v5: this bar is what the vault header, the strip and the
+         bottom bar collapse into while a shell is showing, so it takes their surface along with their
+         job — see the remark on the header in PhoneShell.axaml. -->
+    <Border Grid.Row="0" Height="35" Background="{StaticResource DeepChrome}"
             BorderBrush="{StaticResource Border}" BorderThickness="0,0,0,1">
       <Grid ColumnDefinitions="Auto,*,Auto">
 
@@ -87,9 +90,9 @@
                   row where nothing sits above or below it to be hit by mistake.
                 -->
                 <Border Background="{StaticResource Panel}" BorderBrush="{StaticResource BorderMid}"
-                        BorderThickness="1" CornerRadius="9" Height="30">
+                        BorderThickness="1" CornerRadius="10" Height="30">
                   <StackPanel Orientation="Horizontal">
-                    <Button Classes="row" MinHeight="28" Padding="11,0" CornerRadius="9"
+                    <Button Classes="row" MinHeight="28" Padding="11,0" CornerRadius="10"
                             VerticalContentAlignment="Center"
                             Command="{Binding $parent[views:TerminalScreen].((vm:MainWindowViewModel)DataContext).SelectTabCommand}"
                             CommandParameter="{Binding}">
@@ -116,7 +119,7 @@
                       It reads as a misprint, which for the control that ends a session is the wrong thing
                       to look like.
                     -->
-                    <Button Classes="row" MinHeight="28" Width="44" Padding="0" CornerRadius="0,9,9,0"
+                    <Button Classes="row" MinHeight="28" Width="44" Padding="0" CornerRadius="0,10,10,0"
                             HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
                             BorderBrush="{StaticResource BorderMid}" BorderThickness="1,0,0,0"
                             Command="{Binding $parent[views:TerminalScreen].((vm:MainWindowViewModel)DataContext).CloseTabCommand}"
@@ -362,7 +365,7 @@
           <Border Width="1" Height="18" Background="{StaticResource Border}" Margin="0,0,3,0"
                   VerticalAlignment="Center" />
 
-          <Button Classes="row" MinHeight="30" Height="30" MinWidth="40" Padding="0" CornerRadius="9"
+          <Button Classes="row" MinHeight="30" Height="30" MinWidth="40" Padding="0" CornerRadius="10"
                   HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
                   Background="{StaticResource Panel}" BorderBrush="{StaticResource BorderMid}"
                   BorderThickness="1" Focusable="False"
@@ -371,7 +374,7 @@
             <TextBlock Classes="mono" FontSize="13" Text="A−" />
           </Button>
 
-          <Button Classes="row" MinHeight="30" Height="30" MinWidth="40" Padding="0" CornerRadius="9"
+          <Button Classes="row" MinHeight="30" Height="30" MinWidth="40" Padding="0" CornerRadius="10"
                   HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
                   Background="{StaticResource Panel}" BorderBrush="{StaticResource BorderMid}"
                   BorderThickness="1" Focusable="False"

src/DodoSSH.Client.Android/Views/VaultsScreen.axaml

@@ -336,9 +336,11 @@
       the thing the whole screen is about — a member can only be selected under one, so choosing who is the
       only half left to make.
     -->
+    <!-- DeepChrome rather than Chrome, since v5 — the same raised-bar decision SnippetsScreen and
+         FilesScreen make for their own selection bars; see the remark on PhoneShell's vault header. -->
     <Border Grid.Row="4"
             IsVisible="{Binding SelectedMember, Converter={x:Static ObjectConverters.IsNotNull}}"
-            Background="{StaticResource Chrome}" BorderBrush="{StaticResource Border}"
+            Background="{StaticResource DeepChrome}" BorderBrush="{StaticResource Border}"
             BorderThickness="0,1,0,0" Padding="14,12">
       <StackPanel Spacing="9">