/* plan-review-web v0.2 — 视觉系统 (M1)
 * 所有色 / 间距 / 字号引用 tokens.css 内 var,不硬编码
 */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--c-neutral-800);
  background: var(--c-neutral-50);
  font-feature-settings: "tnum" 1, "cv11" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a {
  color: var(--c-brand-600);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

code, pre, .mono {
  font-family: var(--font-mono);
  font-feature-settings: "calt" 1;
}

pre {
  background: var(--c-neutral-50);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: var(--border-thin);
  overflow-x: auto;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  white-space: pre-wrap;
  word-break: break-word;
}

code {
  background: var(--c-neutral-100);
  color: var(--c-fix-fg);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}

/* ───── 顶栏 ───── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--topbar-h);
  padding: 0 var(--space-5);
  background: var(--c-neutral-900);
  color: var(--c-neutral-0);
  position: sticky; top: 0; z-index: 100;
  box-shadow: var(--shadow-md);
}
.topbar .brand a {
  color: var(--c-neutral-0);
  font-weight: 600;
  font-size: var(--fs-md);
  letter-spacing: 0.5px;
}
.topbar .brand a:hover { text-decoration: none; opacity: 0.85; }
.topbar nav { display: flex; gap: var(--space-4); }
.topbar nav a {
  color: var(--c-neutral-300);
  font-size: var(--fs-base);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}
.topbar nav a:hover {
  color: var(--c-neutral-0);
  background: rgba(255,255,255,0.08);
  text-decoration: none;
}

/* ───── 主体容器 ───── */
.content {
  max-width: var(--content-max);
  margin: var(--space-5) auto;
  padding: 0 var(--space-5);
}

.footer {
  text-align: center;
  padding: var(--space-5);
  color: var(--c-neutral-400);
  font-size: var(--fs-xs);
}

/* ───── 通用元素 ───── */
h1 {
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
  font-weight: 600;
  color: var(--c-neutral-900);
  margin: var(--space-3) 0 var(--space-4);
}
h2 {
  font-size: var(--fs-md);
  line-height: var(--lh-tight);
  font-weight: 600;
  color: var(--c-neutral-800);
  margin: var(--space-5) 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-thin);
}
p { margin: var(--space-2) 0; }

.empty {
  color: var(--c-neutral-400);
  font-style: italic;
  padding: var(--space-3) 0;
}
.muted {
  color: var(--c-neutral-500);
  font-size: var(--fs-sm);
}

.breadcrumb {
  font-size: var(--fs-sm);
  color: var(--c-neutral-500);
  margin-bottom: var(--space-3);
}
.breadcrumb a { color: var(--c-brand-600); }

/* ───── card 容器 ───── */
.card {
  background: var(--c-neutral-0);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  transition: box-shadow 0.15s ease;
}
.card:hover { box-shadow: var(--shadow-md); }
.card-flat { box-shadow: none; padding: var(--space-4); }
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
  gap: var(--space-3);
}

/* ───── badge ───── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 500;
  background: var(--c-neutral-100);
  color: var(--c-neutral-700);
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge.ok        { background: var(--c-ok-50);   color: var(--c-ok-fg);   border-color: var(--c-ok-100); }
.badge.fix,
.badge.needs_fix { background: var(--c-fix-50);  color: var(--c-fix-fg);  border-color: var(--c-fix-100); }
.badge.unclear   { background: var(--c-unc-50);  color: var(--c-unc-fg);  border-color: var(--c-unc-100); }
.badge.pending   { background: var(--c-pend-100); color: var(--c-pend-fg); border-color: var(--c-pend-300); }

/* ───── 按钮 ───── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--c-neutral-100);
  color: var(--c-neutral-700);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn:hover {
  background: var(--c-neutral-200);
  border-color: var(--c-neutral-300);
  text-decoration: none;
}
.btn-primary {
  background: var(--c-brand-600);
  color: var(--c-brand-fg);
  border-color: var(--c-brand-700);
}
.btn-primary:hover {
  background: var(--c-brand-700);
  border-color: var(--c-brand-700);
}

/* ───── batch 列表(首页) ───── */
.batch-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--c-neutral-0);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.batch-table th, .batch-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: var(--border-thin);
  vertical-align: middle;
}
.batch-table thead th {
  background: var(--c-neutral-50);
  color: var(--c-neutral-500);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.batch-table tbody tr:last-child td { border-bottom: 0; }
.batch-table tbody tr:hover { background: var(--c-neutral-50); }

/* ───── batch detail ───── */
.batch-meta, .case-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  color: var(--c-neutral-500);
  font-size: var(--fs-sm);
  margin: var(--space-2) 0;
}
.stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-4);
}

