/* batch 38: the job's focused views (job-focus.js; and app.js's readings / record in a job frame). jf- prefix. */
.jf-back { margin-bottom: 6px; }
.jf-back a { text-decoration: none; font-weight: 600; }
.jf-head { margin-bottom: 18px; }
.jf-head .pg-title { font-size: 30px; }
.jf-who { margin: 6px 0 0; color: var(--ink-2); font-size: 14px; }
.jf-state { margin: 8px 0 0; font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.jf-state[data-state="sent"], .jf-state[data-state="superseded"] { color: var(--ink); }
.jf-sec { margin-bottom: 18px; }
.jf-sub { margin: 14px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); }
.jf-sub:first-child { margin-top: 0; }
.jf-block + .jf-sub { margin-top: 20px; }
.jf-dim { color: var(--ink-2); font-size: 13px; }
.jf-msg:empty { display: none; }
.jf-saving { color: var(--ink-2); }
.jf-acts { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 8px 0 0; }
.jf-kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 10px; }
.jf-kv dt { color: var(--ink-2); font-size: 13px; }
.jf-kv dd { margin: 0; overflow-wrap: anywhere; }
.jf-block .jc-field { display: grid; gap: 4px; margin-bottom: 10px; }
.jf-block textarea, .jf-block select { width: 100%; max-width: 560px; box-sizing: border-box; }

.jf-sellers { list-style: none; margin: 0; padding: 0; }
.jf-sellers > li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 14px; align-items: center; padding: 9px 0; border-top: 1px solid var(--hair); }
.jf-sellers > li:first-child { border-top: 0; }
.jf-sellers select { max-width: 260px; }
.jf-line { min-width: 0; overflow-wrap: anywhere; }

.jf-history { list-style: none; margin: 0; padding: 0; }
.jf-history > li { padding: 12px 0; border-top: 1px solid var(--hair); }
.jf-history > li:first-child { border-top: 0; padding-top: 0; }
.jf-rev { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.jf-pill { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--hair); color: var(--ink); }
.jf-pill.is-sent { background: #e9f6ef; color: #1d6b43; }
.jf-pill.is-signed { background: var(--green-soft, #e9f6ef); color: var(--green, #1d6b43); font-weight: 600; }   /* U26-C (S1): what was signed on each revision */
.jf-changes { margin: 6px 0 0; padding-left: 18px; }
.jf-changes li { margin: 2px 0; overflow-wrap: anywhere; }
.jf-attr summary { cursor: pointer; font-weight: 600; }

.jf-banner { margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--hair); border-radius: 6px; background: var(--surface); font-weight: 600; }
.jf-picker { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.jf-work { list-style: none; margin: 0; padding: 0; }
.jf-work > li { padding: 8px 0; border-top: 1px solid var(--hair); }
.jf-work > li:first-child { border-top: 0; }
.jf-work ul { list-style: none; margin: 4px 0 0; padding: 0 0 0 12px; }
.jf-work ul li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--ink-2); }
.jf-row, .jf-work > li.jf-row { display: flex; justify-content: space-between; gap: 12px; }
.jf-pkg { display: flex; justify-content: space-between; gap: 12px; }
.jf-amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.jf-total { margin: 12px 0 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

.jf-preview { background: var(--surface); border: 1px solid var(--hair); border-radius: 6px; padding: 18px 20px; max-width: 760px; }
.jf-preview header h2 { margin: 0; font-size: 20px; }
.jf-preview header p { margin: 4px 0 14px; color: var(--ink-2); }
.jf-preview h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); margin: 14px 0 6px; }

.jf-line-form { border: 1px solid var(--hair); border-radius: 6px; padding: 10px 12px; margin-top: 6px; }
.jf-line-grid { display: grid; grid-template-columns: 110px minmax(0, 1fr) 80px 90px 140px; gap: 8px; }
.jf-line-grid > * { min-width: 0; box-sizing: border-box; }

@media (max-width: 720px) {
  .jf-head .pg-title { font-size: 26px; }
  .jf-sellers > li { grid-template-columns: 1fr auto; }
  .jf-sellers > li > .jf-line { grid-column: 1 / -1; }
  .jf-sellers select { max-width: 100%; }
  .jf-kv { grid-template-columns: 1fr; gap: 2px; }
  .jf-kv dd { margin-bottom: 8px; }
  .jf-line-grid { grid-template-columns: 1fr 1fr; }
  .jf-line-grid > :nth-child(2) { grid-column: 1 / -1; }
  .jf-preview { padding: 14px; }
}