/* Unit inspections (js/inspection.js): the status card, the report and the booking sheet. Built only from the portal's tokens
   and shared pieces (design.css, job.css, order.css, money.css); every class here starts in-. Loads after order.css. */

/* ------------------------------------------------------------------ the block on the job page */
.in-block { display: block; min-width: 0; }
.in-block > .ds-sec { max-width: 760px; }
.in-lead { margin: 0 0 16px; font-size: 16px; line-height: 24px; }
.in-foot { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.in-foot .btn { min-height: 52px; font-size: 16px; }
.in-gap { margin-top: 12px; }
.in-none { margin: 0; padding: 16px; border-radius: var(--r-card); background: var(--mist); color: var(--steel); }

/* The status card: the job page's detail rows, then the buttons. */
.in-status .jp-dl { padding-top: 4px; }
.in-btns { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px 16px; }
.in-find .in-btns { padding: 4px 0 0; }
.in-btns .btn { min-height: 44px; }
.in-status .in-btns { border-top: 1px solid var(--concrete); }
.in-late { margin: 0; padding: 12px 16px 16px; border-top: 1px solid var(--concrete); font-size: 14px; line-height: 20px; color: var(--steel); }
.in-notice { padding: 16px; border-top: 1px solid var(--concrete); background: var(--mist); }
.in-notice h3 { margin: 0 0 12px; font-size: 17px; line-height: 22px; }
.in-notice .field:last-of-type { margin-bottom: 16px; }

/* ------------------------------------------------------------------ the report */
.in-top { padding: 16px; }
.in-sub-line { margin: 0 0 12px; font-size: 16px; line-height: 22px; font-weight: 600; overflow-wrap: anywhere; }
.in-follow { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-ctl); background: var(--wait-tint); color: var(--wait); font-weight: 600; }
.in-dis p { margin: 0 0 8px; font-size: 14px; line-height: 20px; color: var(--steel); }
.in-dis strong { color: var(--ink); font-weight: 600; }
.in-summary { margin: 16px 0 4px; padding-top: 14px; border-top: 1px solid var(--concrete); font-size: 17px; line-height: 24px; font-weight: 500; }
.in-counts { margin: 0; font: 700 18px/24px var(--num); letter-spacing: .02em; color: var(--steel); }
.in-hint { margin: -4px 0 12px; font-size: 14px; line-height: 20px; color: var(--steel); }
.in-finds { display: flex; flex-direction: column; gap: 12px; }

/* A finding: a number, the area and title, its photos, the sentence, the price, the buttons. */
.in-find { padding: 16px; transition: border-color var(--t-fast) var(--ease); }
.in-find.picked { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.in-find-top { display: flex; align-items: flex-start; gap: 12px; }
.in-box { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; margin: -10px 0 -10px -12px; cursor: pointer; }
.in-box input { width: 22px; height: 22px; margin: 0; accent-color: var(--ink); cursor: pointer; }
.in-num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--ink); color: var(--white); font: 700 18px/1 var(--num); }
.in-find-h { flex: 1; min-width: 0; }
.in-area { font-size: 14px; line-height: 20px; color: var(--steel); }
.in-find-h h3 { margin: 0; font-size: 18px; line-height: 24px; font-weight: 600; overflow-wrap: anywhere; }
.in-sentence { margin: 12px 0 0; font-size: 15px; line-height: 22px; }
.in-price { margin-top: 12px; font: 700 28px/30px var(--num); letter-spacing: .005em; }
.in-ref { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--r-ctl); background: var(--mist); font-size: 15px; line-height: 22px; }
.in-ran { margin: 12px 0 0; font-weight: 600; color: var(--stop); }
.in-state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.in-joblink { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }
.in-find .in-btns { margin-top: 12px; }
.in-find.st-declined .in-find-h h3, .in-find.st-declined .in-sentence { color: var(--steel); }

.in-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.in-thumb { width: 84px; height: 84px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--mist); cursor: pointer;
  transition: transform var(--t-fast) var(--ease); }
.in-thumb:active { transform: scale(.98); }
.in-thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) { .in-thumb { width: 104px; height: 104px; } }