.group-menpai { margin-top: var(--space-5); }
.group-menpai > h2 { margin-bottom: var(--space-3); }
.group-xinfa {
  margin: var(--space-3) 0;
  padding: var(--space-2) var(--space-4);
  background: var(--c-neutral-0);
  border: var(--border-thin);
  border-radius: var(--radius-md);
}
.group-xinfa summary {
  cursor: pointer;
  padding: var(--space-2) 0;
  font-size: var(--fs-base);
}
.group-xinfa summary:hover { color: var(--c-brand-600); }

.case-list {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
}
.case-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-2) 0;
  border-radius: var(--radius-md);
  border-left: 4px solid var(--c-neutral-200);
  background: var(--c-neutral-50);
  transition: background 0.15s ease;
}
.case-row:hover { background: var(--c-brand-50); }
.case-row a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--c-neutral-800);
}
.case-row a strong { font-weight: 600; }
.case-row.verdict-ok        { border-left-color: var(--c-ok-500);  background: var(--c-ok-50); }
.case-row.verdict-needs_fix { border-left-color: var(--c-fix-500); background: var(--c-fix-50); }
.case-row.verdict-unclear   { border-left-color: var(--c-unc-500); background: var(--c-unc-50); }
.case-row.verdict-pending   { border-left-color: var(--c-neutral-300); }

/* ───── case detail ───── */
.section { margin-top: var(--space-5); }

pre.request-md {
  background: var(--c-request-bg);
  border-left: 4px solid var(--c-request-bar);
  border-color: var(--c-request-bar);
}
pre.evidence-top {
  background: var(--c-evidence-bg);
  border-left: 4px solid var(--c-evidence-bar);
  border-color: var(--c-evidence-bar);
}
.evidence-bottom {
  margin-top: var(--space-2);
}
.evidence-bottom summary {
  cursor: pointer;
  color: var(--c-neutral-500);
  font-size: var(--fs-sm);
  padding: var(--space-2) 0;
}
.evidence-bottom summary:hover { color: var(--c-neutral-700); }

#diff-toolbar {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  font-size: var(--fs-sm);
}
#diff-toolbar select {
  padding: 2px var(--space-2);
  border: var(--border-thin);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--fs-sm);
}
#diff-view {
  border: var(--border-thin);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* ───── 反馈表单 ───── */
.feedback-section {
  background: var(--c-neutral-0);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-top: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.feedback-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 720px;
}
.feedback-form label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--c-neutral-600);
  font-weight: 500;
}
.feedback-form input,
.feedback-form select,
.feedback-form textarea {
  padding: var(--space-2) var(--space-3);
  border: var(--border-md);
  border-radius: var(--radius-md);
  font-size: var(--fs-base);
  font-family: inherit;
  color: var(--c-neutral-800);
  background: var(--c-neutral-0);
}
.feedback-form input:focus,
.feedback-form select:focus,
.feedback-form textarea:focus {
  outline: 0;
  border-color: var(--c-brand-500);
  box-shadow: 0 0 0 3px var(--c-brand-100);
}
.feedback-form button {
  align-self: flex-start;
  background: var(--c-brand-600);
  color: var(--c-brand-fg);
  border: 0;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--fs-base);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
}
.feedback-form button:hover { background: var(--c-brand-700); }

.feedback-history { margin-bottom: var(--space-4); }
.feedback-history summary {
  cursor: pointer;
  padding: var(--space-2) 0;
  color: var(--c-neutral-600);
}
.feedback-list { list-style: none; padding: 0; margin: var(--space-2) 0 0; }
.feedback-item {
  padding: var(--space-3);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  background: var(--c-neutral-50);
  margin: var(--space-2) 0;
}
.feedback-comment {
  background: var(--c-neutral-0);
  border-left: 3px solid var(--c-neutral-300);
  margin-top: var(--space-2);
}

/* ───── dashboard ───── */
.batch-block {
  background: var(--c-neutral-0);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin: var(--space-4) 0;
  box-shadow: var(--shadow-sm);
}
.attention {
  margin-top: var(--space-3);
}
.attention > summary {
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--c-neutral-600);
  padding: var(--space-2) 0;
}
.attention ul { padding-left: var(--space-5); }
.attention li { margin: var(--space-2) 0; }

