/* ============================================================
   cancellation-review.css — Cancellation Review panel styles
   LucidLoop Operational Design System

   Ported from plans/support/task3/css/{style.css,components.css}.
   Mechanical transform rules applied:
     1. Every class selector prefixed with `cxr-`.
     2. Design tokens moved from :root into .cxr-panel scope
        and renamed --x → --cxr-x so they never override
        app-global tokens.
     3. Every var(--x) updated to var(--cxr-x).
     4. Page/layout rules (.page, .page__column, html/body
        resets) dropped — panel mounts inside the existing
        record-detail shell.

   These classes are unused until Tasks 7-11 generate markup.
   The existing dashboard pages are visually unaffected.
   ============================================================ */

/* ============================================
   DESIGN TOKENS — scoped to .cxr-panel
   Components inside the panel cascade from here.
   Renames every --x token to --cxr-x.
============================================ */
.cxr-panel {
  /* ---- surfaces ---- */
  --cxr-surface-canvas:   #fafaf8;
  --cxr-surface-0:        #ffffff;
  --cxr-surface-1:        #f7f7f3;
  --cxr-surface-2:        #efefea;
  --cxr-surface-tint:     #eef2f7;
  --cxr-surface-inset:    #fafaf8;

  /* ---- borders & hairlines ---- */
  --cxr-border:           #d8dce2;
  --cxr-border-strong:    #c4cad4;
  --cxr-border-faint:     #e7e9ee;

  /* ---- foreground / text ---- */
  --cxr-fg-1:             #111827;
  --cxr-fg-2:             #3a4250;
  --cxr-fg-3:             #6b7280;
  --cxr-fg-muted:         #6b7280;
  --cxr-fg-label:         #7b8494;
  --cxr-fg-on-accent:     #ffffff;

  /* ---- primary (Trust steel-blue) ---- */
  --cxr-primary:          #365f8b;
  --cxr-primary-hover:    #31557c;
  --cxr-primary-active:   #294a6e;
  --cxr-primary-tint:     #ecf1f5;
  --cxr-primary-tint-2:   #d9e3ec;
  --cxr-primary-text:     #365f8b;

  /* ---- semantic state: success / confirmed ---- */
  --cxr-success:          #4e7763;
  --cxr-success-solid:    #709b87;
  --cxr-success-bg:       #e9f0ec;
  --cxr-success-border:   #cdded5;

  /* ---- semantic state: warning / needs attention ---- */
  --cxr-warning:          #8a6f38;
  --cxr-warning-solid:    #b89a68;
  --cxr-warning-bg:       #f5efe2;
  --cxr-warning-callout:  #faf6ec;
  --cxr-warning-border:   #e6dac2;

  /* ---- semantic state: danger / canceled / blocked ---- */
  --cxr-danger:           #9c5a5a;
  --cxr-danger-solid:     #b88383;
  --cxr-danger-bg:        #f4e9e9;
  --cxr-danger-border:    #e3cccc;

  /* ---- semantic state: review / pending ---- */
  --cxr-review:           #4f5b6c;
  --cxr-review-solid:     #768396;
  --cxr-review-bg:        #edeff2;
  --cxr-review-border:    #d6dbe2;

  /* ---- semantic state: info / in progress ---- */
  --cxr-info:             #375f8b;
  --cxr-info-solid:       #375f8b;
  --cxr-info-bg:          #e9eef4;
  --cxr-info-border:      #cdd9e6;

  /* ---- callout icon accent ---- */
  --cxr-callout-info-icon: #eab308;

  /* ---- fonts ---- */
  --cxr-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --cxr-font-mono: ui-monospace, 'SF Mono', 'Menlo', monospace;

  /* ---- type scale (COMPACT, px) ---- */
  --cxr-text-micro: 10px;
  --cxr-text-2xs:   11px;
  --cxr-text-xs:    12px;
  --cxr-text-sm:    13px;
  --cxr-text-base:  14px;
  --cxr-text-md:    15px;
  --cxr-text-lg:    18px;
  --cxr-text-xl:    20px;
  --cxr-text-2xl:   22px;

  /* ---- weights ---- */
  --cxr-fw-regular:  400;
  --cxr-fw-medium:   500;
  --cxr-fw-semibold: 600;
  --cxr-fw-bold:     700;

  /* ---- line-heights ---- */
  --cxr-lh-tight:   1.25;
  --cxr-lh-snug:    1.4;
  --cxr-lh-normal:  1.55;

  /* ---- letter-spacing ---- */
  --cxr-ls-label:   0.06em;
  --cxr-ls-tight:  -0.01em;

  /* ---- spacing scale ---- */
  --cxr-space-1:   1px;
  --cxr-space-2:   2px;
  --cxr-space-4:   4px;
  --cxr-space-5:   5px;
  --cxr-space-6:   6px;
  --cxr-space-7:   7px;
  --cxr-space-8:   8px;
  --cxr-space-9:   9px;
  --cxr-space-10: 10px;
  --cxr-space-11: 11px;
  --cxr-space-12: 12px;
  --cxr-space-14: 14px;
  --cxr-space-16: 16px;
  --cxr-space-18: 18px;
  --cxr-space-20: 20px;
  --cxr-space-24: 24px;
  --cxr-space-32: 32px;

  /* ---- component sizing ---- */
  --cxr-col-time:      60px;
  --cxr-control:       26px;
  --cxr-radio:         17px;
  --cxr-size-hero:     44px;
  --cxr-textarea-min:  88px;
  --cxr-panel-width:  380px;

  /* ---- radii ---- */
  --cxr-radius-xs:   4px;
  --cxr-radius-sm:   6px;
  --cxr-radius-md:   8px;
  --cxr-radius-lg:  10px;
  --cxr-radius-xl:  12px;
  --cxr-radius-full: 999px;

  /* ---- elevation ---- */
  --cxr-shadow-xs:    0 1px 2px rgba(20, 28, 46, 0.04);
  --cxr-shadow-sm:    0 1px 3px rgba(20, 28, 46, 0.06), 0 1px 2px rgba(20, 28, 46, 0.04);
  --cxr-shadow-focus: 0 0 0 3px rgba(55, 95, 139, 0.22);

  /* ---- motion ---- */
  --cxr-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --cxr-dur-fast:      120ms;
  --cxr-dur-base:      180ms;
}

