/* THE CREW PAGE, V1 (Chase, 25 Oct 2026, night): one card at a time, the shape of Home's
   Next-up deck; the photo tiles that are the camera (V3); the tick strip on the iPad (V2).
   Copied from prototypes/pages/index.html (section B), on the app's own tokens. Nothing here
   is fixed or floats: the deck sits in the page's flow (Sweep 2, T1). */

/* ---- the page: two columns from the iPad up (the day left, the notes and folds right) ---- */
@media (min-width: 768px) {
  main.kd-wide { max-width: 66rem; }
  .kd-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
  .kd-cols > .kd-col { min-width: 0; }
}

/* ---- the deck ---- */
/* Later and Take land on #crew-deck: its head clears the sticky black band, never hides under it. */
.kd-deck { margin-top: 1rem; scroll-margin-top: 4.5rem; }
/* From the iPad up the whole day fits beside the notes, so a jump to the job page's first
   card (#crew-next) leaves the job's title card, and the customer's name line in it, in view
   under the band: the card lands about 27rem down, not at the top with the name scrolled away
   (26 Oct leftovers). #crew-deck keeps its 4.5rem, so Later and Take land on the deck's head.
   On a phone the card itself is the first screen.
   After a Done the next step comes back marked data-entering, and then the step matters more
   than the name the crew just read. Since 30 Oct (D52) a step is the whole of its work (the
   finish photos with the leftovers and "We're done" are taller than an iPad's screen), so it
   lands with its head just under the band (6rem), and the crew reads down. */