.export-row {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* ───── 兼容 v0.1 旧类名(过渡期保留) ───── */
.batch-table { font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════════
 * M2 case_detail —— prev/next 条 + verdict 大按钮 + AJAX 反馈
 * ═══════════════════════════════════════════════════════════════ */

/* prev/next 固定头条 */
.case-nav {
  position: sticky;
  top: var(--topbar-h);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--c-neutral-0);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-sm);
}
.case-nav .nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--c-neutral-700);
  background: var(--c-neutral-50);
  border: var(--border-thin);
  font-weight: 500;
  min-width: 0;
}
.case-nav .nav-link:hover {
  background: var(--c-brand-50);
  border-color: var(--c-brand-200);
  color: var(--c-brand-700);
  text-decoration: none;
}
.case-nav .nav-link.disabled {
  visibility: hidden;
  pointer-events: none;
}
.case-nav .nav-pos {
  flex: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--c-neutral-600);
}
.case-nav .nav-pos strong { color: var(--c-neutral-900); }
.case-nav .nav-pos .kbd-hint {
  margin-left: var(--space-3);
  color: var(--c-neutral-400);
  font-size: var(--fs-xs);
}
.kbd {
  display: inline-block;
  padding: 1px 6px;
  background: var(--c-neutral-100);
  border: 1px solid var(--c-neutral-300);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-neutral-700);
}

/* verdict radio(M3-v2:从大卡片改回原生 radio + label,见 ref=v0.2-verdict-simplify-v2)*/
.verdict-radios {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  border: 0;
  padding: 0;
  margin: 0;
}
.verdict-radios legend {
  font-size: var(--fs-sm);
  color: var(--c-neutral-600);
  font-weight: 500;
  padding: 0;
  margin-bottom: var(--space-1);
}
.verdict-radios label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-base);
  color: var(--c-neutral-800);
  cursor: pointer;
}
.verdict-radios input[type="radio"] {
  margin: 0;
}

/* AJAX 状态横条 */
.feedback-status {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.feedback-status.hidden { display: none; }
.feedback-status[data-kind="ok"]   { background: var(--c-ok-50);  color: var(--c-ok-fg);  border: 1px solid var(--c-ok-100); }
.feedback-status[data-kind="warn"] { background: var(--c-unc-50); color: var(--c-unc-fg); border: 1px solid var(--c-unc-100); }
.feedback-status[data-kind="fail"] { background: var(--c-fix-50); color: var(--c-fix-fg); border: 1px solid var(--c-fix-100); }
.feedback-status.fade { transition: opacity 0.6s ease; opacity: 0.55; }

.feedback-item.just-added {
  animation: just-added-flash 1.2s ease-out;
}
@keyframes just-added-flash {
  0%   { background: var(--c-brand-50); border-color: var(--c-brand-300); }
  100% { background: var(--c-neutral-50); }
}

/* 顶栏当前评审人 */
#topbar-reviewer {
  color: var(--c-neutral-300);
  font-size: var(--fs-sm);
  margin-left: var(--space-3);
}

/* case 标题旁状态徽章 */
.case-status-badge {
  margin-left: var(--space-3);
  font-size: var(--fs-sm);
  vertical-align: middle;
}

@media (max-width: 640px) {
  .case-nav { flex-wrap: wrap; }
  .verdict-radios { flex-direction: column; gap: var(--space-2); }
}

/* ═══════════════════════════════════════════════════════════════
 * M3 #2 原始需求 inline diff 染色
 * ═══════════════════════════════════════════════════════════════ */
.request-block {
  background: var(--c-request-bg);
  border-left: 4px solid var(--c-request-bar);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  white-space: pre-wrap;
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--c-neutral-800);
}
.request-block .diff-add {
  background: var(--c-ok-100);
  color: var(--c-ok-fg);
  padding: 1px 3px;
  border-radius: var(--radius-sm);
  font-weight: 500;
}
.request-block .diff-del {
  background: var(--c-fix-100);
  color: var(--c-fix-fg);
  padding: 1px 3px;
  border-radius: var(--radius-sm);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.request-block .diff-mod {
  background: var(--c-unc-100);
  color: var(--c-unc-fg);
  padding: 1px 3px;
  border-radius: var(--radius-sm);
  font-weight: 500;
}
.request-meta {
  font-size: var(--fs-sm);
  color: var(--c-neutral-500);
  background: var(--c-neutral-50);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  white-space: pre-wrap;
}
.request-legend {
  display: flex;
  gap: var(--space-3);
  font-size: var(--fs-xs);
  color: var(--c-neutral-500);
  margin-top: var(--space-2);
}
.request-legend .lg-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.request-legend .lg-swatch {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: var(--radius-sm);
}
.request-legend .lg-swatch.add { background: var(--c-ok-100); border: 1px solid var(--c-ok-300); }
.request-legend .lg-swatch.del { background: var(--c-fix-100); border: 1px solid var(--c-fix-300); }
.request-legend .lg-swatch.mod { background: var(--c-unc-100); border: 1px solid var(--c-unc-300); }

/* ═══════════════════════════════════════════════════════════════
 * M3 fix v2 #2 — .tab 实改字段摘要表
 * ═══════════════════════════════════════════════════════════════ */
.tab-diff-summary {
  margin: var(--space-3) 0;
  background: var(--c-neutral-0);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.tab-diff-summary > summary {
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  background: var(--c-neutral-50);
  font-size: var(--fs-sm);
  color: var(--c-neutral-700);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.tab-diff-summary > summary:hover { background: var(--c-neutral-100); }
.tab-diff-summary .tds-icon { font-size: var(--fs-base); }

.tds-file {
  border-top: var(--border-thin);
}
.tds-file:first-of-type { border-top: 0; }
.tds-file-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--c-neutral-50);
  border-bottom: var(--border-thin);
}
.tds-path {
  background: transparent;
  color: var(--c-brand-600);
  font-size: var(--fs-sm);
  padding: 0;
}
.tds-count {
  color: var(--c-neutral-500);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

.tds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  table-layout: fixed;
}
.tds-table thead th {
  background: var(--c-neutral-50);
  color: var(--c-neutral-500);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-thin);
}
.tds-table tbody td {
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-thin);
  vertical-align: top;
  word-break: break-word;
}
.tds-table tbody tr:last-child td { border-bottom: 0; }

