Make the host pane something you ask for, and draw it as cards

THE DRAWER USED TO ARRIVE WITH THE SELECTION. IsDrawerOpen read "a host is
selected", so touching any card took 304 pixels off the grid — including every
card arrowed past on the way to the one somebody wanted. Choosing among forty
machines was charged the price of the pane for one of them. A pencil now appears
on the card under the pointer and on the selected card, and that is what opens
it; IsHostPaneOpen is the flag, and the grid's context menu gained Details… so
the pane is reachable without a pointer, which a hover-only control is not.

Once open it follows the selection rather than pinning the host it was opened
on: a pane about one host beside a grid marking a different one is two answers
to the same question. Losing the selection closes it and clears the flag, or a
filter matching nothing would leave the pane armed to spring open again on the
next card merely selected — which is the behaviour the pencil exists to remove.

The pencil is drawn over the card rather than in a column of its own. A column
would have cost the name 30 pixels of a 232-pixel tile, permanently, for a
control that is only there while the pointer is; the dot and the pencil stack in
the two corners of that edge instead. IsVisible and not opacity, because a
button at zero opacity still takes the click and the card underneath does not.

A HEADER, A BODY THAT SCROLLS, AND A FOOTER, which is the one structural change
in the pane. The header names what the drawer is about and carries the two
things true of every panel; the footer carries the one thing each panel is for —
CONNECT, or SAVE, or the question about deleting. Only the middle scrolls, so
the button somebody came here to press can no longer be below the fold, which
CONNECT could be on a host with fifteen tags. That also widens what the layout
harness certifies: it skips anything inside a ScrollViewer, and the control each
panel exists to offer is now outside one.

THE SAME THREE CARDS TWICE. Address, General, Connection — first as rows stating
what the host is, then as boxes for changing it. The detail pane's rows are
buttons that open the editor: the design draws every fact as a filled box, and
rather than draw an input that refuses the pointer, pressing one leads to the
same card with a real box in it. Nothing here saves as you type, and that is not
timidity — saving validates the key-or-credential exclusion and writes one
encrypted payload, so a box committing per keystroke would be a save per
character and a half-typed hostname on the wire.

Every value the pane prints is the resolved one, and says "inherited" beside it
where a group supplied it. The number is the same either way and the edit is
not: clearing a group's default moves every host that never overrode it.

A HOST CARD IS TWO LINES AND NO CHIPS. The subtitle is now "ssh, root, pci,
eu-west-1" — the transport, the resolved account, then every tag — replacing
both the user@host:port line and the wrapped row of tag chips under it. The
address went to the card's tooltip rather than nowhere: a card is read while
scanning forty machines, where the name and the kind of machine are what is
being looked for, and an address is what you read once you have found it.

"ssh" is a constant today and is printed anyway, which is the one thing here
that argues with this codebase's own rule about constants dressed as readings.
It is the first item of a list whose other items vary, and a list beginning with
the account on one card and a tag on the next has no shape to scan. The remark
on HostRowViewModel.Summary says so rather than leaving it to be discovered.

WHAT THE DESIGN DRAWS AND THIS PANE HAS NOT GOT: Share this host, Add Telnet,
"SSH ID, Certificate, FIDO2", the backspace-key mapping row, the vault picker's
chevron and Show more. Sharing is per vault and not per item, every session here
is an SSH channel, there are no identity or certificate item types, nothing
carries a terminal setting to the renderer, and an item cannot be moved between
vaults at all. Six controls with nothing behind them, listed in
docs/design-import-gaps.md with what ships instead, and none drawn disabled.

The credentials row is marked with ◆ rather than the ⚿ the nav rail uses for the
keychain. U+26BF is outside both faces this application substitutes for the
design's fonts, so it lands on whatever the platform's fallback has; every other
glyph in the pane is from Geometric Shapes, which both carry.

src/DodoSSH.Client.App/App.axaml

