/* ═══════════════════════════════════════════════════════════════════════════
   conflicts.css  —  v4
   ═══════════════════════════════════════════════════════════════════════════
   Drop at: rpa-scraping-bot-ipefrontend/static_nlp/conflicts.css
   Load AFTER styles.css and unified.css.

   ─────────────────────────────────────────────────────────────────────────
   THE PROBLEM THIS FIXES
   ─────────────────────────────────────────────────────────────────────────
   The previous screen rendered every finding as a tall, saturated pink card
   with a 3px coloured spine, four pink chips, and six equal-weight buttons.
   Six findings meant six identical blocks, and nothing told the analyst
   where to start. Colour was doing decoration, not signalling.

   ─────────────────────────────────────────────────────────────────────────
   THE APPROACH
   ─────────────────────────────────────────────────────────────────────────
   COLOUR IS SIGNAL, NOT SURFACE. Row backgrounds are the plain page surface.
   Severity is carried by a single 2px left rule and one small tag. Nothing
   is tinted just to look designed. Colour appears in exactly two places per
   row, so when it does appear it means something.

   TYPE CARRIES THE HIERARCHY. Rule names are the loudest thing in a row. The
   computed difference sits under them at reading weight. Metadata drops to
   12px, muted, and never competes.

   MONOSPACE FOR VALUES. Rates, dates and conditions use the brand mono face
   already loaded by the app. It separates data from prose without a border
   or a chip, and it makes "+30%" against "+45%" scan instantly.

   DENSITY BY STATE. Collapsed rows are 3 lines. All the detail is one click
   away. A 40-finding queue stays readable.

   The signature element is the diff table: the one place the design spends
   its boldness, because comparing the two rules is the entire job.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── tokens ────────────────────────────────────────────────────────────────
   Severity hues are desaturated deliberately. The previous pink read as an
   alarm on every row; these read as categories.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  --cf-dup: var(--accent);
  --cf-dup-soft: var(--accent-soft);
  --cf-con: var(--warn);
  --cf-con-soft: var(--warn-soft);
  --cf-ovl: var(--accent);
  --cf-ovl-soft: var(--accent-soft);

  --cf-gap: 20px;
  --cf-radius: 10px;
  --cf-mono: var(--font-mono);
}

html[data-theme='dark'] {
  --cf-dup: var(--ink-3);
  --cf-dup-soft: rgba(168, 148, 212, 0.14);
  --cf-con: var(--warn);
  --cf-con-soft: var(--warn-border);
  --cf-ovl: var(--accent);
  --cf-ovl-soft: var(--accent-border);
}

.k-dup {
  --cf-hue: var(--cf-dup);
  --cf-hue-soft: var(--cf-dup-soft);
}
.k-con {
  --cf-hue: var(--cf-con);
  --cf-hue-soft: var(--cf-con-soft);
}
.k-ovl {
  --cf-hue: var(--cf-ovl);
  --cf-hue-soft: var(--cf-ovl-soft);
}

/* ── page frame ────────────────────────────────────────────────────────── */

.conflicts-layout {
  max-width: 1080px;
  margin: 0 auto;
  padding: 4px 0 64px;
}

.conflicts-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--cf-gap);
  flex-wrap: wrap;
  padding-bottom: 18px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.conflicts-title {
  margin: 0 0 4px;
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}

.conflicts-sub {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-sec);
  max-width: 46ch;
}

.conflicts-actions-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── count strip ───────────────────────────────────────────────────────── */

.cf-summary {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  padding: 16px 2px 20px;
}

.cf-summary:empty {
  display: none;
}

.cf-count {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-size: 0.8rem;
  color: var(--text-sec);
}

.cf-count b {
  font-family: var(--cf-mono);
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--cf-hue);
}

/* ── the queue ─────────────────────────────────────────────────────────── */