.tds-c-kind { width: 80px; }
.tds-c-row  { width: 140px; }
.tds-c-idx  { width: 60px; color: var(--c-neutral-500); font-family: var(--font-mono); }
.tds-c-name { width: 200px; font-family: var(--font-mono); color: var(--c-neutral-700); }
.tds-c-old, .tds-c-new { width: auto; }

.tds-c-row code {
  background: var(--c-neutral-100);
  color: var(--c-neutral-800);
  font-size: var(--fs-xs);
  padding: 1px 6px;
}

.tds-row.tds-mod td { background: transparent; }
.tds-row.tds-add td { background: var(--c-ok-50); }
.tds-row.tds-del td { background: var(--c-fix-50); }

.tds-val {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  word-break: break-word;
  max-width: 100%;
}
.tds-val-old {
  background: var(--c-fix-100);
  color: var(--c-fix-fg);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.tds-val-new {
  background: var(--c-ok-100);
  color: var(--c-ok-fg);
}
.tds-val.tds-raw {
  white-space: pre-wrap;
  font-size: var(--fs-xs);
  text-decoration: none;
}

.tds-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}
.tds-badge.mod { background: var(--c-unc-100); color: var(--c-unc-fg); }
.tds-badge.add { background: var(--c-ok-100);  color: var(--c-ok-fg); }
.tds-badge.del { background: var(--c-fix-100); color: var(--c-fix-fg); }

/* ═══════════════════════════════════════════════════════════════
 * M3 #5 反馈历史 row layout
 * ═══════════════════════════════════════════════════════════════ */
.feedback-list { list-style: none; padding: 0; margin: var(--space-3) 0 0; }
.feedback-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  background: var(--c-neutral-0);
  margin: var(--space-2) 0;
}
.feedback-item .fb-verdict {
  grid-column: 1;
  grid-row: 1;
}
.feedback-item .fb-reviewer {
  grid-column: 2;
  grid-row: 1;
  font-weight: 600;
  color: var(--c-neutral-800);
}
.feedback-item .fb-reviewer .anon {
  color: var(--c-neutral-400);
  font-weight: 400;
  font-style: italic;
}
.feedback-item .fb-time {
  grid-column: 3;
  grid-row: 1;
  color: var(--c-neutral-500);
  font-size: var(--fs-xs);
  cursor: help;
  text-align: right;
  white-space: nowrap;
}
.feedback-item .fb-comment {
  grid-column: 1 / -1;
  grid-row: 2;
  background: var(--c-neutral-50);
  border-left: 3px solid var(--c-neutral-300);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  white-space: pre-wrap;
  word-break: break-word;
  font-size: var(--fs-sm);
  color: var(--c-neutral-700);
}
.feedback-item.verdict-ok        { border-left: 3px solid var(--c-ok-500); }
.feedback-item.verdict-needs_fix { border-left: 3px solid var(--c-fix-500); }
.feedback-item.verdict-unclear   { border-left: 3px solid var(--c-unc-500); }

@media (max-width: 640px) {
  .feedback-item { grid-template-columns: auto 1fr; }
  .feedback-item .fb-time { grid-column: 2; grid-row: 2; text-align: left; }
  .feedback-item .fb-comment { grid-row: 3; }
}