@@ -625,6 +625,155 @@
       <Setter Property="VerticalAlignment" Value="Center" />
     </Style>
 
+    <!--
+      ◆ THE PENCIL ON A HOST CARD, which is the only way the drawer opens from the grid.
+
+      It exists because selecting a host stopped opening it. A card that took 304 pixels off the grid the
+      moment it was touched charged the price of the pane for the act of choosing — most of which is arrowing
+      past machines you did not want — so opening is now a thing you ask for and this is the asking. See
+      VaultViewModel.IsHostPaneOpen.
+
+      Hidden until the pointer is on the card, and shown on the selected one whether or not the pointer is
+      there, because the selected card is the one whose pane you are most likely to want and a control that
+      vanished from under the card you just clicked would have to be hunted for. Both are declared after the
+      base rule: Avalonia has no specificity and settles two matching rules by declaration order, which this
+      file records three times over.
+
+      IsVisible rather than Opacity. A button at zero opacity is still a button — it takes the click, and the
+      card underneath does not — so half the grid would swallow presses aimed at selecting a host. The space
+      is held open by the Panel around it in the item template rather than by this, so the card does not
+      reflow as the pointer crosses it; see HostsScreen.axaml.
+    -->
+    <Style Selector="Button.rowedit">
+      <Setter Property="Width" Value="24" />
+      <Setter Property="Height" Value="24" />
+      <Setter Property="CornerRadius" Value="6" />
+      <Setter Property="FontSize" Value="12" />
+      <Setter Property="Foreground" Value="{StaticResource TextFaint}" />
+      <Setter Property="HorizontalContentAlignment" Value="Center" />
+      <Setter Property="VerticalContentAlignment" Value="Center" />
+      <Setter Property="IsVisible" Value="False" />
+    </Style>
+    <Style Selector="Button.rowedit /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="CornerRadius" Value="6" />
+    </Style>
+    <Style Selector="Button.rowedit:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="Background" Value="{StaticResource ChromeHover}" />
+      <Setter Property="Foreground" Value="{StaticResource AccentText}" />
+    </Style>
+    <Style Selector="ListBoxItem:pointerover Button.rowedit">
+      <Setter Property="IsVisible" Value="True" />
+    </Style>
+    <Style Selector="ListBoxItem:selected Button.rowedit">
+      <Setter Property="IsVisible" Value="True" />
+    </Style>
+
+    <!--
+      ◆ THE DRAWER'S FURNITURE: a card, its heading, and the rows inside it.
+
+      The hosts drawer is a column of grouped fields rather than a run of labelled controls — address here,
+      the general facts here, the connection and its credentials here — which is what the design draws and
+      what a 304-pixel column needs to stay readable: three cards is three things to find, where fourteen
+      stacked controls is fourteen.
+
+      Raised on Sidebar, which is the one pairing that works in this column. Panel and Chrome are the same
+      value as each other and near enough Sidebar to vanish against it, and Field is the well a control sits
+      in — a card drawn in it would read as one enormous input.
+    -->
+    <Style Selector="Border.section">
+      <Setter Property="Background" Value="{StaticResource Raised}" />
+      <Setter Property="BorderBrush" Value="{StaticResource Border}" />
+      <Setter Property="BorderThickness" Value="1" />
+      <Setter Property="CornerRadius" Value="10" />
+      <Setter Property="Padding" Value="12" />
+    </Style>
+
+    <!--
+      A card's heading, and deliberately not TextBlock.label. That style is the small tracked-out capitals
+      this design uses for a *section of a screen* — GROUPS, HOSTS, the vault's categories — and three of
+      them inside a 304-pixel column would claim the same weight as the screen headings beside it. These are
+      captions on a card, so they are sentence case at the body size.
+    -->
+    <Style Selector="TextBlock.sectionhead">
+      <Setter Property="FontSize" Value="13" />
+      <Setter Property="FontWeight" Value="SemiBold" />
+      <Setter Property="Foreground" Value="{StaticResource Text}" />
+    </Style>
+
+    <!--
+      ◆ A ROW IN THE DETAIL PANE, AND IT IS A BUTTON THAT LOOKS LIKE A FIELD.
+
+      The design draws every fact about a host as a filled box, which is the shape of an input — so a reader
+      arrives expecting to type in one. They cannot: saving here is a whole-host operation that validates the
+      key-or-credential exclusion and writes one encrypted payload, so a box that committed on every
+      keystroke would be a save per character and a half-typed hostname on the wire.
+
+      Rather than draw an input that refuses the pointer, each row *is* the door to the editor. Pressing any
+      of them opens the host editor, which is the same three cards with real boxes in them — so the thing
+      that looked editable turns out to be editable, one step further along, and nothing on screen is a
+      control that does nothing. The alternative was a flat read-only pane with one EDIT button, which is
+      what this replaced.
+
+      It borrows the TextBox's own geometry rather than sharing it, for the reason Button.chiptoggle borrows
+      Border.chip's: a Button is not a TextBox and Avalonia's selectors are structural. The numbers are
+      repeated and the two have to move together, which is why they are adjacent in this file.
+    -->
+    <Style Selector="Button.fieldrow">
+      <Setter Property="HorizontalAlignment" Value="Stretch" />
+      <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+      <Setter Property="VerticalContentAlignment" Value="Center" />
+      <Setter Property="MinHeight" Value="32" />
+      <Setter Property="Padding" Value="8,5" />
+      <Setter Property="FontSize" Value="13" />
+      <Setter Property="Foreground" Value="{StaticResource Text}" />
+    </Style>
+    <Style Selector="Button.fieldrow /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="Background" Value="{StaticResource Field}" />
+      <Setter Property="BorderBrush" Value="{StaticResource Border}" />
+      <Setter Property="BorderThickness" Value="1" />
+      <Setter Property="CornerRadius" Value="4" />
+      <Setter Property="Foreground" Value="{StaticResource Text}" />
+    </Style>
+    <Style Selector="Button.fieldrow:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="Background" Value="{StaticResource Hover}" />
+      <Setter Property="BorderBrush" Value="{StaticResource BorderHover}" />
+    </Style>
+
+    <!--
+      The glyph at the head of such a row. A fixed width so that four rows in a card line their text up, and
+      the faintest step in the ramp because it is a mark to skip rather than a fact to read: what the row
+      says is to its right.
+    -->
+    <Style Selector="TextBlock.fieldglyph">
+      <Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
+      <Setter Property="FontSize" Value="11" />
+      <Setter Property="Width" Value="16" />
+      <Setter Property="Foreground" Value="{StaticResource TextFaint}" />
+      <Setter Property="VerticalAlignment" Value="Center" />
+    </Style>
+
+    <!--
+      The two buttons in the drawer's header: the overflow menu and the arrow that puts the drawer away.
+      Chrome rather than controls — they are the frame around whichever panel is showing, which is why they
+      are flat and quiet until the pointer finds them.
+    -->
+    <Style Selector="Button.paneicon">
+      <Setter Property="Width" Value="26" />
+      <Setter Property="Height" Value="26" />
+      <Setter Property="CornerRadius" Value="6" />
+      <Setter Property="FontSize" Value="13" />
+      <Setter Property="Foreground" Value="{StaticResource TextFaint}" />
+      <Setter Property="HorizontalContentAlignment" Value="Center" />
+      <Setter Property="VerticalContentAlignment" Value="Center" />
+    </Style>
+    <Style Selector="Button.paneicon /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="CornerRadius" Value="6" />
+    </Style>
+    <Style Selector="Button.paneicon:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="Background" Value="{StaticResource ChromeHover}" />
+      <Setter Property="Foreground" Value="{StaticResource Text}" />
+    </Style>
+
     <!--
       The status dot, in one place rather than as a converter in code.