@media (min-width: 768px) {
  #crew-next { scroll-margin-top: 27rem; }
  #crew-next[data-entering] { scroll-margin-top: 6rem; }
}
.kd-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }
.kd-lab { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--color-accent-strong, #92400e); }
.kd-counter { font-size: 13px; font-weight: 600; color: var(--color-muted, #6b6259); white-space: nowrap; }
.kd-prog { display: block; width: 100%; height: 4px; margin: 0 0 0.875rem; border: 0; border-radius: 2px; background: var(--color-line, #e6e1d8); overflow: hidden; appearance: none; -webkit-appearance: none; }
.kd-prog::-webkit-progress-bar { background: var(--color-line, #e6e1d8); border-radius: 2px; }
.kd-prog::-webkit-progress-value { background: var(--color-accent, #b45309); border-radius: 2px; }
.kd-prog::-moz-progress-bar { background: var(--color-accent, #b45309); border-radius: 2px; }

/* The stage clips sideways (clip, not hidden: nothing here becomes a scroll box, and the faded
   cards behind still show below): the card sliding in from the right made a phone's page wider
   than the phone, and the jump to #crew-next left the page shifted sideways with its left edge
   cut off. A phone that can't clip slides the card up instead (below). */
.kd-stage { position: relative; padding-bottom: 20px; overflow-x: clip; overflow-clip-margin: 8px; }
.kd-card { position: relative; z-index: 2; background: #fff; border: 1px solid var(--color-line, #e6e1d8); border-radius: 14px; box-shadow: 0 1px 2px rgb(31 26 20 / 0.05), 0 6px 16px -8px rgb(31 26 20 / 0.12); padding: 1.125rem; overflow: hidden; }
@media (min-width: 640px) { .kd-card { padding: 1.25rem 1.5rem; } }
.kd-behind { position: absolute; left: 0; right: 0; top: 0; bottom: 20px; border-radius: 14px; background: #fff; border: 1px solid var(--color-line, #e6e1d8); box-shadow: 0 1px 2px rgb(31 26 20 / 0.05); pointer-events: none; }
.kd-behind[data-depth="1"] { z-index: 1; transform: translateY(10px) scale(0.97); opacity: 0.55; }
.kd-behind[data-depth="2"] { z-index: 0; transform: translateY(20px) scale(0.94); opacity: 0.3; }
.kd-kind { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent-strong, #92400e); }
.kd-kind .kd-when { color: var(--color-muted, #6b6259); font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 13px; }
.kd-title { margin: 0.375rem 0 0.25rem; font-size: 1.25rem; line-height: 1.6rem; font-weight: 700; letter-spacing: -0.01em; color: var(--color-ink, #1f1a14); }
@media (min-width: 640px) { .kd-title { font-size: 1.375rem; line-height: 1.75rem; } }
.kd-title b { color: var(--color-accent-strong, #92400e); font-weight: 700; }
.kd-why { margin: 0; color: var(--color-muted, #6b6259); font-size: 15px; line-height: 1.45; }
.kd-small { margin: 0.5rem 0 0; color: var(--color-muted, #6b6259); font-size: 13px; }
.kd-body { margin-top: 0.75rem; }
/* The thumb row: the card's own buttons, at the top of the page on a phone, under the thumb. */
.kd-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1.125rem; }
.kd-acts > form, .kd-acts > a.kd-do, .kd-acts > button { flex: 1 1 12rem; }
.kd-acts .kd-do { width: 100%; min-height: 52px; font-size: 16px; }
.kd-acts .kd-quiet { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 0.875rem; font-weight: 600; font-size: 16px; color: var(--color-accent-strong, #92400e); }
.kd-acts .kd-quiet:hover { text-decoration: underline; }
/* The tip's Got it is a form (it saves), as quiet and as narrow as the links beside an orange button. */
.kd-acts > form.kd-tip-form { flex: 0 0 auto; }
.kd-acts > form.kd-tip-form .kd-quiet { background: none; border: 0; cursor: pointer; }
/* Wider than a phone the orange button is as wide as its words, with the quiet one beside it (the
   task-flow look: "We're here   Directions" on the iPad, 26 Oct), not a bar across the card. */
@media (min-width: 640px) {
  .kd-acts > form, .kd-acts > a.kd-do, .kd-acts > button { flex: 0 0 auto; }
  .kd-acts .kd-do { width: auto; padding-left: 1.25rem; padding-right: 1.25rem; }
}
/* Home's deck on the iPad: the card the width of the mockup's (46rem), the cards under it the page's. */
@media (min-width: 768px) {
  [data-crew-home-deck] { max-width: 46rem; }
}
.kd-card[data-entering] { animation: kd-enter 0.35s ease-out; }
@keyframes kd-enter { from { transform: translateX(60px) scale(0.97); opacity: 0; } }
.kd-card.kd-leave { animation: kd-leave 0.35s forwards; }
@keyframes kd-leave { to { transform: translateX(-110%) rotate(-3deg); opacity: 0; } }
@supports not (overflow: clip) {
  .kd-card[data-entering] { animation-name: kd-enter-up; }
  .kd-card.kd-leave { animation-name: kd-leave-up; }
}
@keyframes kd-enter-up { from { transform: translateY(12px) scale(0.97); opacity: 0; } }
@keyframes kd-leave-up { to { transform: translateY(-12px) scale(0.97); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .kd-card[data-entering], .kd-card.kd-leave { animation: none; } }

/* A card that is done: the tick drawn, green. */
.kd-done { display: flex; align-items: center; gap: 1rem; }
.kd-done .kd-ck { flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--color-good-soft, #e9f7ee); display: flex; align-items: center; justify-content: center; color: var(--color-good, #15803d); }
.kd-done .kd-ck svg { width: 30px; height: 30px; }
.kd-done .kd-dw { font-weight: 600; }
.kd-done .kd-dw small { display: block; font-weight: 400; color: var(--color-muted, #6b6259); font-size: 13px; }
/* Where the finished job stands now, in its own tone, under "Finished 4:40 pm". */
.kd-done .kd-dw small[data-tone] { margin-top: 0.125rem; font-size: 14px; font-weight: 600; }
.kd-done .kd-dw small[data-tone="good"] { color: var(--color-good-ink, #166534); }
.kd-done .kd-dw small[data-tone="accent"] { color: var(--color-accent-strong, #92400e); }
.kd-done .kd-dw small[data-tone="warn"] { color: var(--color-warn, #a16207); }
.kd-done .kd-dw small[data-tone="bad"] { color: var(--color-bad-ink, #991b1b); }
.kd-card.kd-signed { border-color: #bfe3c9; background: #f3fbf5; }

/* "7 more behind this one": a real <details>, so it opens with no script. */
.kd-rest { margin-top: 0.25rem; }
.kd-rest > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.375rem; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--color-muted, #6b6259); }
.kd-rest > summary::-webkit-details-marker { display: none; }
.kd-rest > summary .kd-chev { transition: transform 0.15s; }
.kd-rest[open] > summary .kd-chev { transform: rotate(180deg); }
/* Every crew fold's chevron (the site plan, the packing list, what the customer told us, Can't take it). */
details > summary .kd-chev { flex: none; color: var(--color-muted, #6b6259); transition: transform 0.15s; }
details[open] > summary .kd-chev { transform: rotate(180deg); }
.kd-rows { margin: 0.25rem 0 0; padding: 0; list-style: none; border: 1px solid var(--color-line, #e6e1d8); border-radius: var(--radius-ui, 0.625rem); background: rgb(255 255 255 / 0.85); overflow: hidden; }
.kd-rows > li { border-top: 1px solid var(--color-line, #e6e1d8); }
.kd-rows > li:first-child { border-top: 0; }
.kd-row > summary, .kd-line { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 52px; padding: 0.5rem 1rem; font-size: 15px; color: var(--color-muted, #6b6259); cursor: pointer; }
.kd-line { cursor: default; }
.kd-row > summary::-webkit-details-marker { display: none; }
.kd-row > summary b, .kd-line b { font-weight: 600; color: var(--color-ink, #1f1a14); }
.kd-row[data-state="done"] > summary b, .kd-line[data-state="done"] b { color: var(--color-good-ink, #166534); }
.kd-row .kd-row-body { padding: 0.25rem 1rem 1rem; border-top: 1px solid var(--color-line, #e6e1d8); background: #fff; }
.kd-mark { display: inline-flex; width: 1.25rem; justify-content: center; margin-right: 0.25rem; }

/* ---- the tick strip (V2), across the top of the deck on the iPad and wider ---- */
.kd-strip { display: none; }
@media (min-width: 768px) {
  .kd-strip { display: flex; align-items: flex-start; gap: 0; margin: 0 0 1rem; padding: 0; list-style: none; }
  .kd-strip > li { flex: 1; min-width: 0; position: relative; }
  .kd-strip > li::before { content: ""; position: absolute; top: 21px; left: 0; right: 0; height: 2px; background: var(--color-line-strong, #d3ccc0); }
  .kd-strip > li:first-child::before { left: 50%; }
  .kd-strip > li:last-child::before { right: 50%; }
  .kd-strip > li[data-state="done"]::before { background: var(--color-good, #15803d); }
  .kd-strip a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; min-height: 44px; padding: 0 0.125rem; text-align: center; color: var(--color-muted, #6b6259); font-size: 12px; line-height: 1.2; font-weight: 600; }
  .kd-strip .kd-dot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
  .kd-strip .kd-dot i { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--color-line-strong, #d3ccc0); background: #fff; color: #fff; }
  .kd-strip .kd-dot svg { width: 15px; height: 15px; }
  .kd-strip li[data-state="done"] .kd-dot i { background: var(--color-good, #15803d); border-color: var(--color-good, #15803d); }
  .kd-strip li[data-state="current"] .kd-dot i { border-color: var(--color-accent, #b45309); box-shadow: 0 0 0 4px var(--color-accent-soft, #fdf1e1); }
  .kd-strip li[data-state="current"] .kd-dot i::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent, #b45309); }
  .kd-strip li[data-state="current"] a { color: var(--color-accent-strong, #92400e); font-weight: 700; }
  .kd-strip li[data-state="done"] a { color: var(--color-ink, #1f1a14); }
}

/* ---- the photo tiles: each tile IS the camera (V3) ---- */
.kd-ptiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.875rem; }
.kd-ptiles[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.kd-ptiles[data-count="2"], .kd-ptiles[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kd-ptile-form { margin: 0; min-width: 0; }
.kd-ptile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; min-height: 104px; padding: 0.5rem; border: 2px dashed var(--color-line-strong, #d3ccc0); border-radius: var(--radius-ui, 0.625rem); background: #fff; color: var(--color-accent-strong, #92400e); font-size: 13px; font-weight: 700; line-height: 1.2; text-align: center; overflow: hidden; cursor: pointer; overflow-wrap: anywhere; }
.kd-ptile:focus-within { outline: 3px solid var(--color-accent, #b45309); outline-offset: 2px; }
.kd-ptile .kd-cam { width: 28px; height: 28px; }
.kd-ptile .kd-tap { font-weight: 600; color: var(--color-muted, #6b6259); font-size: 11px; }
.kd-ptile .kd-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kd-ptile .kd-shot[hidden] { display: none; }
.kd-ptile .kd-okm { position: absolute; top: 0.375rem; right: 0.375rem; z-index: 2; display: none; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--color-good, #15803d); color: #fff; }
.kd-ptile .kd-okm svg { width: 14px; height: 14px; }
.kd-ptile[data-tile="in"] { border-style: solid; border-color: var(--color-good, #15803d); background: var(--color-good-soft, #e9f7ee); color: var(--color-good-ink, #166534); }
.kd-ptile[data-tile="in"] .kd-okm { display: flex; }
.kd-ptile[data-tile="in"] .kd-tap { color: var(--color-good-ink, #166534); }
.kd-ptile[data-shown] { color: #fff; }
.kd-ptile[data-shown] .kd-lbl { position: relative; z-index: 1; align-self: flex-start; margin-top: auto; font-size: 12px; text-shadow: 0 1px 2px rgb(0 0 0 / 0.6); }
.kd-ptile[data-shown] .kd-cam, .kd-ptile[data-shown] .kd-tap { display: none; }
.kd-ptile[data-tile="sending"] { border-style: solid; border-color: var(--color-accent, #b45309); }
.kd-ptile[data-tile="failed"] { border-style: solid; border-color: var(--color-bad, #b91c1c); }
.kd-ptile .kd-say { position: relative; z-index: 1; font-size: 12px; font-weight: 700; }
.kd-ptile[data-shown] .kd-say { margin-top: 0.25rem; padding: 0.125rem 0.375rem; border-radius: 6px; background: rgb(31 26 20 / 0.7); color: #fff; }
.kd-ptile[data-tile="failed"] .kd-say { color: var(--color-bad-ink, #991b1b); }
.kd-ptile[data-shown][data-tile="failed"] .kd-say { color: #fff; background: var(--color-bad, #b91c1c); }
/* No script: the tile's own Send. Its words wrap ("Send this / photo") in a tile three across. */
.kd-ptile-send { margin-top: 0.25rem; width: 100%; min-height: 44px; padding: 0.375rem 0.375rem; white-space: normal; font-size: 14px; line-height: 1.2; overflow-wrap: anywhere; }
.kd-from-phone { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0.5rem; font-size: 15px; font-weight: 600; color: var(--color-accent-strong, #92400e); text-decoration: underline; cursor: pointer; }

/* ---- Home: the deck's queue, money and messages under it ---- */
.kd-home-card { margin-top: 0.75rem; }
.kd-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.kd-sec-head a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--color-accent-strong, #92400e); }
.kd-msg { display: flex; gap: 0.75rem; align-items: center; min-height: 56px; padding: 0.5rem 0; border-top: 1px solid var(--color-line, #e6e1d8); font-size: 15px; color: var(--color-ink, #1f1a14); }
.kd-msg:first-child { border-top: 0; }
.kd-msg .kd-who { font-weight: 700; white-space: nowrap; }
.kd-msg .kd-txt { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-muted, #6b6259); }
.kd-msg .kd-n { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 0.4rem; border-radius: 999px; background: var(--color-accent, #b45309); color: #fff; font-size: 13px; font-weight: 700; }
.kd-empty { padding: 1.5rem 1.25rem; text-align: center; }
.kd-empty .kd-title { margin-top: 0; }
/* Later: a word, but a whole thumb's width to hit (44 px or more). */
.kd-later { min-width: 44px; justify-content: center; padding: 0 0.75rem; margin-right: -0.75rem; }