/* The job page (design round, design/DIRECTION.md "A job page"): layout, photos, the thread, the folded details. The
   shared pieces (cover card, phase bar, history, who chips, section heads) are in design.css and are not restyled here. */

/* ------------------------------------------------------------------ the rules work.css held until the slice 1 tidy
   (2026-11-01): the Jobs list, the job page's calendar menu and the thread. They sit first so every rule below still
   draws over them as it did when they loaded from work.css. */
.jobs-list > .card { overflow: hidden; }
@media (max-width: 1023px) { .jobs-list > .card { border-left: 0; border-right: 0; border-radius: 0; margin: 0 calc(-1 * var(--pad)); } }

.empty-line { padding-top: var(--s5); }

/* the job and order page */
.back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--steel); font-weight: 500; }

.visits .visit + .visit { border-top: 1px solid var(--line); margin-top: var(--s4); padding-top: var(--s4); }
.visit { display: flex; flex-direction: column; gap: var(--s2); }
.cal-wrap { position: relative; display: inline-block; }
.cal-btn { min-height: 44px; }
.cal-menu { position: absolute; z-index: 20; top: 100%; left: 0; margin-top: 4px; min-width: 232px; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-sheet); overflow: hidden; }
.cal-menu a { display: flex; align-items: center; min-height: 44px; padding: 0 var(--s4); color: var(--ink); font-weight: 500; }
.cal-menu a + a { border-top: 1px solid var(--line); }
.cal-menu a:hover { background: var(--mist); text-decoration: none; }

.dl { margin: 0; }

/* the thread */
.msg { max-width: 88%; }
.msg-body { padding: 10px 12px; border-radius: var(--r-card); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-you { align-self: flex-end; }
.msg-you .msg-meta { text-align: right; }
.msg-you .msg-body { background: var(--ink); color: var(--white); }
.msg-them .msg-body { background: var(--mist); }
.msg-pending { opacity: .6; }
.composer { display: flex; gap: var(--s2); align-items: flex-end; }
.msg-in { min-height: 44px; height: 44px; max-height: 140px; resize: none; flex: 1; min-width: 0; }
.msg-cam { padding: 0; width: 44px; flex: none; }
.msg-send { flex: none; }

.jobpage { padding-top: 12px; }
.jp-back { display: none; }
.jp-cover { min-width: 0; }

/* Phone: one column, ordered the actions, Photos, Messages, History, Quote, Invoice, Documents, What you sent. jobs.js
   puts them in the DOM in that order and moves them into the two columns from 1024. */
.jp-grid { display: flex; flex-direction: column; }
.jp-grid .s-qa { margin: 12px 0 var(--sec-gap); }
.jobpage .qa { flex-wrap: wrap; overflow: visible; }

.jobpage .cal-menu { top: auto; bottom: 100%; margin: 0 0 6px; color: var(--ink); border-radius: var(--r-ctl); }
.jobpage .cal-menu a { color: var(--ink); text-decoration: none; }

/* Messages: a thread of bubbles, then the composer. */
.jp-msgs { padding: 16px; }
.jp-earlier { display: block; min-height: 44px; margin: -8px 0 4px; padding: 0; }
.jp-thread { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.jp-thread.open { max-height: 360px; overflow-y: auto; }
.jp-thread .msg { max-width: 86%; }
.jp-thread .msg-meta { margin-bottom: 4px; font-size: 14px; line-height: 20px; color: var(--steel); }
.jp-thread .msg-body { padding: 10px 14px; border-radius: 16px; font-size: 15px; line-height: 22px; }
.jp-thread .msg-you { align-self: flex-end; }
.jp-thread .msg-you .msg-meta { text-align: right; }
.jp-thread .msg-you .msg-body { background: var(--mist); color: var(--ink); border-bottom-right-radius: 6px; }
.jp-thread .msg-them .msg-body { background: var(--white); color: var(--ink); border: 1px solid var(--concrete); border-bottom-left-radius: 6px; }
.jp-thread .msg-pending { opacity: .6; }
.jp-composer .msg-cam { border-radius: var(--r-ctl); }
.jp-note { margin: 12px 0 0; font-size: 14px; line-height: 20px; color: var(--steel); }
.jp-note a { color: inherit; }
.jp-note .link { display: block; min-height: 44px; color: var(--ink); font-weight: 600; text-align: left; }

/* History sits in a card; its rows come from the shared list. */
.jp-hist { padding: 4px 16px; }
.jp-hist .hist-more { margin-bottom: 4px; }

/* What you sent: a native fold, closed to begin with. */
.jp-fold { overflow: hidden; }
.jp-sum { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 16px;
  font-weight: 600; cursor: pointer; list-style: none; }
.jp-sum::-webkit-details-marker { display: none; }
.jp-sum .icon { color: var(--steel); transition: transform var(--t-fast) var(--ease); }
.jp-fold[open] .jp-sum .icon { transform: rotate(180deg); }
.jp-fold .when-open, .jp-fold[open] .when-closed { display: none; }
.jp-fold[open] .when-open { display: inline; }
.jp-dl { margin: 0; padding: 0 16px 4px; }
.jp-dl-row { padding: 12px 0; border-top: 1px solid var(--concrete); }
.jp-dl-row dt { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--steel); }
.jp-dl-row dd { margin: 2px 0 0; overflow-wrap: anywhere; }
@media (min-width: 640px) {
  .jp-dl-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; }
  .jp-dl-row dd { margin: 0; }
}

