:root {
  --page-bg: #0d0812;
  --ink: #ffffff;
  --body: rgba(255, 255, 255, 0.78);
  --muted: rgba(255, 255, 255, 0.56);
  --faint: rgba(255, 255, 255, 0.36);
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);
  --panel: rgba(255, 255, 255, 0.045);
  --brand: #b890cf;
  --brand-deep: #9264a2;
  --brand-strong: #d3b6e3;
  --brand-soft: rgba(184, 144, 207, 0.16);
  --amber: #f5a623;
  --green: #6ce9a6;
  --blue: #84caff;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.024) 1px, transparent 1px),
    radial-gradient(circle at 12% 10%, rgba(146, 100, 162, 0.2), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(245, 166, 35, 0.08), transparent 30%),
    var(--page-bg);
  background-size: 48px 48px, 48px 48px, auto, auto, auto;
  color: var(--body);
  font-family: var(--font-family-body);
  overflow-x: hidden;
}

button {
  font: inherit;
}

.demo-shell {
  width: min(1440px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: clamp(16px, 3vw, 34px);
}

.demo-header {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) auto;
  gap: clamp(18px, 3vw, 36px);
  align-items: start;
  margin-bottom: 18px;
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
}

.brand img {
  width: 150px;
  height: auto;
  display: block;
}

.header-copy {
  max-width: 820px;
}

.label-mono {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand);
  font-family: var(--font-family-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}

.label-mono::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 16px rgba(245, 166, 35, 0.55);
}

h1 {
  margin: 8px 0 8px;
  color: var(--ink);
  font-family: var(--font-family-display);
  font-size: clamp(30px, 3.8vw, 46px);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: 0;
}

.header-copy p {
  max-width: 68ch;
  margin: 0;
  color: var(--muted);
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.55;
}

.replay-button {
  justify-self: end;
  min-height: 42px;
  padding: 10px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font-family: var(--font-family-display);
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  transition: transform 160ms var(--ease-standard), background 160ms var(--ease-standard), border-color 160ms var(--ease-standard);
}

.replay-button:hover {
  transform: translateY(-1px);
  border-color: rgba(184, 144, 207, 0.55);
  background: var(--brand-soft);
}

.recording-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.026));
  box-shadow: var(--shadow);
  overflow: hidden;
}

.recording-window {
  padding: 14px;
}

.mock-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 14px;
  align-items: stretch;
}

.mock-app {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.browser-chrome {
  height: 42px;
  display: grid;
  grid-template-columns: 10px 10px 10px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: rgba(255, 255, 255, 0.045);
}

.browser-chrome > span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line-strong);
}

.browser-chrome > span:nth-child(1) {
  background: var(--amber);
}

.browser-chrome > span:nth-child(2) {
  background: var(--brand);
}

.browser-chrome > span:nth-child(3) {
  background: var(--green);
}

.address-pill {
  min-width: 0;
  height: 26px;
  display: flex;
  align-items: center;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.18);
  color: var(--muted);
  font-family: var(--font-family-mono);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.demo-shell:not([data-view="login"]):not([data-view="inbox"]) .browser-chrome {
  display: none;
}

.demo-shell:not([data-view="login"]):not([data-view="inbox"]) .screen-canvas {
  border-radius: 8px;
}

.screen-canvas {
  position: relative;
  min-height: clamp(560px, 63vh, 700px);
  border: 1px solid var(--line);
  border-radius: 0 0 8px 8px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    #100a16;
  background-size: 32px 32px;
  overflow: hidden;
}

.app-view {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(0.992);
  pointer-events: none;
  transition: opacity 260ms var(--ease-standard), transform 260ms var(--ease-standard);
}

.demo-shell[data-view="login"] [data-app-view="login"],
.demo-shell[data-view="inbox"] [data-app-view="inbox"],
.demo-shell[data-view="pdf"] [data-app-view="pdf"],
.demo-shell[data-view="validation"] [data-app-view="validation"],
.demo-shell[data-view="erp"] [data-app-view="erp"],
.demo-shell[data-view="report"] [data-app-view="report"] {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.action-panel {
  min-width: 0;
  min-height: 100%;
  max-height: clamp(560px, 63vh, 700px);
  display: flex;
  flex-direction: column;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(13, 8, 18, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(184, 144, 207, 0.34) transparent;
}

.action-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.action-list li {
  display: none;
  grid-template-columns: 1fr;
  align-items: center;
  min-height: 42px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.026);
  opacity: 0.48;
  transition: opacity 180ms var(--ease-standard), border-color 180ms var(--ease-standard), background 180ms var(--ease-standard), transform 180ms var(--ease-standard);
}

.action-list li.revealed {
  display: grid;
  animation: actionIn 220ms var(--ease-standard);
}

@keyframes actionIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 0.48;
    transform: none;
  }
}

.action-list b {
  display: block;
  color: var(--ink);
  font-family: var(--font-family-display);
  font-size: 13px;
  line-height: 1.25;
}

.action-list li.done {
  opacity: 0.72;
}

.action-list li.active {
  opacity: 1;
  border-color: rgba(245, 166, 35, 0.5);
  background: rgba(245, 166, 35, 0.08);
  transform: translateX(-2px);
}

.login-view {
  display: grid;
  place-items: center;
  padding: 28px;
}

.login-card {
  width: min(440px, 100%);
  padding: 24px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.36);
}

.login-loading {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 20;
  width: min(260px, calc(100% - 42px));
  min-height: 116px;
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 18px;
  border: 1px solid rgba(184, 144, 207, 0.34);
  border-radius: 8px;
  background: rgba(19, 11, 25, 0.9);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.36);
  opacity: 0;
  transform: translate(-50%, -42%) scale(0.96);
  pointer-events: none;
}

.login-loading span {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(184, 144, 207, 0.24);
  border-top-color: var(--amber);
  animation: spin 700ms linear infinite;
}

.login-loading b {
  color: var(--ink);
  font-family: var(--font-family-mono);
  font-size: 12px;
}

.demo-shell[data-step="loading"] .login-loading {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity 160ms var(--ease-standard), transform 160ms var(--ease-standard);
}

.demo-shell[data-step="loading"] .login-card {
  opacity: 0.36;
  filter: blur(1px);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.login-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.email-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(245, 166, 35, 0.35), rgba(146, 100, 162, 0.8));
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--ink);
}

.email-icon svg {
  display: block;
}

.login-logo b,
.mail-side > b,
.mail-toolbar b,
.reader-head b,
.attachment-card b,
.pdf-toolbar b {
  display: block;
  color: var(--ink);
  font-family: var(--font-family-display);
  font-weight: 650;
}

.input-row {
  display: block;
  margin-top: 12px;
}

.input-row span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-family: var(--font-family-mono);
  font-size: 11px;
}

.input-row b {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.075);
  color: var(--ink);
  font-family: var(--font-family-mono);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
}

.input-row b.typing::after {
  content: "";
  width: 7px;
  height: 14px;
  margin-left: 3px;
  background: var(--amber);
  animation: blink 700ms steps(1) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.primary-action {
  width: 100%;
  min-height: 42px;
  margin-top: 18px;
  border: 1px solid rgba(184, 144, 207, 0.38);
  border-radius: 999px;
  color: var(--ink);
  background: linear-gradient(135deg, #9264a2, #643974);
  font-family: var(--font-family-display);
  font-size: 14px;
  font-weight: 650;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 26px rgba(146, 100, 162, 0.2);
}

.primary-action.pressed,
.attachment-card.pressed {
  transform: scale(0.99);
  filter: brightness(1.12);
}

.mail-app {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: 170px minmax(230px, 0.75fr) minmax(320px, 1.25fr);
}

.mail-side {
  padding: 18px 12px;
  border-right: 1px solid var(--line);
  background: rgba(29, 16, 34, 0.62);
}

.mail-side > b {
  font-size: 14px;
  margin-bottom: 16px;
}

.side-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
  padding: 7px 9px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 13px;
}

.side-item.active {
  color: var(--ink);
  background: rgba(184, 144, 207, 0.14);
}

.side-item i {
  min-width: 19px;
  height: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--amber);
  color: #201304;
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
}

.mail-list {
  position: relative;
  min-width: 0;
  padding: 12px;
  border-right: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.018);
}

.scan-highlight {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 58px;
  z-index: 0;
  height: 68px;
  border: 1px solid rgba(245, 166, 35, 0.58);
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(245, 166, 35, 0.04), rgba(245, 166, 35, 0.18), rgba(245, 166, 35, 0.04));
  box-shadow: 0 0 26px rgba(245, 166, 35, 0.16);
  opacity: 0;
  transition: top 240ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 160ms var(--ease-standard), border-color 180ms var(--ease-standard);
}

.scan-highlight::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 36%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  animation: scanPass 760ms linear infinite;
}

/* Active scan-highlight position rules live in the data-scan="r1..r4" block
   further down (see "scan-sort"); the legacy scan-inbox / ops|vendor|facilities
   rules were unused by this scenario and have been removed. */

@keyframes scanPass {
  from {
    left: -38%;
  }
  to {
    left: 102%;
  }
}

.mail-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  margin-bottom: 8px;
}

.mail-toolbar span {
  color: var(--green);
  font-family: var(--font-family-mono);
  font-size: 11px;
}

.new-mail-button {
  position: absolute;
  top: 14px;
  right: 12px;
  z-index: 3;
  min-height: 32px;
  padding: 7px 13px;
  border: 1px solid rgba(184, 144, 207, 0.38);
  border-radius: 999px;
  color: var(--ink);
  background: linear-gradient(135deg, #9264a2, #643974);
  font-family: var(--font-family-display);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-3px);
  pointer-events: none;
  transition: opacity 180ms var(--ease-standard), transform 180ms var(--ease-standard), box-shadow 180ms var(--ease-standard);
}

