Files
ClaudeDo/src/ClaudeDo.Ui/Design/IslandStyles.axaml
T
mika kuns b81d6e0b4f feat(ui): render dependency-chain rail, step badge, and after-chip in TaskRowView
Reuses the existing 24px indent track (now gated on ShowAsChild OR
ShowAsChainMember) instead of a second mechanism, adds a round step-number
badge centered on the rail line, and a dimmed "after X" chip for chain
members whose head isn't in view or that render as a planning child.
2026-08-11 15:14:39 +02:00

1279 lines
66 KiB
XML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!--
ClaudeDo component styles for Avalonia.
Depends on Tokens.axaml being merged first.
How to use each style:
<Border Classes="island"> — floating island container
<Border Classes="chip running"> — status chip
<Button Classes="icon-btn"> — 24×24 icon button
<Button Classes="btn primary"> — rounded-rect button
<TextBlock Classes="eyebrow"> — uppercase mono label
<Border Classes="terminal"> — terminal/log window
-->
<Styles xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- ============================================================ -->
<!-- ICON GEOMETRY RESOURCES -->
<!-- ============================================================ -->
<Styles.Resources>
<!-- Window control icons — filled geometries (PathIcon fills, not strokes) -->
<StreamGeometry x:Key="Icon.WinMin">M4 9 H16 V11 H4 Z</StreamGeometry>
<StreamGeometry x:Key="Icon.WinMax">M4 4 H16 V6 H4 Z M4 14 H16 V16 H4 Z M4 4 H6 V16 H4 Z M14 4 H16 V16 H14 Z</StreamGeometry>
<!-- Icon.Grid (four filled panes — Mission Control launcher) -->
<StreamGeometry x:Key="Icon.Grid">M3 3 H9 V9 H3 Z M11 3 H17 V9 H11 Z M3 11 H9 V17 H3 Z M11 11 H17 V17 H11 Z</StreamGeometry>
<StreamGeometry x:Key="Icon.WinRestore">M4 7 H13 V9 H4 Z M4 14 H13 V16 H4 Z M4 7 H6 V16 H4 Z M11 7 H13 V16 H11 Z M7 4 H16 V6 H7 Z M14 4 H16 V13 H14 Z</StreamGeometry>
<StreamGeometry x:Key="Icon.WinClose">M4 5 L5 4 L16 15 L15 16 Z M15 4 L16 5 L5 16 L4 15 Z</StreamGeometry>
<!-- Brand check glyph — filled rounded square with inset tick -->
<StreamGeometry x:Key="Icon.BrandCheck">M3 3 H21 V21 H3 Z M6 12 L7 11 L10 14 L17 7 L18 8 L10 16 Z</StreamGeometry>
<!-- ============================================================ -->
<!-- Icons — central icon library (Phase B) -->
<!-- All d-strings sourced from icons.jsx -->
<!-- ============================================================ -->
<!-- Icon.Sun -->
<StreamGeometry x:Key="Icon.Sun">M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8z M12 3v2M12 19v2M3 12h2M19 12h2M5.5 5.5l1.4 1.4M17.1 17.1l1.4 1.4M5.5 18.5l1.4-1.4M17.1 6.9l1.4-1.4</StreamGeometry>
<!-- Icon.Activity (pulse waveform) -->
<StreamGeometry x:Key="Icon.Activity">M3 12h4l2-6 4 12 2-8 2 2h4</StreamGeometry>
<!-- Icon.Star -->
<StreamGeometry x:Key="Icon.Star">M12 3.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.2-4.1 5.8-.8z</StreamGeometry>
<!-- Icon.Calendar -->
<StreamGeometry x:Key="Icon.Calendar">M3.5 5a2 2 0 0 1 2-2h13a2 2 0 0 1 2 2v15a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2z M3.5 10h17M8 3v4M16 3v4</StreamGeometry>
<!-- Icon.Eye -->
<StreamGeometry x:Key="Icon.Eye">M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z</StreamGeometry>
<!-- Icon.Inbox -->
<StreamGeometry x:Key="Icon.Inbox">M3 13h5l1 2h6l1-2h5M3 13l3-8h12l3 8v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z</StreamGeometry>
<!-- Icon.Folder -->
<StreamGeometry x:Key="Icon.Folder">M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z</StreamGeometry>
<!-- Icon.Search -->
<StreamGeometry x:Key="Icon.Search">M11 4a7 7 0 1 0 0 14A7 7 0 0 0 11 4z M20 20l-3.5-3.5</StreamGeometry>
<!-- Icon.Plus — filled cross (PathIcon fills, so a stroke-only plus renders invisible) -->
<StreamGeometry x:Key="Icon.Plus">M10.6 5 H13.4 V10.6 H19 V13.4 H13.4 V19 H10.6 V13.4 H5 V10.6 H10.6 Z</StreamGeometry>
<!-- Icon.MoreHorizontal (three filled dots) — uses fill so rendered via PathIcon with fill brush -->
<StreamGeometry x:Key="Icon.MoreHorizontal">M5 12m-1.3 0a1.3 1.3 0 1 0 2.6 0 1.3 1.3 0 1 0-2.6 0 M12 12m-1.3 0a1.3 1.3 0 1 0 2.6 0 1.3 1.3 0 1 0-2.6 0 M19 12m-1.3 0a1.3 1.3 0 1 0 2.6 0 1.3 1.3 0 1 0-2.6 0</StreamGeometry>
<!-- Icon.GitBranch -->
<StreamGeometry x:Key="Icon.GitBranch">M6 3a2 2 0 1 0 0 4 2 2 0 0 0 0-4z M6 19a2 2 0 1 0 0 4 2 2 0 0 0 0-4z M18 5a2 2 0 1 0 0 4 2 2 0 0 0 0-4z M6 7v10M6 13c0-4 12-2 12-4</StreamGeometry>
<!-- Icon.Copy -->
<StreamGeometry x:Key="Icon.Copy">M8 8h12a1.5 1.5 0 0 1 1.5 1.5v12A1.5 1.5 0 0 1 20 23H8a1.5 1.5 0 0 1-1.5-1.5v-12A1.5 1.5 0 0 1 8 8z M16 8V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h3</StreamGeometry>
<!-- Icon.Trash -->
<StreamGeometry x:Key="Icon.Trash">M4 7h16M10 11v6M14 11v6M5 7l1 13a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1l1-13M9 7V4h6v3</StreamGeometry>
<!-- Icon.Broom (filled: handle + binding band + flared bristles) -->
<StreamGeometry x:Key="Icon.Broom">M11 3 H13 V10 H11 Z M8.5 10 H15.5 V12 H8.5 Z M9 12 H15 L17 21 H7 Z</StreamGeometry>
<!-- Icon.PlanDay (stroke-rendered via Path.plan-icon — sun over horizon) -->
<StreamGeometry x:Key="Icon.PlanDay">M3,20 L21,20 M8.4,11 a3.6,3.6 0 1,0 7.2,0 a3.6,3.6 0 1,0 -7.2,0 M12,4.5 L12,3 M6,11 L4.5,11 M18,11 L19.5,11 M7.5,6.5 L6.4,5.4 M16.5,6.5 L17.6,5.4</StreamGeometry>
<!-- Icon.Refine (stroke-rendered via Path.plan-icon — list lines + two sparkles) -->
<StreamGeometry x:Key="Icon.Refine">M3,6 L13,6 M3,11 L11,11 M3,16 L9,16 M18.5,3 L19.28,5.22 L21.5,6 L19.28,6.78 L18.5,9 L17.72,6.78 L15.5,6 L17.72,5.22 Z M19.5,14.9 L19.85,16.15 L21.1,16.5 L19.85,16.85 L19.5,18.1 L19.15,16.85 L17.9,16.5 L19.15,16.15 Z</StreamGeometry>
<!-- Icon.X — filled X outline (PathIcon fills, so a stroke-only X renders invisible) -->
<StreamGeometry x:Key="Icon.X">M6.4 4.6 L12 10.2 L17.6 4.6 L19.4 6.4 L13.8 12 L19.4 17.6 L17.6 19.4 L12 13.8 L6.4 19.4 L4.6 17.6 L10.2 12 L4.6 6.4 Z</StreamGeometry>
<!-- Icon.Stop — filled square (stop / interrupt) -->
<StreamGeometry x:Key="Icon.Stop">M4 4 H20 V20 H4 Z</StreamGeometry>
<!-- Icon.Check -->
<StreamGeometry x:Key="Icon.Check">M4 12l5 5 11-11</StreamGeometry>
<!-- Icon.ArrowOut — filled arrow for "open external" button -->
<StreamGeometry x:Key="Icon.ArrowOut">M13 4 H20 V11 H18 V7.4 L11.4 14 L10 12.6 L16.6 6 H13 Z M4 6 H10 V8 H6 V18 H16 V14 H18 V20 H4 Z</StreamGeometry>
<!-- Icon.ChevronRight / Icon.ChevronDown — filled expand/collapse chevrons (PathIcon fills) -->
<StreamGeometry x:Key="Icon.ChevronRight">M9 5 L16 12 L9 19 L6.8 16.8 L11.6 12 L6.8 7.2 Z</StreamGeometry>
<StreamGeometry x:Key="Icon.ChevronDown">M5 9 L12 16 L19 9 L16.8 6.8 L12 11.6 L7.2 6.8 Z</StreamGeometry>
<!-- Icon.Text — three filled horizontal bars (paragraph / description icon) -->
<StreamGeometry x:Key="Icon.Text">M4 6 H20 V8 H4 Z M4 11 H20 V13 H4 Z M4 16 H14 V18 H4 Z</StreamGeometry>
<!-- Icon.Warning — filled triangle with exclamation (roadblock badge) -->
<StreamGeometry x:Key="Icon.Warning">F0 M12 3 L22 20 H2 Z M11 9 H13 V14 H11 Z M11 16 H13 V18 H11 Z</StreamGeometry>
<!-- Icon.AgentSuggested — filled diamond (agent-suggested child badge) -->
<StreamGeometry x:Key="Icon.AgentSuggested">M12 3 L20 12 L12 21 L4 12 Z</StreamGeometry>
<!-- Icon.Settings (gear) -->
<StreamGeometry x:Key="Icon.Settings">M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8z M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65a.5.5 0 0 0 .12-.64l-2-3.46a.5.5 0 0 0-.61-.22l-2.49 1a7.03 7.03 0 0 0-1.69-.98l-.38-2.65a.5.5 0 0 0-.5-.42h-4a.5.5 0 0 0-.5.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1a.5.5 0 0 0-.61.22l-2 3.46a.5.5 0 0 0 .12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65a.5.5 0 0 0-.12.64l2 3.46a.5.5 0 0 0 .61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65a.5.5 0 0 0 .5.42h4a.5.5 0 0 0 .5-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1a.5.5 0 0 0 .61-.22l2-3.46a.5.5 0 0 0-.12-.64l-2.11-1.65z</StreamGeometry>
<!-- Icon.Wrap — a full-width line above a line that wraps back with an arrowhead -->
<StreamGeometry x:Key="Icon.Wrap">M3 5 H21 V7 H3 Z M3 11 H17 A4 4 0 0 1 17 19 H12 V21 L7 18 L12 15 V17 H17 A2 2 0 0 0 17 13 H3 Z</StreamGeometry>
<!-- Icon.Skull — filled silhouette: rounded cranium + eye holes (EvenOdd) + jaw -->
<StreamGeometry x:Key="Icon.Skull">F0 M12 2 C7 2 4 5.5 4 10 C4 13.5 6 16 8 17.5 L8 19 C8 20 8.9 21 10 21 L10 18.5 L14 18.5 L14 21 C15.1 21 16 20 16 19 L16 17.5 C18 16 20 13.5 20 10 C20 5.5 17 2 12 2 Z M8.5 8 L8.5 12 L11 12 L11 8 Z M13 8 L13 12 L15.5 12 L15.5 8 Z</StreamGeometry>
<!-- Badge brushes -->
<SolidColorBrush x:Key="DraftBadgeBrush" Color="{StaticResource TextMuteColor}"/>
<SolidColorBrush x:Key="PlanningBadgeBrush" Color="{StaticResource PeatColor}"/>
<SolidColorBrush x:Key="PlannedBadgeBrush" Color="{StaticResource SageColor}"/>
<SolidColorBrush x:Key="ManualBadgeBrush" Color="{StaticResource TextFaintColor}"/>
</Styles.Resources>
<!-- ============================================================ -->
<!-- TITLE BAR CONTROLS -->
<!-- ============================================================ -->
<Style Selector="Button.title-ctrl">
<Setter Property="Width" Value="36" />
<Setter Property="Height" Value="36" />
<Setter Property="Padding" Value="0" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="CornerRadius" Value="0" />
<Setter Property="Foreground" Value="{StaticResource TextMuteBrush}" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
</Style>
<Style Selector="Button.title-ctrl:pointerover /template/ ContentPresenter">
<Setter Property="Background" Value="{StaticResource Surface2Brush}" />
<Setter Property="TextElement.Foreground" Value="{StaticResource TextBrush}" />
</Style>
<Style Selector="Button.title-ctrl.close:pointerover /template/ ContentPresenter">
<Setter Property="Background" Value="{StaticResource BloodBrush}" />
<Setter Property="TextElement.Foreground" Value="{StaticResource TextBrush}" />
</Style>
<!-- ============================================================ -->
<!-- ISLAND -->
<!-- ============================================================ -->
<Style Selector="Border.island">
<Setter Property="Background" Value="{StaticResource IslandBackgroundBrush}" />
<Setter Property="BorderBrush" Value="{StaticResource HairlineOverlayBrush}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="{StaticResource IslandCornerRadius}" />
<Setter Property="BoxShadow" Value="{StaticResource IslandShadow}" />
<Setter Property="ClipToBounds" Value="True" />
</Style>
<!-- Island header separator (apply on the header Border inside an island) -->
<Style Selector="Border.island-header">
<Setter Property="Padding" Value="{StaticResource IslandHeaderPadding}" />
<Setter Property="BorderBrush" Value="{StaticResource LineBrush}" />
<Setter Property="BorderThickness" Value="0,0,0,1" />
</Style>
<!-- ============================================================ -->
<!-- CHIPS / BADGES -->
<!-- ============================================================ -->
<Style Selector="Border.chip">
<Setter Property="CornerRadius" Value="{StaticResource ChipCornerRadius}" />
<Setter Property="Padding" Value="8,3" />
<Setter Property="Background" Value="{StaticResource Surface2Brush}" />
<Setter Property="BorderBrush" Value="{StaticResource LineBrush}" />
<Setter Property="BorderThickness" Value="1" />
</Style>
<Style Selector="Border.chip > TextBlock">
<Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
<Setter Property="FontSize" Value="{StaticResource FontSizeEyebrow}" />
<Setter Property="Foreground" Value="{StaticResource TextDimBrush}" />
</Style>
<!-- Status variants — tint background 12% alpha of the status hue -->
<Style Selector="Border.chip.running">
<Setter Property="Background" Value="{StaticResource RunningTintBrush}" />
<Setter Property="BorderBrush" Value="{StaticResource RunningTintBorderBrush}" />
</Style>
<Style Selector="Border.chip.running > TextBlock">
<Setter Property="Foreground" Value="{StaticResource StatusRunningBrush}" />
</Style>
<Style Selector="Border.chip.review">
<Setter Property="Background" Value="{StaticResource ReviewTintBrush}" />
<Setter Property="BorderBrush" Value="{StaticResource ReviewTintBorderBrush}" />
</Style>
<Style Selector="Border.chip.review > TextBlock">
<Setter Property="Foreground" Value="{StaticResource StatusReviewBrush}" />
</Style>
<Style Selector="Border.chip.children">
<Setter Property="Background" Value="#332A1A" />
<Setter Property="BorderBrush" Value="#4D3A1A" />
</Style>
<Style Selector="Border.chip.children > TextBlock">
<Setter Property="Foreground" Value="#E0A030" />
</Style>
<Style Selector="Border.chip.error">
<Setter Property="Background" Value="{StaticResource ErrorTintBrush}" />
<Setter Property="BorderBrush" Value="{StaticResource ErrorTintBorderBrush}" />
</Style>
<Style Selector="Border.chip.error > TextBlock">
<Setter Property="Foreground" Value="{StaticResource StatusErrorBrush}" />
</Style>
<!-- queued → Sage (#8B9D7A) -->
<Style Selector="Border.chip.queued">
<Setter Property="Background" Value="{StaticResource QueuedTintBrush}" />
<Setter Property="BorderBrush" Value="{StaticResource QueuedTintBorderBrush}" />
</Style>
<Style Selector="Border.chip.queued > TextBlock">
<Setter Property="Foreground" Value="{StaticResource StatusQueuedBrush}" />
</Style>
<!-- done → green (#6FA86B) -->
<Style Selector="Border.chip.done">
<Setter Property="Background" Value="{StaticResource DoneTintBrush}" />
<Setter Property="BorderBrush" Value="{StaticResource DoneTintBorderBrush}" />
</Style>
<Style Selector="Border.chip.done > TextBlock">
<Setter Property="Foreground" Value="{StaticResource StatusDoneBrush}" />
</Style>
<!-- idle → TextMute (#6B7973) -->
<Style Selector="Border.chip.idle">
<Setter Property="Background" Value="{StaticResource Surface2Brush}" />
<Setter Property="BorderBrush" Value="{StaticResource LineBrush}" />
</Style>
<Style Selector="Border.chip.idle > TextBlock">
<Setter Property="Foreground" Value="{StaticResource TextMuteBrush}" />
</Style>
<!-- parked → slate-blue: an Idle task still holding its Active worktree -->
<Style Selector="Border.chip.parked">
<Setter Property="Background" Value="#22303A" />
<Setter Property="BorderBrush" Value="#3A5060" />
</Style>
<Style Selector="Border.chip.parked > TextBlock">
<Setter Property="Foreground" Value="#8FB9D6" />
</Style>
<!-- interactive → accent, the "live" family shared with running: the task has a ConPTY session
open in Mission Control. Clickable (jumps to that pane), hence the hand cursor + hover lift.
Deliberately NOT the slate-blue parked treatment — telling the two apart is the whole point. -->
<Style Selector="Border.chip.interactive">
<Setter Property="Background" Value="{StaticResource RunningTintBrush}" />
<Setter Property="BorderBrush" Value="{StaticResource AccentBrush}" />
<Setter Property="Cursor" Value="Hand" />
</Style>
<Style Selector="Border.chip.interactive > TextBlock">
<Setter Property="Foreground" Value="{StaticResource AccentBrush}" />
</Style>
<Style Selector="Border.chip.interactive:pointerover">
<Setter Property="Background" Value="{StaticResource AccentSoftBrush}" />
</Style>
<!-- Worktree-state chips (worktrees overview) -->
<!-- active → slate-blue (same hue as parked: a live worktree) -->
<Style Selector="Border.chip.wt-active">
<Setter Property="Background" Value="#22303A" />
<Setter Property="BorderBrush" Value="#3A5060" />
</Style>
<Style Selector="Border.chip.wt-active > TextBlock">
<Setter Property="Foreground" Value="#8FB9D6" />
</Style>
<!-- merged → green -->
<Style Selector="Border.chip.wt-merged">
<Setter Property="Background" Value="{StaticResource DoneTintBrush}" />
<Setter Property="BorderBrush" Value="{StaticResource DoneTintBorderBrush}" />
</Style>
<Style Selector="Border.chip.wt-merged > TextBlock">
<Setter Property="Foreground" Value="{StaticResource StatusDoneBrush}" />
</Style>
<!-- kept → amber -->
<Style Selector="Border.chip.wt-kept">
<Setter Property="Background" Value="{StaticResource ReviewTintBrush}" />
<Setter Property="BorderBrush" Value="{StaticResource ReviewTintBorderBrush}" />
</Style>
<Style Selector="Border.chip.wt-kept > TextBlock">
<Setter Property="Foreground" Value="{StaticResource StatusReviewBrush}" />
</Style>
<!-- discarded → muted gray (same as idle) -->
<Style Selector="Border.chip.wt-discarded">
<Setter Property="Background" Value="{StaticResource Surface2Brush}" />
<Setter Property="BorderBrush" Value="{StaticResource LineBrush}" />
</Style>
<Style Selector="Border.chip.wt-discarded > TextBlock">
<Setter Property="Foreground" Value="{StaticResource TextMuteBrush}" />
</Style>
<!-- ============================================================ -->
<!-- BUTTONS -->
<!-- ============================================================ -->
<Style Selector="Button.btn">
<Setter Property="Background" Value="{StaticResource Surface2Brush}" />
<Setter Property="BorderBrush" Value="{StaticResource LineBrush}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="{StaticResource ButtonCornerRadius}" />
<Setter Property="Padding" Value="10,6" />
<Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
<Setter Property="FontSize" Value="{StaticResource FontSizeMono}" />
<Setter Property="Foreground" Value="{StaticResource TextDimBrush}" />
<Setter Property="Transitions">
<Transitions>
<BrushTransition Property="Background" Duration="0:0:0.12" />
<BrushTransition Property="BorderBrush" Duration="0:0:0.12" />
</Transitions>
</Setter>
</Style>
<Style Selector="Button.btn:pointerover /template/ ContentPresenter">
<Setter Property="Background" Value="{StaticResource Surface3Brush}" />
<Setter Property="BorderBrush" Value="{StaticResource LineBrightBrush}" />
</Style>
<!-- Icon button: 24×24 square with hover surface. The ToggleButton variant is the same
chrome for a persisted on/off control (its "on" state is the :checked rule below). -->
<Style Selector="Button.icon-btn, ToggleButton.icon-btn">
<Setter Property="Width" Value="24" />
<Setter Property="Height" Value="24" />
<Setter Property="Padding" Value="0" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="CornerRadius" Value="6" />
<Setter Property="Foreground" Value="{StaticResource TextMuteBrush}" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
</Style>
<Style Selector="Button.icon-btn:pointerover /template/ ContentPresenter, ToggleButton.icon-btn:pointerover /template/ ContentPresenter">
<Setter Property="Background" Value="{StaticResource Surface2Brush}" />
<Setter Property="TextElement.Foreground" Value="{StaticResource TextBrush}" />
</Style>
<Style Selector="ToggleButton.icon-btn:checked /template/ ContentPresenter">
<Setter Property="Background" Value="{StaticResource Surface3Brush}" />
<Setter Property="TextElement.Foreground" Value="{StaticResource AccentBrush}" />
</Style>
<!-- PathIcon fills with its own Foreground and does not pick up TextElement.Foreground,
so the icon's three states are set on the icon itself. -->
<Style Selector="ToggleButton.icon-btn PathIcon">
<Setter Property="Foreground" Value="{StaticResource TextMuteBrush}" />
</Style>
<Style Selector="ToggleButton.icon-btn:pointerover PathIcon">
<Setter Property="Foreground" Value="{StaticResource TextBrush}" />
</Style>
<Style Selector="ToggleButton.icon-btn:checked PathIcon">
<Setter Property="Foreground" Value="{StaticResource AccentBrush}" />
</Style>
<!-- Segmented switch: one control, mutually exclusive segments, active one highlighted.
Use for picking a mode (not for independent on/off flags — those are icon toggles). -->
<Style Selector="Border.segmented">
<Setter Property="Background" Value="{StaticResource DeepBrush}" />
<Setter Property="BorderBrush" Value="{StaticResource LineBrush}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="{StaticResource ButtonCornerRadius}" />
<Setter Property="Padding" Value="2" />
</Style>
<Style Selector="Border.segmented Button.segment">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Padding" Value="10,4" />
<Setter Property="CornerRadius" Value="4" />
<Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
<Setter Property="FontSize" Value="{StaticResource FontSizeMono}" />
<Setter Property="Foreground" Value="{StaticResource TextMuteBrush}" />
</Style>
<Style Selector="Border.segmented Button.segment:pointerover /template/ ContentPresenter">
<Setter Property="Background" Value="{StaticResource Surface2Brush}" />
<Setter Property="TextElement.Foreground" Value="{StaticResource TextBrush}" />
</Style>
<!-- Declared after :pointerover so hovering the active segment keeps the active look. -->
<Style Selector="Border.segmented Button.segment.active /template/ ContentPresenter">
<Setter Property="Background" Value="{StaticResource Surface3Brush}" />
<Setter Property="TextElement.Foreground" Value="{StaticResource AccentBrush}" />
</Style>
<!-- Stroke-rendered icon (for line-art geometries that PathIcon would fill away) -->
<Style Selector="Button.icon-btn Path.plan-icon">
<Setter Property="Stroke" Value="{StaticResource TextBrush}" />
<Setter Property="StrokeThickness" Value="1.7" />
<Setter Property="StrokeLineCap" Value="Round" />
<Setter Property="StrokeJoin" Value="Round" />
</Style>
<Style Selector="Button.icon-btn:pointerover Path.plan-icon">
<Setter Property="Stroke" Value="{StaticResource AccentBrush}" />
</Style>
<!-- ============================================================ -->
<!-- INPUTS -->
<!-- ============================================================ -->
<Style Selector="TextBox.search">
<Setter Property="Background" Value="{StaticResource DeepBrush}" />
<Setter Property="BorderBrush" Value="{StaticResource LineBrush}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="{StaticResource InputCornerRadius}" />
<Setter Property="Padding" Value="10,8" />
<Setter Property="FontSize" Value="{StaticResource FontSizeBody}" />
<Setter Property="Foreground" Value="{StaticResource TextBrush}" />
<Setter Property="CaretBrush" Value="{StaticResource AccentBrush}" />
</Style>
<Style Selector="TextBox.search:focus /template/ Border#PART_BorderElement">
<Setter Property="BorderBrush" Value="{StaticResource AccentBrush}" />
<Setter Property="BoxShadow" Value="0 0 0 3 #387C9166" />
</Style>
<!-- ============================================================ -->
<!-- FLAT BUTTON — replaces the entire Button template with a -->
<!-- bare ContentPresenter so no Fluent chrome (bg / hover / -->
<!-- pressed) can render. Used to wrap TaskRowView for clicks. -->
<!-- ============================================================ -->
<Style Selector="Button.flat">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Padding" Value="0" />
<Setter Property="CornerRadius" Value="0" />
<Setter Property="Foreground" Value="{StaticResource TextBrush}" />
<Setter Property="Template">
<ControlTemplate>
<ContentPresenter Name="PART_ContentPresenter"
Background="Transparent"
BorderBrush="Transparent"
BorderThickness="0"
Padding="0"
CornerRadius="0"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
</ControlTemplate>
</Setter>
</Style>
<Style Selector="Button.flat:pointerover /template/ ContentPresenter">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
</Style>
<Style Selector="Button.flat:pressed /template/ ContentPresenter">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
</Style>
<Style Selector="Button.flat:focus /template/ ContentPresenter">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
</Style>
<!-- ============================================================ -->
<!-- TASK ROW -->
<!-- ============================================================ -->
<Style Selector="Border.task-row">
<Setter Property="Padding" Value="12,10" />
<Setter Property="CornerRadius" Value="8" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="{StaticResource LineBrush}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Margin" Value="0,0,0,6" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Transitions">
<Transitions>
<BrushTransition Property="Background" Duration="0:0:0.12" />
<BrushTransition Property="BorderBrush" Duration="0:0:0.12" />
<ThicknessTransition Property="Margin" Duration="0:0:0.15" />
<TransformOperationsTransition Property="RenderTransform" Duration="0:0:0.12" />
<DoubleTransition Property="Opacity" Duration="0:0:0.12" />
</Transitions>
</Setter>
</Style>
<Style Selector="Border.task-row:pointerover">
<Setter Property="BorderBrush" Value="{StaticResource LineBrightBrush}" />
</Style>
<Style Selector="Border.task-row.selected">
<Setter Property="BorderBrush" Value="{StaticResource AccentBrush}" />
<Setter Property="BorderThickness" Value="1" />
</Style>
<!-- "Grabbed" row: collapses out of layout entirely while the custom drag runs — the
floating ghost snapshot (TaskDragController) is what the user sees moving. -->
<Style Selector="Border.task-row.dragging">
<Setter Property="IsVisible" Value="False" />
<Setter Property="Transitions" Value="{x:Null}" />
</Style>
<!-- Row currently hovered while dragging (shows the dashed drop-hint gap): suppress the
ordinary hover highlight and transitions so they don't fight the hint. Placed after
Border.task-row:pointerover so its extra class also wins on declaration order. -->
<Style Selector="Border.task-row.drop-target">
<Setter Property="Transitions" Value="{x:Null}" />
</Style>
<Style Selector="Border.task-row.drop-target:pointerover">
<Setter Property="BorderBrush" Value="{StaticResource LineBrush}" />
</Style>
<!-- Checkbox indicator (the 18px circle that replaces the native CheckBox template) -->
<Style Selector="Ellipse.task-check">
<Setter Property="Width" Value="18" />
<Setter Property="Height" Value="18" />
<Setter Property="StrokeThickness" Value="1.5" />
<Setter Property="Stroke" Value="{StaticResource TextMuteBrush}" />
<Setter Property="Fill" Value="Transparent" />
</Style>
<Style Selector="Ellipse.task-check.done">
<Setter Property="Stroke" Value="{StaticResource AccentBrush}" />
<Setter Property="Fill" Value="{StaticResource AccentBrush}" />
</Style>
<!-- Status dot pulse (applied when running) -->
<Style Selector="Ellipse.status-pulse">
<Style.Animations>
<Animation Duration="0:0:1.2" IterationCount="INFINITE" Easing="CubicEaseInOut">
<KeyFrame Cue="0%"><Setter Property="Opacity" Value="0.4"/></KeyFrame>
<KeyFrame Cue="50%"><Setter Property="Opacity" Value="1.0"/></KeyFrame>
<KeyFrame Cue="100%"><Setter Property="Opacity" Value="0.4"/></KeyFrame>
</Animation>
</Style.Animations>
</Style>
<!-- Indeterminate ring spinner (dashed ring, rotated forever) -->
<Style Selector="Ellipse.spinner">
<Setter Property="Width" Value="14" />
<Setter Property="Height" Value="14" />
<Setter Property="Stroke" Value="{StaticResource AccentBrush}" />
<Setter Property="StrokeThickness" Value="2" />
<Setter Property="StrokeDashArray" Value="3,2" />
<Setter Property="RenderTransform" Value="rotate(0deg)" />
<Style.Animations>
<Animation Duration="0:0:0.9" IterationCount="INFINITE" Easing="LinearEasing">
<KeyFrame Cue="0%"> <Setter Property="RotateTransform.Angle" Value="0" /> </KeyFrame>
<KeyFrame Cue="100%"><Setter Property="RotateTransform.Angle" Value="360" /></KeyFrame>
</Animation>
</Style.Animations>
</Style>
<Style Selector="Ellipse.spinner.dim">
<Setter Property="Stroke" Value="{StaticResource TextDimBrush}" />
</Style>
<!-- ============================================================ -->
<!-- TERMINAL / LOG -->
<!-- ============================================================ -->
<Style Selector="Border.terminal">
<Setter Property="Background" Value="{StaticResource VoidBrush}" />
<Setter Property="CornerRadius" Value="8" />
<Setter Property="Padding" Value="12" />
<Setter Property="BorderBrush" Value="{StaticResource LineBrush}" />
<Setter Property="BorderThickness" Value="1" />
</Style>
<Style Selector="Border.terminal TextBlock">
<Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
<Setter Property="FontSize" Value="{StaticResource FontSizeMono}" />
<Setter Property="Foreground" Value="{StaticResource TextDimBrush}" />
</Style>
<Style Selector="Border.terminal TextBlock[Tag=log-sys]">
<Setter Property="Foreground" Value="{StaticResource TextMuteBrush}" />
</Style>
<Style Selector="Border.terminal TextBlock[Tag=log-tool]">
<Setter Property="Foreground" Value="{StaticResource SageBrush}" />
</Style>
<Style Selector="Border.terminal TextBlock[Tag=log-claude]">
<Setter Property="Foreground" Value="{StaticResource TextBrush}" />
</Style>
<!-- log-stdout: program output — dim text, same as base -->
<Style Selector="Border.terminal TextBlock[Tag=log-stdout]">
<Setter Property="Foreground" Value="{StaticResource TextDimBrush}" />
</Style>
<Style Selector="Border.terminal TextBlock[Tag=log-stderr]">
<Setter Property="Foreground" Value="{StaticResource BloodBrush}" />
</Style>
<Style Selector="Border.terminal TextBlock[Tag=log-done]">
<Setter Property="Foreground" Value="{StaticResource MossBrightBrush}" />
</Style>
<!-- log-msg: generic informational message — slightly brighter than sys -->
<Style Selector="Border.terminal TextBlock[Tag=log-msg]">
<Setter Property="Foreground" Value="{StaticResource TextDimBrush}" />
</Style>
<!-- log-user: user's own messages in interactive sessions — accent color to stand out -->
<Style Selector="Border.terminal TextBlock[Tag=log-user]">
<Setter Property="Foreground" Value="{DynamicResource AccentBrush}" />
</Style>
<!-- ============================================================ -->
<!-- TERMINAL HEADER -->
<!-- ============================================================ -->
<!-- traffic-light dot colors -->
<Style Selector="Ellipse.dot-red">
<Setter Property="Width" Value="8" />
<Setter Property="Height" Value="8" />
<Setter Property="Fill" Value="#5A2A26" />
</Style>
<Style Selector="Ellipse.dot-yellow">
<Setter Property="Width" Value="8" />
<Setter Property="Height" Value="8" />
<Setter Property="Fill" Value="#6A5A28" />
</Style>
<Style Selector="Ellipse.dot-green">
<Setter Property="Width" Value="8" />
<Setter Property="Height" Value="8" />
<Setter Property="Fill" Value="#2F4D2F" />
</Style>
<!-- LIVE chip (pulsing dot + text) -->
<Style Selector="Border.live-chip">
<Setter Property="Padding" Value="5,2" />
<Setter Property="CornerRadius" Value="4" />
<Setter Property="Background" Value="#267C9166" />
</Style>
<Style Selector="Border.live-chip > StackPanel > TextBlock">
<Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
<Setter Property="FontSize" Value="{StaticResource FontSizeEyebrow}" />
<Setter Property="Foreground" Value="{StaticResource AccentBrush}" />
<Setter Property="LetterSpacing" Value="1.2" />
</Style>
<Style Selector="Border.live-chip > StackPanel > Ellipse">
<Setter Property="Width" Value="6" />
<Setter Property="Height" Value="6" />
<Setter Property="Fill" Value="{StaticResource AccentBrush}" />
</Style>
<Style Selector="Border.live-chip.pulsing > StackPanel > Ellipse">
<Style.Animations>
<Animation Duration="0:0:1.4" IterationCount="INFINITE" Easing="CubicEaseInOut">
<KeyFrame Cue="0%"> <Setter Property="Opacity" Value="1.0"/></KeyFrame>
<KeyFrame Cue="50%"> <Setter Property="Opacity" Value="0.3"/></KeyFrame>
<KeyFrame Cue="100%"><Setter Property="Opacity" Value="1.0"/></KeyFrame>
</Animation>
</Style.Animations>
</Style>
<!-- Terminal log-line timestamp column -->
<Style Selector="TextBlock.log-ts">
<Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
<Setter Property="FontSize" Value="{StaticResource FontSizeEyebrow}" />
<Setter Property="Foreground" Value="{StaticResource TextFaintBrush}" />
<Setter Property="Width" Value="60" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Margin" Value="0,0,4,0" />
</Style>
<!-- Kind marker column -->
<Style Selector="TextBlock.log-kind">
<Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
<Setter Property="FontSize" Value="{StaticResource FontSizeEyebrow}" />
<Setter Property="Foreground" Value="{StaticResource TextMuteBrush}" />
<Setter Property="Width" Value="46" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Margin" Value="0,0,6,0" />
</Style>
<Style Selector="TextBlock.log-kind[Tag=log-tool]">
<Setter Property="Foreground" Value="{StaticResource SageBrush}" />
</Style>
<Style Selector="TextBlock.log-kind[Tag=log-claude]">
<Setter Property="Foreground" Value="{StaticResource TextBrush}" />
</Style>
<Style Selector="TextBlock.log-kind[Tag=log-stderr]">
<Setter Property="Foreground" Value="{StaticResource BloodBrush}" />
</Style>
<Style Selector="TextBlock.log-kind[Tag=log-done]">
<Setter Property="Foreground" Value="{StaticResource MossBrightBrush}" />
</Style>
<!-- ============================================================ -->
<!-- WORKTREE MODAL STATUS BADGES -->
<!-- Tag="M" → peat, "A" → moss, "D" → blood, "?" → faint -->
<!-- ============================================================ -->
<Style Selector="Border[Tag=M]">
<Setter Property="Background" Value="#26A06040"/>
</Style>
<Style Selector="Border[Tag=M] > TextBlock">
<Setter Property="Foreground" Value="{StaticResource PeatBrush}"/>
</Style>
<Style Selector="Border[Tag=A]">
<Setter Property="Background" Value="#267C9166"/>
</Style>
<Style Selector="Border[Tag=A] > TextBlock">
<Setter Property="Foreground" Value="{StaticResource MossBrush}"/>
</Style>
<Style Selector="Border[Tag=D]">
<Setter Property="Background" Value="#26C87060"/>
</Style>
<Style Selector="Border[Tag=D] > TextBlock">
<Setter Property="Foreground" Value="{StaticResource BloodBrush}"/>
</Style>
<Style Selector="Border[Tag=?]">
<Setter Property="Background" Value="#1A888888"/>
</Style>
<Style Selector="Border[Tag=?] > TextBlock">
<Setter Property="Foreground" Value="{StaticResource TextFaintBrush}"/>
</Style>
<!-- R → rename (sage) -->
<Style Selector="Border[Tag=R]">
<Setter Property="Background" Value="#268B9D7A"/>
</Style>
<Style Selector="Border[Tag=R] > TextBlock">
<Setter Property="Foreground" Value="{StaticResource SageBrush}"/>
</Style>
<!-- ============================================================ -->
<!-- LIST NAV ITEM -->
<!-- ============================================================ -->
<Style Selector="Border.list-item">
<Setter Property="Padding" Value="10,7" />
<Setter Property="CornerRadius" Value="8" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Background" Value="Transparent" />
<!-- Reserved so the task-drop highlight below only swaps the brush — a thickness that changes
on hover would nudge the row's content while dragging over it. -->
<Setter Property="BorderThickness" Value="1.5" />
<Setter Property="BorderBrush" Value="Transparent" />
</Style>
<Style Selector="Border.list-item:pointerover">
<Setter Property="Background" Value="{StaticResource Surface2Brush}" />
</Style>
<Style Selector="Border.list-item.active">
<Setter Property="Background" Value="{StaticResource AccentSoftBrush}" />
</Style>
<!-- Highlighted while a dragged task hovers over this row as a move target. -->
<Style Selector="Border.list-item.drop-target">
<Setter Property="Background" Value="{StaticResource AccentSoftBrush}" />
<Setter Property="BorderBrush" Value="{StaticResource AccentBrush}" />
</Style>
<!-- Active item text / icon colors -->
<Style Selector="Border.list-item.active TextBlock.list-label">
<Setter Property="Foreground" Value="{StaticResource TextBrush}" />
</Style>
<Style Selector="Border.list-item.active PathIcon.list-icon">
<Setter Property="Foreground" Value="{StaticResource AccentBrush}" />
</Style>
<!-- Count badge — larger, high contrast, brighter when the row is active -->
<Style Selector="TextBlock.list-count">
<Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
<Setter Property="FontSize" Value="{StaticResource FontSizeBody}" />
<Setter Property="FontWeight" Value="Medium" />
<Setter Property="Foreground" Value="{StaticResource TextDimBrush}" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Margin" Value="8,0,4,0" />
</Style>
<Style Selector="Border.list-item.active TextBlock.list-count">
<Setter Property="Foreground" Value="{StaticResource TextBrush}" />
<Setter Property="FontWeight" Value="SemiBold" />
</Style>
<!-- ============================================================ -->
<!-- SEARCH BOX WRAPPER -->
<!-- ============================================================ -->
<Style Selector="Border.search-wrap">
<Setter Property="Background" Value="{StaticResource DeepBrush}" />
<Setter Property="BorderBrush" Value="{StaticResource LineBrush}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="8" />
<Setter Property="Padding" Value="8,0" />
</Style>
<Style Selector="Border.search-wrap:focus-within">
<Setter Property="BorderBrush" Value="{StaticResource AccentBrush}" />
</Style>
<!-- Borderless TextBox inside search-wrap -->
<Style Selector="Border.search-wrap TextBox.search-inner">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Padding" Value="4,7" />
<Setter Property="FontSize" Value="{StaticResource FontSizeBody}" />
<Setter Property="Foreground" Value="{StaticResource TextBrush}" />
<Setter Property="CaretBrush" Value="{StaticResource AccentBrush}" />
</Style>
<Style Selector="Border.search-wrap TextBox.search-inner /template/ Border#PART_BorderElement">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="BoxShadow" Value="none" />
</Style>
<!-- ============================================================ -->
<!-- KBD CHIP -->
<!-- ============================================================ -->
<Style Selector="Border.kbd">
<Setter Property="Background" Value="{StaticResource Surface2Brush}" />
<Setter Property="BorderBrush" Value="{StaticResource LineBrush}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="4" />
<Setter Property="Padding" Value="8,3" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalAlignment" Value="Center" />
</Style>
<Style Selector="Border.kbd > TextBlock">
<Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
<Setter Property="FontSize" Value="{StaticResource FontSizeEyebrow}" />
<Setter Property="Foreground" Value="{StaticResource TextFaintBrush}" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="TextAlignment" Value="Center" />
</Style>
<!-- ============================================================ -->
<!-- NEW LIST BUTTON -->
<!-- ============================================================ -->
<Style Selector="Button.new-list-btn">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Padding" Value="10,8" />
<Setter Property="Foreground" Value="{StaticResource TextMuteBrush}" />
<Setter Property="FontSize" Value="{StaticResource FontSizeBody}" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="Cursor" Value="Hand" />
</Style>
<Style Selector="Button.new-list-btn:pointerover /template/ ContentPresenter">
<Setter Property="Background" Value="{StaticResource Surface2Brush}" />
<Setter Property="TextElement.Foreground" Value="{StaticResource TextBrush}" />
</Style>
<!-- ============================================================ -->
<!-- FOOTER PROFILE ROW -->
<!-- ============================================================ -->
<Style Selector="Border.avatar-circle">
<Setter Property="Width" Value="28" />
<Setter Property="Height" Value="28" />
<Setter Property="CornerRadius" Value="14" />
<Setter Property="Background" Value="{StaticResource AccentDimBrush}" />
</Style>
<!-- ============================================================ -->
<!-- ADD-TASK ROW -->
<!-- ============================================================ -->
<Style Selector="Border.add-task">
<Setter Property="Background" Value="{StaticResource Surface2Brush}" />
<Setter Property="BorderBrush" Value="{StaticResource LineBrush}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="10" />
<Setter Property="Padding" Value="14,12" />
<Setter Property="Transitions">
<Transitions>
<BrushTransition Property="BorderBrush" Duration="0:0:0.15" />
</Transitions>
</Setter>
</Style>
<Style Selector="Border.add-task:focus-within">
<Setter Property="BorderBrush" Value="{StaticResource AccentDimBrush}" />
</Style>
<!-- Plus circle inside the add-task row -->
<Style Selector="Border.add-task-plus">
<Setter Property="Width" Value="20" />
<Setter Property="Height" Value="20" />
<Setter Property="CornerRadius" Value="10" />
<Setter Property="Background" Value="{StaticResource Surface3Brush}" />
<Setter Property="BorderBrush" Value="{StaticResource LineBrush}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Padding" Value="0" />
</Style>
<Style Selector="Border.add-task-plus > PathIcon">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
<!-- Borderless TextBox inside the add-task row -->
<Style Selector="TextBox.add-task-input">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Padding" Value="0" />
<Setter Property="FontSize" Value="{StaticResource FontSizeTaskTitle}" />
<Setter Property="Foreground" Value="{StaticResource TextBrush}" />
<Setter Property="CaretBrush" Value="{StaticResource AccentBrush}" />
<Setter Property="MinHeight" Value="20" />
</Style>
<Style Selector="TextBox.add-task-input /template/ Border#PART_BorderElement">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="BoxShadow" Value="none" />
</Style>
<!-- kbd-enter variant (no extra styles needed — base kbd works) -->
<Style Selector="Border.kbd.kbd-enter > TextBlock">
<Setter Property="LetterSpacing" Value="1.2" />
</Style>
<!-- ============================================================ -->
<!-- HEADER TOOLBAR icon-btn active state -->
<!-- ============================================================ -->
<Style Selector="Button.icon-btn.active /template/ ContentPresenter">
<Setter Property="Background" Value="{StaticResource Surface3Brush}" />
<Setter Property="TextElement.Foreground" Value="{StaticResource AccentBrush}" />
</Style>
<!-- ============================================================ -->
<!-- TASK ROW — extensions (C2) -->
<!-- ============================================================ -->
<!-- Left accent bar for selected row -->
<Style Selector="Border.task-row-accent">
<Setter Property="Width" Value="2" />
<Setter Property="Background" Value="{StaticResource AccentBrush}" />
<Setter Property="CornerRadius" Value="1" />
<Setter Property="Margin" Value="0,4" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Stretch" />
</Style>
<!-- Done state: dim the whole row and strike through the title -->
<Style Selector="Border.task-row.done">
<Setter Property="Opacity" Value="0.45" />
</Style>
<Style Selector="Border.task-row.done TextBlock.task-title">
<Setter Property="Foreground" Value="{StaticResource TextFaintBrush}" />
<Setter Property="TextDecorations" Value="Strikethrough" />
</Style>
<!-- ============================================================ -->
<!-- CHIP EXTENSIONS -->
<!-- ============================================================ -->
<!-- Slightly slimmer chips inside task rows -->
<Style Selector="Border.task-row Border.chip">
<Setter Property="Padding" Value="6,2" />
<Setter Property="CornerRadius" Value="4" />
</Style>
<Style Selector="Border.task-row Border.chip > StackPanel > TextBlock">
<Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
<Setter Property="FontSize" Value="{StaticResource FontSizeEyebrow}" />
<Setter Property="Foreground" Value="{StaticResource TextDimBrush}" />
</Style>
<!-- Tag chip: faint text -->
<Style Selector="Border.chip.chip-tag > TextBlock">
<Setter Property="Foreground" Value="{StaticResource TextFaintBrush}" />
</Style>
<!-- Diff chip add/del coloring -->
<Style Selector="TextBlock.diff-add">
<Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
<Setter Property="FontSize" Value="{StaticResource FontSizeEyebrow}" />
<Setter Property="Foreground" Value="{StaticResource MossBrightBrush}" />
</Style>
<Style Selector="TextBlock.diff-del">
<Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
<Setter Property="FontSize" Value="{StaticResource FontSizeEyebrow}" />
<Setter Property="Foreground" Value="{StaticResource BloodBrush}" />
</Style>
<!-- ============================================================ -->
<!-- STAR BUTTON -->
<!-- ============================================================ -->
<Style Selector="Button.star-btn">
<Setter Property="Foreground" Value="{StaticResource TextFaintBrush}" />
<Setter Property="Opacity" Value="0.6" />
</Style>
<Style Selector="Button.star-btn.on">
<Setter Property="Foreground" Value="{StaticResource PeatBrush}" />
<Setter Property="Opacity" Value="1.0" />
</Style>
<Style Selector="Button.star-btn.on /template/ ContentPresenter">
<Setter Property="TextElement.Foreground" Value="{StaticResource PeatBrush}" />
</Style>
<!-- ============================================================ -->
<!-- LIVE-TAIL PREVIEW ROW -->
<!-- ============================================================ -->
<Style Selector="Border.task-live-tail">
<Setter Property="Background" Value="{StaticResource VoidBrush}" />
<Setter Property="BorderBrush" Value="{StaticResource LineBrush}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="5" />
<Setter Property="Padding" Value="8,4" />
<Setter Property="Margin" Value="0,2,0,0" />
</Style>
<Style Selector="Border.task-live-tail TextBlock">
<Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
<Setter Property="FontSize" Value="{StaticResource FontSizeMono}" />
<Setter Property="Foreground" Value="{StaticResource TextDimBrush}" />
</Style>
<!-- ============================================================ -->
<!-- SUBTASK ROW -->
<!-- ============================================================ -->
<Style Selector="Border.subtask-row">
<Setter Property="Padding" Value="8,5" />
<Setter Property="CornerRadius" Value="6" />
<Setter Property="Background" Value="Transparent" />
</Style>
<Style Selector="Border.subtask-row:pointerover">
<Setter Property="Background" Value="{StaticResource Surface3Brush}" />
</Style>
<Style Selector="Border.subtask-row.done TextBlock.subtask-title">
<Setter Property="Opacity" Value="0.5" />
<Setter Property="TextDecorations" Value="Strikethrough" />
</Style>
<Style Selector="TextBox.subtask-edit">
<Setter Property="Padding" Value="4,2" />
<Setter Property="MinHeight" Value="0" />
<Setter Property="Background" Value="{StaticResource Surface2Brush}" />
<Setter Property="BorderBrush" Value="{DynamicResource LineBrush}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="6" />
<Setter Property="Foreground" Value="{DynamicResource TextBrush}" />
</Style>
<!-- ============================================================ -->
<!-- SECTION LABELS (OVERDUE / TASKS / COMPLETED) -->
<!-- ============================================================ -->
<Style Selector="TextBlock.section-label">
<Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
<Setter Property="FontSize" Value="{StaticResource FontSizeMono}" />
<Setter Property="Foreground" Value="{StaticResource TextMuteBrush}" />
<Setter Property="LetterSpacing" Value="1.4" />
</Style>
<Style Selector="TextBlock.section-label.overdue">
<Setter Property="Foreground" Value="{StaticResource BloodBrush}" />
</Style>
<!-- ============================================================ -->
<!-- PLANNING / DRAFT BADGES -->
<!-- ============================================================ -->
<Style Selector="Border.badge">
<Setter Property="CornerRadius" Value="3"/>
<Setter Property="Padding" Value="4,1"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
<Style Selector="Border.badge > TextBlock">
<Setter Property="FontSize" Value="{StaticResource FontSizeEyebrow}"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Foreground" Value="{StaticResource TextBrush}"/>
</Style>
<Style Selector="Border.badge.draft">
<Setter Property="Background" Value="{DynamicResource DraftBadgeBrush}"/>
</Style>
<Style Selector="Border.badge.planning">
<Setter Property="Background" Value="{DynamicResource PlanningBadgeBrush}"/>
</Style>
<Style Selector="Border.badge.planned">
<Setter Property="Background" Value="{DynamicResource PlannedBadgeBrush}"/>
</Style>
<!-- manual → faint gray: a reminder Claude never touches -->
<Style Selector="Border.badge.manual">
<Setter Property="Background" Value="{DynamicResource ManualBadgeBrush}"/>
</Style>
<!-- ============================================================ -->
<!-- CHAIN DEPENDENCY RAIL (step badge on the 24px indent track) -->
<!-- ============================================================ -->
<Style Selector="Border.chain-step-badge">
<Setter Property="Width" Value="16"/>
<Setter Property="Height" Value="16"/>
<Setter Property="CornerRadius" Value="{StaticResource PillCornerRadius}"/>
<Setter Property="Background" Value="{StaticResource Surface2Brush}"/>
<Setter Property="BorderBrush" Value="{StaticResource LineBrush}"/>
<Setter Property="BorderThickness" Value="1"/>
</Style>
<Style Selector="Border.chain-step-badge > TextBlock">
<Setter Property="FontFamily" Value="{StaticResource MonoFont}"/>
<Setter Property="FontSize" Value="{StaticResource FontSizeEyebrow}"/>
<Setter Property="Foreground" Value="{StaticResource TextDimBrush}"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
<!-- ============================================================ -->
<!-- SHARED MODAL STYLES (promoted from per-modal Window.Styles) -->
<!-- ============================================================ -->
<Style Selector="TextBlock.field-label">
<Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
<Setter Property="FontSize" Value="{StaticResource FontSizeMono}" />
<Setter Property="Foreground" Value="{StaticResource TextDimBrush}" />
<Setter Property="Margin" Value="0,0,0,4" />
</Style>
<Style Selector="TextBlock.path-mono">
<Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
<Setter Property="FontSize" Value="{StaticResource FontSizeMono}" />
<Setter Property="Foreground" Value="{StaticResource TextDimBrush}" />
<Setter Property="TextTrimming" Value="CharacterEllipsis" />
</Style>
<!-- Self-contained action buttons (same geometry as Button.btn, distinct color).
Used standalone, e.g. Classes="primary" / "danger". -->
<Style Selector="Button.primary">
<Setter Property="Background" Value="{StaticResource AccentDimBrush}" />
<Setter Property="BorderBrush" Value="{StaticResource AccentBrush}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="{StaticResource ButtonCornerRadius}" />
<Setter Property="Padding" Value="10,6" />
<Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
<Setter Property="FontSize" Value="{StaticResource FontSizeMono}" />
<Setter Property="Foreground" Value="{StaticResource TextBrush}" />
<Setter Property="FontWeight" Value="SemiBold" />
</Style>
<Style Selector="Button.danger">
<Setter Property="Background" Value="{StaticResource BloodBrush}" />
<Setter Property="BorderBrush" Value="{StaticResource BloodBrush}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="{StaticResource ButtonCornerRadius}" />
<Setter Property="Padding" Value="10,6" />
<Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
<Setter Property="FontSize" Value="{StaticResource FontSizeMono}" />
<Setter Property="Foreground" Value="{StaticResource TextBrush}" />
<Setter Property="FontWeight" Value="SemiBold" />
</Style>
<!-- ============================================================ -->
<!-- CANONICAL TYPOGRAPHY -->
<!-- One class per text role. Small text = 11 (eyebrow/meta/ -->
<!-- field-label/path-mono). Body = 13. Heading = 18. Display = 24.-->
<!-- ============================================================ -->
<!-- Small secondary mono text: timestamps, ids, hints, status, diffstat, age -->
<Style Selector="TextBlock.meta">
<Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
<Setter Property="FontSize" Value="{StaticResource FontSizeMono}" />
<Setter Property="Foreground" Value="{StaticResource TextDimBrush}" />
</Style>
<!-- Default body / list values / descriptions -->
<Style Selector="TextBlock.body">
<Setter Property="FontFamily" Value="{StaticResource SansFont}" />
<Setter Property="FontSize" Value="{StaticResource FontSizeBody}" />
<Setter Property="Foreground" Value="{StaticResource TextDimBrush}" />
</Style>
<!-- Item / task / detail titles -->
<Style Selector="TextBlock.title">
<Setter Property="FontFamily" Value="{StaticResource SansFont}" />
<Setter Property="FontSize" Value="{StaticResource FontSizeBody}" />
<Setter Property="FontWeight" Value="Medium" />
<Setter Property="Foreground" Value="{StaticResource TextBrush}" />
</Style>
<!-- Panel / section headings ("Lists", modal section titles) -->
<Style Selector="TextBlock.heading">
<Setter Property="FontFamily" Value="{StaticResource SansFont}" />
<Setter Property="FontSize" Value="{StaticResource FontSizeH3}" />
<Setter Property="FontWeight" Value="SemiBold" />
<Setter Property="Foreground" Value="{StaticResource TextBrush}" />
</Style>
<!-- Main board / island display title -->
<Style Selector="TextBlock.display">
<Setter Property="FontFamily" Value="{StaticResource SansFont}" />
<Setter Property="FontSize" Value="{StaticResource FontSizeH2}" />
<Setter Property="FontWeight" Value="SemiBold" />
<Setter Property="Foreground" Value="{StaticResource TextBrush}" />
<Setter Property="TextTrimming" Value="CharacterEllipsis" />
</Style>
<!-- ============================================================ -->
<!-- SHARED CONTAINERS (promoted from per-view inline/local styles)-->
<!-- ============================================================ -->
<!-- Bordered card / settings section -->
<Style Selector="Border.section">
<Setter Property="BorderBrush" Value="{StaticResource LineBrush}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="{StaticResource ButtonCornerRadius}" />
<Setter Property="Padding" Value="14" />
<Setter Property="Background" Value="{StaticResource DeepBrush}" />
</Style>
<!-- Stacked content section with a bottom hairline (Details island) -->
<Style Selector="Border.section-divider">
<Setter Property="Padding" Value="18,12" />
<Setter Property="BorderBrush" Value="{StaticResource LineBrush}" />
<Setter Property="BorderThickness" Value="0,0,0,1" />
</Style>
<!-- Inline danger confirm box -->
<Style Selector="Border.danger-box">
<Setter Property="BorderBrush" Value="{StaticResource BloodBrush}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="{StaticResource ButtonCornerRadius}" />
<Setter Property="Padding" Value="12,10" />
</Style>
<!-- Left sidebar pane with vertical hairline (diff/planning views) -->
<Style Selector="Border.sidebar-pane">
<Setter Property="BorderBrush" Value="{StaticResource LineBrush}" />
<Setter Property="BorderThickness" Value="0,0,1,0" />
<Setter Property="Background" Value="{StaticResource DeepBrush}" />
</Style>
<!-- Terminal selectable log text (SelectableTextBlock doesn't inherit the TextBlock terminal style) -->
<Style Selector="Border.terminal SelectableTextBlock">
<Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
<Setter Property="FontSize" Value="{StaticResource FontSizeMono}" />
<Setter Property="Foreground" Value="{StaticResource TextDimBrush}" />
</Style>
<!-- Accent call-to-action button (Send to queue / Continue / Schedule) -->
<Style Selector="Button.accent">
<Setter Property="Background" Value="{StaticResource AccentDimBrush}" />
<Setter Property="BorderBrush" Value="{StaticResource AccentBrush}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="{StaticResource ButtonCornerRadius}" />
<Setter Property="Padding" Value="10,6" />
<Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
<Setter Property="FontSize" Value="{StaticResource FontSizeMono}" />
<Setter Property="Foreground" Value="{StaticResource TextBrush}" />
<Setter Property="FontWeight" Value="SemiBold" />
</Style>
<!-- Override Fluent's built-in accent button (SystemAccentColor = blue) at the
ContentPresenter level so our moss tokens win across rest/hover/pressed. -->
<Style Selector="Button.accent /template/ ContentPresenter">
<Setter Property="Background" Value="{StaticResource AccentDimBrush}" />
<Setter Property="BorderBrush" Value="{StaticResource AccentBrush}" />
<Setter Property="TextElement.Foreground" Value="{StaticResource TextBrush}" />
</Style>
<Style Selector="Button.accent:pointerover /template/ ContentPresenter">
<Setter Property="Background" Value="{StaticResource AccentBrush}" />
<Setter Property="BorderBrush" Value="{StaticResource AccentBrush}" />
<Setter Property="TextElement.Foreground" Value="{StaticResource TextBrush}" />
</Style>
<Style Selector="Button.accent:pressed /template/ ContentPresenter">
<Setter Property="Background" Value="{StaticResource AccentSoftBrush}" />
<Setter Property="BorderBrush" Value="{StaticResource AccentBrush}" />
<Setter Property="TextElement.Foreground" Value="{StaticResource TextBrush}" />
</Style>
<!-- Disabled: drop the accent so a gated action (e.g. Approve before the diff is
opened) reads clearly as unavailable instead of looking clickable. -->
<Style Selector="Button.accent:disabled /template/ ContentPresenter">
<Setter Property="Background" Value="{StaticResource Surface2Brush}" />
<Setter Property="BorderBrush" Value="{StaticResource LineBrush}" />
<Setter Property="TextElement.Foreground" Value="{StaticResource TextMuteBrush}" />
</Style>
<!-- ============================================================ -->
<!-- DAY TOGGLE -->
<!-- Small ToggleButton for weekday pickers (Prime schedule row) -->
<!-- ============================================================ -->
<Style Selector="ToggleButton.day-toggle">
<Setter Property="MinWidth" Value="34"/>
<Setter Property="Padding" Value="6,4"/>
<Setter Property="Margin" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="Background" Value="{DynamicResource DeepBrush}"/>
<Setter Property="Foreground" Value="{DynamicResource TextBrush}"/>
<Setter Property="BorderBrush" Value="{DynamicResource LineBrush}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="CornerRadius" Value="4"/>
</Style>
<Style Selector="ToggleButton.day-toggle:checked /template/ ContentPresenter">
<Setter Property="Background" Value="{DynamicResource AccentBrush}"/>
</Style>
<!-- ============================================================ -->
<!-- MISSION CONTROL PANE STATUS TINTING -->
<!-- Base neutral grey; tints layer on by status. -->
<!-- Running / idle / queued: no class → fall through to base. -->
<!-- ============================================================ -->
<Style Selector="Border.monitor-pane">
<Setter Property="Background" Value="{DynamicResource SurfaceBrush}" />
<Setter Property="BorderBrush" Value="{DynamicResource LineBrush}" />
</Style>
<Style Selector="Border.monitor-pane.mon-done">
<Setter Property="Background" Value="{DynamicResource DoneTintBrush}" />
<Setter Property="BorderBrush" Value="{DynamicResource DoneTintBorderBrush}" />
</Style>
<Style Selector="Border.monitor-pane.mon-review">
<Setter Property="Background" Value="{DynamicResource DoneTintBrush}" />
<Setter Property="BorderBrush" Value="{DynamicResource DoneTintBorderBrush}" />
</Style>
<Style Selector="Border.monitor-pane.mon-roadblock">
<Setter Property="Background" Value="{DynamicResource RoadblockTintBrush}" />
<Setter Property="BorderBrush" Value="{DynamicResource RoadblockTintBorderBrush}" />
</Style>
<Style Selector="Border.monitor-pane.mon-failed">
<Setter Property="Background" Value="{DynamicResource ErrorTintBrush}" />
<Setter Property="BorderBrush" Value="{DynamicResource ErrorTintBorderBrush}" />
</Style>
</Styles>