/* ============================================================================
   ATLAS REDESIGN — Transactions screen styles  ·  Phase 2
   Branch: atlas-redesign-2026-06-29

   Prefix: .rd-transactions. Tokens only (--r-*). Works in Calm + Operator
   automatically. The card grid may scroll internally; the outer frame never
   scrolls (frame height is owned by the shell).
   ========================================================================== */

.rd-transactions {
  font-family: var(--r-font-body);
  color: var(--r-body);
  padding: var(--r-gutter);
  max-width: var(--r-page-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 0; /* allow the grid slot to flex + scroll inside the shell */
}

/* ---- header row ---------------------------------------------------------- */
.rd-tx-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.rd-tx-head-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rd-tx-eyebrow {
  font-family: var(--r-font-mono);
  font-size: var(--r-fs-eyebrow);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--r-clay);
}
.rd-tx-h1 {
  font-family: var(--r-font-display);
  font-size: var(--r-fs-h1);
  font-weight: 600;
  line-height: 1.1;
  color: var(--r-ink);
  margin: 0;
}
.rd-tx-head-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
}

/* segmented pill (Active / Closing / Closed) */
.rd-tx-seg {
  display: inline-flex;
  gap: 2px;
  background: var(--r-well);
  border: 1px solid var(--r-border);
  border-radius: var(--r-radius-control);
  padding: 3px;
}
.rd-tx-seg-btn {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: var(--r-font-body);
  font-size: var(--r-fs-meta);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--r-muted);
  padding: 6px 14px;
  border-radius: calc(var(--r-radius-control) - 3px);
  cursor: pointer;
  transition: color var(--r-dur) var(--r-ease), background var(--r-dur) var(--r-ease), box-shadow var(--r-dur) var(--r-ease);
}
.rd-tx-seg-btn:hover { color: var(--r-ink); }
.rd-tx-seg-btn.is-active {
  background: var(--r-surface);
  color: var(--r-primary);
  box-shadow: var(--r-shadow-card);
}
.rd-tx-seg-btn:focus-visible { outline: var(--r-focus); outline-offset: 2px; }

/* primary action button */
.rd-tx-new {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: var(--r-primary);
  color: var(--r-primary-ink);
  font-family: var(--r-font-body);
  font-size: var(--r-fs-body);
  font-weight: 600;
  letter-spacing: .01em;
  padding: 9px 16px;
  border-radius: var(--r-radius-control);
  cursor: pointer;
  box-shadow: var(--r-shadow-card);
  transition: box-shadow var(--r-dur) var(--r-ease), transform var(--r-dur) var(--r-ease), filter var(--r-dur) var(--r-ease);
}
.rd-tx-new .ph { font-size: 15px; line-height: 1; }
.rd-tx-new:hover { box-shadow: var(--r-shadow-hover); transform: translateY(-1px); filter: brightness(1.04); }
.rd-tx-new:active { transform: translateY(0); }
.rd-tx-new:focus-visible { outline: var(--r-focus); outline-offset: 2px; }

/* ---- KPI strip (4-up) ---------------------------------------------------- */
.rd-tx-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.rd-tx-kpi {
  background: var(--r-surface);
  border: 1px solid var(--r-hairline-2);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-shadow-card);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rd-tx-kpi-label {
  font-family: var(--r-font-mono);
  font-size: var(--r-fs-eyebrow);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--r-faint);
}
.rd-tx-kpi-value {
  font-family: var(--r-font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  color: var(--r-ink);
}
.rd-tx-kpi-value.rd-tx-kpi-accent { color: var(--r-clay-2); }

/* ---- transaction card grid ---------------------------------------------- */
.rd-tx-grid-slot {
  min-height: 120px;
  min-width: 0;
  overflow-y: auto; /* internal scroll only; outer frame stays fixed */
}
.rd-tx-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.rd-tx-tile {
  background: var(--r-surface);
  border: 1px solid var(--r-border);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-shadow-card);
  padding: 18px 20px;
  cursor: pointer;
  transition: box-shadow var(--r-dur) var(--r-ease), transform var(--r-dur) var(--r-ease);
}
.rd-tx-tile:hover {
  box-shadow: var(--r-shadow-hover);
  transform: translateY(-2px);
}
.rd-tx-tile:focus-visible { outline: var(--r-focus); outline-offset: 2px; }

