/* jobcard.css — OPSV4-SPINE-001 · lane L2 · the job card shell, header, tabs,
 * step bar and Edit job sheet.
 *
 * EVERY COLOUR IN LANE L2 IS IN THIS FILE. The five jobcard/*.js files carry no
 * colour literal at all: states travel as `data-state`, tones as `data-tone`,
 * and the palette is resolved here. One file to read the four status colours
 * out of, and one file for the NJF-002 D18 palette guard to grandfather instead
 * of six.
 *
 * ⚠ D18 PALETTE GUARD. web/js/__tests__/njf002-s2-d18-palette.smoke.mjs refuses
 * any NEW file under web/ that carries a raw colour literal with no entry in
 * tools/palette-guard/palette.ledger.json. This file is new and will fail it.
 * That is expected and is NOT L2's to fix:
 *   · the v3 token set does not contain the Ops v4 palette — `#DC2626`,
 *     `#FDECEC` and `#D1D5DB` are not in it, and `--v3-danger` is a DIFFERENT
 *     red (`#C00000`), so tokenising would quietly change Tom's locked colours;
 *   · `--update` rewrites the WHOLE ledger including `frozenAt`, and L2, L3, L4,
 *     L5 and L6 all add web/css/ops-v4/*.css with the same palette — five lanes
 *     re-freezing one whole-file artefact is five guaranteed conflicts on a file
 *     whose diff is meant to be read.
 * The Integrator re-freezes it ONCE after the merge (SPINE-L5 R1). Every other
 * gate on this lane is green.
 *
 * House rules (OPSV4_SPINE_RUN_LANES.md rule 5):
 *   · the four status colours and nothing else carries meaning —
 *       done #009A42 · needs you #F59E0B · missed #DC2626 on #FDECEC ·
 *       not yet #D1D5DB
 *   · one big green button per panel;
 *   · sheets slide over the page;
 *   · Inter.
 */

/* ── Shell ───────────────────────────────────────────────────────────────── */

