/* ============================================================
   Digital Experts - platform page, Answer and Learn screens
   2026.10.06. Scoped to .dx-pf. Loaded after de-platform.css.
   Rebuilt from the Design canvas: Actions page with a handoff
   phone, and a knowledge gaps view of Insights.
   ============================================================ */

/* --- Answer: desktop screen with a phone ------------------------- */

.dx-pf .dx-pf-duo { position: relative; padding-bottom: 6%; }
.dx-pf .dx-pf-duo .dx-app { width: 80%; }

.dx-pf .dx-of-top { display: flex; justify-content: space-between; align-items: flex-start; gap: calc(20 * var(--u)); }
.dx-pf .dx-of-top .dx-app-h1 { font-size: calc(34 * var(--u)); }
.dx-pf .dx-of-top .dx-app-sub { max-width: calc(470 * var(--u)); }
.dx-pf .dx-of-top .dx-app-btn { height: calc(40 * var(--u)); border-radius: 999px; font-size: calc(12 * var(--u)); }
.dx-pf .dx-app-of .dx-app-main { padding: calc(36 * var(--u)) calc(40 * var(--u)); }

.dx-pf .dx-of-types { display: flex; gap: calc(8 * var(--u)); margin-top: calc(20 * var(--u)); }
.dx-pf .dx-of-types span { font-size: calc(11 * var(--u)); padding: calc(7 * var(--u)) calc(12 * var(--u)); border-radius: 999px; background: #FFFFFF; border: calc(1 * var(--u)) solid #EBEAE6; color: #55544F; }
.dx-pf .dx-of-types span.on { border-color: #1C1B19; color: #1C1B19; font-weight: 600; }

.dx-pf .dx-of-table { margin-top: calc(18 * var(--u)); background: #FFFFFF; border: calc(1 * var(--u)) solid #EBEAE6; border-radius: calc(16 * var(--u)); overflow: hidden; }
.dx-pf .dx-of-tr { display: grid; grid-template-columns: 2fr 0.75fr 1fr 1.15fr; align-items: center; gap: calc(10 * var(--u)); padding: calc(11 * var(--u)) calc(16 * var(--u)); border-top: calc(1 * var(--u)) solid #EFEEEA; font-size: calc(12 * var(--u)); }
.dx-pf .dx-of-th { border-top: 0; background: #F7F7F6; font-size: calc(9 * var(--u)); font-weight: 600; letter-spacing: 0.14em; color: #8B8A86; padding-top: calc(10 * var(--u)); padding-bottom: calc(10 * var(--u)); }
.dx-pf .dx-of-name { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.dx-pf .dx-of-name b { display: block; font-weight: 600; font-size: calc(12.5 * var(--u)); }
.dx-pf .dx-of-name small { display: block; font-size: calc(10.5 * var(--u)); color: #8B8A86; }
.dx-pf .dx-of-tr em { font-style: normal; font-size: calc(10.5 * var(--u)); font-weight: 600; padding: calc(4 * var(--u)) calc(9 * var(--u)); border-radius: 999px; background: #F0EFEC; color: #55544F; }
.dx-pf .dx-of-tr em.live { background: #E3F4EA; color: #1F7A4A; }
.dx-pf .dx-of-tags { display: flex; flex-wrap: wrap; gap: calc(5 * var(--u)); }
.dx-pf .dx-of-tags span { font-size: calc(10.5 * var(--u)); padding: calc(4 * var(--u)) calc(8 * var(--u)); border-radius: calc(7 * var(--u)); background: #F5F3EF; border: calc(1 * var(--u)) solid #EBE7E0; }

/* The phone: drawn at 390 wide and scaled to its box. */
.dx-pf .dx-pf-phone { position: absolute; right: 0; bottom: 0; width: 27%; container-type: inline-size; }

.dx-pf .dx-pp {
  --p: calc(100cqw / 390);
  height: calc(760 * var(--p));
  border-radius: calc(48 * var(--p));
  background: #FFFFFF;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: "Inter", system-ui, sans-serif;
  color: #17181A;
  text-align: left;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 30px 70px rgba(23, 24, 26, 0.28);
  border: calc(8 * var(--p)) solid #17181A;
}

.dx-pf .dx-pp p { margin: 0; color: inherit; }
.dx-pf .dx-pp-bar { display: flex; justify-content: space-between; align-items: center; padding: calc(26 * var(--p)) calc(24 * var(--p)) calc(10 * var(--p)); font-size: calc(15 * var(--p)); font-weight: 600; }
.dx-pf .dx-pp-bar span { display: flex; align-items: center; gap: calc(8 * var(--p)); }
.dx-pf .dx-pp-bar i { width: calc(8 * var(--p)); height: calc(8 * var(--p)); border-radius: 50%; background: #15301F; }
.dx-pf .dx-pp-bar b { font-weight: 400; color: #55565B; font-size: calc(22 * var(--p)); }
.dx-pf .dx-pp-body { padding: calc(14 * var(--p)) calc(24 * var(--p)); display: flex; flex-direction: column; gap: calc(14 * var(--p)); }
.dx-pf .dx-pp-me { align-self: flex-end; max-width: 78%; background: #EFEDE8; border-radius: calc(22 * var(--p)) calc(22 * var(--p)) calc(6 * var(--p)) calc(22 * var(--p)); padding: calc(12 * var(--p)) calc(16 * var(--p)); font-size: calc(15 * var(--p)); line-height: 1.45; }
.dx-pf .dx-pp-cap { font-size: calc(12 * var(--p)); color: #6C6D72; margin-bottom: calc(-10 * var(--p)) !important; }
.dx-pf .dx-pp-ai { font-size: calc(16 * var(--p)); line-height: 1.5; }
.dx-pf .dx-pp-join { display: flex; align-items: center; gap: calc(10 * var(--p)); font-size: calc(13 * var(--p)); color: #6C6D72; }
.dx-pf .dx-pp-join::before, .dx-pf .dx-pp-join::after { content: ""; flex: 1; height: 1px; background: #E8E6E1; }
.dx-pf .dx-pp-form { display: flex; flex-direction: column; gap: calc(8 * var(--p)); padding: calc(14 * var(--p)); border-radius: calc(18 * var(--p)); background: #F4F3EF; }
.dx-pf .dx-pp-form small { font-size: calc(12 * var(--p)); color: #6C6D72; }
.dx-pf .dx-pp-form span { font-size: calc(15 * var(--p)); padding: calc(12 * var(--p)) calc(14 * var(--p)); border-radius: calc(12 * var(--p)); background: #FFFFFF; box-shadow: 0 0 0 1px #E8E6E1; color: #8B8A86; }
.dx-pf .dx-pp-form b { font-size: calc(15 * var(--p)); font-weight: 600; text-align: center; padding: calc(13 * var(--p)); border-radius: 999px; background: #15301F; color: #FFFFFF; }
.dx-pf .dx-pp-input { margin: auto calc(16 * var(--p)) calc(24 * var(--p)); min-height: calc(56 * var(--p)); border-radius: 999px; box-shadow: 0 0 0 1px #E8E6E1, 0 4px 14px rgba(23, 24, 26, 0.05); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(6 * var(--p)) 0 calc(20 * var(--p)); font-size: calc(16 * var(--p)); color: #8B8A86; }
.dx-pf .dx-pp-input b { width: calc(44 * var(--p)); height: calc(44 * var(--p)); border-radius: 50%; background: #15301F; display: flex; align-items: center; justify-content: center; }
.dx-pf .dx-pp-input svg { width: calc(18 * var(--p)); height: calc(18 * var(--p)); fill: none; stroke: #FFFFFF; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* --- Learn: knowledge gaps with a drafted fix --------------------- */

.dx-pf .dx-app-gp .dx-app-main { padding: calc(36 * var(--u)) calc(40 * var(--u)); }
.dx-pf .dx-app-gp .dx-app-h1 { font-size: calc(34 * var(--u)); }
.dx-pf .dx-app-gp .dx-app-tabs { margin-top: calc(20 * var(--u)); }

.dx-pf .dx-gp-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: calc(18 * var(--u)); margin-top: calc(18 * var(--u)); align-items: start; }
.dx-pf .dx-gp-list { background: #FFFFFF; border: calc(1 * var(--u)) solid #EBEAE6; border-radius: calc(16 * var(--u)); overflow: hidden; }
.dx-pf .dx-gp-row { display: flex; justify-content: space-between; align-items: center; gap: calc(10 * var(--u)); padding: calc(12 * var(--u)) calc(16 * var(--u)); border-top: calc(1 * var(--u)) solid #EFEEEA; }
.dx-pf .dx-gp-row:first-child { border-top: 0; }
.dx-pf .dx-gp-row.on { background: #F7F5EF; box-shadow: inset calc(3 * var(--u)) 0 0 #1C1B19; }
.dx-pf .dx-gp-row b { display: block; font-weight: 500; font-size: calc(12.5 * var(--u)); }
.dx-pf .dx-gp-row small { display: block; font-size: calc(10.5 * var(--u)); color: #8B8A86; margin-top: calc(2 * var(--u)); }
.dx-pf .dx-gp-row em { flex: none; font-style: normal; font-size: calc(10 * var(--u)); font-weight: 600; padding: calc(4 * var(--u)) calc(8 * var(--u)); border-radius: 999px; background: #F0EFEC; color: #55544F; }
.dx-pf .dx-gp-row em.up { background: #FBE9E2; color: #A0421F; }
.dx-pf .dx-gp-row em.new { background: #EFECFA; color: #5B4A9E; }

.dx-pf .dx-gp-fix { margin-top: 0; padding: calc(20 * var(--u)) calc(22 * var(--u)); display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.dx-pf .dx-gp-fix .dx-app-h2 { font-size: calc(20 * var(--u)); }
.dx-pf .dx-gp-said { font-size: calc(11.5 * var(--u)); color: #55544F; margin: 0; line-height: 1.5; }
.dx-pf .dx-gp-draft { font-size: calc(12.5 * var(--u)); line-height: 1.5; padding: calc(12 * var(--u)) calc(14 * var(--u)); border-radius: calc(12 * var(--u)); background: #F7F7F6; border: calc(1 * var(--u)) solid #EBEAE6; }
.dx-pf .dx-gp-draft small { display: block; margin-top: calc(8 * var(--u)); font-size: calc(10.5 * var(--u)); color: #8B8A86; }
.dx-pf .dx-gp-act { display: flex; gap: calc(8 * var(--u)); }
.dx-pf .dx-gp-act span { height: calc(36 * var(--u)); padding: 0 calc(16 * var(--u)); border-radius: 999px; display: flex; align-items: center; font-size: calc(12 * var(--u)); font-weight: 600; border: calc(1 * var(--u)) solid #E3E0DA; }
.dx-pf .dx-gp-act span:last-child { background: #1C1B19; border-color: #1C1B19; color: #FFFFFF; }
.dx-pf .dx-gp-note { font-size: calc(11 * var(--u)); color: #1F7A4A; margin: 0; }

@media (max-width: 900px) {
  .dx-pf .dx-pf-duo { padding-bottom: 0; }
  .dx-pf .dx-pf-duo .dx-app { width: 100%; }
  .dx-pf .dx-pf-phone { position: relative; width: 62%; margin: 24px auto 0; }
}