/**
 * BookFels V3 — Milestone A.2.0/A.2.1
 * Content Recovery Freeze + Narrative Dashboard Synchronization
 */

.bf-process-console--synchronized .bf-process-console__detail {
  display: none;
}

.bf-process-sync-dashboard {
  --bf-sync-accent: var(--bf-accent-cyan);
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 15px;
  margin: 0 20px 18px;
  padding: 17px;
  border: 1px solid rgba(125, 235, 255, .12);
  border-radius: var(--bf-radius-lg);
  background:
    radial-gradient(
      320px 180px at 0% 0%,
      color-mix(in srgb, var(--bf-sync-accent) 10%, transparent),
      transparent 72%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, .048),
      rgba(255, 255, 255, .008) 48%,
      transparent 72%
    ),
    rgba(3, 9, 18, .34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    0 18px 54px rgba(0, 0, 0, .2);
}

.bf-process-sync-dashboard[data-domain="decision"] {
  --bf-sync-accent: #79a8ff;
}

.bf-process-sync-dashboard[data-domain="compliance"] {
  --bf-sync-accent: #43d98c;
}

.bf-process-sync-dashboard[data-domain="ai"] {
  --bf-sync-accent: #4de6e6;
}

.bf-process-sync-dashboard[data-domain="monitoring"] {
  --bf-sync-accent: #9bbcff;
}

.bf-process-sync-dashboard::before {
  content: "";
  position: absolute;
  top: 0;
  right: 16px;
  left: 16px;
  height: 1px;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      transparent,
      color-mix(in srgb, var(--bf-sync-accent) 52%, transparent),
      transparent
    );
}

.bf-process-sync-dashboard__header {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
}

.bf-process-sync-dashboard__header > div {
  min-width: 0;
}

.bf-process-sync-dashboard__header > div > span,
.bf-process-sync-dashboard > footer > span {
  display: block;
  margin-bottom: 5px;
  color: var(--bf-sync-accent);
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.bf-process-sync-dashboard__header h4 {
  max-width: 29ch;
  margin: 0;
  font-family:
    "Inter Tight",
    Inter,
    system-ui,
    sans-serif;
  font-size: 1.08rem;
  line-height: 1.08;
  letter-spacing: -.028em;
  text-wrap: balance;
}

.bf-process-sync-dashboard__status {
  min-height: 27px;
  display: inline-flex;
  gap: 7px;
  align-items: center;
  flex: 0 0 auto;
  padding-inline: 9px;
  border: 1px solid rgba(67, 217, 140, .14);
  border-radius: 999px;
  color: var(--bf-success);
  background: rgba(67, 217, 140, .035);
  font-size: .52rem;
  white-space: nowrap;
}

.bf-process-sync-dashboard__status > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 11px rgba(67, 217, 140, .5);
}

.bf-process-sync-dashboard__explanation {
  margin: 0;
  color: var(--bf-muted);
  font-size: .67rem;
  line-height: 1.52;
}

.bf-process-sync-domains {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}

.bf-process-sync-domains > span {
  min-width: 0;
  min-height: 30px;
  display: grid;
  place-items: center;
  padding-inline: 4px;
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 9px;
  color: rgba(169, 182, 211, .58);
  background: rgba(255, 255, 255, .014);
  font-size: .48rem;
  font-weight: 800;
  letter-spacing: .025em;
  text-transform: uppercase;
  transition:
    color var(--bf-fast) var(--bf-ease-standard),
    border-color var(--bf-fast) var(--bf-ease-standard),
    background var(--bf-fast) var(--bf-ease-standard),
    box-shadow var(--bf-fast) var(--bf-ease-standard);
}

.bf-process-sync-domains > span[data-state="connected"] {
  color: var(--bf-muted);
  border-color: rgba(121, 168, 255, .11);
}

.bf-process-sync-domains > span[data-state="active"] {
  color: var(--bf-text);
  border-color: color-mix(in srgb, var(--bf-sync-accent) 32%, transparent);
  background: color-mix(in srgb, var(--bf-sync-accent) 7%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--bf-sync-accent) 10%, transparent);
}

.bf-process-sync-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.bf-process-sync-metrics article {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .052);
  border-radius: 11px;
  background: rgba(255, 255, 255, .016);
}

.bf-process-sync-metrics article[data-tone="positive"] {
  border-color: rgba(67, 217, 140, .12);
}

.bf-process-sync-metrics article[data-tone="warning"],
.bf-process-sync-metrics article[data-tone="review"] {
  border-color: rgba(248, 193, 90, .12);
}