/* ============================================
   TYPOGRAPHY HELPERS
============================================ */
.cxr-u-label {
  font-size: var(--cxr-text-2xs);
  font-weight: var(--cxr-fw-bold);
  letter-spacing: var(--cxr-ls-label);
  text-transform: uppercase;
  color: var(--cxr-fg-label);
}

.cxr-u-mono {
  font-family: var(--cxr-font-mono);
  font-variant-numeric: tabular-nums;
}

/* ============================================
   ICON SIZING
============================================ */
.cxr-icon {
  display: inline-flex;
  flex: none;
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.85;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cxr-icon--sm { width: 13px; height: 13px; }
.cxr-icon--xs { width: 11px; height: 11px; }
.cxr-icon--lg { width: 20px; height: 20px; }

/* ============================================
   COMPONENT: Review Panel (shell)
   Used on: K, L, M — the framed Action-Panel column.
============================================ */
.cxr-panel {
  display: flex;
  flex-direction: column;
  /* Mounted inside .hil-record-detail-body, which is a flex column with
     overflow-y:auto. flex-shrink:0 + overflow:visible keep the panel at its
     min-content height so that scroll container scrolls, instead of the panel
     being compressed and clipping its own content. And since this panel has no
     .cxr-panel__body wrapper here, it pads its own body content directly. */
  flex-shrink: 0;
  background: var(--cxr-surface-1);
  border: 1px solid var(--cxr-border);
  border-radius: var(--cxr-radius-xl);
  box-shadow: var(--cxr-shadow-sm);
  overflow: visible;
  padding: var(--cxr-space-16) var(--cxr-space-16) 0;
}
.cxr-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--cxr-space-10);
  padding: var(--cxr-space-18) var(--cxr-space-18) var(--cxr-space-14);
}
.cxr-panel__title {
  font-size: var(--cxr-text-2xl);
  font-weight: var(--cxr-fw-semibold);
  letter-spacing: var(--cxr-ls-tight);
  color: var(--cxr-fg-1);
}
.cxr-panel__subtitle {
  font-size: var(--cxr-text-xs);
  color: var(--cxr-fg-muted);
}
.cxr-panel__tools {
  display: flex;
  align-items: center;
  gap: var(--cxr-space-8);
  color: var(--cxr-fg-muted);
}
.cxr-panel__body {
  padding: 0 var(--cxr-space-18) var(--cxr-space-16);
}
.cxr-panel__intro {
  margin-bottom: var(--cxr-space-16);
}
.cxr-panel__footer {
  display: flex;
  flex-direction: column;
  gap: var(--cxr-space-4);
  /* Horizontal inset comes from .cxr-panel's padding (no __body wrapper here),
     so the block Confirm button spans the padded content width. */
  padding: var(--cxr-space-14) 0 var(--cxr-space-4);
  margin-top: var(--cxr-space-4);
  border-top: 1px solid var(--cxr-border-faint);
  background: var(--cxr-surface-1);
}

