/* Request 241C: customer details, vehicle check-in sheet and promise time inside the job workspace.
 * Uses the shop.css tokens only (loaded after it). Calm: one primary action per moment, hairlines, no new colours. */

/* ---------- customer panel ---------- */
.jc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.jc-head h2 { margin: 0; }
.jc-edit { min-height: 28px; font-size: 14px; }
.jc-v { text-align: right; min-width: 0; overflow-wrap: anywhere; }
.jc-none { color: var(--ink-3); }
.jc-addr { display: flex; flex-direction: column; align-items: flex-end; }
.panel-row .jc-v span, .panel-row .jc-addr span { color: var(--ink); }
.panel-row .jc-v .jc-none { color: var(--ink-3); }
.jc-skel { height: 36px; border-bottom: 0; border-radius: var(--r-s); }

/* ---------- forms ---------- */
.jc-form { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.jc-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.jc-field input, .jc-field select, .jc-field textarea { width: 100%; box-sizing: border-box; }
.jc-field textarea { min-height: 64px; resize: vertical; }
.jc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.jc-city { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.jc-city .jc-f-city { grid-column: 1 / -1; }   /* the aside is narrow: city on its own line, state + ZIP below */
.jc-addr-set { border: 0; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.jc-addr-set legend { font-size: 13px; font-weight: 600; color: var(--ink); padding: 0; margin-bottom: 6px; }
.jc-err { font-size: 12px; color: var(--red); min-height: 0; }
.jc-err:empty { display: none; }
.jc-field input[aria-invalid="true"], .jc-field select[aria-invalid="true"] { border-color: var(--red); }
.jc-saved { font-size: 12px; color: var(--ink-2); }
.jc-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.jc-fine { font-size: 13px; color: var(--ink-2); margin: 6px 0 0; }
.jc-pending .notice { margin-top: 4px; }

/* ---------- quick picks ---------- */
.jc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
button.jc-chip { min-height: 30px; padding: 0 12px; font-size: 13px; font-weight: 500; background: var(--fill); color: var(--ink); }
button.jc-chip:hover { background: var(--fill-hover); }

/* ---------- check-in sheet: a centred card on desktop, a bottom sheet on phones ---------- */
body.shop-on .main > .jc-sheet-wrap, .jc-sheet-wrap { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 24px;
  max-width: none; margin: 0; box-sizing: border-box; }
.jc-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.32); animation: jc-fade .18s ease-out; }
.jc-sheet { position: relative; width: min(440px, 100%); max-height: calc(100vh - 48px); overflow: auto; box-sizing: border-box;
  background: var(--surface); border-radius: var(--r-l); box-shadow: var(--shadow-pop); padding: 22px 22px 20px; animation: jc-rise .22s cubic-bezier(.2, .8, .2, 1); }
.jc-sheet h2 { font-size: 19px; margin: 0 0 2px; }
.jc-sheet-sub { color: var(--ink-2); font-size: 14px; margin: 0 0 14px; }
.jc-sheet .jc-chips { margin-top: 10px; }
.jc-sheet .jc-actions { margin-top: 14px; }
.jc-sheet .jc-actions button.primary { min-width: 120px; min-height: 40px; }
.jc-sheet-grab { display: none; }
@media (prefers-color-scheme: dark) { .jc-scrim { background: rgba(0, 0, 0, 0.58); } }
@keyframes jc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes jc-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .jc-scrim, .jc-sheet { animation: none; } }

/* ---------- promise time ---------- */
.jc-schedule { display: flex; flex-direction: column; gap: 14px; }
.jc-promise h3 { font-size: 15px; margin: 6px 0 10px; }
.jc-when { font: 600 26px/1.2 var(--font-display); letter-spacing: -0.02em; margin: 2px 0 4px; }
.jc-when.is-late { color: var(--red); }
.jc-when.is-none { font-size: 19px; color: var(--ink-3); font-weight: 500; }
.jc-late { color: var(--red); font-size: 14px; margin: 0; }
.jc-promise .jc-chips { margin-bottom: 10px; }
.jc-preview { font-size: 14px; color: var(--ink-2); min-height: 20px; margin: 4px 0 6px; }
.jc-preview strong { color: var(--ink); font-weight: 600; }
.jc-promise .jc-pair, .jc-promise .jc-field { max-width: 420px; }
.jc-promise .jc-preview { margin-top: 8px; }
.jc-hist { margin-top: 14px; }
.jc-hist .hist { margin-top: 8px; }

@media (max-width: 640px) {
  .flash.jc-flash { bottom: calc(76px + env(safe-area-inset-bottom)); white-space: nowrap; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; }
  body.shop-on .main > .jc-sheet-wrap, .jc-sheet-wrap { align-items: flex-end; padding: 0; }
  .jc-sheet { width: 100%; max-height: 88vh; border-radius: var(--r-l) var(--r-l) 0 0; padding: 10px 16px calc(18px + env(safe-area-inset-bottom)); }
  .jc-sheet-grab { display: block; width: 36px; height: 5px; border-radius: 3px; background: var(--hair-strong); margin: 0 auto 12px; }
  .jc-sheet .jc-actions { flex-direction: column-reverse; align-items: stretch; }
  .jc-sheet .jc-actions button { width: 100%; min-height: 44px; }
  .jc-pair { grid-template-columns: 1fr; }
  .jc-promise .jc-pair { grid-template-columns: 1fr 1fr; }
}