/* Wiki merge review (E) task and admin screens. Uses the tokens and components from app.css; add only screen-specific rules here.
 * Reviewer /tasks/wiki/{token}: prefix wk-. Admin /admin/wiki*: prefix wka-.
 * Severity uses shape + text (▲ unusable, ○ minor), never colour alone. Added lines use the marker, removed lines
 * a strike-through on the danger tint (mock WikiMergeReview).
 */

/* Review statuses beyond the task ones (status-dot from app.css) */
.status-dot.st-exported::before { background: var(--accent); }
.status-dot.st-applied::before { background: var(--ok); }
.status-dot.st-conflict::before { background: var(--warn); }
.status-dot.st-unassigned::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-3); }

/* ── Reviewer: /tasks/wiki/{token} (wk-*) ─────────────────────────────────── */
.wk-page { display: flex; flex-direction: column; gap: 20px; }
.wk-page h2 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.35; }
.wk-page h3 { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; }

.wk-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.wk-steps > li { font-size: 14px; }
.wk-step-state { color: var(--ink-3); font-weight: 500; }
.wk-steps > li.is-done .wk-step-state { color: var(--ok); }
.wk-facts { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; font-size: 13px; }
.wk-facts > div { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.wk-facts dt { color: var(--ink-3); font-size: 12px; }
.wk-facts dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

.wk-notices { display: grid; gap: 8px; }
.wk-notices:empty { display: none; }
.wk-notices > .notice { margin: 0; }
.wk-field-error { margin: 6px 0 0; color: var(--danger); font-size: 13px; }
.wk-error-list { margin: 0; padding-left: 18px; }
/* A label followed by a short hint in brackets stays on one line. */
.wk-page .field > label, .wka-grid .field > label, .wka-review-side .field > label { display: block; }
.wk-page .field > label .muted, .wka-grid .field > label .muted, .wka-review-side .field > label .muted { font-weight: 400; }

.wk-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.wk-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 16px; }
.wk-card-head .muted { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.wk-col-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }

/* Automatic signals (after the verdict) */
.wk-signals {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-card);
  background: var(--warn-tint);
  scroll-margin-top: calc(var(--focus-head-h) + 16px);
}
.wk-signals-icon { flex: 0 0 auto; margin-top: 2px; color: var(--warn); }
.wk-signals-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 12px; min-width: 0; }
.wk-signals-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.wk-signals-head h2 { font-size: 14px; }
.wk-signals-head p, .wk-signals-foot { margin: 0; color: var(--ink-2); font-size: 13px; }
.wk-signal-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.wk-signal {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-chip);
  background: var(--surface);
  font-size: 13px;
}
.wk-signal .mono { font-weight: 500; }
.wk-signal-value { font-weight: 600; }
.wk-signal.is-listed { border-color: var(--warn); }
.wk-signal-flag { color: var(--warn); font-size: 12px; font-weight: 600; }

