/* Field-service components on top of ../shared/base.css */

/* service picker: 2-up tiles, icon + name + what it includes + price */
.svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.svc { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; min-height: 168px; text-align: start;
  background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-lg); }
.svc:active { background: var(--sunken); }
.svc-ico { width: 40px; height: 40px; border-radius: var(--r-md); background: var(--sunken); color: var(--ink); display: grid; place-items: center; margin-bottom: 6px; }
.svc .t-meta { flex: 1; }
.svc-price { font-size: 13.5px; font-weight: 600; color: var(--ink); }

/* annual contract: the business the owner actually wants */
.amc { padding: 16px; background: var(--ink); border-color: var(--ink); }
.amc .t-title { color: #fff; }
.amc .t-meta { color: #c9c5bc; }
.amc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.amc .t-label { color: #fff; }
.amc .btn-secondary { background: #fff; border-color: #fff; min-height: 44px; font-size: 14px; }

/* 4-step progress at the top of the request flow */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 0 0 18px; }
.steps span { height: 4px; border-radius: 4px; background: var(--hair); }
.steps span.on { background: var(--ink); }

.chips.wrap { flex-wrap: wrap; overflow: visible; }
.stepper { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 6px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-md); }
.stepper .iconbtn { border: 1px solid var(--hair-strong); }
.stepper .t-screen { min-width: 28px; text-align: center; }

.photo-pick { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; border: 1px dashed var(--hair-strong); border-radius: var(--r-md); background: var(--surface); cursor: pointer; }
.photo-pick:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.photo { display: flex; align-items: center; gap: 12px; }
.photo img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--hair); }

.loc-ok { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--success-soft); color: var(--success); }
.loc-ok .t-label { color: var(--success); }
.loc-ok .btn-quiet { color: var(--success); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.warn-text { color: var(--warn); }
.spin.dark { border-color: rgba(22,25,29,.2); border-top-color: var(--ink); }
.two .field { margin-top: 16px; }

/* job cards + progress bar (fill follows reading direction) */
.job { display: block; width: 100%; padding: 14px 16px; text-align: start; }
.job:active { background: var(--sunken); }
.job-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 2px; }
.bar { height: 4px; border-radius: 4px; background: var(--hair); margin-top: 12px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.fresh-card { border-color: var(--accent-line); background: var(--accent-soft); }

/* bill */
.bill { padding: 14px 16px; margin-top: 12px; }
.bill-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 14.5px; color: var(--ink); }
.bill-row + .bill-row { border-top: 1px solid var(--hair); }
.bill-row.total { border-top: 1px solid var(--ink); font-weight: 600; font-size: 16px; }

/* tracking: vertical stepper */
.track { list-style: none; margin: 18px 0; padding: 0; }
.track li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding-bottom: 18px; position: relative; color: var(--muted); }
.track li::before { content: ""; position: absolute; inset-inline-start: 13px; top: 26px; bottom: -2px; width: 2px; background: var(--hair); }
.track li:last-child::before { display: none; }
.track li.past::before { background: var(--ink); }
.track .dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--hair-strong); background: var(--canvas); display: grid; place-items: center; color: #fff; z-index: 1; }
.track li.past .dot { background: var(--ink); border-color: var(--ink); }
.track li.now .dot { background: var(--accent); border-color: var(--accent); }
.track li .t-label { color: var(--muted); font-weight: 500; }
.track li.past .t-label, .track li.now .t-label { color: var(--ink); }
.track li.now .t-label { font-weight: 600; }

.techcard { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.iconbtn.ring { border: 1px solid var(--hair-strong); }

/* office */
.stats.four { grid-template-columns: 1fr 1fr; }
.stats.four > div:nth-child(3) { border-inline-start: 0; }
.stats.four > div:nth-child(n+3) { border-top: 1px solid var(--hair); }
.btn.small { min-height: 44px; padding: 0 14px; font-size: 14px; }

/* technician */
.check .box { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--hair-strong); display: grid; place-items: center; flex: none; }
.check[aria-checked="true"] .box { background: var(--ink); border-color: var(--ink); color: #fff; }
.check[aria-checked="true"] .t-label { color: var(--muted); }
.mini-step { display: flex; align-items: center; gap: 4px; }
.mini-step .iconbtn { border: 1px solid var(--hair-strong); }
.mini-step .iconbtn[disabled] { opacity: .35; }
.mini-step .t-label { min-width: 20px; text-align: center; }
.dock-note { text-align: center; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
a.tel { color: inherit; text-decoration: none; }
.sign { position: relative; margin-top: 4px; }
.sign canvas { display: block; width: 100%; height: 180px; background: var(--surface); border: 1px dashed var(--hair-strong); border-radius: var(--r-md); touch-action: none; }
.sign .btn-quiet { position: absolute; top: 6px; inset-inline-end: 6px; }