@shiyuphan/follow-me 0.1.1 → 0.2.0

package/dist/ui/style.css

@@ -4,7 +4,7 @@
   --panel: #f6f7f9;
   --border: #d8dce2;
   --text: #1c2026;
-  --muted: #6a7280;
+  --muted: #5f6774;
   --accent: #2459d6;
   --accent-text: #ffffff;
   --add-bg: #e3f6e8;
@@ -12,8 +12,24 @@
   --del-bg: #fde7e7;
   --del-text: #8a1c1c;
   --select-bg: #fff3c4;
+  --select-edge: #b38600;
   --comment-bg: #eef3ff;
+  --sev-blocker: #b42318;
+  --sev-major: #8a5300;
+  --sev-minor: #5f6774;
+  --question-bg: #eef1f4;
+  --question-edge: #5f6774;
+  --tok-comment: #5b6472;
+  --tok-keyword: #a8227e;
+  --tok-string: #8a4b08;
+  --tok-number: #00687d;
+  --tok-function: #1a4fc4;
+  --tok-type: #6b3fc0;
+  --tok-property: #3b5f8f;
+  --tok-tag: #b0261e;
   --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  --gutter: 9ch;
+  --sidebar: 300px;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -30,7 +46,21 @@
     --del-bg: #3a1a1c;
     --del-text: #ff9b9b;
     --select-bg: #4a4012;
+    --select-edge: #e0b830;
     --comment-bg: #1b2538;
+    --sev-blocker: #ff9b9b;
+    --sev-major: #f0b64a;
+    --sev-minor: #9aa3b2;
+    --question-bg: #222831;
+    --question-edge: #8d96a5;
+    --tok-comment: #adb5c3;
+    --tok-keyword: #ff8fd6;
+    --tok-string: #f0c674;
+    --tok-number: #5fd8ee;
+    --tok-function: #8fb4ff;
+    --tok-type: #c3a6ff;
+    --tok-property: #9db7d8;
+    --tok-tag: #ff9a8f;
   }
 }
 
@@ -63,6 +93,23 @@ body {
   background: var(--panel);
 }
 