/* top row: address/byline + price/badge */
.rd-tx-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.rd-tx-id { min-width: 0; }
.rd-tx-addr {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--r-ink);
}
.rd-tx-byline {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--r-muted);
}
.rd-tx-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.rd-tx-price {
  font-family: var(--r-font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--r-ink);
}

/* risk badge — semantic tone only */
.rd-tx-pill {
  font-family: var(--r-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: var(--r-radius-pill);
  padding: 2px 9px;
  background: var(--r-well);
  color: var(--r-muted);
}
.rd-tx-pill[data-tone="alert"] { background: color-mix(in srgb, var(--r-alert) 16%, transparent); color: var(--r-alert); }
.rd-tx-pill[data-tone="warn"]  { background: color-mix(in srgb, var(--r-amber) 18%, transparent); color: var(--r-amber); }
.rd-tx-pill[data-tone="good"]  { background: var(--r-mint-surface); color: var(--r-mint-ink); }

/* progress row */
.rd-tx-progrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  margin: 15px 0 6px;
}
.rd-tx-stage { font-weight: 600; color: var(--r-body); }
.rd-tx-close { color: var(--r-muted); white-space: nowrap; }

/* progress bar */
.rd-tx-track {
  height: 7px;
  border-radius: var(--r-radius-chip);
  background: var(--r-well);
  overflow: hidden;
}
.rd-tx-fill {
  display: block;
  height: 100%;
  border-radius: var(--r-radius-chip);
  background: var(--r-primary);
  transition: width var(--r-dur) var(--r-ease);
}

/* ---- empty state (honest; expected when Dotloop is not connected) -------- */
.rd-tx-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: 54px 20px;
  border: 1px dashed var(--r-border);
  border-radius: var(--r-radius-card);
  background: var(--r-surface-2);
}
.rd-tx-empty-icon {
  font-size: 30px;
  line-height: 1;
  color: var(--r-faint);
}
.rd-tx-empty-note {
  margin: 0;
  font-family: var(--r-font-body);
  font-size: var(--r-fs-body);
  color: var(--r-muted);
  max-width: 42ch;
}
.rd-tx-empty-org {
  margin: 0;
  font-family: var(--r-font-mono);
  font-size: var(--r-fs-meta);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--r-faint);
}

/* ---- responsive: single column under 900px, KPIs stack on narrow ---------- */
@media (max-width: 900px) {
  .rd-tx-grid { grid-template-columns: 1fr; }
  .rd-tx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .rd-tx-kpis { grid-template-columns: 1fr; }
}