.demo-shell[data-step="share-invoice"] .new-mail-button {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  box-shadow: 0 10px 28px rgba(146, 100, 162, 0.22);
}

.demo-shell[data-step="share-invoice"] .mail-toolbar span {
  opacity: 0;
}

.mail-row {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 68px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 0 0 8px;
  padding: 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--body);
  text-align: left;
}

.mail-row i,
.reader-head i {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.1);
  color: var(--muted);
  font-family: var(--font-family-display);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.reader-head i {
  background: linear-gradient(135deg, rgba(245, 166, 35, 0.84), rgba(146, 100, 162, 0.9));
  color: #201304;
}

.mail-row b {
  display: block;
  color: var(--ink);
  font-family: var(--font-family-display);
  font-size: 13px;
  line-height: 1.25;
}

.mail-row small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mail-row em {
  color: var(--faint);
  font-size: 11px;
  font-style: normal;
}

.mail-reader {
  position: relative;
  padding: 16px;
  min-width: 0;
}

.reader-message {
  position: absolute;
  inset: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  transition: opacity 220ms var(--ease-standard), transform 220ms var(--ease-standard);
}

.reader-message {
  opacity: 0;
  transform: translateY(8px);
  padding: 18px;
  pointer-events: none;
}

/* NOTE: scoped to #invoiceReader only. The generic ".reader-message" form here
   used to turn on BOTH readers during the invoice-read steps, which caused the
   inquiry body to ghost behind the invoice body. Reader visibility for this
   scenario is governed precisely (by id) in the appended review-fix block. */
.demo-shell[data-step="read-email"] #invoiceReader,
.demo-shell[data-step="download"] #invoiceReader,
.demo-shell[data-step="share-invoice"] #invoiceReader,
.demo-shell[data-step="archive-email"] #invoiceReader {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.reader-head {
  display: flex;
  gap: 11px;
  align-items: center;
  margin-bottom: 18px;
}

.reader-head > div {
  min-width: 0;
  flex: 1;
}

.archive-source-button {
  min-height: 32px;
  padding: 7px 13px;
  border: 1px solid rgba(184, 144, 207, 0.38);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.055);
  font-family: var(--font-family-display);
  font-size: 12px;
  font-weight: 750;
  opacity: 0;
  transform: translateY(-3px);
  pointer-events: none;
  transition: opacity 180ms var(--ease-standard), transform 180ms var(--ease-standard), background 180ms var(--ease-standard);
}

.demo-shell[data-step="archive-email"] .archive-source-button {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.archive-source-button.active,
.archive-source-button.archived {
  border-color: rgba(108, 233, 166, 0.34);
  color: var(--green);
  background: rgba(108, 233, 166, 0.08);
}

.reader-head small,
.attachment-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}

.reader-message p {
  margin: 0 0 16px;
  color: var(--body);
  font-size: 15px;
  line-height: 1.55;
}

.read-word {
  display: inline;
  padding: 1px 2px;
  border-radius: 4px;
  transition: background 120ms var(--ease-standard), color 120ms var(--ease-standard);
}

.read-word.active {
  color: #201304;
  background: rgba(245, 166, 35, 0.82);
}

.attachment-card {
  position: relative;
  min-height: 76px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: rgba(13, 8, 18, 0.48);
  overflow: hidden;
  transition: transform 120ms var(--ease-standard), filter 120ms var(--ease-standard), border-color 180ms var(--ease-standard);
}

.demo-shell[data-step="download"] .attachment-card {
  border-color: rgba(245, 166, 35, 0.44);
}

.compose-window {
  position: absolute;
  right: 22px;
  bottom: 22px;
  z-index: 18;
  width: min(440px, calc(100% - 44px));
  padding: 16px;
  border: 1px solid rgba(184, 144, 207, 0.34);
  border-radius: 8px;
  background: rgba(19, 11, 25, 0.94);
  box-shadow: 0 24px 62px rgba(0, 0, 0, 0.42);
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  pointer-events: none;
  transition: opacity 220ms var(--ease-standard), transform 220ms var(--ease-standard);
}

.compose-window.open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.compose-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.compose-title b {
  color: var(--ink);
  font-family: var(--font-family-display);
  font-size: 17px;
}

.compose-title span,
.compose-field span {
  color: var(--muted);
  font-family: var(--font-family-mono);
  font-size: 11px;
}

.compose-field {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 34px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.compose-field b,
.compose-body {
  min-width: 0;
  color: var(--ink);
  font-family: var(--font-family-mono);
  font-size: 12px;
  font-weight: 500;
}

.compose-body {
  min-height: 84px;
  margin-top: 10px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  line-height: 1.5;
}

.compose-field b.typing::after,
.compose-body.typing::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 14px;
  margin-left: 3px;
  vertical-align: -2px;
  background: var(--amber);
  animation: blink 700ms steps(1) infinite;
}

.compose-attachment {
  width: fit-content;
  margin-top: 10px;
  padding: 7px 10px;
  border: 1px solid rgba(108, 233, 166, 0.26);
  border-radius: 999px;
  color: var(--green);
  background: rgba(108, 233, 166, 0.07);
  font-family: var(--font-family-mono);
  font-size: 11px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 160ms var(--ease-standard), transform 160ms var(--ease-standard);
}

.compose-attachment.visible {
  opacity: 1;
  transform: none;
}

.compose-send-button {
  width: 100%;
  min-height: 38px;
  margin-top: 12px;
  border: 1px solid rgba(184, 144, 207, 0.38);
  border-radius: 999px;
  color: var(--ink);
  background: linear-gradient(135deg, #9264a2, #643974);
  font-family: var(--font-family-display);
  font-size: 13px;
  font-weight: 750;
}

.compose-send-button.active {
  border-color: rgba(245, 166, 35, 0.58);
  box-shadow: 0 0 26px rgba(245, 166, 35, 0.16);
}

.compose-sent {
  margin: 10px 0 0;
  color: var(--green);
  font-family: var(--font-family-mono);
  font-size: 12px;
  opacity: 0;
}

.compose-sent.visible {
  opacity: 1;
}

.pdf-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid rgba(184, 144, 207, 0.34);
  background: rgba(184, 144, 207, 0.2);
  color: var(--ink);
  font-family: var(--font-family-mono);
  font-size: 11px;
  font-weight: 800;
}

.attachment-card em {
  color: var(--muted);
  font-family: var(--font-family-mono);
  font-size: 11px;
  font-style: normal;
}

.download-bar {
  position: absolute;
  left: 66px;
  right: 12px;
  bottom: 10px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
}

.download-bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--amber), var(--green));
  transition: width 520ms var(--ease-standard);
}

.pdf-app {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.pdf-toolbar {
  height: 46px;
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(0, 1.2fr) auto;
  gap: 12px;
  align-items: center;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
}

.pdf-toolbar span,
.pdf-toolbar em {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
}

.pdf-toolbar em {
  color: var(--amber);
  font-family: var(--font-family-mono);
  font-size: 11px;
}

.pdf-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}

.invoice-sheet {
  position: relative;
  width: min(440px, 72%);
  aspect-ratio: 0.76;
  padding: 28px;
  border-radius: 8px;
  background: #f4f2f6;
  color: #404041;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
  overflow: hidden;
}

.invoice-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}

.invoice-head span {
  color: #643974;
  font-family: var(--font-family-display);
  font-size: 14px;
  font-weight: 700;
}

.invoice-head b {
  color: #643974;
  font-family: var(--font-family-display);
  font-size: 24px;
}

.invoice-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.pdf-field {
  position: relative;
  border-radius: 7px;
  transition: background 140ms var(--ease-standard), box-shadow 140ms var(--ease-standard), outline-color 140ms var(--ease-standard);
}

.invoice-meta .pdf-field {
  min-height: 54px;
  padding: 9px 10px;
  background: #e5e2e8;
}

.pdf-field span {
  color: #7a7a7f;
  font-family: var(--font-family-mono);
  font-size: 9.5px;
  font-weight: 600;
}

.pdf-field b {
  display: block;
  margin-top: 4px;
  color: #404041;
  font-family: var(--font-family-display);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.15;
}

.invoice-table {
  display: grid;
  gap: 7px;
  margin-top: 18px;
}

.table-row {
  display: grid;
  grid-template-columns: 1.4fr 0.42fr 0.72fr;
  gap: 8px;
  align-items: center;
  min-height: 30px;
  padding: 6px 8px;
  border-radius: 6px;
  background: #e5e2e8;
  color: #404041;
  font-family: var(--font-family-mono);
  font-size: 10px;
}

.table-head {
  background: #d3b6e3;
  color: #331e3c;
  font-weight: 700;
}

.table-total {
  background: #b890cf;
  color: #1d1022;
  font-weight: 800;
}

.pdf-field.active {
  outline: 2px solid var(--amber);
  background: rgba(245, 166, 35, 0.2);
  box-shadow: 0 0 22px rgba(245, 166, 35, 0.26);
}

.extract-card {
  position: absolute;
  right: 28px;
  bottom: 28px;
  width: min(260px, calc(100% - 56px));
  padding: 13px;
  border: 1px solid rgba(108, 233, 166, 0.28);
  border-radius: 8px;
  background: rgba(19, 11, 25, 0.9);
  opacity: 0;
  transform: translateY(12px);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.34);
}

.demo-shell[data-step="extract"] .extract-card {
  opacity: 1;
  transform: none;
  transition: opacity 240ms var(--ease-standard), transform 240ms var(--ease-standard);
}

.extract-card > span {
  display: block;
  margin-bottom: 10px;
  color: var(--green);
  font-family: var(--font-family-mono);
  font-size: 11px;
  font-weight: 650;
}

.extract-card div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.extract-card b,
.extract-card em {
  font-family: var(--font-family-mono);
  font-size: 12px;
  font-style: normal;
}

