@shiyuphan/follow-me 0.2.0 → 0.3.0

package/dist/ui/style.css

@@ -1,1331 +0,0 @@
-:root {
-  color-scheme: light dark;
-  --bg: #ffffff;
-  --panel: #f6f7f9;
-  --border: #d8dce2;
-  --text: #1c2026;
-  --muted: #5f6774;
-  --accent: #2459d6;
-  --accent-text: #ffffff;
-  --add-bg: #e3f6e8;
-  --add-text: #0f5a26;
-  --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) {
-  :root {
-    --bg: #14171c;
-    --panel: #1c2027;
-    --border: #2f353f;
-    --text: #e4e7ec;
-    --muted: #8d96a5;
-    --accent: #6c9bff;
-    --accent-text: #0b1220;
-    --add-bg: #12301c;
-    --add-text: #7fdc9a;
-    --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;
-  }
-}
-
-* {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  background: var(--bg);
-  color: var(--text);
-  font:
-    14px / 1.5 system-ui,
-    sans-serif;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-.muted {
-  color: var(--muted);
-}
-
-.topbar {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 8px 16px;
-  border-bottom: 1px solid var(--border);
-  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;
-  font-size: 13px;
-}
-
-.sessions[hidden] {
-  display: none;
-}
-
-.sessions a {
-  color: var(--accent);
-}
-
-.sessions a[aria-current="page"] {
-  color: var(--text);
-  font-weight: 600;
-  text-decoration: none;
-}
-
-.status {
-  margin-left: auto;
-  color: var(--del-text);
-}
-
-button {
-  font: inherit;
-  padding: 3px 10px;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  background: var(--bg);
-  color: var(--text);
-  cursor: pointer;
-}
-
-button:hover {
-  border-color: var(--accent);
-}
-
-button.primary {
-  background: var(--accent);
-  color: var(--accent-text);
-  border-color: var(--accent);
-}
-
-button.link {
-  border: none;
-  background: none;
-  color: var(--accent);
-  padding: 0 4px;
-}
-
-.layout {
-  flex: 1;
-  display: grid;
-  grid-template-columns: var(--sidebar) minmax(0, 1fr) auto;
-  min-height: 0;
-}
-
-.diagram-panel {
-  width: 380px;
-  display: flex;
-  flex-direction: column;
-  border-left: 1px solid var(--border);
-  background: var(--panel);
-  min-height: 0;
-}
-
-.diagram-panel[hidden] {
-  display: none;
-}
-
-.diagram-panel.collapsed {
-  width: auto;
-}
-
-.diagram-head {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  font-size: 13px;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-#diagram-toggle::before {
-  content: "▾ ";
-}
-
-.diagram-panel.collapsed #diagram-toggle::before {
-  content: "◂ ";
-}
-
-.diagram-body {
-  flex: 1;
-  overflow: auto;
-  padding: 8px 12px 16px;
-}
-
-.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;
-}
-
-.badge {
-  background: var(--accent);
-  color: var(--accent-text);
-  border-radius: 10px;
-  padding: 0 7px;
-  font-size: 12px;
-}
-
-.plan-note {
-  border-top: 1px solid var(--border);
-  padding: 10px 12px;
-}
-
-.main {
-  overflow-y: auto;
-  padding: 16px 24px 64px;
-}
-
-.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;
-  margin: 4px 0 8px;
-  padding: 8px 12px;
-  background: var(--panel);
-  border-radius: 6px;
-}
-
-.controls {
-  display: flex;
-  gap: 8px;
-  margin: 4px 0;
-}
-
-.file-group {
-  margin-top: 20px;
-}
-
-.file-group > h3 {
-  margin: 0 0 6px;
-  font: 600 13px var(--font-mono);
-  color: var(--muted);
-}
-
-.unit {
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  margin-bottom: 12px;
-  overflow: hidden;
-}
-
-.unit-head {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  padding: 3px 10px;
-  background: var(--panel);
-  color: var(--muted);
-  font: 12px var(--font-mono);
-}
-
-.unit-head .spacer {
-  flex: 1;
-}
-
-.card {
-  padding: 6px 10px;
-  font-family: var(--font-mono);
-}
-
-.diff {
-  font: 12.5px / 1.5 var(--font-mono);
-  overflow-x: auto;
-}
-
-.dl {
-  display: flex;
-  white-space: pre;
-  min-width: max-content;
-  max-height: 2em;
-}
-
-.dl .gutter {
-  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.add.mine {
-  background: var(--add-bg);
-  color: var(--add-text);
-}
-
-.dl.del.mine {
-  background: var(--del-bg);
-  color: var(--del-text);
-}
-
-.dl.mine {
-  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;
-}
-
-.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 {
-  padding: 0 10px;
-}
-
-.comment {
-  background: var(--comment-bg);
-  border-radius: 6px;
-  margin: 8px 0;
-  padding: 6px 10px;
-}
-
-.comment .meta {
-  color: var(--muted);
-  font-size: 12px;
-}
-
-.comment .text {
-  white-space: pre-wrap;
-}
-
-textarea {
-  width: 100%;
-  min-height: 64px;
-  font: inherit;
-  padding: 6px 8px;
-  color: var(--text);
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  resize: vertical;
-}
-
-.box {
-  margin: 8px 0;
-}
-
-.box .row {
-  display: flex;
-  gap: 8px;
-  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;
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--bg);
-  font-size: 16px;
-  padding: 24px;
-  text-align: center;
-}
-
-.done[hidden] {
-  display: none;
-}
-
-.done code {
-  font-family: var(--font-mono);
-  background: var(--panel);
-  padding: 1px 6px;
-  border-radius: 4px;
-}
-
-.player {
-  display: flex;
-  flex-wrap: nowrap;
-  align-items: center;
-  gap: 12px;
-  white-space: nowrap;
-  padding: 6px 16px;
-  border-bottom: 1px solid var(--border);
-  background: var(--panel);
-}
-
-.player[hidden] {
-  display: none;
-}
-
-.player label {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  color: var(--muted);
-}
-
-select {
-  font: inherit;
-  padding: 2px 6px;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  background: var(--bg);
-  color: var(--text);
-  max-width: 220px;
-}
-
-button:disabled,
-select:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-
-.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;
-}
-
-.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.del .text {
-  text-decoration: line-through;
-}
-
-.dl.in-chunk,
-.unit.in-chunk .card {
-  box-shadow: inset 3px 0 0 var(--accent);
-  animation: reveal 0.2s ease-out;
-}
-
-.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 countdown {
-  from {
-    transform: scaleX(1);
-  }
-  to {
-    transform: scaleX(0);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .dl.in-chunk,
-  .unit.in-chunk .card {
-    animation: 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;
-}