/* The application layouts use the screen's logical canvas as their container.
   Device movement and the peel animation remain owned by the existing story. */
.software-choice-hero .joe-monitor-app {
  container: joe-monitor / size;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 22% minmax(0, 1fr);
  color: #30203c;
  background: transparent;
  font-family: var(--font-body, "Outfit", sans-serif);
}

.joe-monitor-app *, .joe-phone-app * { box-sizing: border-box; }

/* The existing backing layer fades before the app panels finish peeling away.
   Keep the layout wrappers clear so the story screen can appear underneath. */
.software-choice-hero .joe-monitor-app::after { background: #f5f1f7; }
.software-choice-hero .joe-phone-app::after { background: #f7f3f9; }

.joe-monitor-app .custom-app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  min-height: 0;
  padding: 3px clamp(6px, 2cqw, 12px);
  gap: 8px;
  border: 0;
  background: #512465;
  box-shadow: none;
}

.joe-monitor-app .custom-app-brand { display: flex; min-width: 0; gap: 7px; }
.joe-monitor-app .custom-app-brand > span:last-child { display: grid; min-width: 0; gap: 1px; }
.joe-monitor-app .custom-app-logo.joe-flower-mark {
  flex: 0 0 clamp(20px, 7cqw, 32px);
  width: clamp(20px, 7cqw, 32px);
  height: clamp(20px, 7cqw, 32px);
  border: 0;
  border-radius: 6px;
  background: #6b397d;
  box-shadow: none;
  translate: none;
}
.joe-monitor-app .joe-flower-mark svg { width: 85%; height: 85%; }
.joe-monitor-app .custom-app-brand strong {
  color: #fff;
  font-size: clamp(12px, 4.2cqw, 21px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.015em;
  white-space: nowrap;
}
.joe-monitor-app .custom-app-brand small {
  margin: 0;
  color: #e9d7f1;
  font-size: clamp(6px, 2cqw, 10px);
  line-height: 1;
  letter-spacing: .025em;
}
.joe-monitor-app .custom-app-topnav { display: none; }

.joe-monitor-app .custom-app-body {
  display: grid;
  grid-template-columns: clamp(26px, 9cqw, 44px) minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  background: transparent;
}
.joe-monitor-app .custom-app-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(3px, 3cqh, 7px);
  padding: clamp(5px, 4cqh, 10px) 2px;
  border: 0;
  border-right: 1px solid #e4dbe9;
  background: #eee6f2;
}
.joe-monitor-app .custom-app-nav > span {
  display: grid;
  place-items: center;
  width: clamp(20px, 6.5cqw, 31px);
  height: clamp(20px, 6.5cqw, 31px);
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 5px;
  color: #8d7998;
  background: transparent;
  box-shadow: none;
  translate: none;
}
.joe-monitor-app .custom-app-nav > span.is-active { color: #fff; background: #70418a; }
.joe-monitor-app .custom-app-nav > span:nth-child(4) { display: none; }
.joe-monitor-app .custom-app-nav-label { display: none; }
.joe-monitor-app .custom-app-nav-icon,
.joe-monitor-app .custom-app-nav-icon svg { width: clamp(13px, 4.5cqw, 20px); height: clamp(13px, 4.5cqw, 20px); }
.joe-monitor-app .custom-app-dashboard {
  display: grid;
  grid-template-rows: 23% minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  padding: clamp(4px, 1.5cqw, 9px);
  gap: clamp(3px, 2.5cqh, 7px);
  background: transparent;
}
.joe-monitor-app .custom-app-welcome {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-content: center;
  min-height: 0;
  margin: 0;
  padding: 0;
  gap: 1px 6px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
.joe-monitor-app .custom-app-welcome::before,
.joe-monitor-app .custom-app-welcome::after { content: none; display: none; }
.joe-monitor-app .custom-app-welcome > span {
  grid-column: 1;
  margin: 0;
  color: #887193;
  font-size: clamp(6px, 1.9cqw, 9px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.joe-monitor-app .custom-app-welcome > strong {
  grid-column: 1;
  color: #34203e;
  font-size: clamp(11px, 3.8cqw, 20px);
  line-height: 1.05;
  text-shadow: none;
}
.joe-monitor-app .custom-app-welcome > b {
  display: flex;
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 3px 5px;
  border: 0;
  border-radius: 4px;
  color: #267953;
  background: #e2f2e9;
  font-size: clamp(6px, 2cqw, 10px);
  line-height: 1;
  white-space: nowrap;
}
.joe-monitor-app .custom-app-welcome > b i { width: 4px; height: 4px; background: #37946c; box-shadow: none; }
.joe-monitor-app .custom-app-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(4px, 1.5cqw, 8px);
  min-width: 0;
  min-height: 0;
}
.joe-monitor-app .custom-app-route-list,
.joe-monitor-app .custom-app-route-map {
  display: grid;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: clamp(4px, 1.4cqw, 7px);
  gap: 2px;
  border: 1px solid #e2d8e8;
  border-radius: clamp(4px, 1.5cqw, 7px);
  background: #fff;
  box-shadow: none;
  overflow: hidden;
}
.joe-monitor-app .custom-app-route-list { grid-template-rows: auto minmax(0, 1fr); }
.joe-monitor-app .custom-app-route-head,
.joe-monitor-app .custom-app-map-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 0;
  margin: 0;
  padding: 0 0 2px;
  gap: 3px;
  color: #3e2849;
  font-size: clamp(7px, 2.4cqw, 12px);
  font-weight: 700;
  line-height: 1.1;
}
.joe-monitor-app .custom-app-route-head > span,
.joe-monitor-app .custom-app-map-head > b { color: #9779a4; font-size: clamp(5.5px, 1.8cqw, 9px); font-weight: 500; white-space: nowrap; }
.joe-monitor-app .custom-app-route-head > strong { color: inherit; font-size: inherit; line-height: inherit; }
.joe-monitor-app .custom-app-orders-track { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); align-content: stretch; }
.joe-monitor-app .custom-app-orders-track .custom-app-route {
  display: grid;
  grid-template-columns: clamp(14px, 5cqw, 25px) minmax(0, 1fr) auto;
  align-items: center;
  height: auto;
  min-height: 0;
  padding: 2px 0;
  gap: 4px;
  border-top: 1px solid #eee7f1;
}
.joe-monitor-app .custom-app-flower { width: clamp(14px, 5cqw, 25px); height: clamp(14px, 5cqw, 25px); border-radius: 4px; box-shadow: none; }
.joe-monitor-app .custom-app-route > span { display: grid; gap: 2px; }
.joe-monitor-app .custom-app-orders-track .custom-app-route strong { color: #3e2849; font-size: clamp(7px, 2.4cqw, 12px); line-height: 1.05; }
.joe-monitor-app .custom-app-orders-track .custom-app-route small { display: block; margin: 0; color: #977f9f; font-size: clamp(5.5px, 1.8cqw, 9px); line-height: 1.05; }
.joe-monitor-app .custom-app-orders-track .custom-app-route > b {
  padding: 3px 4px;
  border-radius: 4px;
  color: #347f5c;
  background: #e8f5ed;
  font-size: clamp(5px, 1.7cqw, 8px);
  line-height: 1;
  white-space: nowrap;
}
.joe-monitor-app .custom-app-orders-track .custom-app-route:nth-child(2) > b { color: #7d5696; background: #f0e9f5; }
.joe-monitor-app .custom-app-route-map { grid-template-rows: auto minmax(0, 1fr) auto; }
.joe-monitor-app .custom-app-map-canvas {
  position: relative;
  min-height: 0;
  margin: 0;
  border: 0;
  border-radius: 4px;
  background: #eee9f4;
  box-shadow: none;
  overflow: hidden;
}
.joe-monitor-app .custom-app-map-canvas > :not(.custom-app-delivery-route) { display: none; }
.joe-monitor-app .custom-app-delivery-route { display: block; width: 100%; height: 100%; }
.joe-monitor-app .custom-app-delivery-street { fill: none; stroke: #fff; stroke-width: 5; }
.joe-monitor-app .custom-app-delivery-path { fill: none; stroke: #8850a3; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.joe-monitor-app .custom-app-delivery-route circle { fill: #74428b; stroke: #fff; stroke-width: 3; }
.joe-monitor-app .custom-app-map-footer { gap: 3px; min-width: 0; margin: 0; font-size: clamp(5px, 1.7cqw, 8px); color: #917a9b; line-height: 1; white-space: nowrap; }
.joe-monitor-app .custom-app-map-footer > strong { color: #347f5c; font-size: inherit; }
.joe-monitor-app .custom-app-map-footer i { width: 3px; height: 3px; margin-right: 2px; background: #37946c; }

/* The driver has one task on screen: reach the next address and mark it done. */
html[data-device-render][data-screen-render] .floral-hero-product .joe-phone-app {
  container: joe-phone / size;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 13% minmax(0, 1fr) 12% 18% 10%;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0 4px 4px;
  gap: 3px;
  color: #3e2849;
  background: transparent;
  font-family: var(--font-body, "Outfit", sans-serif);
}
.joe-phone-app > * { min-width: 0; min-height: 0; }
.joe-phone-app .floral-phone-topbar {
  display: grid;
  grid-template-columns: 13px minmax(0, 1fr);
  align-items: center;
  width: 100%;
  min-height: 0;
  margin: 0 !important;
  padding: 2px 3px !important;
  gap: 3px;
  border: 0;
  border-radius: 0 0 4px 4px;
  color: #fff;
  background: #512465;
}
.joe-phone-app .floral-phone-topbar > span { display: grid; width: 13px; height: 13px; place-items: center; border: 0; background: #75478b; font-size: 9px; }
.joe-phone-app .floral-phone-topbar strong { color: #fff; font-size: clamp(8px, 10.5cqw, 14px); line-height: 1; letter-spacing: -.035em; white-space: nowrap; }
.joe-phone-app .floral-phone-topbar > i { display: none; }
.joe-phone-app .floral-phone-summary.floral-phone-route-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 4px;
  gap: 3px;
  border: 1px solid #e4d8eb;
  border-radius: 5px;
  background: #fff;
  box-shadow: none;
}
.joe-phone-app .floral-phone-route-head { display: flex; min-height: 0; gap: 3px; }
.joe-phone-app .floral-phone-route-head > small { color: #94789f; font-size: clamp(5px, 6.5cqw, 8px); line-height: 1.05; letter-spacing: 0; white-space: nowrap; }
.joe-phone-app .floral-phone-route-head > span { padding: 2px 3px; gap: 2px; border: 0; color: #367f5c; background: #e7f3eb; font-size: clamp(4.5px, 5.8cqw, 7px); white-space: nowrap; }
.joe-phone-app .floral-phone-route-head > span i { width: 3px; height: 3px; box-shadow: none; }
.joe-phone-app .floral-phone-route-map { height: 100%; min-height: 0; border: 0; border-radius: 3px; background: #eee7f4; box-shadow: none; }
.joe-phone-app .floral-phone-route-map > i { width: 12px; height: 12px; font-size: 7px; box-shadow: none; }
.joe-phone-app .floral-phone-route-destination { display: grid; justify-content: start; gap: 2px; }
.joe-phone-app .floral-phone-route-destination > small { color: #967c9f; font-size: clamp(5px, 6cqw, 8px); line-height: 1; letter-spacing: 0; }
.joe-phone-app .floral-phone-route-destination > strong { width: 100%; max-width: none; margin: 0; color: #422651; font-size: clamp(9px, 12.5cqw, 16px); line-height: 1; text-align: left; }
.joe-phone-app .floral-phone-progress.floral-phone-order-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 1px 4px; gap: 4px; border: 0; border-radius: 0; background: transparent; }
.joe-phone-app .floral-phone-order-meta > span { display: grid; grid-template-rows: auto auto; align-content: center; min-width: 0; min-height: 0; height: 100%; padding: 0; gap: 2px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.joe-phone-app .floral-phone-order-meta > span > small { margin: 0; color: #94789f; font-size: clamp(5px, 6.5cqw, 8px); line-height: 1; white-space: nowrap; }
.joe-phone-app .floral-phone-order-meta > span > b { margin: 0; color: #432650; font-size: clamp(9px, 11.5cqw, 15px); line-height: 1; white-space: nowrap; }
.joe-phone-app .floral-phone-stops.floral-phone-current-order { display: grid; grid-template-rows: minmax(0, 1fr); align-content: stretch; width: 100%; height: 100%; min-height: 0; margin: 0; gap: 0; overflow: visible; }
.joe-phone-app .floral-phone-current-order > span {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 4px;
  gap: 2px 4px;
  border: 0;
  border-radius: 5px;
  color: #fff;
  background: #70418a;
  box-shadow: none;
}
.joe-phone-app .floral-phone-current-order .floral-phone-order-thumb { display: grid; place-items: center; width: 12px; height: 16px; border: 0; border-radius: 0; color: #fff; background: none; box-shadow: none; font-size: 12px; }
.joe-phone-app .floral-phone-current-order > span.is-live { color: #fff; background: #70418a; box-shadow: none; }
.joe-phone-app .floral-phone-current-order b { color: #fff; font-size: clamp(8px, 10cqw, 14px); line-height: 1; white-space: nowrap; }
.joe-phone-app .floral-phone-current-order small { color: #e5d4ed; font-size: clamp(5px, 6cqw, 8px); line-height: 1; }
.joe-phone-app .floral-phone-nav { display: flex; align-items: center; justify-content: space-around; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 2px 0 0; border: 0; border-top: 1px solid #e1d5e8; }
.joe-phone-app .floral-phone-nav span { display: grid; place-items: center; width: 20px; height: 16px; padding: 0; border-radius: 4px; color: #a58cb0; background: transparent; font-size: 10px; }
.joe-phone-app .floral-phone-nav span.is-active { color: #70418a; background: #eadff0; }