/* ============================================
   COMPONENT: Section
   Used on: K, M — a labeled block within the body.
============================================ */
.cxr-section {
  margin-bottom: var(--cxr-space-18);
}
.cxr-section__label {
  margin-bottom: var(--cxr-space-8);
  font-size: var(--cxr-text-sm);
  font-weight: var(--cxr-fw-semibold);
  color: var(--cxr-fg-1);
}

/* ============================================
   COMPONENT: Callout
   Used on: K (packet, info) and M (manual, info).
============================================ */
.cxr-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--cxr-space-9);
  padding: var(--cxr-space-9) var(--cxr-space-12);
  border-radius: var(--cxr-radius-md);
  font-size: var(--cxr-text-sm);
  line-height: 1.45;
}
.cxr-callout__icon {
  flex: none;
  margin-top: var(--cxr-space-2);
}
.cxr-callout__body { flex: 1; }
.cxr-callout__body b { font-weight: var(--cxr-fw-semibold); color: var(--cxr-fg-1); }
.cxr-callout--info {
  background: transparent;
  color: var(--cxr-fg-2);
  border: 1px solid var(--cxr-border-faint);
}
.cxr-callout--info .cxr-callout__icon { color: var(--cxr-callout-info-icon); }
.cxr-callout--warning {
  background: var(--cxr-warning-callout);
  color: var(--cxr-warning);
}

/* ============================================
   COMPONENT: Context list
   Used on: K, M — request title + status summary,
   bordered top and bottom.
============================================ */
.cxr-context {
  margin-bottom: var(--cxr-space-18);
  padding: var(--cxr-space-10) 0;
  border-top: 1px solid var(--cxr-border-faint);
  border-bottom: 1px solid var(--cxr-border-faint);
}
.cxr-context__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cxr-space-12);
  padding: var(--cxr-space-4) 0;
}
.cxr-context__label {
  font-size: var(--cxr-text-sm);
  font-weight: var(--cxr-fw-medium);
  color: var(--cxr-fg-label);
  white-space: nowrap;
}
.cxr-context__value {
  font-size: var(--cxr-text-sm);
  font-weight: var(--cxr-fw-medium);
  color: var(--cxr-fg-1);
  text-align: right;
}

/* ============================================
   COMPONENT: Status badge
   Used on: K, L — request rollup state pill
   (Active / Canceled).
============================================ */
.cxr-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--cxr-space-5);
  padding: var(--cxr-space-2) var(--cxr-space-9);
  border-radius: var(--cxr-radius-full);
  font-size: var(--cxr-text-2xs);
  font-weight: var(--cxr-fw-bold);
  letter-spacing: var(--cxr-ls-label);
  text-transform: uppercase;
}
.cxr-status-badge--active { color: var(--cxr-success); background: var(--cxr-success-bg); }
.cxr-status-badge--canceled { color: var(--cxr-danger); background: var(--cxr-danger-bg); }