.in-tier-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: 12px; padding: 14px 16px; border-radius: var(--r-card);
  background: var(--mist); font-size: 15px; line-height: 22px; }
.in-tier-bar b { font: 600 17px/22px var(--font); letter-spacing: 0; font-variant-numeric: tabular-nums; }      /* quiet money (slice 6) */

.in-alarm { align-items: center; }
.in-alarm .in-thumbs { margin-top: 8px; }
.in-room { padding: 16px; }
.in-room h3 { margin: 0; font-size: 17px; line-height: 22px; font-weight: 600; }
.in-room .in-sentence { margin-top: 6px; }
.in-read { display: grid; gap: 4px; margin: 12px 0 0; }
.in-read div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 20px; }
.in-read dt { color: var(--steel); }
.in-read dd { margin: 0; font-weight: 600; }
.in-nc { margin: 2px 0 0; font-size: 14px; line-height: 20px; color: var(--steel); }
.in-end { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--sec-gap); }
.in-end .btn { min-height: 48px; }

/* The ticked items: one bar, pinned over the tab bar on a phone. */
.in-selbar { position: sticky; z-index: 6; bottom: calc(var(--tabs) + env(safe-area-inset-bottom)); display: flex; gap: 8px; margin: 0 calc(-1 * var(--pad));
  padding: 12px var(--pad); background: rgba(255, 255, 255, .96); border-top: 1px solid var(--concrete); }
.in-selbar[hidden] { display: none; }
.in-selbar .btn { min-height: 48px; }
.in-selbar .btn-primary { flex: 1; }
@media (min-width: 1024px) { .in-selbar { bottom: 0; margin: 0; border: 1px solid var(--concrete); border-radius: var(--r-card); max-width: 760px; box-shadow: var(--shadow-sheet); } }

/* ------------------------------------------------------------------ times: a day, then the parts of that day */
.in-times .in-sub { margin: 16px 0 8px; font-size: 14px; line-height: 20px; font-weight: 600; }
.in-days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.in-day { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 64px; min-height: 56px;
  padding: 4px 8px; border: 1px solid var(--concrete); border-radius: var(--r-ctl); background: var(--white); color: var(--ink); cursor: pointer;
  transition: background var(--t-fast) var(--ease); }
.in-day:hover { background: var(--mist); }
.in-day .wd { font-size: 13px; line-height: 16px; color: var(--steel); }
.in-day .md { font-size: 15px; line-height: 20px; font-weight: 600; }
.in-day[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.in-day[aria-pressed="true"] .wd { color: var(--on-graphite); }
.in-day.has::after { content: ""; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.in-parts { display: flex; flex-wrap: wrap; gap: 8px; }
.in-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--concrete); border-radius: var(--r-ctl);
  background: var(--white); color: var(--ink); font: 500 15px/20px var(--font); cursor: pointer; text-align: left;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.in-chip:hover { background: var(--mist); }
.in-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.in-picks { list-style: none; margin: 16px 0 0; padding: 0; border: 1px solid var(--concrete); border-radius: var(--r-card); overflow: hidden; }
.in-picks li { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 4px 4px 4px 14px; border-top: 1px solid var(--concrete); font-weight: 500; }
.in-picks li:first-child { border-top: 0; }
.in-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--steel); cursor: pointer; }
.in-x:hover { background: var(--mist); color: var(--ink); }
.in-count { margin: 8px 0 0; font-size: 14px; line-height: 20px; color: var(--steel); }