/* ── S11/B2 (2026-07-04): full-page transaction workspace ─────────────────── */
.rd-tx-det { padding: 2px 0 44px; }
.rd-tx-det-back {
  border: 1px solid var(--r-border); background: var(--r-surface); color: var(--r-muted);
  border-radius: 999px; padding: 5px 14px; font: inherit; font-size: var(--r-fs-meta);
  cursor: pointer; margin-bottom: 16px; transition: border-color var(--r-dur) var(--r-ease);
}
.rd-tx-det-back:hover { border-color: var(--r-ink); color: var(--r-ink); }
.rd-tx-det-back:focus-visible { outline: var(--r-focus); outline-offset: 2px; }
.rd-tx-det-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; margin-bottom: 20px; flex-wrap: wrap;
}
.rd-tx-det-h1 {
  font-family: var(--r-font-display); font-size: 30px; line-height: 1.15;
  color: var(--r-ink); margin: 4px 0 0;
}
.rd-tx-det-headr { display: flex; align-items: center; gap: 12px; }
.rd-tx-det-grid {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 18px;
}
@media (max-width: 1020px) { .rd-tx-det-grid { grid-template-columns: minmax(0, 1fr); } }
.rd-tx-det-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.rd-tx-det-box {
  background: var(--r-surface); border: 1px solid var(--r-border);
  border-radius: 14px; padding: 18px 20px;
}
.rd-tx-det-title {
  font-size: 15px; font-weight: 650; color: var(--r-ink); margin: 0 0 12px;
  display: flex; align-items: baseline; gap: 8px;
}
.rd-tx-det-count { color: var(--r-muted); font-size: var(--r-fs-meta); font-weight: 500; }
.rd-tx-det-row {
  display: flex; justify-content: space-between; gap: 14px; padding: 6px 0;
  border-bottom: 1px dashed var(--r-faint); font-size: var(--r-fs-body);
}
.rd-tx-det-row:last-of-type { border-bottom: 0; }
.rd-tx-det-row span { color: var(--r-muted); }
.rd-tx-det-row b { color: var(--r-ink); font-weight: 600; text-align: right; }
.rd-tx-det-ext {
  display: inline-block; margin-top: 12px; color: var(--r-primary);
  font-size: var(--r-fs-meta); text-decoration: none;
}
.rd-tx-det-ext:hover { text-decoration: underline; }
.rd-tx-det-sub { color: var(--r-muted); font-size: var(--r-fs-meta); margin-bottom: 10px; }
.rd-tx-doc-row {
  display: flex; align-items: baseline; gap: 10px; padding: 5px 0;
  border-bottom: 1px dashed var(--r-faint); font-size: 13px; min-width: 0;
}
.rd-tx-doc-row:last-child { border-bottom: 0; }
.rd-tx-doc-st { color: var(--r-good); flex: none; }
.rd-tx-doc-row.is-open .rd-tx-doc-st { color: var(--r-amber); }
.rd-tx-doc-name {
  color: var(--r-ink); text-decoration: none; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.rd-tx-doc-name:hover { text-decoration: underline; }
.rd-tx-doc-meta {
  margin-left: auto; color: var(--r-muted); font-size: var(--r-fs-meta);
  flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rd-tx-det-none { color: var(--r-muted); font-size: 13px; padding: 6px 0; }
.rd-tx-det-photobox { padding: 10px; }
.rd-tx-det-img { display: block; width: 100%; border-radius: 10px; object-fit: cover; max-height: 320px; }
.rd-tx-det-imgmeta { color: var(--r-muted); font-size: var(--r-fs-meta); padding: 8px 6px 2px; }
.rd-tx-det-noimg { color: var(--r-muted); font-size: 13px; padding: 26px 12px; text-align: center; }
.rd-tx-dtask-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 0;
  border-bottom: 1px dashed var(--r-faint); font-size: 13px; min-width: 0;
}
.rd-tx-dtask-row:last-child { border-bottom: 0; }
.rd-tx-dtask-row.is-done .rd-tx-dtask-name { text-decoration: line-through; color: var(--r-muted); }
.rd-tx-dtask-chk {
  width: 18px; height: 18px; flex: none; border-radius: 6px;
  border: 1.5px solid var(--r-border); background: var(--r-surface); cursor: pointer;
  transition: border-color var(--r-dur) var(--r-ease), background var(--r-dur) var(--r-ease);
}
.rd-tx-dtask-chk:hover { border-color: var(--r-good); }
.rd-tx-dtask-chk[data-on="1"] { background: var(--r-good); border-color: var(--r-good); }
.rd-tx-dtask-chk:focus-visible { outline: var(--r-focus); outline-offset: 2px; }
.rd-tx-dtask-key { font-family: var(--r-font-mono); font-size: 11px; color: var(--r-muted); flex: none; }
.rd-tx-dtask-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-tx-dtask-due { margin-left: auto; flex: none; color: var(--r-muted); font-size: var(--r-fs-meta); }
.rd-tx-det-taskadd { margin-top: 10px; }
.rd-tx-det-in {
  width: 100%; border: 1px solid var(--r-border); background: var(--r-body);
  color: var(--r-ink); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13px;
}
.rd-tx-det-in:focus-visible { outline: var(--r-focus); outline-offset: 1px; }
.rd-tx-det-tpl { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.rd-tx-det-tplhint { color: var(--r-muted); font-size: var(--r-fs-meta); }
.rd-tx-det-note { margin-top: 10px; font-size: var(--r-fs-meta); color: var(--r-muted); min-height: 16px; }
.rd-tx-det-note[data-tone="good"] { color: var(--r-good); }
.rd-tx-det-note[data-tone="alert"] { color: var(--r-alert); }
.rd-tx-det-foot { margin-top: 20px; color: var(--r-muted); font-size: var(--r-fs-meta); }

/* ── W509/GPR-64: explicit "Apply Template" affordance + confirm ──────────── */
.rd-tx-det-tplrow { display: flex; gap: 8px; align-items: center; }
.rd-tx-det-tplsel { flex: 1 1 auto; min-width: 0; }
.rd-tx-det-tplbtn {
  flex: none; appearance: none; border: 0; cursor: pointer;
  background: var(--r-primary); color: var(--r-primary-ink);
  font-family: var(--r-font-body); font-size: 13px; font-weight: 600;
  padding: 8px 14px; border-radius: 8px; white-space: nowrap;
  box-shadow: var(--r-shadow-card);
  transition: box-shadow var(--r-dur) var(--r-ease), transform var(--r-dur) var(--r-ease), filter var(--r-dur) var(--r-ease);
}
.rd-tx-det-tplbtn:hover:not(:disabled) { box-shadow: var(--r-shadow-hover); transform: translateY(-1px); filter: brightness(1.04); }
.rd-tx-det-tplbtn:active:not(:disabled) { transform: translateY(0); }
.rd-tx-det-tplbtn:focus-visible { outline: var(--r-focus); outline-offset: 2px; }
.rd-tx-det-tplbtn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* confirm dialog — appended to the detail slot, centered over the workspace */
.rd-tx-confirm {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.rd-tx-confirm-scrim {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--r-ink) 46%, transparent);
  backdrop-filter: blur(2px);
}
.rd-tx-confirm-box {
  position: relative; z-index: 1; width: min(440px, 100%);
  background: var(--r-surface); border: 1px solid var(--r-border);
  border-radius: 16px; box-shadow: var(--r-shadow-hover);
  padding: 22px 24px;
}
.rd-tx-confirm-h {
  font-family: var(--r-font-display); font-size: 19px; font-weight: 650;
  color: var(--r-ink); margin: 0 0 10px;
}
.rd-tx-confirm-b { margin: 0 0 8px; font-size: var(--r-fs-body); color: var(--r-body); line-height: 1.5; }
.rd-tx-confirm-b strong { color: var(--r-ink); font-weight: 650; }
.rd-tx-confirm-meta { margin: 0; font-size: var(--r-fs-meta); color: var(--r-muted); }
.rd-tx-confirm-note { margin: 10px 0 0; font-size: var(--r-fs-meta); min-height: 0; }
.rd-tx-confirm-note[data-tone="alert"] { color: var(--r-alert); }
.rd-tx-confirm-actions {
  display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px;
}
.rd-tx-confirm-btn {
  appearance: none; cursor: pointer; font-family: var(--r-font-body);
  font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 9px;
  transition: box-shadow var(--r-dur) var(--r-ease), transform var(--r-dur) var(--r-ease), filter var(--r-dur) var(--r-ease), border-color var(--r-dur) var(--r-ease);
}
.rd-tx-confirm-btn:focus-visible { outline: var(--r-focus); outline-offset: 2px; }
.rd-tx-confirm-cancel {
  border: 1px solid var(--r-border); background: var(--r-surface); color: var(--r-muted);
}
.rd-tx-confirm-cancel:hover { border-color: var(--r-ink); color: var(--r-ink); }
.rd-tx-confirm-go {
  border: 0; background: var(--r-primary); color: var(--r-primary-ink);
  box-shadow: var(--r-shadow-card);
}
.rd-tx-confirm-go:hover:not(:disabled) { box-shadow: var(--r-shadow-hover); transform: translateY(-1px); filter: brightness(1.04); }
.rd-tx-confirm-go:disabled { opacity: .6; cursor: progress; }

@media (max-width: 560px) {
  .rd-tx-det-tplrow { flex-direction: column; align-items: stretch; }
  .rd-tx-det-tplbtn { width: 100%; }
}