/* ============================================
   COMPONENT: Scope option
   Used on: K (selectable radio cards) and M (a
   single static --static card).
============================================ */
.cxr-scope-option {
  display: flex;
  align-items: flex-start;
  gap: var(--cxr-space-10);
  width: 100%;
  padding: var(--cxr-space-11) var(--cxr-space-12);
  border: 1px solid var(--cxr-border);
  border-radius: var(--cxr-radius-md);
  background: var(--cxr-surface-0);
  text-align: left;
  transition:
    border-color var(--cxr-dur-fast) var(--cxr-ease-standard),
    background var(--cxr-dur-fast) var(--cxr-ease-standard);
}
.cxr-scope-option + .cxr-scope-option { margin-top: var(--cxr-space-8); }
.cxr-scope-option:hover { background: var(--cxr-surface-2); }
.cxr-scope-option--selected { border-color: var(--cxr-primary); background: var(--cxr-primary-tint); }
.cxr-scope-option--selected:hover { background: var(--cxr-primary-tint); }
.cxr-scope-option--static { cursor: default; }
.cxr-scope-option--static:hover { background: var(--cxr-primary-tint); }
.cxr-scope-option__main { flex: 1; min-width: 0; }
.cxr-scope-option__title {
  display: block;
  font-size: var(--cxr-text-sm);
  font-weight: var(--cxr-fw-semibold);
  color: var(--cxr-fg-1);
}
.cxr-scope-option__desc {
  display: block;
  margin-top: var(--cxr-space-4);
  font-size: var(--cxr-text-xs);
  line-height: 1.4;
  color: var(--cxr-fg-3);
}

/* ============================================
   COMPONENT: Radio indicator
   Used on: K, M — the round selection dot inside
   a scope option.
============================================ */
.cxr-radio {
  position: relative;
  flex: none;
  width: var(--cxr-radio);
  height: var(--cxr-radio);
  margin-top: var(--cxr-space-2);
  border: 1.5px solid var(--cxr-border-strong);
  border-radius: var(--cxr-radius-full);
  background: var(--cxr-surface-0);
}
.cxr-radio--on { border-color: var(--cxr-primary); }
.cxr-radio--on::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--cxr-space-9);
  height: var(--cxr-space-9);
  transform: translate(-50%, -50%);
  border-radius: var(--cxr-radius-full);
  background: var(--cxr-primary);
}

/* ============================================
   COMPONENT: Line list + Line
   Used on: K, M — the eligible service-line checklist.
============================================ */
.cxr-line-list {
  margin-top: var(--cxr-space-10);
  padding: 0 var(--cxr-space-12);
  border: 1px solid var(--cxr-border);
  border-radius: var(--cxr-radius-lg);
  background: var(--cxr-surface-0);
}
.cxr-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cxr-space-12);
  width: 100%;
  padding: var(--cxr-space-11) 0;
  border: none;
  border-bottom: 1px solid var(--cxr-border-faint);
  background: none;
  text-align: left;
  font-family: inherit;
}
.cxr-line:last-child { border-bottom: none; }
button.cxr-line:hover { background: transparent; }
.cxr-line--hidden { display: none; }
.cxr-line__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cxr-line__name {
  display: flex;
  align-items: center;
  gap: var(--cxr-space-7);
  font-size: var(--cxr-text-sm);
  font-weight: var(--cxr-fw-semibold);
  color: var(--cxr-fg-1);
  white-space: nowrap;
}
.cxr-line__id { flex: none; white-space: nowrap; }
.cxr-line__modality {
  flex: none;
  padding: var(--cxr-space-1) var(--cxr-space-7);
  border-radius: var(--cxr-radius-full);
  background: var(--cxr-surface-2);
  font-size: var(--cxr-text-micro);
  font-weight: var(--cxr-fw-bold);
  letter-spacing: var(--cxr-ls-label);
  text-transform: uppercase;
  color: var(--cxr-fg-3);
}
.cxr-line__meta {
  margin-top: var(--cxr-space-4);
  font-size: var(--cxr-text-xs);
  line-height: 1.5;
  color: var(--cxr-fg-3);
  white-space: normal;
}
.cxr-line__staff {
  display: flex;
  align-items: center;
  gap: var(--cxr-space-5);
  margin-top: var(--cxr-space-4);
  font-size: var(--cxr-text-2xs);
  color: var(--cxr-fg-muted);
}
.cxr-line--excluded { align-items: flex-start; }
.cxr-line--excluded .cxr-line__name,
.cxr-line--excluded .cxr-line__meta { color: var(--cxr-fg-muted); }
.cxr-line__excluded-tag {
  flex: none;
  padding: var(--cxr-space-2) var(--cxr-space-9);
  border-radius: var(--cxr-radius-full);
  background: var(--cxr-surface-2);
  font-size: var(--cxr-text-micro);
  font-weight: var(--cxr-fw-bold);
  letter-spacing: var(--cxr-ls-label);
  text-transform: uppercase;
  color: var(--cxr-fg-muted);
}
.cxr-line__excluded-reason {
  display: flex;
  align-items: center;
  gap: var(--cxr-space-5);
  margin-top: var(--cxr-space-4);
  font-size: var(--cxr-text-2xs);
  color: var(--cxr-danger);
}