.extract-card b {
  color: var(--muted);
  font-weight: 500;
}

.extract-card em {
  color: var(--ink);
}

.workspace-app,
.erp-app,
.report-app {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.workspace-top,
.erp-top {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
}

.workspace-top b,
.erp-top b {
  color: var(--ink);
  font-family: var(--font-family-display);
  font-size: 15px;
  font-weight: 700;
}

.workspace-top span,
.erp-top span {
  min-width: 0;
  color: var(--muted);
  font-family: var(--font-family-mono);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.company-picker {
  position: relative;
  z-index: 12;
}

.company-trigger {
  min-height: 32px;
  padding: 7px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--body);
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--font-family-display);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}

.company-trigger.active,
.company-trigger.selected {
  border-color: rgba(245, 166, 35, 0.58);
  color: var(--ink);
  background: rgba(245, 166, 35, 0.08);
  box-shadow: 0 0 26px rgba(245, 166, 35, 0.16);
}

.company-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 230px;
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: rgba(19, 11, 25, 0.96);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.36);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 180ms var(--ease-standard), transform 180ms var(--ease-standard);
}

.company-menu.open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.company-menu button {
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--body);
  background: transparent;
  text-align: left;
  font-family: var(--font-family-display);
  font-size: 13px;
}

.company-menu button.active,
.company-menu button:hover {
  border-color: rgba(108, 233, 166, 0.32);
  color: var(--ink);
  background: rgba(108, 233, 166, 0.07);
}

.demo-shell[data-step="erp-login"] .company-picker {
  opacity: 0;
  pointer-events: none;
}

.validation-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 0.9fr 1fr 1fr;
  gap: 14px;
  padding: 18px;
  align-items: stretch;
}

.data-panel,
.status-card,
.output-log,
.csv-card,
.share-mail-card,
.archive-card,
.drive-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.data-panel {
  padding: 14px;
}

.data-panel > span,
.status-card > span,
.output-log > span,
.csv-card > span,
.share-mail-card > span,
.archive-card > span,
.drive-card > span {
  display: block;
  margin-bottom: 12px;
  color: var(--brand);
  font-family: var(--font-family-mono);
  font-size: 11px;
  font-weight: 700;
}

.data-row {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.data-row b,
.data-row em {
  font-family: var(--font-family-mono);
  font-size: 12px;
  font-style: normal;
}

.data-row b {
  color: var(--muted);
  font-weight: 500;
}

.data-row em {
  color: var(--ink);
  text-align: right;
}

.query-chip,
.ready-badge {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--body);
  background: rgba(255, 255, 255, 0.035);
  font-family: var(--font-family-mono);
  font-size: 12px;
  text-align: center;
}

.validation-item {
  opacity: 0.42;
  transition: opacity 160ms var(--ease-standard), border-color 160ms var(--ease-standard), background 160ms var(--ease-standard), box-shadow 160ms var(--ease-standard);
}

.validation-item.active {
  opacity: 1;
  border-color: rgba(245, 166, 35, 0.58);
  background: rgba(245, 166, 35, 0.08);
  box-shadow: 0 0 24px rgba(245, 166, 35, 0.12);
}

.validation-item.complete,
.ready-badge.complete {
  opacity: 1;
  border-color: rgba(108, 233, 166, 0.38);
  background: rgba(108, 233, 166, 0.07);
  color: var(--green);
}

.erp-app {
  overflow: hidden;
}

.erp-login-card {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: min(420px, calc(100% - 48px));
  padding: 24px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.36);
  opacity: 0;
  transform: translate(-50%, -46%) scale(0.98);
  pointer-events: none;
  transition: opacity 220ms var(--ease-standard), transform 220ms var(--ease-standard);
}

.demo-shell[data-step="erp-login"] .erp-login-card {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

.erp-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(245, 166, 35, 0.3);
  color: #201304;
  background: var(--amber);
  font-family: var(--font-family-display);
  font-weight: 800;
}

.erp-shell {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 220ms var(--ease-standard), transform 220ms var(--ease-standard);
}

.demo-shell[data-step="select-company"] .erp-shell,
.demo-shell[data-step="new-invoice"] .erp-shell,
.demo-shell[data-step="header-entry"] .erp-shell,
.demo-shell[data-step="line-entry"] .erp-shell,
.demo-shell[data-step="post-invoice"] .erp-shell {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.erp-side {
  padding: 18px 12px;
  border-right: 1px solid var(--line);
  background: rgba(29, 16, 34, 0.62);
}

.erp-side > b {
  display: block;
  margin-bottom: 16px;
  color: var(--ink);
  font-family: var(--font-family-display);
  font-size: 14px;
}

.erp-content {
  min-width: 0;
  padding: 16px;
}

.erp-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.ghost-action,
.primary-action.compact {
  width: auto;
  min-height: 38px;
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.ghost-action {
  border: 1px solid var(--line-strong);
  color: var(--body);
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--font-family-display);
  font-weight: 650;
}

.ghost-action.active,
.primary-action.compact.active,
.post-button.active {
  border-color: rgba(245, 166, 35, 0.58);
  box-shadow: 0 0 26px rgba(245, 166, 35, 0.16);
}

.invoice-form {
  min-height: 342px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  opacity: 0;
  transform: translateY(12px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms var(--ease-standard), transform 220ms var(--ease-standard), visibility 220ms var(--ease-standard), border-color 180ms var(--ease-standard), box-shadow 180ms var(--ease-standard);
}

.invoice-form.open {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
}

.form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.form-head b {
  color: var(--ink);
  font-family: var(--font-family-display);
  font-size: 18px;
}

.form-head span {
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.06);
  font-family: var(--font-family-mono);
  font-size: 11px;
}

.form-head span.posted {
  color: var(--green);
  background: rgba(108, 233, 166, 0.08);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.erp-field {
  min-height: 50px;
  display: block;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.erp-field span {
  display: block;
  color: var(--muted);
  font-family: var(--font-family-mono);
  font-size: 10px;
  margin-bottom: 6px;
}

.erp-field b {
  display: block;
  min-height: 20px;
  color: var(--ink);
  font-family: var(--font-family-display);
  font-size: 14px;
}

.erp-field.filled,
.erp-line.visible {
  border-color: rgba(108, 233, 166, 0.32);
  background: rgba(108, 233, 166, 0.055);
}

.erp-field.active,
.erp-line.active {
  border-color: rgba(245, 166, 35, 0.54);
  background: rgba(245, 166, 35, 0.08);
  box-shadow: 0 0 24px rgba(245, 166, 35, 0.12);
}

.line-table {
  display: grid;
  gap: 5px;
  margin: 6px 0 8px;
}

.line-row {
  display: grid;
  grid-template-columns: 0.9fr 1.25fr 0.8fr 0.6fr;
  gap: 8px;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--body);
  background: rgba(255, 255, 255, 0.035);
  font-family: var(--font-family-mono);
  font-size: 11px;
}

.line-head {
  color: var(--brand);
  background: rgba(184, 144, 207, 0.1);
  font-weight: 700;
}

.erp-line {
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 160ms var(--ease-standard), transform 160ms var(--ease-standard), border-color 160ms var(--ease-standard), background 160ms var(--ease-standard);
}

.erp-line.visible {
  opacity: 1;
  transform: none;
}

.post-button {
  min-height: 40px;
  margin-top: 2px;
  padding: 9px 18px;
  border: 1px solid rgba(184, 144, 207, 0.38);
  border-radius: 999px;
  color: var(--ink);
  background: linear-gradient(135deg, #9264a2, #643974);
  font-family: var(--font-family-display);
  font-weight: 700;
}

.invoice-form.posted {
  border-color: rgba(108, 233, 166, 0.32);
  box-shadow: 0 0 34px rgba(108, 233, 166, 0.08);
}

.report-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 18px;
}

.report-item {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 220ms var(--ease-standard), transform 220ms var(--ease-standard), border-color 180ms var(--ease-standard), background 180ms var(--ease-standard);
}

.report-item.visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.report-item.active {
  border-color: rgba(245, 166, 35, 0.5);
  background: rgba(245, 166, 35, 0.07);
}

.post-dialog,
.confirm-dialog,
.export-loading,
.export-success-dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(430px, calc(100% - 48px));
  padding: 22px;
  border: 1px solid rgba(184, 144, 207, 0.34);
  border-radius: 8px;
  background: rgba(19, 11, 25, 0.94);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.42);
  text-align: center;
  transform: translate(-50%, -44%) scale(0.96);
}

.post-dialog.visible,
.confirm-dialog.visible,
.export-loading.visible,
.export-success-dialog.visible {
  transform: translate(-50%, -50%) scale(1);
}

.post-dialog > span {
  display: block;
  margin-bottom: 10px;
  color: var(--brand);
  font-family: var(--font-family-mono);
  font-size: 11px;
  font-weight: 700;
}

.post-dialog > b,
.confirm-dialog > b,
.export-loading > b,
.export-success-dialog > b {
  display: block;
  color: var(--ink);
  font-family: var(--font-family-display);
  font-size: 24px;
  line-height: 1.12;
}

.post-dialog > em {
  display: block;
  margin-top: 9px;
  color: var(--green);
  font-family: var(--font-family-mono);
  font-size: 12px;
  font-style: normal;
}

.post-dialog .export-button {
  margin-top: 18px;
}

.confirm-dialog div {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.confirm-dialog button {
  min-height: 34px;
  padding: 8px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--body);
  background: rgba(255, 255, 255, 0.055);
  font-family: var(--font-family-display);
  font-weight: 700;
}

.confirm-dialog button:last-child {
  color: #201304;
  background: var(--amber);
  border-color: rgba(245, 166, 35, 0.7);
}

