/* Overview · C — layout only (colours, radii, shadows, type come from dash.css) */
.ovc, .ovc-main, .ovc-col { display: grid; gap: 16px; }
.ovc-main { align-items: start; }
.ovc-col { align-content: start; min-width: 0; }
.ovc-main > .box { min-width: 0; }

/* action tiles: 2 × 2 on phones, one row from tablet up */
.ovc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ovc-tiles.is-3 > :last-child { grid-column: 1 / -1; }
.ovc-tiles .atile { min-height: 116px; padding-right: 40px; }

/* to-do list */
.ovc-att { display: grid; gap: 10px; }
.ovc-att .pf-ic { align-self: start; }
.ovc-more { margin-top: 12px; }

/* running now: the bar spans the whole row, so every bar has the same length whatever the numbers beside it */
.ovc-rr { row-gap: 8px; }
.ovc-rr-l { display: contents; }
.ovc-rr .row-r { min-width: 72px; }
.ovc-rr .pbar { grid-column: 1 / -1; grid-row: 2; }

/* account in numbers: one box, four figures with hairline dividers (2 × 2 on phones) */
.ovc-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ovc-stats > .kpi:nth-child(2n) { border-left: 1px solid var(--line); }
.ovc-stats > .kpi:nth-child(n+3) { border-top: 1px solid var(--line); }
.ovc-stats .kpi-s .box-link { font-size: inherit; }

/* recent orders */
.ovc-ro { grid-template-columns: minmax(0, 1fr) auto auto; }
.ovc-ro:last-child { border-bottom: 0; }
.ovc-ro-l { min-width: 0; }
.ovc-ro-l:hover .pf-t b { color: var(--orange); }
.ovc-again-gap { width: 36px; }

/* delivered so far */
.ovc-del { display: grid; gap: 18px; }
.ovc-del-row { display: grid; gap: 8px; }
.ovc-del-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ovc-del-h b { font-size: 14.5px; font-weight: 800; color: var(--ink); }
.ovc-del-v { font-size: 18px; font-weight: 850; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ovc-del-pf { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.ovc-del-pf > span { display: inline-flex; align-items: center; gap: 6px; }
.ovc-del-pf img, .ovc-del-pf .sprite { width: 14px; height: 14px; }

/* new account */
.ovc-start { display: grid; gap: 16px; }

/* phones: 44px touch targets; reorder shrinks to an icon button so the service stays readable */
@media (max-width: 759px) {
  .ovc .dbtn-sm { min-height: 44px; }
  .ovc-again { width: 44px; padding: 0; }
  .ovc-again-l { display: none; }
}

@media (min-width: 760px) {
  .ovc-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ovc-tiles.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ovc-tiles.is-3 > :last-child { grid-column: auto; }
}
@media (min-width: 760px) {
  .ovc-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ovc-stats > .kpi:nth-child(n+3) { border-top: 0; }
  .ovc-stats > .kpi + .kpi { border-left: 1px solid var(--line); }
}
@media (max-width: 759px) { .ovc-ro .row-r small { display: none; } .ovc-again-gap { width: 44px; } .ovc-ro .pf-t small { white-space: normal; } }
@media (min-width: 1020px) { .ovc, .ovc-main, .ovc-col { gap: 20px; } }
@media (min-width: 1240px) {
  .ovc-main { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
/* phones: recent orders show the status under the service (the text no longer squeezes into a narrow column) */
@media (max-width: 759px) {
  .ovc-ro { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l again" "s again"; row-gap: 6px; }
  .ovc-ro-l { grid-area: l; display: flex; align-items: center; min-height: 44px; }
  .ovc-ro .row-r { grid-area: s; justify-self: start; margin-left: 41px; }  /* under the text: the platform icon (32) plus its gap (9) */
  .ovc-ro .ovc-again { grid-area: again; }
  .ovc-ro .ovc-again-gap { display: none; }
}