/* ============================================
   COMPONENT: Checkbox
   Used on: K — the line-select control on the
   right of a selectable line.
============================================ */
.cxr-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--cxr-control);
  height: var(--cxr-control);
  border: 1px solid var(--cxr-border);
  border-radius: var(--cxr-radius-md);
  background: var(--cxr-surface-1);
  color: var(--cxr-success);
  transition:
    background var(--cxr-dur-fast) var(--cxr-ease-standard),
    border-color var(--cxr-dur-fast) var(--cxr-ease-standard);
}
.cxr-checkbox .cxr-icon { opacity: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.cxr-checkbox--on {
  background: var(--cxr-success-bg);
  border-color: var(--cxr-success);
}
.cxr-checkbox--on .cxr-icon { opacity: 1; }
.cxr-checkbox--hidden { display: none; }
button.cxr-line:hover .cxr-checkbox { background: var(--cxr-surface-inset); }
button.cxr-line:hover .cxr-checkbox--on { background: var(--cxr-success-bg); }

/* ============================================
   COMPONENT: Rollup preview
   Used on: K — the live "after confirm" guard.
============================================ */
.cxr-rollup {
  display: flex;
  align-items: flex-start;
  gap: var(--cxr-space-9);
  margin-top: var(--cxr-space-12);
  padding: var(--cxr-space-10) var(--cxr-space-12);
  border: 1px solid var(--cxr-border-faint);
  border-radius: var(--cxr-radius-md);
  background: var(--cxr-surface-inset);
  font-size: var(--cxr-text-sm);
  line-height: 1.45;
  color: var(--cxr-fg-2);
}
.cxr-rollup__icon { flex: none; margin-top: var(--cxr-space-2); color: var(--cxr-fg-muted); }
.cxr-rollup b { font-weight: var(--cxr-fw-semibold); color: var(--cxr-fg-1); }
.cxr-rollup__danger { color: var(--cxr-danger); }

/* ============================================
   COMPONENT: Timing
   Used on: K, M — cancellation timing facts as
   plain divided rows.
============================================ */
.cxr-timing__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cxr-space-12);
  padding: var(--cxr-space-9) 0;
  border-bottom: 1px solid var(--cxr-border-faint);
}
.cxr-timing__row:first-child { padding-top: var(--cxr-space-2); }
.cxr-timing__row:last-child { border-bottom: none; padding-bottom: 0; }
.cxr-timing__label {
  font-size: var(--cxr-text-sm);
  color: var(--cxr-fg-label);
  white-space: nowrap;
}
.cxr-timing__value {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--cxr-space-4);
  text-align: right;
}
.cxr-timing__time {
  font-size: var(--cxr-text-sm);
  font-weight: var(--cxr-fw-medium);
  color: var(--cxr-fg-1);
}
.cxr-timing__time--muted { color: var(--cxr-fg-muted); }

/* ============================================
   COMPONENT: Basis pill
   Used on: K, M — provenance tag on a timing value.
============================================ */
.cxr-basis-pill {
  padding: var(--cxr-space-1) var(--cxr-space-8);
  border-radius: var(--cxr-radius-full);
  font-size: var(--cxr-text-micro);
  font-weight: var(--cxr-fw-bold);
  letter-spacing: var(--cxr-ls-label);
  text-transform: uppercase;
  white-space: nowrap;
}
.cxr-basis-pill--info { color: var(--cxr-info); background: var(--cxr-info-bg); }
.cxr-basis-pill--warn { color: var(--cxr-warning); background: var(--cxr-warning-bg); }
.cxr-basis-pill--neutral { color: var(--cxr-fg-3); background: var(--cxr-surface-2); }

/* ============================================
   COMPONENT: Note
   Used on: K, M — small muted explanatory line.
============================================ */
.cxr-note {
  margin-top: var(--cxr-space-7);
  font-size: var(--cxr-text-2xs);
  line-height: 1.4;
  color: var(--cxr-fg-muted);
}