.ov4-card {
  font-family: Inter, Arial, sans-serif;
  color: #0F1419;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* The popout is a 1296px dialog over the page rather than a full workspace, so
   it tightens up. This is the ONLY thing data-mode does: the DOM is identical. */
.ov4-card[data-mode="card"] { gap: 14px; }

.ov4-card *, .ov4-card *::before, .ov4-card *::after { box-sizing: border-box; }

.ov4-card button { font-family: inherit; cursor: pointer; }
.ov4-card button:focus-visible,
.ov4-card a:focus-visible,
.ov4-card input:focus-visible,
.ov4-card select:focus-visible,
.ov4-card textarea:focus-visible { outline: 3px solid #009A42; outline-offset: 2px; }

.ov4-body { min-width: 0; }
.ov4-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.ov4-head { display: flex; flex-direction: column; gap: 14px; }
.ov4-head-top { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.ov4-head-id { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }

.ov4-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ov4-chips-spacer { flex-grow: 1; }

.ov4-number {
  font-size: 13px; font-weight: 700; color: #006B2E; background: #E3F5EA;
  padding: 3px 10px; border-radius: 999px;
}

.ov4-chip,
.ov4-chip-btn {
  font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  border: none; background: #EEF0F3; color: #374151; line-height: 1.5;
}
.ov4-chip[data-tone="warn"] { background: #FEF3C7; color: #92400E; }
.ov4-chip[data-tone="bad"]  { background: #FDECEC; color: #991B1B; }
.ov4-chip[data-tone="ok"]   { background: #E3F5EA; color: #006B2E; }
.ov4-chip-btn:hover { filter: brightness(0.96); }

.ov4-chip-muted { font-size: 12px; font-weight: 600; color: #4B5563; }
.ov4-presence { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; }

.ov4-title {
  margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -0.5px;
  overflow-wrap: anywhere;
}
.ov4-card[data-mode="card"] .ov4-title { font-size: 26px; }

.ov4-identity {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px;
}
.ov4-client,
.ov4-client-plain { font-size: 15px; font-weight: 700; color: #006B2E; }
.ov4-client { border: none; background: none; padding: 0; text-decoration: underline; }
.ov4-client:hover { color: #004D21; }
.ov4-dot { color: #9CA3AF; }
.ov4-site { color: #374151; }
.ov4-approx { font-size: 12px; color: #6B7280; }
.ov4-missing { font-size: 13px; font-weight: 700; color: #B45309; }

/* The Directions tile. A drawn map, not a photo: it is a LINK to Google Maps,
   and pretending to be a live map it is not would be a lie about freshness. */
.ov4-maptile {
  position: relative; display: block; flex-shrink: 0;
  width: 190px; height: 110px; border-radius: 14px; overflow: hidden;
  background: #EEF5EF; border: 1px solid #D1D5DB; text-decoration: none;
}
.ov4-card[data-mode="card"] .ov4-maptile { width: 150px; height: 92px; }
.ov4-maptile-grid {
  position: absolute; inset: 0; opacity: 0.8;
  background-image: linear-gradient(#D7E3D9 1px, transparent 1px),
                    linear-gradient(90deg, #D7E3D9 1px, transparent 1px);
  background-size: 18px 18px;
}
.ov4-maptile-road { position: absolute; left: 0; right: 0; top: 46%; height: 6px; background: #F5D58A; }
.ov4-maptile-pin {
  position: absolute; left: 54%; top: 18%; width: 16px; height: 16px;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: #DC2626; box-shadow: 0 0 0 3px #FFFFFF;
}
.ov4-maptile-label {
  position: absolute; left: 8px; right: 8px; bottom: 8px;
  display: flex; justify-content: center; padding: 6px 0; border-radius: 8px;
  background: #FFFFFF; color: #006B2E; font-size: 13px; font-weight: 800;
}
.ov4-maptile.is-empty { display: flex; align-items: center; justify-content: center; }
.ov4-maptile.is-empty .ov4-maptile-label {
  position: static; color: #6B7280; background: transparent; font-weight: 700;
}

.ov4-next { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 0; }
.ov4-next-cap { font-size: 12px; font-weight: 700; color: #4B5563; }
.ov4-next-none { font-size: 12px; color: #4B5563; max-width: 34ch; text-align: right; }
/* The one big green button on the header (rule 5). */
.ov4-next-btn {
  min-height: 58px; padding: 0 24px; border: none; border-radius: 16px;
  background: #009A42; color: #FFFFFF; font-size: 18px; font-weight: 800;
}
.ov4-card[data-mode="card"] .ov4-next-btn { min-height: 50px; font-size: 16px; }
.ov4-next-btn:hover { background: #006B2E; }

/* The NJF-002 strip mounts itself in here and brings its own styles. */
.ov4-kpi:empty { display: none; }

/* ── Tab rail ────────────────────────────────────────────────────────────── */

.ov4-tabhost { display: flex; flex-direction: column; gap: 10px; }
.ov4-tabrail {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border-bottom: 1px solid #E5E7EB;
}
.ov4-tablist { display: flex; gap: 2px; flex-wrap: wrap; }
.ov4-tabrail-spacer { flex-grow: 1; }

.ov4-tab {
  height: 46px; padding: 0 16px; border: none; background: none;
  font-size: 14px; font-weight: 600; color: #4B5563;
}
.ov4-tab[aria-selected="true"] {
  font-weight: 800; color: #006B2E; box-shadow: inset 0 -3px 0 #009A42;
}

.ov4-ask-input {
  width: 300px; max-width: 46vw; height: 38px; margin-bottom: 6px;
  border: 1px solid #D1D5DB; border-radius: 10px; padding: 0 12px;
  font-family: inherit; font-size: 13px; color: #0F1419; background: #FFFFFF;
}
.ov4-ask-btn {
  height: 38px; padding: 0 14px; margin-bottom: 6px; border: none; border-radius: 10px;
  background: #0F1419; color: #FFFFFF; font-size: 13px; font-weight: 800;
}
.ov4-more {
  height: 38px; padding: 0 12px; margin-bottom: 6px;
  border: 1px solid #D1D5DB; border-radius: 10px; background: #FFFFFF;
  font-size: 13px; font-weight: 700; color: #1F2937;
}
.ov4-ask-answer:empty { display: none; }
.ov4-ask-answer { font-size: 13px; color: #374151; }

.ov4-more-menu {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: 12px; background: #F4F5F7;
}
.ov4-more-menu[hidden] { display: none; }
.ov4-more-item {
  min-height: 38px; display: inline-flex; align-items: center; padding: 0 12px;
  border: 1px solid #D1D5DB; border-radius: 10px; background: #FFFFFF;
  font-size: 13px; font-weight: 700; color: #1F2937; text-decoration: none;
}
.ov4-more-item:hover { background: #EEF0F3; }
.ov4-more-item.is-off { color: #9CA3AF; background: #F4F5F7; cursor: default; }

.ov4-jobtools-lead { margin: 0 0 12px; font-size: 13px; color: #4B5563; }

/* ── Step bar ────────────────────────────────────────────────────────────── */

.ov4-stepbar-wrap {
  background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 16px;
  padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px;
}

.ov4-stagerow { display: grid; grid-template-columns: repeat(17, minmax(0, 1fr)); column-gap: 6px; }
.ov4-stage {
  grid-column: span var(--ov4-span); display: flex; flex-direction: column; gap: 4px;
  min-width: 0; padding-bottom: 6px;
}
.ov4-stage-label {
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ov4-stage-rule { height: 3px; border-radius: 2px; background: #CBD2D9; }

.ov4-stepbar {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(17, minmax(0, 1fr)); gap: 6px;
}
.ov4-stepbar > li { min-width: 0; }

/* Seventeen EQUAL tiles. Titles are top-aligned (justify-content: flex-start)
   so a one-line title and a two-line title start at the same height. */
.ov4-tile {
  width: 100%; min-width: 0; height: 74px;
  display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
  gap: 6px; padding: 8px 8px 9px; border-radius: 10px;
  color: #0F1419; background: #F4F5F7; border: 2px solid #D1D5DB;
  transition: transform .12s, box-shadow .12s;
}
.ov4-tile:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(15, 20, 25, .10); }
.ov4-tile-top { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.ov4-tile-n { font-size: 12px; font-weight: 800; color: #374151; font-variant-numeric: tabular-nums; }
.ov4-tile-dot {
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #FFFFFF; background: #9CA3AF;
}
.ov4-tile-t {
  font-size: 12px; font-weight: 700; line-height: 1.2; text-align: left;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* The four states. Nothing else in this file may carry meaning by colour. */
.ov4-tile[data-state="done"]      { background: #E3F5EA; border-color: #009A42; }
.ov4-tile[data-state="done"] .ov4-tile-dot { background: #009A42; }
.ov4-tile[data-state="needs_you"] { background: #FEF3C7; border-color: #F59E0B; }
.ov4-tile[data-state="needs_you"] .ov4-tile-dot { background: #F59E0B; }
.ov4-tile[data-state="missed"]    { background: #FDECEC; border-color: #DC2626; }
.ov4-tile[data-state="missed"] .ov4-tile-dot { background: #DC2626; }
.ov4-tile[data-state="not_yet"]   { background: #F4F5F7; border-color: #D1D5DB; }
.ov4-tile[data-state="not_yet"] .ov4-tile-dot { background: #9CA3AF; }

/* The selected tile is OUTLINED, never recoloured: the colour already means
   something and overwriting it would hide the step's state. */
.ov4-tile[aria-selected="true"] { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px #0F1419; }

.ov4-legend {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  font-size: 12px; color: #4B5563;
}
.ov4-legend-item { display: flex; align-items: center; gap: 6px; }
.ov4-legend-spacer { flex-grow: 1; }
.ov4-legend-note { color: #6B7280; }
.ov4-swatch { width: 12px; height: 12px; border-radius: 3px; border: 2px solid #D1D5DB; background: #F4F5F7; }
.ov4-swatch[data-state="done"]      { background: #E3F5EA; border-color: #009A42; }
.ov4-swatch[data-state="needs_you"] { background: #FEF3C7; border-color: #F59E0B; }
.ov4-swatch[data-state="missed"]    { background: #FDECEC; border-color: #DC2626; }
.ov4-swatch[data-state="not_yet"]   { background: #F4F5F7; border-color: #D1D5DB; }

/* ── Step panel and the fallback ─────────────────────────────────────────── */

.ov4-panel { margin-top: 18px; min-width: 0; }

.ov4-step-fallback {
  display: grid; gap: 18px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 16px; padding: 20px 22px;
}
@media (max-width: 900px) { .ov4-step-fallback { grid-template-columns: minmax(0, 1fr); } }

.ov4-sub {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #4B5563;
}
.ov4-step-facts { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ov4-facts { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.ov4-fact {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-radius: 12px; background: #F4F5F7;
}
.ov4-fact dt { font-size: 13px; font-weight: 700; color: #4B5563; }
.ov4-fact dd { margin: 0; font-size: 16px; font-weight: 800; overflow-wrap: anywhere; color: #0F1419; }
.ov4-fact.is-warn { background: #FFFBEB; }
.ov4-fact.is-warn dd { color: #B45309; }

.ov4-empty { margin: 0; font-size: 14px; color: #4B5563; padding: 14px; border-radius: 12px; background: #F4F5F7; }
.ov4-pending { margin: 0; font-size: 13px; color: #6B7280; }
.ov4-step-error { padding: 16px; border-radius: 12px; background: #FDECEC; color: #991B1B; font-weight: 700; }

.ov4-sop {
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
  padding: 14px 16px; border-radius: 14px; border: 1px solid #E5E7EB;
}
.ov4-sop-block { display: flex; flex-direction: column; gap: 4px; }
.ov4-sop-line { font-size: 14px; line-height: 1.4; }
.ov4-sop-line::before { content: "· "; color: #9CA3AF; }
.ov4-sop-produces { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ov4-chip-out {
  font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 8px;
  background: #E8F1FA; color: #1F4E79;
}
.ov4-sop-done { font-size: 14px; border-top: 1px solid #E5E7EB; padding-top: 10px; }
.ov4-sop-kept {
  display: flex; flex-direction: column; gap: 6px;
  border-top: 1px solid #E5E7EB; padding-top: 10px;
}
.ov4-kept-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ov4-kept {
  font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 8px;
  background: #F4F5F7; color: #1F2937; border: 1px solid #E5E7EB;
}

/* ── Edit job sheet ──────────────────────────────────────────────────────── */

.ov4-ed { font-family: Inter, Arial, sans-serif; color: #0F1419; display: flex; flex-direction: column; gap: 22px; }
.ov4-ed-loading { font-size: 14px; color: #6B7280; }
.ov4-ed-lead { margin: 0; font-size: 14px; color: #4B5563; }

.ov4-ed-group { display: flex; flex-direction: column; gap: 10px; }
.ov4-ed-grouph {
  margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: #1F4E79;
}
.ov4-ed-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) { .ov4-ed-grid { grid-template-columns: minmax(0, 1fr); } }

.ov4-ed-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ov4-ed-field.is-wide { grid-column: 1 / -1; }
.ov4-ed-label { font-size: 13px; font-weight: 700; color: #374151; }
.ov4-ed-hint { font-size: 12px; color: #6B7280; }
.ov4-ed-gap { font-weight: 700; }

.ov4-ed-field input,
.ov4-ed-field select,
.ov4-ed-field textarea {
  font-family: inherit; font-size: 15px; color: #0F1419; background: #FFFFFF;
  border: 1px solid #D1D5DB; border-radius: 10px; padding: 0 12px; min-height: 44px;
}
.ov4-ed-field textarea { padding: 10px 12px; min-height: 90px; resize: vertical; }

/* Missing fields are AMBER — "the gaps holding the job up" (EditJob.dc.html). */
.ov4-ed-field[data-missing="1"] .ov4-ed-label { color: #B45309; }
.ov4-ed-field[data-missing="1"] input,
.ov4-ed-field[data-missing="1"] select,
.ov4-ed-field[data-missing="1"] textarea { border: 2px solid #F59E0B; }

.ov4-ed-readonly {
  min-height: 44px; display: flex; align-items: center; padding: 0 12px;
  border-radius: 10px; background: #F4F5F7; font-size: 15px; color: #0F1419;
  border: none; text-align: left;
}
.ov4-ed-link { color: #006B2E; font-weight: 700; text-decoration: underline; }
.ov4-ed-link:hover { color: #004D21; }

.ov4-ed-err {
  padding: 10px 14px; border-radius: 10px; background: #FDECEC; color: #991B1B;
  font-size: 13px; font-weight: 700;
}
.ov4-ed-err[hidden] { display: none; }

.ov4-ed-foot {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border-top: 1px solid #E5E7EB; padding-top: 16px;
}
.ov4-ed-foot-note { flex-grow: 1; font-size: 13px; color: #4B5563; }
/* The one big green button on the sheet (rule 5). */
.ov4-ed-save {
  min-height: 58px; padding: 0 28px; border: none; border-radius: 16px;
  background: #009A42; color: #FFFFFF; font-size: 17px; font-weight: 800;
}
.ov4-ed-save:hover { background: #006B2E; }
.ov4-ed-save:disabled { background: #D1D5DB; cursor: not-allowed; }