+.banner {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 6px 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--comment-bg);
+}
+
+.banner[hidden] {
+  display: none;
+}
+
+.banner span {
+  flex: 1;
+}
+
 .sessions {
   display: flex;
   gap: 8px;
@@ -83,21 +130,6 @@ body {
   text-decoration: none;
 }
 
-body.index {
-  display: block;
-  height: auto;
-  padding: 16px 24px;
-}
-
-.session-index {
-  padding-left: 18px;
-}
-
-.session-index a {
-  color: var(--accent);
-  font-weight: 600;
-}
-
 .status {
   margin-left: auto;
   color: var(--del-text);
@@ -133,55 +165,81 @@ button.link {
 .layout {
   flex: 1;
   display: grid;
-  grid-template-columns: 300px 1fr;
+  grid-template-columns: var(--sidebar) minmax(0, 1fr) auto;
   min-height: 0;
 }
 
-.sidebar {
+.diagram-panel {
+  width: 380px;
   display: flex;
   flex-direction: column;
-  border-right: 1px solid var(--border);
+  border-left: 1px solid var(--border);
   background: var(--panel);
   min-height: 0;
 }
 
-.commit-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  overflow-y: auto;
-  flex: 1;
+.diagram-panel[hidden] {
+  display: none;
+}
+
+.diagram-panel.collapsed {
+  width: auto;
 }
 
-.commit-list li {
+.diagram-head {
   display: flex;
+  align-items: center;
   gap: 8px;
   padding: 8px 12px;
-  cursor: pointer;
-  border-left: 3px solid transparent;
+  font-size: 13px;
+  overflow: hidden;
+  white-space: nowrap;
 }
 
-.commit-list li:hover {
-  background: var(--bg);
+#diagram-toggle::before {
+  content: "▾ ";
 }
 
-.commit-list li.selected {
-  background: var(--bg);
-  border-left-color: var(--accent);
-  font-weight: 600;
+.diagram-panel.collapsed #diagram-toggle::before {
+  content: "◂ ";
 }
 
-.commit-list .index {
-  color: var(--muted);
-  min-width: 2ch;
-  text-align: right;
+.diagram-body {
+  flex: 1;
+  overflow: auto;
+  padding: 8px 12px 16px;
 }
 
-.commit-list .title {
+.diagram-panel.collapsed .diagram-body,
+.diagram-panel.collapsed #diagram-from {
+  display: none;
+}
+
+.diagram-body svg {
+  max-width: 100%;
+  height: auto;
+}
+
+.diagram-error {
+  color: var(--del-text);
+  white-space: pre-wrap;
+  font-size: 12px;
+}
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--border);
+  background: var(--panel);
+  min-height: 0;
+}
+
+.commit-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
   flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .badge {
@@ -202,11 +260,127 @@ button.link {
   padding: 16px 24px 64px;
 }
 
-.commit-head h2 {
-  margin: 0 0 4px;
+.stage {
+  position: sticky;
+  top: -16px;
+  z-index: 2;
+  margin: -16px -24px 8px;
+  padding: 10px 24px 8px;
+  background: var(--bg);
+  border-bottom: 1px solid var(--border);
+}
+
+.stage h2 {
+  margin: 0;
+  font-size: 15px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.stage h2:focus {
+  outline: none;
+}
+
+.stage .part {
+  font-weight: 400;
+  color: var(--muted);
+}
+
+.play {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  width: 92px;
+}
+
+.play .icon {
+  width: 1.2em;
+  font-size: 12px;
+  text-align: center;
+}
+
+.steps,
+.strip {
+  margin: 0;
+  padding: 0;
+  border: none;
+  min-inline-size: 0;
+}
+
+.steps {
+  display: flex;
+  gap: 4px;
+}
+
+.strip {
+  flex: 1 1 160px;
+  min-width: 120px;
+  display: flex;
+  gap: 3px;
+  height: 14px;
+}
+
+.strip .seg {
+  position: relative;
+  flex-basis: 0;
+  min-width: 6px;
+  padding: 0;
+  border: none;
+  border-radius: 3px;
+  background: var(--border);
+  overflow: hidden;
+}
+
+.strip .seg.here {
+  outline: 1px solid var(--accent);
+}
+
+.strip .fill {
+  position: absolute;
+  inset: 0 auto 0 0;
+  background: var(--accent);
+}
+
+.keys {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg);
+  color: var(--text);
+  padding: 16px 20px;
+  min-width: 360px;
+}
+
+.keys::backdrop {
+  background: rgb(0 0 0 / 0.3);
+}
+
+.keys h2 {
+  margin: 0 0 8px;
   font-size: 16px;
 }
 
+.keys dl {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 6px 16px;
+  margin: 0 0 12px;
+}
+
+.keys dd {
+  margin: 0;
+}
+
+kbd {
+  font: 12px var(--font-mono);
+  padding: 1px 5px;
+  border: 1px solid var(--border);
+  border-bottom-width: 2px;
+  border-radius: 4px;
+  background: var(--panel);
+}
+
 .message {
   font-family: var(--font-mono);
   white-space: pre-wrap;
@@ -271,25 +445,52 @@ button.link {
 }
 
 .dl .gutter {
-  width: 4ch;
-  text-align: right;
-  padding-right: 6px;
+  position: relative;
+  display: flex;
+  flex: none;
+  width: var(--gutter);
   color: var(--muted);
   user-select: none;
 }
 
+.dl .ln {
+  width: 50%;
+  padding-right: 6px;
+  text-align: right;
+}
+
+.add-comment {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 1.6em;
+  height: 1.5em;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: var(--accent);
+  color: var(--accent-text);
+  font: 600 12px / 1.5em var(--font-mono);
+  text-align: center;
+  opacity: 0;
+}
+
+.dl.mine:hover .add-comment,
+.dl.mine:focus-within .add-comment,
+.dl.mine:focus .add-comment {
+  opacity: 1;
+}
+
+.narration.notice {
+  border-left-color: var(--select-edge);
+  background: var(--select-bg);
+}
+
 .dl .op {
   width: 2ch;
   user-select: none;
 }
 
-.dl .label {
-  margin-left: 12px;
-  font-size: 11px;
-  color: var(--muted);
-  font-style: italic;
-}
-
 .dl.add.mine {
   background: var(--add-bg);
   color: var(--add-text);
@@ -300,19 +501,35 @@ button.link {
   color: var(--del-text);
 }
 
-.dl.other {
-  opacity: 0.4;
+.dl.mine {
+  cursor: pointer;
 }
 
-.dl.mine.pickable {
-  cursor: pointer;
+.fold {
+  display: block;
+  width: 100%;
+  padding: 1px 10px 1px calc(var(--gutter) + 2ch);
+  border: none;
+  border-radius: 0;
+  border-block: 1px dashed var(--border);
+  background: var(--panel);
+  color: var(--muted);
+  font: inherit;
+  text-align: left;
 }
 
-.dl.picked {
-  outline: 2px solid var(--accent);
-  outline-offset: -2px;
+.fold:hover {
+  color: var(--accent);
+}
+
+.unit-head .scope {
+  color: var(--text);
+}
+
+.dl.mine.picked {
   background: var(--select-bg);
   color: var(--text);
+  box-shadow: inset 3px 0 0 var(--select-edge);
 }
 
 .comments {
@@ -357,11 +574,24 @@ textarea {
   margin-top: 4px;
 }
 
+.box .hint {
+  align-self: center;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.diff .box {
+  margin: 4px 10px 8px calc(var(--gutter) + 2ch);
+  font-family: system-ui, sans-serif;
+}
+
 .done {
   position: fixed;
   inset: 0;
-  display: grid;
-  place-items: center;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   background: var(--bg);
   font-size: 16px;
   padding: 24px;
@@ -381,9 +611,10 @@ textarea {
 
 .player {
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   align-items: center;
-  gap: 8px 12px;
+  gap: 12px;
+  white-space: nowrap;
   padding: 6px 16px;
   border-bottom: 1px solid var(--border);
   background: var(--panel);
@@ -416,51 +647,685 @@ select:disabled {
   cursor: default;
 }
 
-.caption {
-  flex: 1 1 320px;
-  margin: 0;
+.narration {
+  margin: 8px 0;
+  padding: 8px 14px;
+  border-left: 3px solid var(--accent);
+  border-radius: 0 6px 6px 0;
+  background: var(--comment-bg);
+  font:
+    15px / 1.5 system-ui,
+    sans-serif;
+  white-space: pre-wrap;
+}
+
+.diff .narration {
+  margin: 6px 10px;
+}
+
+.narration.label {
+  border-left-color: var(--border);
+  background: var(--panel);
+  color: var(--muted);
+  font-size: 13px;
+}
+
+/* Every token colour keeps 4.5:1 on the page, the add and remove tints and the picked tint. */
+.tok-comment {
+  color: var(--tok-comment);
   font-style: italic;
-  color: var(--text);
+}
+
+.tok-keyword {
+  color: var(--tok-keyword);
+}
+
+.tok-string {
+  color: var(--tok-string);
+}
+
+.tok-number {
+  color: var(--tok-number);
+}
+
+.tok-function {
+  color: var(--tok-function);
+}
+
+.tok-type {
+  color: var(--tok-type);
+}
+
+.tok-property {
+  color: var(--tok-property);
+}
+
+.tok-tag {
+  color: var(--tok-tag);
 }
 
 .dl.pending {
   display: none;
 }
 
-.dl.gone {
-  opacity: 0;
-  max-height: 0;
-  overflow: hidden;
-  transition:
-    opacity 0.5s ease,
-    max-height 0.3s ease 0.5s;
+.dl.del .text {
+  text-decoration: line-through;
 }
 
-.dl.current {
-  outline: 2px solid var(--accent);
-  outline-offset: -2px;
-  animation: type-in 0.25s steps(16, end);
+.dl.in-chunk,
+.unit.in-chunk .card {
+  box-shadow: inset 3px 0 0 var(--accent);
+  animation: reveal 0.2s ease-out;
 }
 
-.dl.gone.current {
-  opacity: 0.45;
-  max-height: 2em;
-  text-decoration: line-through;
+.ph {
+  padding: 0 10px 0 calc(var(--gutter) + 2ch);
+  color: var(--muted);
+  font-style: italic;
+  background: var(--panel);
+}
+
+.ph.in-chunk {
+  box-shadow: inset 3px 0 0 var(--accent);
+}
+
+.countdown {
+  margin: 6px 0 0;
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.countdown .bar {
+  display: block;
+  height: 2px;
+  margin-top: 4px;
+  background: var(--accent);
+  transform-origin: left;
+  animation: countdown linear forwards;
+}
+
+.countdown.paused .bar {
+  animation-play-state: paused;
+}
+
+@keyframes reveal {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
-@keyframes type-in {
+@keyframes countdown {
   from {
-    clip-path: inset(0 100% 0 0);
+    transform: scaleX(1);
   }
   to {
-    clip-path: inset(0 0 0 0);
+    transform: scaleX(0);
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .dl.current,
-  .dl.gone {
+  .dl.in-chunk,
+  .unit.in-chunk .card {
     animation: none;
-    transition: none;
   }
 }
+
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+
+.status.error::before {
+  content: "⚠ ";
+}
+
+body.index {
+  display: block;
+  height: auto;
+  min-height: 100vh;
+  padding: 0;
+}
+
+.index-main {
+  max-width: 880px;
+  margin: 0 auto;
+  padding: 24px;
+}
+
+.index-main h1 {
+  font-size: 20px;
+  margin: 8px 0 16px;
+}
+
+.session-index {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+}
+
+.session-index li {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 2px 16px;
+  padding: 12px 16px;
+  border-top: 1px solid var(--border);
+}
+
+.session-index li:first-child {
+  border-top: none;
+}
+
+.session-index .session {
+  color: var(--text);
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.session-index .branch {
+  color: var(--accent);
+}
+
+.session-index .session:hover .branch {
+  text-decoration: underline;
+}
+
+.session-index .path {
+  grid-column: 1 / -1;
+  font: 12px var(--font-mono);
+}
+
+.mode {
+  justify-self: end;
+  padding: 0 8px;
+  border-radius: 10px;
+  font-size: 12px;
+  background: var(--comment-bg);
+  color: var(--text);
+}
+
+.empty {
+  margin-top: 15vh;
+  text-align: center;
+}
+
+.empty a,
+.done-card a {
+  color: var(--accent);
+}
+
+.empty code,
+.done-card code {
+  font-family: var(--font-mono);
+  background: var(--panel);
+  padding: 1px 6px;
+  border-radius: 4px;
+}
+
+.done-card {
+  width: min(520px, 100%);
+  padding: 24px 28px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--panel);
+  text-align: left;
+}
+
+.done-card h1 {
+  margin: 0 0 4px;
+  font-size: 20px;
+}
+
+.done-card h1:focus {
+  outline: none;
+}
+
+.done-card p {
+  margin: 8px 0;
+}
+
+.done-card .next {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+#confirm-end .row {
+  display: flex;
+  gap: 8px;
+}
+
+.commit-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 12px;
+  border: none;
+  border-left: 3px solid transparent;
+  border-radius: 0;
+  background: none;
+  color: inherit;
+  text-align: left;
+}
+
+.commit-row:hover,
+.commit-list li.selected .commit-row {
+  background: var(--bg);
+}
+
+.commit-list li.selected .commit-row {
+  border-left-color: var(--accent);
+}
+
+.commit-list .title {
+  flex: 1;
+  min-width: 0;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  font-size: 13px;
+  line-height: 1.35;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  overflow: hidden;
+}
+
+.commit-list li.selected .title {
+  -webkit-line-clamp: unset;
+  line-clamp: none;
+}
+
+.commit-list .index,
+.commit-list .mark,
+.commit-list .badge {
+  line-height: 1.35;
+  margin-top: 1px;
+}
+
+.commit-list .index {
+  color: var(--muted);
+  min-width: 2ch;
+  text-align: right;
+  font-size: 13px;
+}
+
+.commit-list .mark {
+  color: var(--accent);
+  font-size: 12px;
+}
+
+.commits-toggle,
+.rail-tip {
+  display: none;
+}
+
+@media (max-width: 1199px) {
+  :root {
+    --sidebar: 240px;
+  }
+
+  .diagram-panel {
+    width: 300px;
+  }
+}
+
+/* Below 900px the sidebar is a rail of numbers; the stage header carries the title. */
+@media (max-width: 899px) {
+  :root {
+    --sidebar: 56px;
+  }
+
+  .sidebar {
+    position: relative;
+    z-index: 3;
+  }
+
+  .commits-toggle {
+    display: block;
+    margin: 6px 4px;
+    padding: 2px 0;
+    font-size: 11px;
+  }
+
+  .sidebar:not(.open) .commit-row {
+    flex-direction: column;
+    align-items: center;
+    gap: 2px;
+    padding: 6px 0;
+  }
+
+  .sidebar:not(.open) .commit-list .title {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+  }
+
+  .sidebar:not(.open) .commit-list .index {
+    text-align: center;
+  }
+
+  .sidebar:not(.open) .plan-note,
+  .sidebar:not(.open) .answers {
+    display: none;
+  }
+
+  .sidebar.open {
+    width: 300px;
+    box-shadow: 4px 0 16px rgb(0 0 0 / 0.15);
+  }
+
+  .rail-tip:not([hidden]) {
+    display: block;
+    position: fixed;
+    z-index: 20;
+    max-width: 320px;
+    padding: 4px 8px;
+    border-radius: 4px;
+    background: var(--text);
+    color: var(--bg);
+    font-size: 13px;
+    pointer-events: none;
+  }
+}
+
+.comment.question {
+  background: var(--question-bg);
+  box-shadow: inset 3px 0 0 var(--question-edge);
+}
+
+.reply {
+  margin: 6px 0 0 14px;
+  padding: 4px 10px;
+  border-left: 2px solid var(--border);
+}
+
+.reply.agent {
+  border-left-color: var(--accent);
+}
+
+.reply .said {
+  white-space: pre-wrap;
+}
+
+.reply-diagram {
+  overflow-x: auto;
+  margin: 6px 0;
+}
+
+.reply-diagram svg {
+  max-width: 100%;
+  height: auto;
+}
+
+.kind {
+  display: flex;
+  gap: 4px;
+  margin-bottom: 4px;
+}
+
+.kind button[aria-pressed="true"] {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--accent-text);
+}
+
+.badge.question {
+  background: var(--question-bg);
+  color: var(--text);
+  box-shadow: inset 0 0 0 1px var(--question-edge);
+}
+
+.answers {
+  border-top: 1px solid var(--border);
+  padding: 8px 12px;
+  max-height: 45%;
+  overflow-y: auto;
+}
+
+.answers[hidden] {
+  display: none;
+}
+
+.answer-row {
+  display: block;
+  width: 100%;
+  margin-top: 4px;
+  text-align: left;
+  font-size: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.answer-row.done {
+  color: var(--muted);
+}
+
+.answer {
+  margin: 8px 10px;
+  padding: 8px 12px;
+  border-radius: 6px;
+  background: var(--comment-bg);
+  box-shadow: inset 3px 0 0 var(--accent);
+}
+
+.answer .said {
+  white-space: pre-wrap;
+}
+
+.answer .meta {
+  margin-top: 6px;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.answer-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.answer.resolved {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: var(--muted);
+  background: none;
+  box-shadow: none;
+  padding: 2px 12px;
+}
+
+.answers .answer {
+  margin: 6px 0;
+}
+
+.quote {
+  margin: 6px 0;
+  padding: 4px 8px;
+  overflow-x: auto;
+  font: 12px / 1.5 var(--font-mono);
+  background: var(--panel);
+  border-radius: 4px;
+}
+
+.concern {
+  margin: 6px 10px 8px;
+  padding: 8px 12px;
+  border-radius: 6px;
+  background: var(--panel);
+  border: 1px dashed var(--border);
+  border-left: 4px solid var(--sev, var(--sev-minor));
+  font-family: system-ui, sans-serif;
+  white-space: normal;
+}
+
+.diff .concern {
+  margin-left: calc(var(--gutter) + 2ch);
+  max-width: 70ch;
+}
+
+.concern.sev-blocker {
+  --sev: var(--sev-blocker);
+}
+
+.concern.sev-major {
+  --sev: var(--sev-major);
+}
+
+.concern.sev-minor {
+  --sev: var(--sev-minor);
+}
+
+.concern.kept {
+  border-style: solid;
+}
+
+.concern.pending {
+  display: none;
+}
+
+.concern.dismissed {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  color: var(--muted);
+  border-left-color: var(--border);
+  padding: 2px 12px;
+}
+
+.concern-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+}
+
+.concern .who {
+  font-weight: 600;
+}
+
+.concern .chip {
+  padding: 0 8px;
+  border: 1px solid var(--sev);
+  border-radius: 10px;
+  color: var(--sev);
+  font-weight: 600;
+}
+
+.concern .kind-tag,
+.concern .verdict {
+  color: var(--muted);
+}
+
+.concern .said {
+  margin: 4px 0;
+}
+
+.concern .said.mine {
+  color: var(--muted);
+}
+
+.concern-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 6px;
+}
+
+.concern .sev-pick {
+  margin-left: auto;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.concern .box {
+  margin: 6px 0;
+}
+
+.concern textarea {
+  min-height: 40px;
+}
+
+.dl.flagged .gutter::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  top: 3px;
+  bottom: 3px;
+  width: 3px;
+  border-radius: 2px;
+  background: var(--flag);
+}
+
+.dl.flag-blocker {
+  --flag: var(--sev-blocker);
+}
+
+.dl.flag-major {
+  --flag: var(--sev-major);
+}
+
+.dl.flag-minor {
+  --flag: var(--sev-minor);
+}
+
+.dot {
+  flex: none;
+  width: 9px;
+  height: 9px;
+  margin-top: 6px;
+  border-radius: 50%;
+  background: var(--sev-minor);
+}
+
+.dot.sev-blocker {
+  background: var(--sev-blocker);
+}
+
+.dot.sev-major {
+  background: var(--sev-major);
+}
+
+.to-decide {
+  color: var(--sev-major);
+}
+
+.kind select {
+  margin-left: auto;
+}
+
+.done-card.wide {
+  width: min(820px, 100%);
+}
+
+.report-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 6px;
+}
+
+.report-head button {
+  margin-left: auto;
+}
+
+.report {
+  margin: 0;
+  max-height: 38vh;
+  overflow: auto;
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg);
+  font: 12.5px / 1.5 var(--font-mono);
+  text-align: left;
+  white-space: pre-wrap;
+}