Question formatting

web/style.css

@@ -283,14 +283,16 @@ textarea {
 }
 
 .task-bar {
-  display: flex;
-  justify-content: center;
+  display: grid;
+  grid-template-columns: 1fr minmax(0, auto) 1fr;
+  align-items: center;
   padding: 0 12px;
   border-bottom: 1px solid var(--border);
   background: color-mix(in srgb, var(--task) 12%, var(--bg));
 }
 
 .task-bar .task-picker {
+  grid-column: 2;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -303,6 +305,20 @@ textarea {
   font-weight: 700;
 }
 
+.preview-links {
+  grid-column: 3;
+  justify-self: end;
+  display: flex;
+  gap: 12px;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.preview-link {
+  white-space: nowrap;
+  color: var(--task);
+}
+
 .task-pane > .pane-tabs button.active {
   border-bottom-color: var(--task);
 }
@@ -381,7 +397,6 @@ a.task-link {
 .changes-view,
 .files-view,
 .terminal-view,
-.preview-view,
 .inbox-view,
 .reviews-view {
   flex: 1;
@@ -669,9 +684,17 @@ button.compact.danger {
   margin: 0 0 8px;
 }
 
-.md ul,
+.md ul {
+  padding-left: 3ch;
+}
+
 .md ol {
-  padding-left: 22px;
+  padding-left: 4ch;
+}
+
+.md li .copyable,
+.md li .md-table {
+  margin-top: 6px;
 }
 
 .md li > ul,
@@ -724,6 +747,15 @@ button.compact.danger {
   padding: 0;
 }
 
+.md pre.md-code.diff {
+  padding: 6px 0;
+  font-size: inherit;
+}
+
+.md pre.md-code.diff .line {
+  padding: 0 8px;
+}
+
 .md .md-table {
   overflow-x: auto;
 }
@@ -880,9 +912,10 @@ button.compact.danger {
   position: absolute;
   top: 4px;
   right: 4px;
-  padding: 0 6px;
+  display: flex;
+  padding: 4px;
   border-radius: 4px;
-  font-size: 11px;
+  line-height: 0;
   color: var(--muted);
   background: var(--raised);
   opacity: 0;
@@ -1351,58 +1384,6 @@ pre.diff .meta {
   background: var(--bg);
 }
 
-.preview-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  gap: 12px;
-  padding: 8px 16px;
-  border-bottom: 1px solid var(--border);
-}
-
-.preview-names {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  min-width: 0;
-}
-
-.preview-name {
-  padding: 0 6px;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  background: none;
-  color: var(--accent);
-}
-
-.preview-name.active {
-  border-color: var(--border);
-  color: var(--text);
-}
-
-.preview-port {
-  color: var(--muted);
-}
-
-.preview-open {
-  font-size: 11px;
-  white-space: nowrap;
-}
-
-.preview-body {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-}
-
-.preview-frame {
-  flex: 1;
-  width: 100%;
-  border: none;
-  background: var(--bg);
-}
-
 .entries {
   display: flex;
   flex-direction: column;
@@ -1604,7 +1585,77 @@ pre.file-text .line::before {
 }
 
 .md li.choice + li.choice {
-  margin-top: 4px;
+  margin-top: 8px;
+}
+
+.md ul:has(> li.choice) {
+  padding-left: 0;
+}
+
+.choice-box,
+.pick.choice-box {
+  display: block;
+  padding: 0;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--raised);
+}
+
+.choice-box.rec {
+  border-color: color-mix(in srgb, var(--ok) 55%, var(--border));
+}
+
+.choice-head {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  padding: 6px 10px;
+  background: var(--surface);
+  font-weight: 600;
+}
+
+.choice-box.rec > .choice-head {
+  background: color-mix(in srgb, var(--ok) 12%, var(--surface));
+}
+
+.choice-name {
+  flex: 1;
+  min-width: 0;
+}
+
+.choice-head .recommended {
+  margin-left: 0;
+  font-weight: 400;
+}
+
+.choice-head input {
+  flex: none;
+  margin: 0;
+  align-self: center;
+}
+
+.choice-detail {
+  padding: 8px 10px;
+  border-top: 1px solid var(--border);
+}
+
+.choice-detail > :last-child {
+  margin-bottom: 0;
+}
+
+.choice-detail > .copyable:first-child {
+  margin-top: 0;
+}
+
+.pick.choice-box:hover,
+.pick.choice-box:focus-visible {
+  border-color: var(--accent);
+}
+
+.pick.choice-box:hover > .choice-head,
+.pick.choice-box:focus-visible > .choice-head {
+  background: var(--accent-tint);
 }
 
 .pick {