/* ------------------------------------------------------------------ the booking sheet (it wears the order sheet's frame) */
.insp-sheet .in-scope { margin-top: 24px; }
.insp-sheet .in-scope a { color: var(--ink); text-decoration: underline; }
.insp-sheet .in-ticks { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.insp-sheet .in-ticks .check { align-items: flex-start; padding: 4px 0; font-size: 15px; line-height: 22px; }
.insp-sheet .in-ticks .check input { margin-top: 1px; }
.insp-sheet .in-when { margin: 0 0 16px; padding: 14px 16px; border-radius: var(--r-card); background: var(--mist); font-size: 16px; line-height: 24px; font-weight: 600; overflow-wrap: anywhere; }
.insp-sheet .in-price-table { margin: 16px 0 0; }
.insp-sheet .in-price-table tr.total td { font-weight: 700; }
.insp-sheet .in-pay { margin: 16px 0 0; font-weight: 600; }
.insp-sheet .in-note { margin: 12px 0 0; font-size: 15px; line-height: 22px; }
.insp-sheet .in-rule { margin: 16px 0 0; padding: 14px 16px; border: 1px solid var(--concrete); border-radius: var(--r-card); font-size: 15px; line-height: 22px; }
.insp-sheet .in-terms { margin: 8px 0 0; padding-left: 20px; font-size: 14px; line-height: 20px; color: var(--steel); }
.insp-sheet .in-terms li + li { margin-top: 4px; }
.insp-sheet .in-agree { margin-top: 16px; }
.insp-sheet .in-agree + .error { margin-top: 4px; }
.insp-sheet .in-lead { font-size: 17px; line-height: 24px; font-weight: 500; }

/* The three stage bar the cover card draws for an inspection. */
.phases.in-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.insp-sheet .o-block .row-fields + .field, .insp-sheet .o-block .field + .check, .insp-sheet .o-block .check + .muted { margin-top: 16px; }
.insp-sheet .o-block .field + .field { margin-top: 16px; }
/* The choice rows clip their ring: draw it inside. */
html.kbd .insp-sheet .choice:focus-visible, html.kbd .in-picks .in-x:focus-visible { outline-offset: -3px; }

/* A part of the day that is not offered, and the notes the sheets show. */
.in-chip:disabled { background: var(--mist); border-color: var(--mist); color: #8A929B; cursor: default; }
.in-note { margin: 12px 0 0; font-size: 15px; line-height: 22px; }
.in-changed { padding: 10px 12px; border-radius: var(--r-ctl); background: var(--wait-tint); color: var(--wait); font-weight: 600; }
.insp-sheet .in-pricenote { margin: 16px 0 0; padding: 10px 12px; border-radius: var(--r-ctl); background: var(--wait-tint); color: var(--wait); font-weight: 600; outline: none; }
.insp-sheet .ph-fail { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 4px; text-align: center; font-size: 13px; line-height: 16px; color: var(--stop); }
.insp-sheet .in-tenant .check { margin-top: 12px; }

/* the Inspection choice on the Order a repair sheet (order.js) */
.order-sheet .o-block.o-inspect { margin-top: 0; margin-bottom: 16px; }
.order-sheet .o-inspect p { margin: 8px 0 0; }

/* ================================================================ look v2 (SPEC 7.15, 7.10): the booking (its sheet is the
   order's v2 flow), the inspection's body on the job page and the report. Rows on hairlines, never cards (rule 1);
   orange only for Book the inspection and Approve (rule 3); the picked finding marked by an ink edge. */
.v2 .in-none, .v2 .in-notice, .v2 .in-ref, .v2 .in-follow, .v2.insp-sheet .in-when, .v2.insp-sheet .in-rule {
  padding: 12px 0; border: 0; border-top: 1px solid var(--v-hair); border-radius: 0; background: none; box-shadow: none; color: var(--v-ink-2); }
.v2 .in-follow { color: var(--v-ink); box-shadow: inset 2px 0 0 var(--v-amber); padding-left: 12px; border-top: 0; }
.v2 .s-insp .ds-card { padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
.v2 .in-find { padding: 16px 0; border: 0; border-bottom: 1px solid var(--v-hair); border-radius: 0; background: none; }
.v2 .in-find.picked { border-color: var(--v-hair); box-shadow: inset 2px 0 0 var(--v-ink); padding-left: 12px; }
.v2 .in-num { background: var(--v-fill); color: var(--v-ink); }
.v2 .in-thumb { border-radius: var(--v-r-ctl); background: var(--v-fill); }
.v2 .in-tier-bar { padding: 14px 0; border-radius: 0; background: none; border-top: 1px solid var(--v-ink); }
.v2 .in-summary, .v2 .in-late { border-top-color: var(--v-hair); color: var(--v-ink-2); }
.v2 .in-selbar { border-top-color: var(--v-hair); }
@media (min-width: 1024px) { .v2 .in-selbar { border: 0; border-top: 1px solid var(--v-hair); border-radius: 0; box-shadow: none; } }
.v2 .in-day, .v2 .in-chip { border: 0; border-radius: var(--v-r-ctl); background: var(--v-white); box-shadow: inset 0 0 0 1px var(--v-hair-2); color: var(--v-ink); }
.v2 .in-day[aria-pressed="true"], .v2 .in-chip[aria-pressed="true"] { background: var(--v-white); color: var(--v-ink); box-shadow: inset 0 0 0 2px var(--v-ink); }
.v2 .in-day.has::after { background: var(--v-ink); }          /* a day with openings: an ink dot, never orange (rule 3) */
.v2 .in-chip:disabled { background: var(--v-fill); box-shadow: none; color: var(--v-soft); }
.v2 .in-picks { border: 0; border-top: 1px solid var(--v-hair); border-radius: 0; }
.v2 .in-picks li { border-top: 0; border-bottom: 1px solid var(--v-hair); padding-left: 0; }
.v2 .s-insp .btn, .v2 .in-selbar .btn { min-height: 44px; border: 0; border-radius: var(--v-r-ctl); background: var(--v-white); color: var(--v-ink);
  box-shadow: inset 0 0 0 1px var(--v-hair-2); font-weight: 600; }
.v2 .s-insp .btn-primary, .v2 .in-selbar .btn-primary { background: var(--v-orange); color: var(--v-on-orange); box-shadow: none; }
.v2 .s-insp .btn-ink, .v2 .in-selbar .btn-ink { background: var(--v-ink); color: var(--v-white); box-shadow: none; }
.v2 .s-insp .jrows .jrow { padding: 14px 0; border: 0; border-bottom: 1px solid var(--v-hair); background: none; }
/* review fixes (Codex S7): no text under 14 px in the v2 booking; the weekday letters are captions */
.v2 .insp-sheet .ph-fail, .v2.insp-sheet .ph-fail { font-size: 14px; line-height: 20px; }
.v2.insp-sheet .in-day .wd { font-size: 13px; line-height: 18px; }
/* review fixes (Opus S7) */
.v2 .s-insp .in-find, .v2 .s-insp .in-room { padding: 16px 0; border-bottom: 1px solid var(--v-hair); }
.v2 .s-insp .in-find.picked { box-shadow: inset 2px 0 0 var(--v-ink); padding-left: 12px; }
.v2 .in-day[aria-pressed="true"] .wd { color: var(--v-mute); }
.v2 .in-price, .v2 .in-counts { font: 600 16px/22px var(--v-sans); letter-spacing: 0; }
.v2.insp-sheet .mo-lines td, .v2.insp-sheet .mo-lines th { font: 500 15px/21px var(--v-sans); letter-spacing: 0; }
.v2.insp-sheet .mo-lines td:last-child { font-weight: 600; }
.v2 .in-days { padding: 4px; margin: -4px; }
.v2.insp-sheet .o-sub-h + :not(.choices) { margin-top: 12px; }
.v2 .in-hint { margin: 12px 0; }
.v2 .s-insp .jp-dl, .v2 .s-insp .in-btns, .v2 .s-insp .in-late { padding-left: 0; padding-right: 0; }
.v2 .in-notice h3 { font-weight: 600; }
.v2 .in-joblink { color: var(--v-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--v-hair-2); text-underline-offset: 3px; }
.v2.insp-sheet .in-terms { list-style: disc; }
.v2.insp-sheet .in-terms ~ .muted { margin-top: 12px; }

/* ================================================================ Book and pay (design pass board 6b): the price lines at the
   size of their words, the saved card it goes to, Pay with a different method, the black Book and pay with its total, and
   under it "No fee on a debit card." Charging is a line with an amber dot; declined is one quiet line with a red dot. */
.v2.insp-sheet .in-lines { margin: 16px 0 0; border-top: 1px solid var(--v-hair); }
.v2.insp-sheet .in-line { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0 12px;
  border-bottom: 1px solid var(--v-hair); font-size: 15px; line-height: 21px; font-weight: 500; color: var(--v-ink); }
.v2.insp-sheet .in-line > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.v2.insp-sheet .in-line.in-total { font-weight: 700; border-bottom: 0; }
.v2.insp-sheet .in-line.in-total .v-amount { font-weight: 700; }
.v2.insp-sheet .in-paywith { display: flex; align-items: center; gap: 14px; min-height: 60px; margin-top: 12px; padding: 10px 14px;
  border-radius: var(--v-r-ctl); box-shadow: inset 0 0 0 1px var(--v-field); }
.v2.insp-sheet .in-paywith-m { flex: 1; min-width: 0; }
.v2.insp-sheet .in-paywith-t { font-size: 15px; line-height: 21px; font-weight: 600; color: var(--v-ink); overflow-wrap: anywhere; }
.v2.insp-sheet .in-paywith-s { font-size: 14px; line-height: 20px; color: var(--v-mute); }
.v2.insp-sheet .in-change { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; font: inherit;
  font-size: 14px; font-weight: 600; color: var(--v-ink); text-decoration: underline; text-decoration-color: var(--v-hair-2); text-underline-offset: 3px; cursor: pointer; }
.v2.insp-sheet .in-change:hover { text-decoration-color: var(--v-ink); }
.v2.insp-sheet .in-methods { margin-top: 4px; }
.v2.insp-sheet .in-pay { font-size: 15px; line-height: 22px; font-weight: 500; color: var(--v-ink-2); }
.v2.insp-sheet .in-paywith + .in-pay, .v2.insp-sheet .in-lines + .in-pay { margin-top: 12px; }
.v2.insp-sheet .in-lines ~ .card.sums { margin-top: 24px; }
.v2.insp-sheet .in-foot-fine { flex: 1 1 100%; margin: 0; font-size: 14px; line-height: 20px; color: var(--v-mute); text-align: center; }
.v2.insp-sheet .in-foot-fine[hidden] { display: none; }
.v2.insp-sheet .order-foot:has(.in-foot-fine:not([hidden])) { flex-wrap: wrap; row-gap: 8px; }
.v2.insp-sheet .in-pstate { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; font-size: 16px; line-height: 22px; font-weight: 500; color: var(--v-ink); }
.v2.insp-sheet .in-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.v2.insp-sheet .in-dot-wait { background: var(--v-amber); }
.v2.insp-sheet .in-fail { margin: 8px 0 0; padding: 10px 12px; border-radius: var(--v-r-ctl); background: var(--v-fill); }
.v2.insp-sheet .in-fail-t { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 15px; line-height: 21px; font-weight: 500; color: var(--v-ink); }
.v2.insp-sheet .in-fail-t::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--v-red); transform: translateY(-1px); }
.v2.insp-sheet .in-fail-s { margin: 4px 0 0 18px; font-size: 14px; line-height: 20px; color: var(--v-mute); }
html.kbd .v2.insp-sheet .in-change:focus-visible { outline: 2px solid var(--v-ink); outline-offset: 2px; }

/* What's included (Nov 6): the sheet reads on a phone first. The price, the window and the report time sit in one box at the top, then
   short sections, each a heading and a few short lines. The card's and the booking sheet's links keep a 44 px hit area. */
.in-inc { font-size: 16px; line-height: 24px; }
.in-inc-facts { margin: 0 0 8px; padding: 14px 16px; border: 1px solid var(--concrete); border-radius: 12px; background: var(--mist); }
.in-inc-facts dt { margin: 10px 0 0; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--steel, #5b5b5b); }
.in-inc-facts dt:first-child { margin-top: 0; }
.in-inc-facts dd { margin: 0; font-size: 17px; line-height: 24px; font-weight: 500; }
.in-inc-h { margin: 22px 0 6px; font-size: 17px; line-height: 22px; font-weight: 600; }
.in-inc-p { margin: 0 0 10px; }
.in-inc-list { margin: 0; padding-left: 20px; list-style: disc; }
.in-inc-list li { margin: 0 0 8px; }
.in-inc-link { display: inline-flex; align-items: center; min-height: 44px; margin: -6px 0 2px; font-size: 15px; }
.hm-insp-more { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; font-size: 14px; }