.confirm-dialog button.active {
  box-shadow: 0 0 22px rgba(245, 166, 35, 0.28);
  transform: scale(0.98);
}

.export-loading {
  display: grid;
  justify-items: center;
  gap: 12px;
}

.export-loading i {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(184, 144, 207, 0.24);
  border-top-color: var(--amber);
  animation: spin 720ms linear infinite;
}

.export-success-dialog {
  border-color: rgba(108, 233, 166, 0.34);
}

.export-success-dialog b {
  color: var(--green);
}

.status-card,
.output-log,
.csv-card,
.share-mail-card,
.archive-card,
.drive-card {
  padding: 14px;
}

.status-card b {
  display: block;
  color: var(--green);
  font-family: var(--font-family-display);
  font-size: 22px;
  line-height: 1.1;
}

.status-card em {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-family: var(--font-family-mono);
  font-size: 12px;
  font-style: normal;
}

.output-log {
  grid-column: span 2;
}

.log-row,
.archive-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
  min-height: 34px;
  padding: 7px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--body);
  font-family: var(--font-family-mono);
  font-size: 12px;
}

.log-row b {
  color: var(--muted);
  font-weight: 500;
}

.log-row.complete span:nth-child(2),
.archive-row em {
  color: var(--green);
}

.csv-card {
  grid-column: span 2;
  position: relative;
  min-height: 214px;
}

.archive-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.archive-row b {
  color: var(--ink);
  font-family: var(--font-family-display);
  font-size: 14px;
}

.export-button,
.send-button,
.archive-button {
  min-height: 38px;
  padding: 9px 14px;
  border: 1px solid rgba(184, 144, 207, 0.38);
  border-radius: 999px;
  color: var(--ink);
  background: linear-gradient(135deg, #9264a2, #643974);
  font-family: var(--font-family-display);
  font-size: 13px;
  font-weight: 700;
}

.export-button.active,
.send-button.active,
.archive-button.active {
  border-color: rgba(245, 166, 35, 0.58);
  box-shadow: 0 0 26px rgba(245, 166, 35, 0.16);
}

.export-dialog {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(184, 144, 207, 0.34);
  border-radius: 8px;
  background: rgba(13, 8, 18, 0.74);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 180ms var(--ease-standard), transform 180ms var(--ease-standard);
}

.export-dialog.open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.export-dialog b {
  display: block;
  margin-bottom: 10px;
  color: var(--ink);
  font-family: var(--font-family-display);
  font-size: 15px;
}

.export-dialog div {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.export-dialog button {
  min-height: 30px;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--body);
  background: rgba(255, 255, 255, 0.05);
}

.export-dialog button:last-child {
  color: #201304;
  background: var(--amber);
  border-color: rgba(245, 166, 35, 0.7);
}

.export-dialog button.active {
  box-shadow: 0 0 22px rgba(245, 166, 35, 0.28);
  transform: scale(0.98);
}

.export-success,
.sent-message {
  margin: 10px 0 0;
  color: var(--green);
  font-family: var(--font-family-mono);
  font-size: 12px;
  opacity: 0;
}

.export-success.visible,
.sent-message.visible {
  opacity: 1;
}

.export-success {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
}

.compose-card {
  display: grid;
  gap: 8px;
}

.compose-card div:not(.attach-chip) {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 10px;
  min-height: 32px;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-family-mono);
  font-size: 12px;
}

.compose-card b {
  color: var(--muted);
  font-weight: 500;
}

.compose-card em {
  min-width: 0;
  color: var(--ink);
  font-style: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attach-chip {
  display: inline-flex;
  width: fit-content;
  padding: 7px 10px;
  border: 1px solid rgba(108, 233, 166, 0.26);
  border-radius: 999px;
  color: var(--green);
  background: rgba(108, 233, 166, 0.07);
  font-family: var(--font-family-mono);
  font-size: 11px;
}

.archive-card.archived .archive-row em {
  color: var(--green);
}

.sync-window {
  min-height: 108px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  text-align: center;
}

.sync-window i {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid rgba(184, 144, 207, 0.24);
  border-top-color: var(--amber);
  animation: spin 720ms linear infinite;
}

.sync-window.complete i {
  border-color: rgba(108, 233, 166, 0.3);
  animation: none;
}

.sync-window b {
  color: var(--ink);
  font-family: var(--font-family-display);
  font-size: 15px;
}

.sync-window.complete b {
  color: var(--green);
}

.completion-checklist {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: min(520px, calc(100% - 56px));
  padding: 20px;
  border: 1px solid rgba(108, 233, 166, 0.3);
  border-radius: 8px;
  background: rgba(19, 11, 25, 0.94);
  transform: translate(-50%, -44%) scale(0.96);
}

.completion-checklist.visible {
  transform: translate(-50%, -50%) scale(1);
}

.demo-shell[data-step="complete"] .report-item.visible:not([data-report="complete"]) {
  opacity: 0.34;
  filter: blur(1px);
}

.completion-checklist > b {
  display: block;
  margin-bottom: 12px;
  color: var(--ink);
  font-family: var(--font-family-display);
  font-size: 22px;
}

.completion-checklist ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

.check-item {
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 13px;
  opacity: 0.42;
}

.check-item::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
}

.check-item.checked {
  color: var(--body);
  opacity: 1;
}

.check-item.checked::before {
  border-color: rgba(108, 233, 166, 0.6);
  background: var(--green);
  box-shadow: 0 0 14px rgba(108, 233, 166, 0.28);
}

.check-item.final {
  margin-top: 4px;
  color: var(--ink);
  font-family: var(--font-family-display);
  font-size: 15px;
  font-weight: 750;
}


/* ============================================================================
   SHARED TREATMENTS (parity with logistics-idw-demo): single-column workspace,
   all-steps green-glow grid indicator, compact tier, embed/bare modes.
   Appended last so they override the finance base scene styles.
   ============================================================================ */

/* Screen full width; step grid below. */
.mock-workspace {
  grid-template-columns: 1fr;
  gap: 12px;
}

.screen-canvas {
  min-height: 620px;
}

/* Step indicator: ALL steps in a grid beneath the screen. Dim while pending,
   amber while in progress, green + glowing once done. */
.action-panel {
  min-width: 0;
  min-height: 0;
  max-height: none;
  padding: 12px 2px 0;
  display: block;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.action-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px 22px;
}

/* Also match the .revealed/.active/.done states so the finance base rules
   (which use display:grid + an amber box) can't override the flat dot+label. */
.action-list li,
.action-list li.revealed,
.action-list li.active,
.action-list li.done {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  transform: none;
}

/* nudge the dot to sit on the first text line */
.action-list li::before {
  margin-top: 4px;
}

.action-list li::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  transition: background 240ms var(--ease-standard), box-shadow 240ms var(--ease-standard);
}

.action-list b {
  display: block;
  font-family: var(--font-family-display);
  font-size: 13px;
  line-height: 1.3;
  color: var(--faint);
  transition: color 240ms var(--ease-standard), text-shadow 240ms var(--ease-standard);
}

.action-list li.active::before {
  background: var(--amber);
  box-shadow: 0 0 10px rgba(245, 166, 35, 0.7);
}

.action-list li.active b { color: var(--ink); }

.action-list li.done::before {
  background: var(--green);
  box-shadow: 0 0 11px rgba(108, 233, 166, 0.8);
}

.action-list li.done b {
  color: var(--ink);
  text-shadow: 0 0 12px rgba(108, 233, 166, 0.3);
}

/* Calendar-style day circles (if any) stay square. */
.calendar-grid em,
.calendar-grid span {
  aspect-ratio: 1;
  min-height: 0;
}

/* ===== Compact tier ===== */
@media (max-width: 760px) {
  .action-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 16px;
  }

  /* Fold app nav rails for full-width content. */
  .mail-side,
  .erp-side {
    display: none;
  }

  .mail-app {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.45fr);
  }

  /* ERP: drop the reserved nav-rail track so the invoice form uses full width. */
  .erp-shell {
    grid-template-columns: 1fr;
  }

  /* Validation: stack label-on-top / value-below. */
  .data-row {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 3px;
    min-height: 0;
    padding: 9px 11px;
  }

  .data-row b,
  .data-row em {
    text-align: left;
  }

  /* Inbox scan: hide the floating highlight bar on narrow screens. */
  .scan-highlight {
    display: none;
  }
}

/* ===== Embed mode (?embed=1) + bare mode (?bare=1) ===== */
html[data-embed],
html[data-embed] body {
  min-height: 0;
  background: transparent;
}

html[data-embed] body { overflow: hidden; }

.demo-shell[data-embed] {
  width: 100%;
  min-height: 0;
  padding: 0;
  margin: 0;
}

.demo-shell[data-embed] .demo-header { display: none; }
.demo-shell[data-embed] .recording-window { padding: 10px; }