/* ============================================
   COMPONENT: Reason
   Used on: M — the required manual-cancellation
   reason, grouped inside the service-line box.
============================================ */
.cxr-reason {
  margin-top: var(--cxr-space-11);
  padding-top: var(--cxr-space-12);
  padding-bottom: var(--cxr-space-12);
  border-top: 1px solid var(--cxr-border);
}
.cxr-reason__label {
  display: flex;
  align-items: center;
  gap: var(--cxr-space-5);
  margin-bottom: var(--cxr-space-8);
  font-size: var(--cxr-text-2xs);
  font-weight: var(--cxr-fw-bold);
  letter-spacing: var(--cxr-ls-label);
  text-transform: uppercase;
  color: var(--cxr-fg-label);
}
.cxr-reason__required {
  color: var(--cxr-danger);
  font-size: var(--cxr-text-sm);
  line-height: 0;
}
.cxr-reason__field {
  display: block;
  width: 100%;
  min-height: var(--cxr-textarea-min);
  padding: var(--cxr-space-10) var(--cxr-space-12);
  border: 1px solid var(--cxr-border-strong);
  border-radius: var(--cxr-radius-md);
  background: var(--cxr-surface-0);
  font-family: inherit;
  font-size: var(--cxr-text-sm);
  line-height: 1.5;
  color: var(--cxr-fg-1);
  resize: vertical;
}
.cxr-reason__field::placeholder { color: var(--cxr-fg-muted); }
.cxr-reason__field:focus {
  outline: none;
  border-color: var(--cxr-primary);
  box-shadow: var(--cxr-shadow-focus);
}
.cxr-reason__hint {
  display: flex;
  align-items: center;
  gap: var(--cxr-space-5);
  margin-top: var(--cxr-space-7);
  font-size: var(--cxr-text-2xs);
  color: var(--cxr-fg-muted);
}

/* ============================================
   COMPONENT: Disclosure (source message)
   Used on: K — progressive disclosure of the
   customer's source message.
============================================ */
.cxr-disclosure__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--cxr-space-2) 0;
  border: none;
  background: transparent;
}
.cxr-disclosure__toggle--open { margin-bottom: var(--cxr-space-10); }
.cxr-disclosure__label {
  display: flex;
  align-items: center;
  gap: var(--cxr-space-8);
  font-size: var(--cxr-text-sm);
  font-weight: var(--cxr-fw-semibold);
  color: var(--cxr-fg-1);
}
.cxr-disclosure__channel {
  padding: var(--cxr-space-2) var(--cxr-space-8);
  border-radius: var(--cxr-radius-full);
  background: var(--cxr-surface-inset);
  font-size: var(--cxr-text-2xs);
  font-weight: var(--cxr-fw-semibold);
  letter-spacing: var(--cxr-ls-label);
  text-transform: uppercase;
  color: var(--cxr-fg-3);
}
.cxr-disclosure__chevron {
  color: var(--cxr-fg-muted);
  transition: transform var(--cxr-dur-fast) var(--cxr-ease-standard);
}
.cxr-disclosure__toggle--open .cxr-disclosure__chevron { transform: rotate(180deg); }
.cxr-disclosure__panel { display: none; }
.cxr-disclosure__panel--open { display: block; }

/* ============================================
   COMPONENT: Source message
   Used on: K — the revealed evidence block.
============================================ */
.cxr-source {
  padding: var(--cxr-space-12) var(--cxr-space-14);
  border: 1px solid var(--cxr-border);
  border-radius: var(--cxr-radius-lg);
  background: var(--cxr-surface-2);
}
.cxr-source__from {
  font-size: var(--cxr-text-sm);
  font-weight: var(--cxr-fw-semibold);
  color: var(--cxr-fg-1);
}
.cxr-source__time {
  margin-top: var(--cxr-space-2);
  font-size: var(--cxr-text-2xs);
  color: var(--cxr-fg-muted);
}
.cxr-source__body {
  margin-top: var(--cxr-space-8);
  font-size: var(--cxr-text-sm);
  line-height: 1.5;
  color: var(--cxr-fg-2);
}

