.r2-crew-photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.r2-crew-photo-grid .r2-crew-photo { aspect-ratio: 1; overflow: hidden; border-radius: 8px; }
.r2-crew-photo img { width: 100%; height: 100%; object-fit: cover; }
.r2-crew-viewer { max-width: 96vw; width: 72rem; max-height: 92dvh; padding: 1rem; border: 0; border-radius: 8px; }
.r2-crew-viewer::backdrop { background: rgb(0 0 0 / 0.65); }
.r2-crew-viewer .kf-crew-plan { max-height: 78dvh; overflow: auto; }
.r2-crew-viewer img { max-height: 78dvh; width: 100%; object-fit: contain; }
.r2-crew-viewer .relative { width: fit-content; margin-inline: auto; }
.r2-crew-viewer .relative > img { width: auto; height: auto; max-width: 100%; max-height: 78dvh; }
/* The crew bar at 320 px (10 Oct): the language button is a little narrower, and under 360 px the small "Crew · Cuadrilla" words step aside so nothing overlaps; the button then takes their place at the right. */
.r2-crew-lang { min-width: 4.5rem; padding-inline: 0.5rem; }
@media (min-width: 400px) { .r2-crew-lang { min-width: 5.5rem; padding-inline: 0.75rem; } }
@media (max-width: 359px) { .r2-crew-tag { display: none; } .r2-crew-lang-form { margin-left: auto; } }
/* The crew bar with the words "Sign out" in it (Sweep 2, T4): under 440 px the small tag steps aside too, so "Cerrar sesión" fits beside the language button at 375 px. */
@media (max-width: 439px) { body:has([data-crew-menu]) .r2-crew-tag { display: none; } body:has([data-crew-menu]) .r2-crew-lang-form { margin-left: auto; } }
/* The tour's offer card on a crew phone (10 Oct): it stacked three 56 px buttons under its words and filled the first screen. Here the answers sit on one wrapped row of 44 px buttons, so the crew's own jobs come up on the first screen. */
@media (max-width: 639px) {
  .r2-crew-tour .kf-tour-card .ui-card-body { padding: 0.75rem 1rem; }
  .r2-crew-tour .kf-tour-offer-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
  .r2-crew-tour .kf-tour-offer-actions .ui-btn { width: auto; flex: 1 1 auto; min-height: 44px; padding-inline: 0.75rem; }
}
/* The site plan, full screen (10 Oct): the whole screen, not a window in it. The picture is framed round the drawing and its words made big enough to read (SitePlans::Readable), so it fits the width; the crew can still slide it or pinch it bigger. */
.r2-crew-viewer-plan { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0.5rem; border-radius: 0; }
.r2-crew-viewer-plan .kf-crew-plan { height: calc(100dvh - 5.5rem); max-height: none; overflow: auto; touch-action: pan-x pan-y pinch-zoom; }
.r2-crew-plan-page .kf-crew-plan { overflow: auto; touch-action: pan-x pan-y pinch-zoom; }
/* The crew's job page in the new style (Chase, 13 Oct, Area 5): three tiles across, like the customer page's cards. Pay · Starts · Drive on an offer, Pay · Materials · 811 on a job taken; two or one when a job has less to say. 13 px at the smallest, 44 px+ to tap, and the words, not the colour, carry the meaning. */
.r2-crew-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.r2-crew-tiles[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r2-crew-tiles[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.r2-crew-tile { display: flex; min-width: 0; min-height: 4.75rem; flex-direction: column; gap: 0.125rem; padding: 0.625rem 0.75rem; border: 1px solid var(--color-line, #e6e1d8); border-radius: var(--radius-ui, 8px); background: var(--color-card, #fff); color: var(--color-ink, #1f1a14); box-shadow: var(--shadow-card, none); }
a.r2-crew-tile:hover { border-color: var(--color-line-strong, #d3ccc0); }
.r2-crew-tile-head { display: flex; align-items: center; justify-content: space-between; gap: 0.25rem; }
.r2-crew-tile-label { font-size: 0.8125rem; line-height: 1.125rem; font-weight: 600; color: var(--color-muted, #6b6259); }
.r2-crew-tile-value { font-size: 1.125rem; line-height: 1.375rem; font-weight: 700; overflow-wrap: anywhere; }
.r2-crew-tile-value[data-tone="good"] { color: var(--color-good-ink, #166534); }
.r2-crew-tile-value[data-tone="warn"] { color: var(--color-warn, #7a4a00); }
.r2-crew-tile-value[data-tone="bad"] { color: var(--color-bad-ink, #991b1b); }
.r2-crew-tile-sub { font-size: 0.8125rem; line-height: 1.125rem; color: var(--color-muted, #6b6259); overflow-wrap: anywhere; }
/* The offer's site plan, small: the whole drawing in a short box. Tapping it opens the full-screen plan. */
.r2-crew-plan-thumb { display: block; width: 100%; max-height: 11rem; object-fit: contain; }
/* A long figure ("$6,253.50", eight characters or more) is a size smaller, and never broken, so it stays on one line in a tile a third of a phone wide; one more size down from ten characters. */
.r2-crew-tile-value[data-long] { font-size: 0.9375rem; line-height: 1.25rem; white-space: nowrap; }
.r2-crew-tile-value[data-long="2"] { font-size: 0.875rem; }