.demo-shell[data-bare] .recording-card {
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.demo-shell[data-bare] .recording-window { padding: 0; }

/* ============================================================================
   LIGHT MODE  (prototype). Activated when <html data-theme="light"> · set by
   the engine from ?theme=light or a host postMessage. The demo is ~85% token
   driven, so most of light mode is a token flip; the rest re-skins the dark
   surfaces that were hardcoded white-on-dark.
   ============================================================================ */
[data-theme="light"] {
  --page-bg: #f4f1f9;
  --ink: #1d1022;
  --body: rgba(29, 16, 34, 0.84);
  --muted: rgba(29, 16, 34, 0.58);
  --faint: rgba(29, 16, 34, 0.42);
  --line: rgba(29, 16, 34, 0.12);
  --line-strong: rgba(29, 16, 34, 0.20);
  --panel: rgba(29, 16, 34, 0.035);
  --brand: #7e4e90;
  --brand-deep: #643974;
  --brand-soft: rgba(146, 100, 162, 0.12);
  --amber: #c77f12;
  --green: #16a34a;
  --blue: #2563eb;
  --shadow: 0 20px 50px rgba(29, 16, 34, 0.14);
}

/* Page + canvas backgrounds (grid lines flip from white to dark). */
[data-theme="light"] body {
  background:
    linear-gradient(rgba(29, 16, 34, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29, 16, 34, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 12% 10%, rgba(146, 100, 162, 0.12), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(245, 166, 35, 0.07), transparent 30%),
    var(--page-bg);
  background-size: 48px 48px, 48px 48px, auto, auto, auto;
}
[data-theme="light"] .screen-canvas {
  background:
    linear-gradient(rgba(29, 16, 34, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29, 16, 34, 0.03) 1px, transparent 1px),
    #fbf9fd;
  background-size: 32px 32px;
}
[data-theme="light"] .recording-card { background: linear-gradient(180deg, #ffffff, #faf8fc); }
[data-theme="light"] .browser-chrome { background: rgba(29, 16, 34, 0.035); }
[data-theme="light"] .address-pill { background: rgba(29, 16, 34, 0.05); }
[data-theme="light"] .action-panel { background: rgba(255, 255, 255, 0.7); }

/* Re-skin the white-veil scene surfaces as light panels (cards, panes, rows,
   tables, fields, modals). Keep them defined by their (now-dark) borders. */
[data-theme="light"] .login-card,
[data-theme="light"] .mail-app,
[data-theme="light"] .mail-side,
[data-theme="light"] .mail-list,
[data-theme="light"] .mail-reader,
[data-theme="light"] .reader-message,
[data-theme="light"] .attachment-card,
[data-theme="light"] .compose-window,
[data-theme="light"] .data-panel,
[data-theme="light"] .data-row,
[data-theme="light"] .query-chip,
[data-theme="light"] .ready-badge,
[data-theme="light"] .erp-app,
[data-theme="light"] .erp-side,
[data-theme="light"] .erp-content,
[data-theme="light"] .erp-toolbar,
[data-theme="light"] .invoice-form,
[data-theme="light"] .erp-field,
[data-theme="light"] .erp-line,
[data-theme="light"] .company-menu,
[data-theme="light"] .report-app,
[data-theme="light"] .post-dialog,
[data-theme="light"] .record-dialog,
[data-theme="light"] .completion-checklist,
[data-theme="light"] .mock-app,
[data-theme="light"] .pdf-app,
[data-theme="light"] .invoice-sheet,
[data-theme="light"] .extract-card,
[data-theme="light"] .excel-window {
  background: #ffffff;
}
[data-theme="light"] .mail-row.active,
[data-theme="light"] .side-item.active { background: rgba(146, 100, 162, 0.10); }
[data-theme="light"] .excel-grid .excel-cell,
[data-theme="light"] .erp-line { background: rgba(29, 16, 34, 0.015); }
[data-theme="light"] .primary-action,
[data-theme="light"] .compose-send-button,
[data-theme="light"] .new-mail-button { color: #ffffff; }
/* ===== Match the home page light theme (neutral grays, not lavender) ===== */
[data-theme="light"] {
  --page-bg: #f7f7f8;
  --ink: #2a2730; --body: rgba(42,39,48,0.86); --muted: rgba(42,39,48,0.58); --faint: rgba(42,39,48,0.42);
  --line: rgba(20,18,24,0.11); --line-strong: rgba(20,18,24,0.17); --panel: rgba(20,18,24,0.03);
  --shadow: 0 18px 44px rgba(40,40,42,0.12);
}
[data-theme="light"] body {
  background:
    linear-gradient(rgba(20,18,24,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,18,24,0.028) 1px, transparent 1px),
    radial-gradient(circle at 12% 10%, rgba(146,100,162,0.10), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(245,166,35,0.05), transparent 30%),
    var(--page-bg);
  background-size: 48px 48px, 48px 48px, auto, auto, auto;
}
[data-theme="light"] .screen-canvas {
  background:
    linear-gradient(rgba(20,18,24,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,18,24,0.025) 1px, transparent 1px),
    #f7f7f8;
  background-size: 32px 32px;
}
[data-theme="light"] .recording-card { background: linear-gradient(180deg, #ffffff, #fbfbfc); }
[data-theme="light"] .browser-chrome { background: rgba(20,18,24,0.03); }
[data-theme="light"] .address-pill { background: rgba(20,18,24,0.045); }

/* ===== Light-mode polish: icon circles, buttons, dark surfaces ===== */
[data-theme="light"] .email-icon,
[data-theme="light"] .erp-icon,
[data-theme="light"] .reader-head i,
[data-theme="light"] .side-item i {
  background: linear-gradient(135deg, #9264a2, #643974);
  color: #ffffff;
}
[data-theme="light"] .email-icon svg { color: #ffffff; stroke: #ffffff; }
[data-theme="light"] .post-button,
[data-theme="light"] .export-button { color: #ffffff !important; }
[data-theme="light"] .extract-card > span { color: var(--brand); }
[data-theme="light"] .extract-card b,
[data-theme="light"] .extract-card em { color: var(--ink); }
[data-theme="light"] .login-loading { background: rgba(247,247,248,0.92); border-color: var(--line); }
[data-theme="light"] .login-loading b { color: var(--ink); }
/* ============================================================================
   POINTERS ON THE RIGHT (sidebar) · overrides the below-grid step treatment.
   Sized toward the homepage 1440x554 landscape slot. Appended last => wins.
   ============================================================================ */
.mock-workspace { grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: stretch; }
.screen-canvas { min-height: 560px; }
.action-panel {
  min-width: 0; min-height: 100%; max-height: 560px;
  display: flex; flex-direction: column;
  padding: 14px; border: 1px solid var(--line); border-radius: 8px;
  background: rgba(13, 8, 18, 0.72); box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
  overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(184,144,207,0.34) transparent;
}
.action-panel::before {
  content: "IDW actions"; display: block; margin-bottom: 12px;
  color: var(--brand); font-family: var(--font-family-mono);
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.action-list { display: grid; grid-template-columns: 1fr; gap: 11px; }
@media (max-width: 760px) {
  .mock-workspace { grid-template-columns: 1fr; }
  .action-panel { max-height: none; }
  .action-panel::before { display: none; }
  .action-list { grid-template-columns: 1fr 1fr; gap: 9px 16px; }
}
[data-theme="light"] .action-panel { background: rgba(255,255,255,0.7); }


/* ============================================================================
   REAL ESTATE / PROPERTY-OPERATOR ACCOUNTS PAYABLE additions.
   Built on the shared base (login · inbox · pdf · validation · erp · report).
   New: AP folder nav + auto-sort, the shared Invoice Register (post writes /
   query reads), the duplicate-catch HERO, payment-inquiry handling, and the
   phased right-hand step list. Appended last so it wins.
   ============================================================================ */

/* ---- Wordmark in the header (no logo asset) -------------------------------- */
.brand .wordmark {
  color: var(--ink);
  font-family: var(--font-family-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* ---- Phased right-hand step list ------------------------------------------- */
.action-list li.phase { margin-top: 10px; padding: 12px 0 2px; border-top: 1px solid var(--line); }
.action-list li.phase:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.action-list li.phase::before { display: none; }
.action-list li.phase b {
  color: var(--brand); font-family: var(--font-family-mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
}

/* ---- AP inbox: folder nav rail (taller, more rows) ------------------------- */
.ap-mail { grid-template-columns: 190px minmax(220px, 0.78fr) minmax(300px, 1.2fr); }
.mail-side .side-item.folder { justify-content: space-between; }
.mail-side .side-item .fc {
  min-width: 20px; height: 18px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 6px; border-radius: 999px; background: rgba(255,255,255,0.08);
  color: var(--muted); font-family: var(--font-family-mono); font-size: 10px; font-style: normal; font-weight: 700;
  transition: background 200ms var(--ease-standard), color 200ms var(--ease-standard);
}
.mail-side .side-item.routed .fc { background: rgba(108,233,166,0.16); color: var(--green); }
/* active folder lights up while sorting */
.mail-side .side-item.flash {
  color: var(--ink); background: rgba(245,166,35,0.12);
  box-shadow: inset 0 0 0 1px rgba(245,166,35,0.4);
}

/* ---- Auto-sort: rows fade/settle as they route ----------------------------- */
.ap-row { transition: opacity 220ms var(--ease-standard), border-color 200ms var(--ease-standard), background 200ms var(--ease-standard), transform 220ms var(--ease-standard); }
.ap-row.routing { border-color: rgba(245,166,35,0.4); background: rgba(245,166,35,0.06); }
.ap-row.sorted { opacity: 0.32; }
.ap-row.sorted::after {
  content: "Filed"; position: absolute; right: 9px; bottom: 8px;
  color: var(--green); font-family: var(--font-family-mono); font-size: 10px;
}
.ap-row.inquiry-row i { background: linear-gradient(135deg, rgba(132,201,255,0.84), rgba(146,100,162,0.9)); color: #06121f; }
/* the inquiry is held back from auto-sort; it simply stays in the list (its
   unread/bold treatment is governed by the read/unread block appended last). */
.ap-row.inquiry-row.kept { opacity: 1; }

/* scan highlight rows (AP inbox rows are ~76px tall) */
.demo-shell[data-step="scan-sort"] .scan-highlight { opacity: 1; }
.demo-shell[data-scan="r1"] .scan-highlight { top: 58px; }
.demo-shell[data-scan="r2"] .scan-highlight { top: 134px; }
.demo-shell[data-scan="r3"] .scan-highlight { top: 210px; }
.demo-shell[data-scan="r4"] .scan-highlight { top: 286px; border-color: rgba(132,201,255,0.54); box-shadow: 0 0 28px rgba(132,201,255,0.16); }

/* ---- Reader: two message bodies (invoice / inquiry) keyed by step ---------- */
.mail-reader .reader-message { opacity: 0; transform: translateY(8px); pointer-events: none; }
.reader-placeholder { transition: opacity 200ms var(--ease-standard); }
.demo-shell[data-step="read-invoice"] #invoiceReader,
.demo-shell[data-step="download"]     #invoiceReader { opacity: 1; transform: none; pointer-events: auto; }
.demo-shell[data-step="open-inquiry"] #inquiryReader,
.demo-shell[data-step="lookup"]       #inquiryReader,
.demo-shell[data-step="reply"]        #inquiryReader,
.demo-shell[data-step="file"]         #inquiryReader { opacity: 1; transform: none; pointer-events: auto; }
.demo-shell[data-step="read-invoice"] #readerPlaceholder,
.demo-shell[data-step="download"]     #readerPlaceholder,
.demo-shell[data-step="open-inquiry"] #readerPlaceholder,
.demo-shell[data-step="lookup"]       #readerPlaceholder,
.demo-shell[data-step="reply"]        #readerPlaceholder,
.demo-shell[data-step="file"]         #readerPlaceholder,
.demo-shell[data-step="notify-admin"] #readerPlaceholder { opacity: 0; }

/* highlight the active source row in the list */
.demo-shell[data-step="read-invoice"] [data-mail="inv1"],
.demo-shell[data-step="download"]     [data-mail="inv1"] { border-color: rgba(245,166,35,0.4); background: rgba(245,166,35,0.06); }
.demo-shell[data-step="open-inquiry"] [data-mail="inq"],
.demo-shell[data-step="lookup"]       [data-mail="inq"],
.demo-shell[data-step="reply"]        [data-mail="inq"] { border-color: rgba(132,201,255,0.45); background: rgba(132,201,255,0.07); }

.inquiry-body { color: var(--body); font-size: 15px; line-height: 1.55; }
.inquiry-body b { color: var(--ink); }
.lookup-chip {
  display: flex; align-items: center; gap: 10px; margin-top: 16px;
  padding: 11px 13px; border: 1px solid rgba(132,201,255,0.34); border-radius: 8px;
  background: rgba(132,201,255,0.07);
}
.lookup-chip b { color: var(--ink); font-family: var(--font-family-mono); font-size: 12px; font-weight: 500; }
.lookup-chip.found { border-color: rgba(108,233,166,0.4); background: rgba(108,233,166,0.08); }
.lookup-chip.found b { color: var(--green); }
.lc-spin {
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  border: 2px solid rgba(132,201,255,0.3); border-top-color: var(--blue);
  animation: spin 720ms linear infinite;
}
.lookup-chip.found .lc-spin { border: 2px solid rgba(108,233,166,0.4); border-top-color: var(--green); animation: none; }

/* "File" button on the inquiry reader */
#inquiryFileButton { opacity: 0; transform: translateY(-3px); pointer-events: none; }
.demo-shell[data-step="file"] #inquiryFileButton { opacity: 1; transform: none; pointer-events: auto; }
.demo-shell[data-step="archive-email"] #emailArchiveButton,
.demo-shell[data-step="notify-admin"]  #emailArchiveButton { opacity: 1; transform: none; pointer-events: auto; }

/* ---- New-email button visible during both composes -------------------------- */
.demo-shell[data-step="notify-admin"] .new-mail-button,
.demo-shell[data-step="reply"]        .new-mail-button {
  opacity: 1; transform: none; pointer-events: auto; box-shadow: 0 10px 28px rgba(146,100,162,0.22);
}
.demo-shell[data-step="notify-admin"] .mail-toolbar span,
.demo-shell[data-step="reply"]        .mail-toolbar span { opacity: 0; }

/* ---- Coding workspace: extra validation tint for property code ------------- */
.validation-item[data-validation="property"].complete,
.validation-item[data-validation="building"].complete {
  border-color: rgba(132,201,255,0.4); background: rgba(132,201,255,0.08); color: var(--blue);
}

/* ============================================================================
   PROPERTY MANAGEMENT SYSTEM (erp shell) · register / enter state machine.
   ============================================================================ */

/* (UI) ERP status bar · base layout (record/portfolio/user/status cues). */
.erp-statusbar {
  display: none; align-items: center; gap: 20px;
  min-height: 30px; padding: 0 16px;
  border-top: 1px solid var(--line); background: rgba(255, 255, 255, 0.03);
  color: var(--muted); font-family: var(--font-family-mono); font-size: 10.5px;
}
.erp-statusbar .sb-status { margin-left: auto; color: var(--green); }

/* Keep ERP shell + statusbar visible across the whole posting + query phase. */
.demo-shell[data-step="enter-invoice"] .erp-shell,
.demo-shell[data-step="header-entry"]  .erp-shell,
.demo-shell[data-step="line-entry"]    .erp-shell,
.demo-shell[data-step="post"]          .erp-shell,
.demo-shell[data-step="register-write"] .erp-shell,
.demo-shell[data-step="catch-dup"]     .erp-shell,
.demo-shell[data-step="hold"]          .erp-shell,
.demo-shell[data-step="lookup"]        .erp-shell {
  opacity: 1; transform: none; pointer-events: auto;
}
.demo-shell[data-step="enter-invoice"] .erp-statusbar,
.demo-shell[data-step="header-entry"]  .erp-statusbar,
.demo-shell[data-step="line-entry"]    .erp-statusbar,
.demo-shell[data-step="post"]          .erp-statusbar,
.demo-shell[data-step="register-write"] .erp-statusbar,
.demo-shell[data-step="catch-dup"]     .erp-statusbar,
.demo-shell[data-step="hold"]          .erp-statusbar { display: flex; }

/* ERP nav active state by step */
.demo-shell[data-step="enter-invoice"] [data-erp-nav="enter"],
.demo-shell[data-step="header-entry"]  [data-erp-nav="enter"],
.demo-shell[data-step="line-entry"]    [data-erp-nav="enter"],
.demo-shell[data-step="post"]          [data-erp-nav="enter"],
.demo-shell[data-step="register-write"] [data-erp-nav="register"],
.demo-shell[data-step="catch-dup"]     [data-erp-nav="register"],
.demo-shell[data-step="hold"]          [data-erp-nav="register"],
.demo-shell[data-step="lookup"]        [data-erp-nav="register"] {
  color: var(--ink); background: rgba(184, 144, 207, 0.14);
}

/* Swap ERP content: entry form vs invoice register. */
.register-panel { display: none; }
.demo-shell[data-step="register-write"] .register-panel,
.demo-shell[data-step="catch-dup"]      .register-panel,
.demo-shell[data-step="hold"]           .register-panel,
.demo-shell[data-step="lookup"]         .register-panel { display: block; }

.demo-shell[data-step="register-write"] .erp-toolbar,
.demo-shell[data-step="catch-dup"]      .erp-toolbar,
.demo-shell[data-step="hold"]           .erp-toolbar,
.demo-shell[data-step="lookup"]         .erp-toolbar,
.demo-shell[data-step="register-write"] .ap-entry-form,
.demo-shell[data-step="catch-dup"]      .ap-entry-form,
.demo-shell[data-step="hold"]           .ap-entry-form,
.demo-shell[data-step="lookup"]         .ap-entry-form { display: none; }

/* The entry form opens via the scenario (.open). */

/* ---- Invoice Register table ------------------------------------------------ */
.reg-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.reg-head b { color: var(--ink); font-family: var(--font-family-display); font-size: 18px; }
.reg-head span { color: var(--muted); font-family: var(--font-family-mono); font-size: 11px; }
.reg-table { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.reg-row {
  display: grid; grid-template-columns: 0.9fr 1.4fr 1.2fr 0.9fr 0.8fr; align-items: center;
  min-height: 42px; border-bottom: 1px solid var(--line);
  font-family: var(--font-family-mono); font-size: 11.5px; color: var(--body);
  transition: background 220ms var(--ease-standard), border-color 220ms var(--ease-standard);
}
.reg-row:last-child { border-bottom: 0; }
.reg-row > span { padding: 0 12px; border-right: 1px solid var(--line); height: 100%; display: flex; align-items: center; min-width: 0; }
.reg-row > span:last-child { border-right: 0; }
.reg-row.reg-headrow { color: var(--brand-strong, #d3b6e3); background: rgba(184, 144, 207, 0.14); font-weight: 700; }
.reg-status { font-family: var(--font-family-mono); font-size: 10.5px; font-weight: 700; }
.reg-status.paid { color: var(--green); }
.reg-status.posted { color: var(--blue); }
.reg-status.dup { color: #ff8f8f; }

/* the just-posted row appears empty, then fills in when the post writes to it */
.reg-row.reg-new { opacity: 0; transform: translateY(-4px); }
.reg-row.reg-new.written { opacity: 1; transform: none; border-color: rgba(108,233,166,0.3); background: rgba(108,233,166,0.06); }
/* the matched (duplicate-target) row pulses during the catch */
.reg-row.match-flag { border-color: rgba(245,166,35,0.5); background: rgba(245,166,35,0.08); box-shadow: inset 0 0 0 1px rgba(245,166,35,0.32); }
/* row queried by the payment inquiry */
.reg-row.query-flag { border-color: rgba(132,201,255,0.5); background: rgba(132,201,255,0.08); }

.reg-foot {
  margin-top: 12px; color: var(--muted); font-family: var(--font-family-mono);
  font-size: 11px; opacity: 0; transition: opacity 200ms var(--ease-standard);
}
.reg-foot.show { opacity: 1; }
.reg-foot.posted { color: var(--green); }
.reg-foot.dup { color: var(--amber); }

/* ---- Duplicate-catch HERO overlay ------------------------------------------ */
.dup-window {
  position: absolute; left: 50%; top: 50%; z-index: 24;
  width: min(560px, calc(100% - 48px)); padding: 22px;
  border: 1px solid rgba(245, 166, 35, 0.5); border-radius: 8px;
  background: #1a1119; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.72);
  transform: translate(-50%, -44%) scale(0.96);
}
.dup-window.visible { transform: translate(-50%, -50%) scale(1); }
.demo-shell[data-step="catch-dup"] .erp-shell,
.demo-shell[data-step="hold"]      .erp-shell { filter: blur(1.5px); opacity: 0.6; }
.dup-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.dup-head b { color: var(--amber); font-family: var(--font-family-display); font-size: 20px; }
.dup-status { color: var(--muted); font-family: var(--font-family-mono); font-size: 11px; }
.dup-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dup-col {
  padding: 13px; border: 1px solid var(--line); border-radius: 8px;
  background: rgba(255,255,255,0.04);
}
.dup-col.incoming { border-color: rgba(245,166,35,0.4); background: rgba(245,166,35,0.07); }
.dup-col-label { display: block; margin-bottom: 10px; color: var(--brand); font-family: var(--font-family-mono); font-size: 10.5px; font-weight: 700; }
.dup-col.incoming .dup-col-label { color: var(--amber); }
.dup-field {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 30px; border-top: 1px solid rgba(255,255,255,0.08);
  font-family: var(--font-family-mono); font-size: 12px;
}
.dup-field span { color: var(--muted); }
.dup-field b { color: var(--ink); font-weight: 600; }
.dup-hold {
  margin-top: 14px; padding: 13px; border: 1px solid rgba(255,143,143,0.5);
  border-radius: 8px; color: #ff8f8f; background: rgba(255,143,143,0.1);
  font-family: var(--font-family-mono); font-size: 11.5px; line-height: 1.5;
  opacity: 0; transform: translateY(8px);
  transition: opacity 240ms var(--ease-standard), transform 240ms var(--ease-standard);
}
.demo-shell[data-step="hold"] .dup-hold { opacity: 1; transform: none; }

/* ---- Compose accent: admin vs vendor reply --------------------------------- */
.compose-window .compose-attachment { margin-top: 10px; }
.demo-shell[data-step="reply"] #composeAttachment { display: none; }

/* ---- Email login overlay also active for our email-login step name --------- */
.demo-shell[data-step="email-login"] .completion-checklist { opacity: 0; }

/* ---- Completion: darken inbox behind the checklist ------------------------- */
.demo-shell[data-step="complete"] .mail-app { opacity: 0.14; filter: blur(3px); }

/* ============================================================================
   Compact tier additions (max-width 760) · keep multi-column, fold rails.
   ============================================================================ */
@media (max-width: 760px) {
  .ap-mail { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.5fr); }
  .demo-shell[data-scan] .scan-highlight { display: none; }

  /* register: keep all 5 columns but tighten */
  .reg-row { grid-template-columns: 0.85fr 1.2fr 1fr 0.85fr 0.7fr; font-size: 10px; }
  .reg-row > span { padding: 0 7px; }

  /* duplicate hero: keep the two-column compare side by side */
  .dup-window { width: calc(100% - 28px); padding: 16px; }
  .dup-compare { gap: 9px; }
  .dup-col { padding: 9px; }
  .dup-field { font-size: 10.5px; }

  /* coding workspace stays 3-col per brief; let it scroll horizontally if tight */
  .validation-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; padding: 12px; }
  .data-panel { padding: 10px; }
}

/* ============================================================================
   REVIEW FIXES (applied as overrides; appended last so they win).
   ============================================================================ */

/* ---- (3) Reading-pane ghosting: one email body visible at a time -----------
   Base state hides INSTANTLY (no transition). Only the *shown* reader message
   animates in. This kills the stacked/double-text frame during step switches. */
.mail-reader .reader-message {
  transition: none;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}
/* The invoice reader is shown for read-invoice/download; the inquiry reader is
   shown for read-inquiry/lookup/reply/file. Each animates in on its own. */
.demo-shell[data-step="read-invoice"] #invoiceReader,
.demo-shell[data-step="download"]     #invoiceReader,
.demo-shell[data-step="read-inquiry"] #inquiryReader,
.demo-shell[data-step="open-inquiry"] #inquiryReader,
.demo-shell[data-step="lookup"]       #inquiryReader,
.demo-shell[data-step="lookup-open"]  #inquiryReader,
.demo-shell[data-step="reply"]        #inquiryReader,
.demo-shell[data-step="file"]         #inquiryReader {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity 220ms var(--ease-standard), transform 220ms var(--ease-standard);
}
/* placeholder hidden whenever any reader is up (covers the new read-inquiry) */
.demo-shell[data-step="read-inquiry"] #readerPlaceholder,
.demo-shell[data-step="lookup-open"]  #readerPlaceholder { opacity: 0; }
/* keep the inquiry source row highlighted across the read + reply beats */
.demo-shell[data-step="read-inquiry"] [data-mail="inq"],
.demo-shell[data-step="lookup-open"]  [data-mail="inq"] {
  border-color: rgba(132,201,255,0.45); background: rgba(132,201,255,0.07);
}

/* inquiry body word-by-word highlight (mirrors the invoice .read-word) */
.inquiry-body .read-word-q { display: inline; }
.inquiry-body .read-word-q b { color: var(--ink); }
.inquiry-body .read-word-q.active,
.inquiry-body .read-word-q.active b {
  color: #201304; background: rgba(245, 166, 35, 0.82);
}

/* ---- (6) Duplicate-catch modal: solid backdrop/scrim ----------------------- */
.dup-scrim {
  position: absolute; inset: 0; z-index: 22;
  background: rgba(8, 5, 11, 0.86);
  opacity: 0; pointer-events: none;
  transition: opacity 220ms var(--ease-standard);
}
.demo-shell[data-step="catch-dup"] .dup-scrim,
.demo-shell[data-step="hold"]      .dup-scrim { opacity: 1; pointer-events: auto; }
/* the modal already sits at z-index 24, above the scrim */

/* ---- (8) Register search bar + opened-record detail ------------------------ */
.reg-search {
  display: none; align-items: center; gap: 9px;
  min-height: 38px; margin-bottom: 12px; padding: 8px 12px;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}
.demo-shell[data-step="lookup"] .reg-search,
.demo-shell[data-step="lookup-open"] .reg-search { display: flex; }
.reg-search-icon { color: var(--muted); font-size: 15px; line-height: 1; }
#regSearchField {
  min-width: 0; color: var(--ink);
  font-family: var(--font-family-mono); font-size: 13px; font-weight: 500;
}
#regSearchField.typing::after {
  content: ""; display: inline-block; width: 7px; height: 14px; margin-left: 3px;
  vertical-align: -2px; background: var(--amber);
  animation: blink 700ms steps(1) infinite;
}

.reg-record {
  margin-top: 14px; padding: 14px;
  border: 1px solid rgba(108, 233, 166, 0.4); border-radius: 8px;
  background: rgba(108, 233, 166, 0.06);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity 220ms var(--ease-standard), transform 220ms var(--ease-standard);
}
.demo-shell[data-step="lookup-open"] .reg-record { opacity: 1; transform: none; pointer-events: auto; }
.reg-record-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 12px;
}
.reg-record-head b { color: var(--ink); font-family: var(--font-family-display); font-size: 16px; }
.reg-record-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 14px; }
.rr-field {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 28px; border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-family-mono); font-size: 12px;
}
.rr-field span { color: var(--muted); }
.rr-field b { color: var(--ink); font-weight: 600; }
/* the matched row stays flagged while its record is open */
.demo-shell[data-step="lookup-open"] .reg-row.query-flag {
  border-color: rgba(108,233,166,0.5); background: rgba(108,233,166,0.08);
}

/* keep the ERP shell + register visible through the new lookup-open step */
.demo-shell[data-step="lookup-open"] .erp-shell { opacity: 1; transform: none; pointer-events: auto; }
.demo-shell[data-step="lookup-open"] .register-panel { display: block; }
.demo-shell[data-step="lookup-open"] .erp-toolbar,
.demo-shell[data-step="lookup-open"] .ap-entry-form { display: none; }
.demo-shell[data-step="lookup-open"] [data-erp-nav="register"] {
  color: var(--ink); background: rgba(184, 144, 207, 0.14);
}

/* ---- (9/10) reply composer cleanliness handled in the scenario reset ------- */

/* (11) reply body has real line breaks (Hi. / confirmation / remittance line) */
.compose-body { white-space: pre-line; }

/* ============================================================================
   REVIEW FIX · ITEM 1 · real-inbox read/unread convention.
   ----------------------------------------------------------------------------
   UNREAD rows render in BOLD (sender + subject) with a small dot on the left.
   When the IDW OPENS a row it gets `.read` (added by the scenario) which drops
   the bold weight and hides the dot, exactly like a real mail client.
   The literal "Unread" label and the heavy blue box are gone; a light "selected"
   tint (governed elsewhere by step) is all that remains for the active row.
   Appended last so it wins over the base mail-row styles.
   ============================================================================ */

/* Make room on the left of every AP row for an unread dot. */
.ap-row { padding-left: 22px; }

/* Unread dot: shown by default, removed once the row is `.read`. */
.ap-row::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 8px rgba(245, 166, 35, 0.5);
  opacity: 1;
  transition: opacity 200ms var(--ease-standard);
}
/* the inquiry's dot reads blue to match its accent */
.ap-row.inquiry-row::before { background: var(--blue); box-shadow: 0 0 8px rgba(132, 201, 255, 0.5); }

/* UNREAD = bold sender + bold subject. */
.ap-row b { font-weight: 800; }
.ap-row small { color: var(--body); font-weight: 600; }

/* READ = normal weight, dot gone. (Set by the scenario when the IDW opens it.) */
.ap-row.read::before { opacity: 0; }
.ap-row.read b { font-weight: 500; color: var(--body); }
.ap-row.read small { color: var(--muted); font-weight: 400; }

/* A filed/sorted row is also no longer unread (covers the auto-sorted batch). */
.ap-row.sorted::before { opacity: 0; }
.ap-row.sorted b { font-weight: 500; color: var(--body); }
.ap-row.sorted small { color: var(--muted); font-weight: 400; }

/* ============================================================================
   REVIEW FIX · ITEM 2 · visible sort: rows slide into their folder.
   ----------------------------------------------------------------------------
   During "Scan & sort the AP inbox" a couple of representative rows are picked
   up (`.picking` = lift/select) then animated leftward into the folder rail
   (`.filing` = slide + fade toward the nav) as the folder count ticks. The
   remaining rows settle with the lighter `.sorted` fade. GSAP `to()` drives the
   slide; these classes only carry the static lift/transform-origin styling.
   ============================================================================ */
.ap-row.picking {
  z-index: 4;
  border-color: rgba(245, 166, 35, 0.55);
  background: rgba(245, 166, 35, 0.1);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
  transform: scale(1.015);
}
/* the slide itself is tweened inline by GSAP (x / opacity / scale); this just
   makes sure the row floats above its neighbours while it travels. */
.ap-row.filing { z-index: 5; pointer-events: none; }

/* the destination folder gives a brief "drop" pop as the row lands. */
.mail-side .side-item.drop {
  color: var(--ink);
  background: rgba(108, 233, 166, 0.14);
  box-shadow: inset 0 0 0 1px rgba(108, 233, 166, 0.45);
}

/* ============================================================================
   REWORK · LINE-BY-LINE GL CODING + REAL PRE-POSTING VALIDATION SEQUENCE.
   ----------------------------------------------------------------------------
   LEFT panel : each invoice line is its own card; the IDW steps through them,
                the active line glows amber, then settles green ("Coded").
   MIDDLE     : the code resolved for the line currently being worked
                (category -> GL -> property -> building), each value pops in;
                a "Coded total" rollup appears once all lines are done.
   RIGHT      : a vendor-master lookup state, then a ticking checklist
                (active / coding valid / no duplicate), then the ready badge.
   Styled to match the existing data-panel / data-row / ready-badge patterns.
   Appended last so it wins.
   ============================================================================ */

/* ---- LEFT · invoice line cards -------------------------------------------- */
.code-line {
  margin-bottom: 10px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  transition: border-color 160ms var(--ease-standard), background 160ms var(--ease-standard), box-shadow 160ms var(--ease-standard);
}
.code-line:last-child { margin-bottom: 0; }
.code-line .cl-main {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.code-line .cl-main b {
  color: var(--ink); font-family: var(--font-family-mono);
  font-size: 12px; font-weight: 600;
}
.code-line .cl-main em {
  color: var(--ink); font-family: var(--font-family-mono);
  font-size: 12px; font-style: normal;
}
.code-line .cl-state {
  display: block; margin-top: 5px;
  color: var(--faint); font-family: var(--font-family-mono); font-size: 10px;
  transition: color 160ms var(--ease-standard);
}
/* active = currently being coded (amber) */
.code-line.coding {
  border-color: rgba(245, 166, 35, 0.58);
  background: rgba(245, 166, 35, 0.08);
  box-shadow: 0 0 24px rgba(245, 166, 35, 0.12);
}
.code-line.coding .cl-state { color: var(--amber); }
/* done = coded (green) */
.code-line.coded {
  border-color: rgba(108, 233, 166, 0.38);
  background: rgba(108, 233, 166, 0.07);
}
.code-line.coded .cl-state { color: var(--green); }

/* ---- MIDDLE · per-line code values (built on .data-row) ------------------- */
#codePanelLabel { transition: color 160ms var(--ease-standard); }
.code-field {
  opacity: 0.5;
  transition: opacity 160ms var(--ease-standard), border-color 160ms var(--ease-standard), background 160ms var(--ease-standard), box-shadow 160ms var(--ease-standard);
}
.code-field em[data-code-val] {
  transition: color 160ms var(--ease-standard);
}
/* value actively resolving */
.code-field.resolving {
  opacity: 1;
  border-color: rgba(245, 166, 35, 0.54);
  background: rgba(245, 166, 35, 0.08);
  box-shadow: 0 0 22px rgba(245, 166, 35, 0.1);
}
/* value resolved */
.code-field.resolved {
  opacity: 1;
  border-color: rgba(108, 233, 166, 0.3);
  background: rgba(108, 233, 166, 0.05);
}
.code-field.resolved em[data-code-val] { color: var(--ink); }
/* property + building lines read blue (parity with the old property tint) */
.code-field[data-code-field="property"].resolved,
.code-field[data-code-field="building"].resolved {
  border-color: rgba(132, 201, 255, 0.4);
  background: rgba(132, 201, 255, 0.08);
}

.code-rollup {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 44px; margin-top: 4px; padding: 11px;
  border: 1px solid rgba(108, 233, 166, 0.38); border-radius: 8px;
  background: rgba(108, 233, 166, 0.07);
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity 220ms var(--ease-standard), transform 220ms var(--ease-standard);
}
.code-rollup.show { opacity: 1; transform: none; }
.code-rollup b { color: var(--muted); font-family: var(--font-family-mono); font-size: 12px; font-weight: 500; }
.code-rollup em { color: var(--green); font-family: var(--font-family-mono); font-size: 12px; font-style: normal; }

/* ---- RIGHT · vendor lookup + validation checklist ------------------------- */
.vendor-lookup {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; margin-bottom: 12px; padding: 10px 12px;
  border: 1px solid rgba(132, 201, 255, 0.34); border-radius: 8px;
  background: rgba(132, 201, 255, 0.07);
  transition: border-color 200ms var(--ease-standard), background 200ms var(--ease-standard);
}
.vendor-lookup b {
  color: var(--ink); font-family: var(--font-family-mono); font-size: 12px; font-weight: 500;
}
.vl-spin {
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  border: 2px solid rgba(132, 201, 255, 0.3); border-top-color: var(--blue);
  animation: spin 720ms linear infinite;
}
.vendor-lookup.found {
  border-color: rgba(108, 233, 166, 0.4); background: rgba(108, 233, 166, 0.08);
}
.vendor-lookup.found b { color: var(--green); }
.vendor-lookup.found .vl-spin {
  border: 2px solid rgba(108, 233, 166, 0.4); border-top-color: var(--green); animation: none;
}

.check-row {
  display: flex; align-items: center; gap: 10px;
  min-height: 40px; margin-bottom: 8px; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  opacity: 0.46;
  transition: opacity 160ms var(--ease-standard), border-color 160ms var(--ease-standard), background 160ms var(--ease-standard);
}
.check-row b { color: var(--body); font-family: var(--font-family-mono); font-size: 12px; font-weight: 500; }
.check-row .cr-box {
  width: 16px; height: 16px; flex: 0 0 auto;
  border: 1px solid var(--line-strong); border-radius: 50%;
  position: relative;
  transition: border-color 160ms var(--ease-standard), background 160ms var(--ease-standard), box-shadow 160ms var(--ease-standard);
}
.check-row.checked {
  opacity: 1; border-color: rgba(108, 233, 166, 0.38); background: rgba(108, 233, 166, 0.07);
}
.check-row.checked b { color: var(--ink); }
.check-row.checked .cr-box {
  border-color: rgba(108, 233, 166, 0.6); background: var(--green);
  box-shadow: 0 0 12px rgba(108, 233, 166, 0.3);
}
.check-row.checked .cr-box::after {
  content: ""; position: absolute; left: 5px; top: 2px;
  width: 4px; height: 8px; border: solid #08210f; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* the ready badge starts hidden, then lights up green once checks pass */
#codeReadyBadge {
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity 220ms var(--ease-standard), transform 220ms var(--ease-standard), border-color 200ms var(--ease-standard), background 200ms var(--ease-standard), color 200ms var(--ease-standard);
}
#codeReadyBadge.show {
  opacity: 1; transform: none;
  border-color: rgba(108, 233, 166, 0.4); background: rgba(108, 233, 166, 0.08); color: var(--green);
}

/* compact tier: per-line list + checklist must fit at 600w (3-col preserved) */
@media (max-width: 760px) {
  .code-line { padding: 8px 9px; margin-bottom: 7px; }
  .code-line .cl-main b,
  .code-line .cl-main em { font-size: 10.5px; }
  .code-line .cl-state { font-size: 9px; margin-top: 3px; }
  .code-field { padding: 8px 9px; }
  .code-rollup { padding: 9px; min-height: 0; }
  .code-rollup b, .code-rollup em { font-size: 10.5px; }
  .vendor-lookup { padding: 8px 9px; min-height: 0; }
  .vendor-lookup b { font-size: 10.5px; }
  .check-row { padding: 7px 9px; min-height: 0; margin-bottom: 6px; }
  .check-row b { font-size: 10.5px; }
}

/* ============================================================
   UNIFIED PILL BUTTON STANDARD (global) — sleek, consistent
   height across every CTA/pill button in every flow.
   Appended last so it wins the cascade. Height = ~32px.
   ============================================================ */
.primary-action,
.primary-action.compact,
.ghost-action,
.ghost-action.db-search-button,
.db-search-button,
.ghost-button,
.company-trigger,
.company-trigger.selected,
.post-button,
.export-button,
.archive-source-button,
.compose-send-button,
.save-reservation-button,
.record-save-button,
.new-mail-button,
.dl-button,
.replay-button {
  min-height: 32px;
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.15;
  border-radius: 999px;
}

.action-list li.phase { grid-column: 1 / -1; }