/* 1024 and up: the cover spans the column; under it Photos, History, Documents and What you sent on the left, the
   actions, Quote, Invoice and Messages on the right. */
@media (min-width: 1024px) {
  .jobpage { padding-top: 24px; }
  .jp-back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: 0 0 8px -4px; padding: 0 4px;
    color: var(--steel); font-weight: 500; text-decoration: none; }
  .jp-back:hover { color: var(--ink); text-decoration: none; }
  .jp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; column-gap: 32px; align-items: start; margin-top: 32px; }
  .jp-main, .jp-side { display: block; min-width: 0; }
  /* The right column scrolls with the page: held sticky it clipped Messages and hid the composer in a second scroll
     area on a real thread (Opus design 5). */
  .jp-grid .s-qa { margin: 0 0 var(--sec-gap); }
  .jp-hist { padding: 4px 20px; }
  .jp-thread.open { max-height: 320px; }

}

/* ================================================================ look v2: the Jobs list and the job page (SPEC 7.8 to 7.11)
   The roots are .v2.jl-v2 and .v2.jp-v2. One column to 1279; from 1280 the job's two columns (the work on the left, the
   decision and the thread on the right). The old pieces still drawn here (the filter chips, the search, the thread, the
   fold, the calendar menu) take the v2 look under these roots. */
.v2.jl-v2, .v2.jp-v2 { padding: 8px var(--v-gut) calc(var(--v-tabs) + 32px); max-width: var(--v-content); }
@media (min-width: 1024px) { .v2.jl-v2, .v2.jp-v2 { padding: 28px 48px 80px; } }

/* the list: text tabs, a search, rows */
.v2.jl-v2 .ls-title { font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -.3px; margin-bottom: 8px; }
.v2.jl-v2 .jl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0 22px; border-bottom: 1px solid var(--v-hair); }
.v2.jl-v2 .chips { display: flex; gap: 22px; padding: 0; overflow-x: auto; }
.v2.jl-v2 .pick { min-height: 44px; min-width: 44px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: inset 0 -2px 0 transparent;
  font-size: 15px; line-height: 20px; font-weight: 600; color: var(--v-mute); white-space: nowrap; }
.v2.jl-v2 .pick[aria-pressed="true"] { color: var(--v-ink); box-shadow: inset 0 -2px 0 var(--v-ink); }
.v2.jl-v2 .pick .n { margin-left: 6px; font-weight: 500; color: var(--v-mute); }
.v2.jl-v2 .jl-toggle { margin-left: auto; min-width: 44px; min-height: 44px; border: 0; background: none; color: var(--v-ink-2); }
.v2.jl-v2 .jl-tools { flex-basis: 100%; }
.v2.jl-v2 .input, .v2.jl-v2 .select { width: 100%; min-height: 48px; padding: 0 14px; border: 0; border-radius: var(--v-r-ctl);
  background: var(--v-white); box-shadow: inset 0 0 0 1px var(--v-field); font-size: 16px; color: var(--v-ink); }
.v2.jl-v2 .input:focus, .v2.jl-v2 .select:focus { box-shadow: inset 0 0 0 2px var(--v-ink); }
.v2.jl-v2 .empty-line { padding: 18px 0; color: var(--v-ink-2); }

/* the job page: the head, the clock beside the words from 1024, the quiet actions */
.v2.jp-v2 .jp-back { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin-left: -6px; font-size: 16px;
  font-weight: 500; color: var(--v-mute); text-decoration: none; }
.v2.jp-v2 .jp-back:hover { color: var(--v-ink); }
.v2.jp-v2 .jp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-top: 6px; }
.v2.jp-v2 .jp-title { outline: none; }
.v2.jp-v2 .jp-place { margin-top: 4px; }
.v2.jp-v2 .jp-nowgrid { margin-top: 18px; }
.v2.jp-v2 .jp-clock { margin-bottom: 12px; }
.v2.jp-v2 .jp-sentence { margin-top: 8px; }
.v2.jp-v2 .jp-urgent { margin-top: 8px; color: var(--v-ink-2); }
.v2.jp-v2 .jp-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.v2.jp-v2 .jp-act .btn { min-height: 44px; border-radius: var(--v-r-ctl); }
@media (min-width: 1024px) {
  .v2.jp-v2 .jp-nowgrid.has-clock { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: center; }
  .v2.jp-v2 .jp-nowgrid.has-clock .jp-clock { grid-column: 2; grid-row: 1; margin: 0; }
  .v2.jp-v2 .jp-nowgrid.has-clock .jp-words { grid-column: 1; grid-row: 1; }
}
.v2.jp-v2 .jp-grid { display: block; margin-top: 8px; }
.v2.jp-v2 .qa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0 0; padding: 0; border: 0; background: none; }
@media (min-width: 1280px) {
  .v2.jp-v2 .jp-grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--v-side); column-gap: 56px; align-items: start; margin-top: 8px; }
}