.bf-process-sync-metrics span {
  color: var(--bf-muted);
  font-size: .49rem;
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.bf-process-sync-metrics strong {
  overflow: hidden;
  color: var(--bf-text);
  font-family:
    "Inter Tight",
    Inter,
    system-ui,
    sans-serif;
  font-size: .88rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bf-process-sync-metrics small {
  overflow: hidden;
  color: rgba(169, 182, 211, .64);
  font-size: .5rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bf-process-sync-dashboard__lower {
  display: grid;
  grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr);
  gap: 9px;
}

.bf-process-sync-dashboard__lower > section,
.bf-process-sync-dashboard__lower > dl {
  min-width: 0;
  margin: 0;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 11px;
  background: rgba(255, 255, 255, .012);
}

.bf-process-sync-dashboard__lower > section > span,
.bf-process-sync-dashboard__lower dt {
  color: var(--bf-muted);
  font-size: .49rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.bf-process-sync-dashboard__lower ul {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  padding: 0;
  margin: 9px 0 0;
  list-style: none;
}

.bf-process-sync-dashboard__lower li {
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  padding-inline: 8px;
  border: 1px solid rgba(121, 168, 255, .11);
  border-radius: 999px;
  color: var(--bf-muted);
  background: rgba(121, 168, 255, .025);
  font-size: .49rem;
  font-weight: 750;
}

.bf-process-sync-dashboard__lower li[data-state="active"] {
  color: var(--bf-text);
  border-color: color-mix(in srgb, var(--bf-sync-accent) 22%, transparent);
}

.bf-process-sync-dashboard__lower dl {
  display: grid;
  gap: 8px;
}

.bf-process-sync-dashboard__lower dl > div {
  display: grid;
  gap: 2px;
}

.bf-process-sync-dashboard__lower dd {
  margin: 0;
  color: var(--bf-text);
  font-size: .55rem;
  line-height: 1.35;
}

.bf-process-sync-dashboard > footer {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding-top: 2px;
}

.bf-process-sync-dashboard > footer > span {
  margin: 0;
}

.bf-process-sync-dashboard > footer a {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--bf-text);
  font-size: .55rem;
  font-weight: 800;
}

.bf-process-sync-dashboard > footer .bf-icon {
  width: 14px;
  height: 14px;
  color: var(--bf-sync-accent);
}

.bf-dashboard-narrative {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
  margin: 0 0 clamp(40px, 6vw, 70px);
  padding: clamp(21px, 3vw, 30px);
  border: 1px solid rgba(125, 235, 255, .12);
  border-radius: var(--bf-radius-xl);
  background:
    radial-gradient(
      560px 230px at 0% 0%,
      rgba(121, 168, 255, .085),
      transparent 72%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, .055),
      rgba(255, 255, 255, .01) 44%,
      transparent 70%
    ),
    rgba(9, 17, 30, .62);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .055);
  backdrop-filter: blur(22px) saturate(116%);
  -webkit-backdrop-filter: blur(22px) saturate(116%);
}

.bf-dashboard-narrative::before {
  content: "";
  position: absolute;
  top: 0;
  right: 12%;
  left: 12%;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(125, 235, 255, .32),
      transparent
    );
}

.bf-dashboard-narrative__copy > span {
  display: block;
  margin-bottom: 8px;
  color: var(--bf-accent-cyan);
  font-size: .61rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.bf-dashboard-narrative__copy > div {
  display: flex;
  gap: 9px;
  align-items: center;
  margin-bottom: 11px;
  color: var(--bf-muted);
  font-size: .72rem;
}

.bf-dashboard-narrative__copy > div strong:last-child {
  color: var(--bf-accent-cyan);
  text-transform: capitalize;
}

.bf-dashboard-narrative__copy h3 {
  max-width: 28ch;
  margin: 0;
  font-family:
    "Inter Tight",
    Inter,
    system-ui,
    sans-serif;
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  line-height: 1.04;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.bf-dashboard-narrative__copy p {
  max-width: 64ch;
  margin: 13px 0 0;
  color: var(--bf-muted);
  font-size: .79rem;
  line-height: 1.58;
}

.bf-dashboard-narrative__progress {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.bf-dashboard-narrative__progress::before {
  content: "";
  position: absolute;
  top: 18px;
  right: 8%;
  left: 8%;
  height: 1px;
  background: rgba(255, 255, 255, .07);
}

.bf-dashboard-narrative__progress li {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: rgba(169, 182, 211, .54);
  text-align: center;
}

.bf-dashboard-narrative__progress span {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 12px;
  background: rgba(5, 9, 20, .94);
  font-size: .58rem;
  font-weight: 800;
  transition:
    color var(--bf-medium) var(--bf-ease-standard),
    border-color var(--bf-medium) var(--bf-ease-standard),
    background var(--bf-medium) var(--bf-ease-standard),
    box-shadow var(--bf-medium) var(--bf-ease-standard);
}

.bf-dashboard-narrative__progress strong {
  font-size: .54rem;
  line-height: 1.25;
}

.bf-dashboard-narrative__progress li[data-complete="true"] span,
.bf-dashboard-narrative__progress li[data-active="true"] span {
  color: var(--bf-accent-cyan);
  border-color: rgba(125, 235, 255, .24);
  background: rgba(125, 235, 255, .055);
}

.bf-dashboard-narrative__progress li[data-active="true"] span {
  box-shadow: 0 0 18px rgba(125, 235, 255, .13);
}

.bf-dashboard-narrative__progress li[data-active="true"] {
  color: var(--bf-text);
}

@media (max-width: 1080px) {
  .bf-process-console--synchronized .bf-process-console__detail {
    display: none;
  }

  .bf-dashboard-narrative {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .bf-process-sync-dashboard__header,
  .bf-process-sync-dashboard > footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .bf-process-sync-dashboard__status {
    white-space: normal;
  }

  .bf-process-sync-domains {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .bf-process-sync-dashboard__lower {
    grid-template-columns: 1fr;
  }

  .bf-dashboard-narrative__progress {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 15px;
  }

  .bf-dashboard-narrative__progress::before {
    display: none;
  }
}

@media (max-width: 430px) {
  .bf-process-sync-dashboard {
    margin-inline: 12px;
    padding: 14px;
  }

  .bf-process-sync-metrics {
    grid-template-columns: 1fr;
  }

  .bf-process-sync-domains {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .bf-process-sync-domains > span,
  .bf-dashboard-narrative__progress span {
    transition: none !important;
  }
}

@supports not (
  (backdrop-filter: blur(1px)) or
  (-webkit-backdrop-filter: blur(1px))
) {
  .bf-dashboard-narrative,
  .bf-process-sync-dashboard {
    background: var(--bf-surface);
  }
}