.conflicts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cf-row {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 2px solid var(--cf-hue);
  border-radius: var(--cf-radius);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.cf-row:hover {
  border-color: var(--border-strong);
  border-left-color: var(--cf-hue);
}

.cf-row.is-open {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 8px 24px rgba(0, 0, 0, 0.06);
}

.cf-row.is-busy {
  opacity: 0.5;
  pointer-events: none;
}

/* collapsed header — the scannable line */

.cf-row-head {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  background: none;
  border: 0;
  border-radius: var(--cf-radius);
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: inherit;
}

.cf-row-head:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: -2px;
}

.cf-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 5px;
  background: var(--cf-hue-soft);
  color: var(--cf-hue);
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cf-row-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cf-row-names {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cf-row-names b {
  font-weight: 620;
}

.cf-vs {
  display: inline-block;
  margin: 0 9px;
  font-size: 0.74rem;
  font-weight: 400;
  color: var(--text-muted);
}

/* the computed difference — the reason this screen exists */
.cf-row-diff {
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-sec);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cf-row-diff b {
  font-family: var(--cf-mono);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-primary);
}

.cf-more-diff {
  color: var(--text-muted);
  font-size: 0.74rem;
}

.cf-done {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

.cf-chev {
  color: var(--text-muted);
  transition: transform 0.18s ease;
  flex-shrink: 0;
}

.cf-row.is-open .cf-chev {
  transform: rotate(180deg);
}

/* ── expanded detail ───────────────────────────────────────────────────── */

.cf-detail {
  padding: 4px 18px 18px;
  animation: cf-reveal 0.18s ease;
}

@keyframes cf-reveal {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* the diff table — the signature element */

.cf-diff {
  margin: 6px 0 20px;
  padding: 16px 18px;
  background: var(--surface-2);
  border-radius: 8px;
}

.cf-diff-lead {
  margin: 0 0 12px;
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-sec);
}

.cf-diff-note {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--text-sec);
}

.cf-diff-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.cf-diff-table thead th {
  padding: 0 0 9px;
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
  width: 32%;
}

.cf-diff-table tbody th {
  padding: 9px 16px 9px 0;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-sec);
  text-align: left;
  white-space: nowrap;
  vertical-align: top;
}