/* photos, documents, the fold and the history */
.v2.jp-v2 .s-photos .v-pair, .v2.jp-v2 .s-photos > .jp-strip { margin-top: 14px; }
.v2.jp-v2 .jp-strip.after-pair { margin-top: 10px; }
.v2.jp-v2 .jp-doc-a { display: inline-flex; align-items: center; min-height: 44px; margin: -11px 0; color: var(--v-ink); text-decoration: underline; text-decoration-color: var(--v-hair-2); text-underline-offset: 3px; }
.v2.jp-v2 .jp-fold { border: 0; border-radius: 0; background: none; }
.v2.jp-v2 .jp-sum { min-height: 48px; padding: 0; border-bottom: 1px solid var(--v-hair); font-size: 15px; font-weight: 600; color: var(--v-ink); cursor: pointer; }
.v2.jp-v2 .jp-fold .v-facts { border-top: 0; }
.v2.jp-v2 .jp-hist .hist { margin-top: 6px; }

/* the thread and its composer (the thread is moved, never rebuilt, so a half typed message survives a poll) */
.v2.jp-v2 .jp-thread .msg-body { border-radius: 12px; }
.v2.jp-v2 .jp-thread .msg-you .msg-body { background: var(--v-fill); }
.v2.jp-v2 .jp-thread .msg-them .msg-body { border: 0; box-shadow: inset 0 0 0 1px var(--v-hair); }
.v2.jp-v2 .jp-thread .msg-meta { font-size: 14px; color: var(--v-mute); }
.v2.jp-v2 .textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 0; border-radius: var(--v-r-ctl); background: var(--v-white);
  box-shadow: inset 0 0 0 1px var(--v-field); font-size: 16px; line-height: 22px; color: var(--v-ink); }
.v2.jp-v2 .textarea:focus { box-shadow: inset 0 0 0 2px var(--v-ink); }
.v2.jp-v2 .btn { min-height: 44px; padding: 0 16px; 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-size: 15px; font-weight: 600; }
.v2.jp-v2 .btn-primary { background: var(--v-orange); color: var(--v-on-orange); box-shadow: none; }
.v2.jp-v2 .btn-ink { background: var(--v-ink); color: var(--v-white); box-shadow: none; }
.v2.jp-v2 .link { color: var(--v-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--v-hair-2); text-underline-offset: 3px; }
/* no cards (rule 1): the old card wrappers inside the job page lose their edge and padding */
.v2.jp-v2 .ds-card:not(.s-insp *), .v2.jp-v2 .jp-hist { padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
/* rows in the narrow side column keep the phone layout: the type label above the title */
@media (min-width: 1280px) {
  .v2.jp-v2 .jp-side .v-row { grid-template-columns: minmax(0, 1fr) auto; }
  .v2.jp-v2 .jp-side .v-row-k { grid-column: 1 / -1; grid-row: auto; margin-bottom: 3px; font-size: 14px; line-height: 20px; }
  .v2.jp-v2 .jp-side .v-row-m { grid-column: 1; }
  .v2.jp-v2 .jp-side .v-row-e { grid-column: 2; }
  .v2.jp-v2 .jp-side .v-row-acts, .v2.jp-v2 .jp-side .v-row-x { grid-column: 1 / -1; grid-row: auto; margin: 10px 0 0; }
}
.v2.jp-v2 .jp-head .v-n-ref { white-space: nowrap; margin-top: 8px; }
@media (max-width: 1023px) { .v2.jp-v2 .jp-back { display: none; } }      /* the phone's top row carries Back (say it once) */
/* review fixes (Opus S3): status words wrap in the list's narrow column, the inspection section gets its space, the
   tools sit on their own row, the head's ref only at 1024 (the phone's top row names it), the calendar menu opens down */
.v2.jl-v2 .v-row-k .v-st { white-space: normal; align-items: flex-start; }
.v2.jl-v2 .v-row-k .v-st > i { margin-top: 6px; }
.v2.jp-v2 .s-insp { margin-top: var(--v-sec); }
.v2.jl-v2 .jl-tools { padding: 12px 0 14px; }
@media (max-width: 1023px) { .v2.jp-v2 .jp-head .v-n-ref { display: none; } }
.v2.jp-v2 .cal-menu { top: 100%; bottom: auto; margin: 6px 0 0; }