/* ==========================================================================
   DeliVite product page — page-scoped styles
   --------------------------------------------------------------------------
   Loaded only by delivite.html, after styles.css. It adds the phone on the
   lock screen and the order page's map (FIG.01), the extra marks and step
   legend of the order figure (FIG.02), and the card grids for five roles and
   three city cards. Shared classes are only placed or scoped here, never
   restyled.
   ========================================================================== */

/* ---- FIG.01 · the order on the lock screen --------------------------------
   Plain HTML and CSS, complete without JS: the phone shows the order's Live
   Activity in the app's own words, and a separate panel shows the map on the
   order page, in one inline SVG. The phone is a size container: everything
   inside it is sized in cqi, so the screen keeps its proportions from 320 px
   phones up. Only the track fill animates, gated on .hero-booted, with the
   static end state restored for reduced motion. */
/* the block padding keeps the phone and the panel clear of the frame's
   corner ticks */
.dv-stage {
  container-type: inline-size;
  padding-block: clamp(1rem, 3vw, 1.4rem);
}
.dv-scene {
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  max-width: 540px;
  margin-inline: auto;
}
/* phone and map side by side once the frame has room for both */
@container (min-width: 400px) {
  .dv-scene {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: center;
    column-gap: 0.9rem;
  }
}

.dv-phone {
  display: flex;
  width: min(100%, 300px);
  aspect-ratio: 300 / 433;
  container-type: inline-size;
  padding: 7px;
  border-radius: 46px;
  border: 1px solid var(--border-strong);
  background: linear-gradient(155deg, #2b2b31 0%, #121215 36%, #1c1c21 100%);
  box-shadow:
    0 36px 70px -34px rgba(15, 23, 42, 0.45),
    0 0 0 1px rgba(15, 23, 42, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.dv-phone__screen {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 39px;
  padding: 10px 12px 6px;
  padding: 3.4cqi 4.2cqi 2cqi;
  background:
    radial-gradient(130% 55% at 50% -6%, rgba(59, 130, 246, 0.32), transparent 62%),
    radial-gradient(90% 45% at 100% 100%, rgba(143, 193, 240, 0.1), transparent 70%),
    #070708;
  /* a dark device screen inside the light page: its own tokens */
  --accent: #60A5FA;
  --accent-deep: #2563EB;
  color: #fff;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.25;
}

/* status bar: the island, a weak signal (two bars of four) and the battery */
.dv-phone__status {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.8cqi;
  height: 9cqi;
  padding-right: 2.4cqi;
}
.dv-phone__island {
  position: absolute;
  top: 0;
  left: 50%;
  width: 32cqi;
  height: 9cqi;
  border-radius: 999px;
  background: #000;
  transform: translateX(-50%);
}
.dv-phone__signal {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.6cqi;
  height: 3.4cqi;
}
.dv-phone__signal i {
  width: 0.95cqi;
  border-radius: 0.3cqi;
  background: rgba(255, 255, 255, 0.28);
}
.dv-phone__signal i:nth-child(1) { height: 35%; background: #fff; }
.dv-phone__signal i:nth-child(2) { height: 57%; background: #fff; }
.dv-phone__signal i:nth-child(3) { height: 78%; }
.dv-phone__signal i:nth-child(4) { height: 100%; }
.dv-phone__battery {
  position: relative;
  width: 7cqi;
  height: 3.4cqi;
  padding: 0.45cqi;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 1.1cqi;
}
.dv-phone__battery::before {
  content: "";
  display: block;
  width: 64%;
  height: 100%;
  border-radius: 0.5cqi;
  background: #fff;
}
.dv-phone__battery::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -1.3cqi;
  width: 0.8cqi;
  height: 1.3cqi;
  border-radius: 0 0.4cqi 0.4cqi 0;
  background: rgba(255, 255, 255, 0.5);
  transform: translateY(-50%);
}

.dv-lock__date {
  margin-top: 5cqi;
  text-align: center;
  font-size: 4.7cqi;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
}
.dv-lock__time {
  margin: 0.4cqi 0 6cqi;
  text-align: center;
  font-size: 22cqi;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.95);
}

/* the order's Live Activity, laid out as bar.tsx draws its banner and sitting
   low on the lock screen, as iOS places it; sizes keep the app's 15/22/12 pt
   steps */
.dv-bar {
  margin-top: auto;
  padding: 4.4cqi;
  border-radius: 7.5cqi;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(22, 24, 29, 0.92);
  box-shadow: 0 12px 26px -16px rgba(0, 0, 0, 0.6);
}
.dv-bar__head {
  display: flex;
  align-items: center;
  gap: 2.2cqi;
  font-size: 4.15cqi;
}
.dv-bar__icon {
  flex: none;
  width: 4.4cqi;
  height: 4.4cqi;
}
.dv-bar__handle {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.4;
  stroke-linecap: round;
}
.dv-bar__bag { fill: var(--accent); }
.dv-bar__vendor {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: #fff;
}
.dv-bar__num {
  margin-left: auto;
  white-space: nowrap;
  color: #b6bac4;
}
.dv-bar__status {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2.2cqi;
  margin-top: 2.8cqi;
}
.dv-bar__title {
  font-size: 6.1cqi;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
}
.dv-bar__eta {
  font-size: 4.15cqi;
  font-weight: 600;
  white-space: nowrap;
  color: var(--accent);
}
.dv-track {
  height: 1.3cqi;
  margin-top: 2.8cqi;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}
/* En route is the third of four steps: two thirds along, as the app fills it */
.dv-track__fill {
  display: block;
  width: 66.667%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  transform-origin: left;
}
.dv-track__steps {
  display: flex;
  justify-content: space-between;
  gap: 1.4cqi;
  margin-top: 2.2cqi;
  padding: 0;
  list-style: none;
  font-size: 3.35cqi;
  white-space: nowrap;
  color: #b6bac4;
}
.dv-track__steps [aria-current] {
  font-weight: 600;
  color: var(--accent);
}

/* the lock screen's own foot: torch, camera and the home indicator */
.dv-lock__foot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 5cqi;
  padding: 0 2.6cqi 4.6cqi;
}
.dv-lock__btn {
  display: grid;
  place-items: center;
  width: 11.5cqi;
  height: 11.5cqi;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}
.dv-lock__btn svg {
  width: 5cqi;
  height: 5cqi;
  fill: rgba(255, 255, 255, 0.9);
  fill-rule: evenodd;
}
.dv-lock__home {
  position: absolute;
  bottom: 0.4cqi;
  left: 50%;
  width: 34cqi;
  height: 1.3cqi;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  transform: translateX(-50%);
}

/* the order page's map, apart from the lock screen: the restaurant's pin,
   the drop-off pin and the rider's dot, as orders/[id].tsx draws them */
.dv-app { width: min(100%, 260px); }
.dv-app__label {
  margin-bottom: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.dv-app__screen {
  padding: 8px;
  border-radius: 20px;
  border: 1px solid #2e3138;
  background: #16181d;
  box-shadow: 0 24px 50px -30px rgba(15, 23, 42, 0.35);
}
.dv-map {
  overflow: hidden;
  border-radius: 13px;
  background: #0d0e11;
}
.dv-map svg {
  display: block;
  width: 100%;
  height: auto;
}
.dv-map__grid line {
  stroke: rgba(255, 255, 255, 0.04);
  stroke-width: 1;
}
.dv-map__roads path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 6;
  stroke-linecap: round;
}
.dv-map__pin path {
  stroke: rgba(0, 0, 0, 0.4);
  stroke-width: 0.8;
}
.dv-map__pin--shop path { fill: #ff453a; }
.dv-map__pin--drop path { fill: #4cc283; }
.dv-map__pin circle { fill: #fff; }
/* black in a white ring, as the app draws a rider */
.dv-map__rider {
  fill: #16181d;
  stroke: #fff;
  stroke-width: 2.2;
}
.dv-map__label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  fill: #b6bac4;
  paint-order: stroke;
  stroke: #0d0e11;
  stroke-width: 3px;
  stroke-linejoin: round;
}
.dv-app__caption {
  margin-top: 0.45rem;
  padding-inline: 0.2rem;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: #9aa1ad;
}

.dv-note {
  margin-top: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

/* the bar fills to its step once the figure itself has risen in */
.hero-booted .dv-track__fill {
  animation: dv-fill 0.9s var(--ease-out) 1.05s both;
}
@keyframes dv-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* "FR / EN" is the widest figure in the record strip: it stays on one line
   and gives up a little size where four columns are narrow */
.dv-langs { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1099px) {
  .dv-langs { font-size: clamp(1.9rem, 0.6rem + 2.6vw, 2.6rem); }
}

/* ---- FIG.02 · one order ---------------------------------------------------
   The .archmap wires and nodes come from styles.css and are visible without
   JS. Added here: the dotted ties down to the database, push back up to the
   customer, and one long pulse path that follows the order. */
.dv-how {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}
.dv-how .pipeline { margin: 0; }

.dv-flow .pulse {
  fill: none;
  stroke-dasharray: 0.05 0.95;
  animation-duration: 9s;
}
.dv-ties line,
.dv-ties path {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
.dv-ties .dv-push {
  stroke: var(--blue-500);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* the legend carries each step in words the figure has no room for */
.dv-legend {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border);
}
.dv-legend li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  column-gap: var(--space-xs);
  padding-block: 0.8rem;
  border-bottom: 1px solid var(--border);
}
.dv-legend__num {
  grid-row: span 2;
  padding-top: 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.dv-legend h3 {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.dv-legend p {
  margin-top: 0.2rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-dim);
}

/* ---- Card grids: five roles, three city cards ----------------------------- */
@media (min-width: 640px) and (max-width: 999px) {
  .dv-roles > :last-child,
  .dv-city > :last-child { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .dv-how {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--space-xl);
  }
  .dv-roles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .dv-roles > * { grid-column: span 2; }
  .dv-roles > :nth-child(n + 4) { grid-column: span 3; }
  .dv-city { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Reduced motion ------------------------------------------------------
   styles.css stops the shared hero, wire and pulse motion, but only shortens
   durations, so a delayed fill would still sit empty first. This selector
   matches the animated one exactly: the bar is filled from the start. */
@media (prefers-reduced-motion: reduce) {
  .hero-booted .dv-track__fill {
    animation: none;
    transform: none;
  }
}