.cf-diff-table td {
  padding: 9px 16px 9px 0;
  vertical-align: top;
  font-family: var(--cf-mono);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.cf-diff-table tbody tr + tr th,
.cf-diff-table tbody tr + tr td {
  border-top: 1px solid var(--border);
}

.cf-side-none {
  font-family: inherit;
  color: var(--text-muted);
}

/* ── the two rules, side by side ───────────────────────────────────────── */

.cf-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.cf-col {
  background: var(--surface);
  padding: 16px 18px;
}

.cf-col-head {
  margin-bottom: 14px;
}

.cf-col-name {
  margin: 0 0 4px;
  font-size: 0.88rem;
  font-weight: 620;
  color: var(--text-primary);
}

.cf-col-facts {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.cf-col-facts em {
  font-style: normal;
  color: var(--cf-con);
}

/* sub rules — numbered, because order decides which fires first */

.cf-subs {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: cf-sub;
}

.cf-sub {
  counter-increment: cf-sub;
  position: relative;
  padding: 0 0 0 26px;
  margin-bottom: 14px;
}

.cf-sub:last-child {
  margin-bottom: 0;
}

.cf-sub::before {
  content: counter(cf-sub);
  position: absolute;
  left: 0;
  top: 1px;
  width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: var(--surface-3);
  color: var(--text-muted);
  font-family: var(--cf-mono);
  font-size: 0.64rem;
  font-weight: 600;
}

/* only the sub rules that actually differ get the accent */
.cf-sub.is-diff::before {
  background: var(--cf-hue-soft);
  color: var(--cf-hue);
}

.cf-sub-when {
  margin: 0 0 4px;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--text-sec);
}

.cf-and {
  color: var(--text-muted);
  font-size: 0.72rem;
}

.cf-sub-then {
  margin: 0;
  font-family: var(--cf-mono);
  font-size: 0.79rem;
  font-weight: 600;
  color: var(--text-primary);
}

.cf-sub-empty {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.cf-closed-note {
  margin: 18px 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* ── actions ───────────────────────────────────────────────────────────────
   Two clear choices first; the rarer options sit quietly below. Previously
   all six competed at identical weight.
   ────────────────────────────────────────────────────────────────────────── */

.cf-actions {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cf-actions-main {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cf-actions-rest {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

/* ── buttons ───────────────────────────────────────────────────────────── */

.cf-btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 550;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
  white-space: nowrap;
}

.cf-btn:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

.cf-btn-solid {
  background: var(--amber);
  color: #fff;
}

.cf-btn-solid:hover {
  background: var(--amber-dark);
}

.cf-btn-outline {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.cf-btn-outline:hover {
  border-color: var(--amber);
  color: var(--amber-dark);
}

.cf-btn-quiet {
  background: none;
  color: var(--text-sec);
  padding: 7px 10px;
}

.cf-btn-quiet:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}

.cf-btn-sm {
  padding: 6px 11px;
  font-size: 0.75rem;
}

/* ── empty + loading ───────────────────────────────────────────────────── */

.cf-empty {
  padding: 72px 24px;
  text-align: center;
}

.cf-empty-title {
  margin: 0 0 6px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.cf-empty-sub {
  margin: 0 auto 16px;
  max-width: 42ch;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-sec);
}

.cf-skeleton {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cf-skeleton span {
  height: 68px;
  border-radius: var(--cf-radius);
  background: linear-gradient(
    90deg,
    var(--surface-2) 25%,
    var(--surface-3) 37%,
    var(--surface-2) 63%
  );
  background-size: 400% 100%;
  animation: cf-shimmer 1.3s ease-in-out infinite;
}

@keyframes cf-shimmer {
  from {
    background-position: 100% 50%;
  }
  to {
    background-position: 0 50%;
  }
}

/* ── sidebar badge ─────────────────────────────────────────────────────── */

.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  margin-left: auto;
  border-radius: 999px;
  background: var(--cf-con);
  color: #fff;
  font-family: var(--cf-mono);
  font-size: 0.64rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PREFLIGHT DIALOG
   ═══════════════════════════════════════════════════════════════════════════ */

body.pf-open {
  overflow: hidden;
}

.pf {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.pf-scrim {
  position: absolute;
  inset: 0;
  background: rgba(12, 10, 9, 0.5);
  backdrop-filter: blur(3px);
  animation: cf-fade 0.16s ease;
}

@keyframes cf-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.pf-panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  animation: cf-rise 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cf-rise {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.pf-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 20px 18px 26px;
}

.pf-title {
  /* was 0 0 6px when a subtitle sat under it */
  margin: 0;
  flex: 1 1 auto;
  font-size: 1.08rem;
  font-weight: 650;
  letter-spacing: -0.012em;
  color: var(--text-primary);
}

.pf-close {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: -4px;
  background: none;
  border: 0;
  border-radius: 7px;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}

.pf-close:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}

.pf-close:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 1px;
}

.pf-body {
  padding: 0 26px;
  overflow-y: auto;
  flex: 1 1 auto;
}

/* ── the rule viewer sits ON TOP of this dialog ──────────────────────────────
   #edit-modal is z-index 3000, this dialog is 9000, so without this the Rules
   tab's own edit modal would open behind the scrim and look like a dead tap.
   Doing it in CSS keyed off body.pf-open means no JS has to coordinate the
   two, and closing the dialog restores the normal stack automatically.
   ────────────────────────────────────────────────────────────────────────── */

body.pf-open #edit-modal {
  z-index: 9600;
}

/* ── one row per existing rule ─────────────────────────────────────────────
   A row is a <button>: the whole surface opens the rule, so there is no
   separate link to aim at and no sixth button competing with the footer.
   Four lines maximum, and the last two are conditional.
   ────────────────────────────────────────────────────────────────────────── */

.pf-row {
  margin-bottom: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 2px solid var(--cf-hue);
  border-radius: 10px;
  overflow: hidden;
  transition: background 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease, opacity 0.15s ease;
}

/* the reading surface — tap anywhere on the text to open the rule */
.pf-tap {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 16px 13px;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.pf-row:hover {
  border-color: var(--cf-hue);
  box-shadow: 0 1px 0 var(--cf-hue-soft), 0 6px 16px rgba(0, 0, 0, 0.06);
}

.pf-tap:hover {
  background: var(--surface-3);
}

/* ── row header — verdict tag + name, one line ───────────────────────────
   Used to be two lines: a whole strip of pill chips (verdict, scope, up to
   three field tags, chevron) sitting above the name. That line said
   "category" four different ways before the reader had even been told which
   rule this was. Folding the verdict tag onto the name line removes it
   outright — scope and fields move to a single quiet caption under the
   comparison instead (.pf-meta), where they read as a footnote, not a
   headline. */
.pf-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pf-row-head .cf-tag {
  flex: 0 0 auto;
}

.pf-tap:focus-visible,
.pf-act:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: -2px;
}

/* ── the two row actions ────────────────────────────────────────────
   Deliberately quiet text buttons on their own line, not solid buttons
   competing with the footer. Override carries the destructive hue because it
   deletes a live rule for good; "Use this instead" stays neutral because it
   only declines to save. Both are right-aligned so the eye lands on the rule
   name first and the actions read as a consequence of it.
   ───────────────────────────────────────────────────────────────────── */

.pf-row-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 14px 12px;
  border-top: 1px dashed var(--border);
}

.pf-act {
  padding: 6px 12px;
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-sec);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.pf-act:hover {
  color: var(--text-primary);
  background: var(--surface-3);
  border-color: var(--cf-hue);
}

.pf-act-danger {
  color: var(--cf-con);
  border-color: transparent;
}

.pf-act-danger:hover {
  color: #fff;
  background: var(--cf-con);
  border-color: var(--cf-con);
}

/* Stack up (per row) — same hue as the "overlap/stacks" tag, since choosing
   it produces exactly that outcome for this one row: both rules stay live. */
.pf-act-stack {
  color: var(--cf-ovl);
  border-color: transparent;
}

.pf-act-stack:hover {
  color: #fff;
  background: var(--cf-ovl);
  border-color: var(--cf-ovl);
}

.pf-chev {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--text-muted);
  transition: transform 0.15s ease, color 0.15s ease;
}

.pf-row:hover .pf-chev {
  color: var(--cf-hue);
  transform: translateX(2px);
}

.pf-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.87rem;
  font-weight: 620;
  letter-spacing: -0.008em;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.pf-summary {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 6px;
  font-size: 0.79rem;
  line-height: 1.55;
  color: var(--text-sec);
}

/* quiet caption — scope + overlapping fields, said once, said last */
.pf-meta {
  display: block;
  margin-top: 9px;
  font-size: 0.71rem;
  letter-spacing: 0.01em;
  color: var(--text-muted);
}

/* the visual why — this rule vs the existing one, as one shared grid.

   This used to be N separate 3-column grids (one per branch pair), each with
   its own "this rule" / "existing" caption printed in tiny italic under every
   single number. With more than one branch pairing that meant reading the
   same two captions over and over, and the caption sat BELOW the number it
   labeled, so a header a reader could scan once, above the whole stack, was
   missing entirely.

   Now header and rows are children of the SAME grid (`display: contents` on
   the row wrappers folds their cells into the parent's column tracks), so
   "This rule" / "Existing" / "Diff" are stated once and every value below
   lines up under its own label, no matter how many branch pairs stack. */

.pf-grid {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1fr) 60px;
  column-gap: 10px;
  align-items: center;
  margin-top: 10px;
}

/* Single pair: the branch column exists only when more than one branch is
   being compared (pfClash only renders .pf-g-branch cells when `named`). */
.pf-grid.pf-grid-single {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 60px;
}

.pf-grid-hdr,
.pf-grid-row {
  display: contents;
}

.pf-g-branch,
.pf-g-mine,
.pf-g-theirs,
.pf-g-delta {
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}

.pf-grid-hdr > * {
  padding-top: 9px;
  border-top: 1px solid var(--border);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* the column a reader is scanning FOR gets the accent, so the eye locks onto
   it once at the header and carries that column down the whole grid */
.pf-grid-hdr > .pf-g-mine {
  color: var(--cf-hue);
}

.pf-grid-hdr > .pf-g-delta {
  text-align: right;
}

.pf-g-branch {
  font-size: 0.7rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-g-mine,
.pf-g-theirs {
  min-width: 0;
  font-family: var(--cf-mono);
  font-size: 0.8rem;
  font-weight: 650;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.pf-g-theirs {
  font-weight: 500;
  color: var(--text-sec);
}

.pf-g-delta {
  text-align: right;
}

.pf-delta-chip {
  display: inline-block;
  font-family: var(--cf-mono);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.pf-delta-up {
  color: var(--cf-con);
  background: var(--cf-con-soft);
}

.pf-delta-down {
  color: var(--text-sec);
  background: var(--surface-3);
}

/* different units on each side (e.g. "Do not bid" vs "+30%") — no delta is
   invented; this says plainly that the two sides don't share a scale */
.pf-delta-na {
  font-family: inherit;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-3);
}

/* the two sides genuinely agree on this branch — shown, not hidden, so a
   rule that only partly conflicts doesn't look identical to one that
   conflicts everywhere. Same neutral treatment as n/a: nothing to flag. */
.pf-delta-same {
  font-family: inherit;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-3);
}

/* de-emphasized, not hidden — a reader scanning the grid should land on the
   rows that disagree first, then notice the matching ones are there too */
.pf-grid-row-same .pf-g-mine,
.pf-grid-row-same .pf-g-theirs,
.pf-grid-row-same .pf-g-branch {
  color: var(--text-muted);
}

.pf-aside {
  margin: 12px 0 4px;
  font-size: 0.76rem;
  color: var(--text-muted);
}

.pf-foot {
  padding: 16px 26px 22px;
  border-top: 1px solid var(--border);
}

.pf-foot-hint {
  margin: 0 0 14px;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.pf-foot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.pf-foot-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}

/* ── responsive ────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .cf-cols {
    grid-template-columns: 1fr;
  }

  .cf-row-head {
    grid-template-columns: auto 1fr auto;
    gap: 11px;
    padding: 13px 14px;
  }

  .cf-row-names,
  .cf-row-diff {
    white-space: normal;
  }

  .cf-done {
    display: none;
  }

  .cf-diff-table,
  .cf-diff-table tbody,
  .cf-diff-table tr {
    display: block;
  }

  .cf-diff-table thead {
    display: none;
  }

  .cf-diff-table tbody tr {
    padding: 10px 0;
    border-top: 1px solid var(--border);
  }

  .cf-diff-table tbody tr:first-child {
    border-top: 0;
  }

  .cf-diff-table th,
  .cf-diff-table td {
    display: block;
    padding: 0 0 4px;
    border: 0 !important;
  }

  .cf-diff-table td::before {
    content: attr(data-side);
    display: block;
    font-family: inherit;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
  }

  .pf-foot {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .pf-foot-actions {
    margin-left: 0;
  }

  .pf-foot .cf-btn {
    width: 100%;
  }
}

/* The dialog is capped at 560px, so it is still comfortably two columns at
   860px of viewport — the stack belongs at phone width, not tablet width.
   Below this, two 1fr columns leave each branch label three or four characters
   per line. Stack instead: sides in reading order with `vs` between them, one
   column throughout so nothing can half-wrap the way flex used to. */
/* The dialog is capped at 560px, so it is still comfortably two columns at
   860px of viewport — the stack belongs at phone width, not tablet width.
   Below this, a 76px branch column plus two number columns leaves each
   number too little room. The branch name is decoration here (it's still in
   the row's title attribute and the full rule on tap) — This rule / Existing
   / Diff staying aligned is the part that actually matters, so that's what
   survives. */
@media (max-width: 460px) {
  .pf-grid,
  .pf-grid.pf-grid-single {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 52px;
  }

  .pf-g-branch {
    display: none;
  }
}

/* ── accessibility ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .cf-detail,
  .pf-panel,
  .pf-scrim,
  .cf-skeleton span,
  .cf-chev,
  .pf-row,
  .pf-tap,
  .pf-act,
  .pf-chev {
    animation: none !important;
    transition: none !important;
  }
}