/* ============================================
   COMPONENT: Button
   Used on: K, M — the Confirm cancellation action.
============================================ */
.cxr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cxr-space-7);
  padding: var(--cxr-space-9) var(--cxr-space-16);
  border: 1px solid transparent;
  border-radius: var(--cxr-radius-md);
  font-size: var(--cxr-text-sm);
  font-weight: var(--cxr-fw-semibold);
  white-space: nowrap;
  transition: background var(--cxr-dur-fast) var(--cxr-ease-standard);
}
.cxr-btn--primary {
  background: var(--cxr-primary);
  color: var(--cxr-fg-on-accent);
}
.cxr-btn--primary:hover { background: var(--cxr-primary-hover); }
.cxr-btn--primary:active { background: var(--cxr-primary-active); }
.cxr-btn--block { width: 100%; }
.cxr-btn:disabled,
.cxr-btn--disabled {
  background: var(--cxr-surface-2);
  color: var(--cxr-fg-muted);
  border-color: var(--cxr-border);
  cursor: not-allowed;
}

/* ============================================
   COMPONENT: Text link
   Used on: K — low-emphasis secondary action.
============================================ */
.cxr-text-link {
  width: 100%;
  padding: var(--cxr-space-9);
  border: none;
  background: none;
  border-radius: var(--cxr-radius-md);
  font-size: var(--cxr-text-sm);
  font-weight: var(--cxr-fw-semibold);
  color: var(--cxr-primary);
}
.cxr-text-link:hover { background: var(--cxr-primary-tint); }

/* ============================================
   COMPONENT: Audit line
   Used on: K, M — footer provenance microcopy.
============================================ */
.cxr-audit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cxr-space-6);
  margin-top: var(--cxr-space-6);
  font-size: var(--cxr-text-2xs);
  color: var(--cxr-fg-muted);
}
.cxr-audit .cxr-icon { color: var(--cxr-fg-muted); }

/* ============================================
   COMPONENT: Canceled summary
   Used on: L — the list of canceled lines shown in
   the committed state.
============================================ */
.cxr-canceled-summary {
  display: flex;
  flex-direction: column;
  gap: var(--cxr-space-6);
  margin-top: var(--cxr-space-2);
  margin-bottom: var(--cxr-space-12);
}
.cxr-canceled-summary__row {
  display: flex;
  align-items: center;
  gap: var(--cxr-space-8);
  font-size: var(--cxr-text-sm);
  color: var(--cxr-fg-2);
}
.cxr-canceled-summary__row .cxr-icon { flex: none; color: var(--cxr-danger); }

/* ============================================
   COMPONENT: Field row
   Used on: L — label-over-value pair in the
   committed summary meta.
============================================ */
.cxr-field {
  display: flex;
  flex-direction: column;
  gap: var(--cxr-space-4);
  padding: var(--cxr-space-6) 0;
}
.cxr-field__label {
  font-size: var(--cxr-text-2xs);
  font-weight: var(--cxr-fw-semibold);
  letter-spacing: var(--cxr-ls-label);
  text-transform: uppercase;
  color: var(--cxr-fg-label);
}
.cxr-field__value {
  font-size: var(--cxr-text-sm);
  font-weight: var(--cxr-fw-medium);
  color: var(--cxr-fg-1);
}

/* ============================================
   COMPONENT: Success state
   Used on: L — the centered confirmation summary
   shown after a cancellation is confirmed.
============================================ */
.cxr-success {
  padding: var(--cxr-space-24) var(--cxr-space-4);
  text-align: center;
}
.cxr-success__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--cxr-size-hero);
  height: var(--cxr-size-hero);
  margin: 0 auto var(--cxr-space-14);
  border-radius: var(--cxr-radius-full);
  background: var(--cxr-success-bg);
  color: var(--cxr-success);
}
.cxr-success__title {
  margin-bottom: var(--cxr-space-6);
  font-size: var(--cxr-text-md);
  font-weight: var(--cxr-fw-semibold);
  color: var(--cxr-fg-1);
}
.cxr-success__text {
  margin-bottom: var(--cxr-space-18);
  font-size: var(--cxr-text-sm);
  line-height: 1.5;
  color: var(--cxr-fg-3);
}
.cxr-success__meta {
  padding-top: var(--cxr-space-12);
  border-top: 1px solid var(--cxr-border);
  text-align: left;
}