/* Before / input / after */
.wk-compare .wk-section-head h2 { font-size: 18px; }
.wk-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 0; color: var(--ink-2); font-size: 13px; list-style: none; }
.wk-legend > li { display: inline-flex; align-items: center; gap: 8px; }
.wk-legend del { color: var(--ink-2); }
.wk-legend-mark { padding: 0 6px; border-radius: var(--radius-chip); font-family: var(--font-mono); font-weight: 500; }
.wk-legend-mark.is-removed { background: var(--danger-tint); color: var(--danger); }
.wk-legend-mark.is-added { background: var(--marker); color: var(--marker-ink); }
.wk-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.wk-col { display: flex; flex-direction: column; min-width: 0; }
.wk-col > .card-head { gap: 8px; }
.wk-col > .card-head .muted { font-size: 13px; }
.wk-rev {
  padding: 0 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-chip);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 500;
}
.wk-lines { padding: 12px 0; font-size: 15px; line-height: 1.7; }
.wk-line { display: flex; gap: 10px; padding: 0 16px; }
.wk-line.is-blank { height: 10px; }
.wk-line.is-blank > * { height: 10px; line-height: 10px; }
.wk-line.is-blank .wk-ln { visibility: hidden; }
.wk-ln {
  flex: 0 0 24px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 26px;
  text-align: right;
}
.wk-op { flex: 0 0 10px; font-family: var(--font-mono); font-size: 13px; line-height: 26px; }
.wk-line.is-removed .wk-op { color: var(--danger); }
.wk-line.is-added .wk-op { color: var(--ink-1); }
.wk-text { min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; text-decoration: none; }
.wk-line.is-removed .wk-text { background: var(--danger-tint); color: var(--ink-2); text-decoration: line-through; text-decoration-color: var(--danger); }
.wk-line.is-added .wk-text { background: var(--marker-soft); color: var(--ink-1); box-shadow: inset 0 -2px 0 var(--marker); }
.wk-marks { color: var(--ink-3); font-family: var(--font-mono); font-size: 13px; }
.wk-h { font-weight: 600; }
.wk-h1 { font-size: 17px; }
.wk-input { margin: 0; padding: 14px 16px 16px; font-size: 15px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Verdict (first stage) */
.wk-verdict-form { display: grid; gap: 20px; }
.wk-fieldset { display: grid; gap: 8px; }
.wk-fieldset > legend { margin-bottom: 8px; font-size: 13px; font-weight: 600; }
/* justify-self: the fieldset is a grid; without it the three-option control stretches across the whole card. */
.wk-verdicts { justify-self: start; }
.wk-verdicts > label { min-height: 36px; padding: 0 16px; }
.wk-tag-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.wk-tag-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.wk-tag-text { display: flex; flex: 1 1 260px; flex-direction: column; gap: 2px; min-width: 0; }
.wk-tag-name { font-size: 14px; font-weight: 600; }
.wk-tag-desc { color: var(--ink-3); font-size: 12px; }
.wk-sev > label { min-height: 28px; padding: 0 10px; font-size: 13px; }
/* The shape keeps its severity colour before it is chosen too (reviewer chips and popover do the same). */
.wk-sev > label.is-minor > span[aria-hidden] { color: var(--sev-minor); }
.wk-sev > label.is-unusable > span[aria-hidden] { color: var(--danger); font-size: 11px; }
.wk-sev > label.is-minor:has(input:checked) { background: var(--sev-minor-tint); color: var(--sev-minor); }
.wk-sev > label.is-unusable:has(input:checked) { background: var(--danger-tint); color: var(--danger); }
.wk-tags.is-locked .wk-sev { opacity: .55; }
.wk-tags-locked { color: var(--ink-2); }
.wk-memo textarea { min-height: 80px; }

/* Verdict (submitted) */
.wk-verdict-grid { display: flex; flex-wrap: wrap; gap: 20px 32px; padding: 16px 20px 20px; }
.wk-verdict-cell { display: flex; flex: 1 1 280px; flex-direction: column; gap: 8px; min-width: 0; }
.wk-verdict-memo { flex: 2 1 360px; }
.wk-label { margin: 0; color: var(--ink-3); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.wk-verdict-show .seg-tab { cursor: default; }
.wk-verdict-show .seg-tab:not(.is-active) { color: var(--ink-3); }
.wk-tag-done { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.wk-tag-done > li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wk-tag-chip { padding: 2px 8px; border: 1px solid var(--ink-1); border-radius: var(--radius-chip); background: var(--ink-1); color: #FFFFFF; font-size: 13px; }
.wk-sev-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-chip); font-size: 13px; font-weight: 600; }
.wk-sev-badge.is-minor { background: var(--sev-minor-tint); color: var(--sev-minor); }
.wk-sev-badge.is-unusable { background: var(--danger-tint); color: var(--danger); }
.wk-memo-text { margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface-2); font-size: 14px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.wk-none { margin: 0; }

/* Edit stage */
.wk-edit { scroll-margin-top: calc(var(--focus-head-h) + 16px); }
.wk-edit-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.wk-base-note { color: var(--ink-2); font-size: 13px; }
.wk-edit-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
.wk-editor { padding: 16px 20px 20px; }
.wk-label-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.wk-markdown {
  min-height: 440px;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.75;
  tab-size: 2;
}
.wk-markdown[readonly], #wk-reason[readonly] { background: var(--surface-2); }
.wk-note-required { display: inline-flex; align-items: center; gap: 6px; color: var(--warn); font-weight: 600; }
.wk-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.wk-tree-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 12px 16px 16px; list-style: none; font-size: 14px; }
.wk-node { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 30px; }
.wk-node-h2, .wk-node-h3, .wk-node.is-removed { margin-left: 12px; padding-left: 16px; border-left: 1px solid var(--line); }
.wk-node-h3 { padding-left: 40px; }
.wk-node-level {
  padding: 0 5px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-chip);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
}
.wk-node-h1 .wk-node-title { font-weight: 600; }
.wk-node-title { min-width: 0; overflow-wrap: anywhere; }
.wk-node.is-added .wk-node-title { padding: 0 4px; border-radius: 2px; background: var(--marker); color: var(--marker-ink); }
.wk-node.is-removed .wk-node-title { color: var(--ink-3); }
.wk-node-note { color: var(--ink-2); font-size: 12px; }
.wk-tree-empty { margin: 0; padding: 0 16px 16px; }
.wk-rules { display: flex; flex-direction: column; margin: 0; padding: 4px 16px; list-style: none; }
.wk-rule { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.wk-rule:last-child { border-bottom: 0; }
.wk-rule-icon { display: inline-flex; flex: 0 0 18px; padding-top: 2px; }
.wk-rule.is-ok .wk-rule-icon-fail, .wk-rule:not(.is-ok) .wk-rule-icon-ok { display: none; }
.wk-rule.is-ok .wk-rule-icon { color: var(--ok); }
.wk-rule.is-warning .wk-rule-icon { color: var(--warn); }
.wk-rule.is-block .wk-rule-icon { color: var(--danger); }
.wk-rule-text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.wk-rule-detail { color: var(--ink-3); font-size: 13px; }
.wk-rule-detail:empty { display: none; }
.wk-rule-state { flex: 0 0 auto; font-size: 12px; font-weight: 600; white-space: nowrap; }
.wk-rule.is-ok .wk-rule-state { color: var(--ok); }
.wk-rule.is-warning .wk-rule-state { color: var(--warn); }
.wk-rule.is-block .wk-rule-state { color: var(--danger); }
.wk-check-foot { margin: 0; padding: 12px 16px 16px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 13px; line-height: 1.6; }
.wk-check-error { margin: 0 16px 16px; }

/* Bottom bar */
.wk-bar-text { display: flex; flex: 1 1 320px; flex-direction: column; gap: 2px; min-width: 0; }
.wk-bar-main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; font-size: 13px; color: var(--ink-2); }
.wk-bar-note { margin: 0; color: var(--ink-3); font-size: 13px; }
.wk-bar-unsaved { color: var(--warn); font-size: 13px; font-weight: 600; }
.wk-bar-blocked { margin: 0; color: var(--danger); font-size: 13px; }
.wk-bar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

@media (max-width: 1099px) {
  .wk-columns { grid-template-columns: minmax(0, 1fr); }
  .wk-edit-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 719px) {
  .wk-markdown { min-height: 320px; }
  .wk-bar-note { display: none; }
  .wk-bar-actions { width: 100%; }
  .wk-bar-actions .btn { flex: 1 1 auto; }
  .wk-line { padding: 0 12px; }
}

/* ── Admin: /admin/wiki* (wka-*) ─────────────────────────────────────────── */
.wka-head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; }
.wka-head-note { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--ink-3); font-size: 13px; }
.wka-notice { margin: 0 0 16px; }
.wka-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.wka-section { margin-top: 20px; }
.wka-lead { margin: -8px 0 16px; line-height: 1.55; }
.wka-result { margin: 16px 0 0; }
.wka-result > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wka-result-title { margin: 0; font-weight: 600; }
.wka-error-list { margin: 0; padding-left: 18px; }
.wka-kv { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; font-size: 13px; }
.wka-kv > div { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.wka-kv dt { color: var(--ink-2); }
.wka-kv dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.wka-kv-big { margin-bottom: 16px; }
.wka-kv-big dd { font-size: 22px; }
.wka-problems { margin-top: 4px; background: var(--surface); }
.wka-list-head { flex-wrap: wrap; gap: 8px 16px; }
.wka-account-row { padding: 10px 16px; border-bottom: 1px solid var(--line); }
.wka-status-tabs > a { min-height: 28px; padding: 0 10px; font-size: 13px; }
.wka-table td { vertical-align: top; }
/* Visually hidden labels in the table are absolutely positioned: keep them inside the scroll box. */
.wka-section .table-scroll, .wka-result .table-scroll { position: relative; }
.wka-word { display: block; font-weight: 600; }
.wka-ids, .wka-sub { display: block; color: var(--ink-3); font-size: 12px; }
.wka-action { text-align: right; white-space: nowrap; }

.wka-back { margin: 0 0 8px; }
.wka-back a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.wka-review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 16px; }
.wka-review-title { margin: 0; font-size: 18px; font-weight: 600; }
.wka-review-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 16px; align-items: start; }
.wka-review-main, .wka-review-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.wka-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 12px; }
.wka-card-head .card-title { margin: 0; }
.wka-dl div { grid-template-columns: minmax(0, 150px) minmax(0, 1fr); padding: 8px 0; }
.wka-dl dt { text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; }
.wka-dl dd.wka-dd-list { white-space: normal; }
.wka-dl dt.mono { font-family: var(--font-mono); font-weight: 500; }
.wka-sub-title { margin: 16px 0 8px; font-size: 13px; font-weight: 600; }
.wka-sub-label { margin: 8px 0 4px; color: var(--ink-3); font-family: var(--font-mono); font-size: 12px; }
.wka-pre { margin: 0 0 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface-2); font-size: 14px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.wka-sev { font-weight: 600; }
.wka-sev.is-minor { color: var(--sev-minor); }
.wka-sev.is-unusable { color: var(--danger); }
.wka-diff { margin: 0 0 12px; padding: 8px 0; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); font-size: 14px; line-height: 1.6; max-height: 560px; overflow: auto; }
.wka-diff-row { display: grid; grid-template-columns: 32px 32px 14px minmax(0, 1fr); gap: 6px; padding: 0 12px; }
.wka-diff-n { color: var(--ink-3); font-family: var(--font-mono); font-size: 12px; text-align: right; }
.wka-diff-op { font-family: var(--font-mono); }
.wka-diff-text { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; text-decoration: none; }
.wka-diff-row.is-removed { background: var(--danger-tint); }
.wka-diff-row.is-removed .wka-diff-text { color: var(--ink-2); text-decoration: line-through; text-decoration-color: var(--danger); }
.wka-diff-row.is-removed .wka-diff-op { color: var(--danger); }
.wka-diff-row.is-added { background: var(--marker-soft); }
.wka-diff-row:has(> .wka-diff-text:empty) { line-height: 1; }
.wka-checks { display: grid; gap: 0; margin: 0 0 8px; padding: 0; list-style: none; font-size: 13px; }
.wka-checks > li { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr) auto; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.wka-checks > li:last-child { border-bottom: 0; }
.wka-check-state { font-weight: 600; }
.wka-checks .is-ok .wka-check-state { color: var(--ok); }
.wka-checks .is-warning .wka-check-state { color: var(--warn); }
.wka-checks .is-block .wka-check-state { color: var(--danger); }

@media (max-width: 1099px) {
  .wka-grid, .wka-review-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 719px) {
  .wka-checks > li { grid-template-columns: minmax(0, 1fr) auto; }
  .wka-checks > li > .mono { grid-column: 1 / -1; }
  .wka-dl div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}