/* ------------------------------------------------------------------
   TDG Warranty - inspection partner portal (token + PIN journey).
   Loaded per page from the templates, not part of a bundle.
   ------------------------------------------------------------------ */
.wi-page {
  --wi-navy: #0b1a4a;
  --wi-blue: #0b5cff;
  --wi-blue-dark: #0644c8;
  --wi-soft: #edf3ff;
  --wi-border: #dbe3f0;
  --wi-muted: #64708a;
  --wi-ok: #10b981;
  --wi-warn: #f59e0b;
  --wi-bad: #ef4444;
  --wi-radius: 14px;
  color: var(--wi-navy);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: linear-gradient(180deg, #f7faff 0%, #eef3fb 100%);
  min-height: 70vh;
  padding: 24px 0 64px;
}
.wi-container { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.wi-container--narrow { max-width: 620px; }

/* header ---------------------------------------------------------- */
.wi-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.wi-head-logo { height: 44px; width: auto; max-width: 160px; object-fit: contain; }
.wi-head-kicker { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--wi-muted); font-weight: 600; }
.wi-head-title { font-size: 22px; font-weight: 700; margin: 0; line-height: 1.2; }
.wi-head-ref { margin-left: auto; background: #fff; border: 1px solid var(--wi-border); border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: 14px; }

/* cards ------------------------------------------------------------ */
.wi-card {
  background: #fff; border: 1px solid var(--wi-border); border-radius: var(--wi-radius);
  box-shadow: 0 6px 24px rgba(11, 26, 74, .06); padding: 22px; margin-bottom: 18px;
}
.wi-card-title { font-size: 16px; font-weight: 700; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.wi-card-title .wi-step { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--wi-soft); color: var(--wi-blue-dark); font-size: 13px; font-weight: 700; }
.wi-card-sub { color: var(--wi-muted); font-size: 14px; margin: 0 0 14px; }
.wi-hint { color: var(--wi-muted); font-size: 12.5px; }

/* summary grid ------------------------------------------------------ */
.wi-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 18px; }
.wi-summary dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--wi-muted); font-weight: 600; margin: 0 0 2px; }
.wi-summary dd { margin: 0; font-weight: 600; font-size: 15px; word-break: break-word; }

/* alerts ------------------------------------------------------------ */
.wi-alert { border-radius: 10px; padding: 12px 14px; font-size: 14px; margin-bottom: 14px; display: flex; gap: 10px; align-items: flex-start; }
.wi-alert--error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.wi-alert--info { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.wi-alert--note { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }

/* buttons ----------------------------------------------------------- */
.wi-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px;
  padding: 11px 20px; font-weight: 600; font-size: 15px; border: 1px solid transparent; cursor: pointer;
  text-decoration: none; transition: background .15s, box-shadow .15s, transform .05s; line-height: 1.2;
}
.wi-btn:active { transform: translateY(1px); }
.wi-btn--primary { background: var(--wi-blue); color: #fff; box-shadow: 0 6px 16px rgba(11, 92, 255, .25); }
.wi-btn--primary:hover { background: var(--wi-blue-dark); color: #fff; }
.wi-btn--ghost { background: #fff; color: var(--wi-navy); border-color: var(--wi-border); }
.wi-btn--ghost:hover { background: var(--wi-soft); color: var(--wi-navy); }
.wi-btn--success { background: var(--wi-ok); color: #fff; box-shadow: 0 6px 16px rgba(16, 185, 129, .25); }
.wi-btn--success:hover { background: #059669; color: #fff; }
.wi-btn--sm { padding: 6px 12px; font-size: 13px; border-radius: 8px; }
.wi-btn--danger-ghost { background: #fff; color: #b91c1c; border-color: #fecaca; }
.wi-btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }

/* form controls ----------------------------------------------------- */
.wi-field { margin-bottom: 14px; }
.wi-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: #253258; }
.wi-label .wi-tag { margin-left: 6px; }
.wi-input, .wi-select, .wi-textarea {
  width: 100%; border: 1px solid var(--wi-border); border-radius: 9px; padding: 9px 11px; font-size: 14px;
  background: #fff; color: var(--wi-navy); transition: border-color .15s, box-shadow .15s; font-family: inherit;
}
.wi-input:focus, .wi-select:focus, .wi-textarea:focus { outline: none; border-color: var(--wi-blue); box-shadow: 0 0 0 3px rgba(11, 92, 255, .15); }
.wi-textarea { min-height: 74px; resize: vertical; }
.wi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 16px; }
.wi-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.wi-pin {
  letter-spacing: .5em; font-size: 28px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 12px 8px;
}
.wi-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 2px 9px; }
.wi-tag--customer { background: #ecfdf5; color: #047857; }
.wi-tag--internal { background: #fff7ed; color: #b45309; }
.wi-tag--ok { background: #ecfdf5; color: #047857; }
.wi-tag--todo { background: #fef2f2; color: #b91c1c; }
.wi-tag--muted { background: var(--wi-soft); color: var(--wi-blue-dark); }

/* sticky progress --------------------------------------------------- */
.wi-progress {
  position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .96); backdrop-filter: blur(6px);
  border: 1px solid var(--wi-border); border-radius: 12px; padding: 10px 16px; margin-bottom: 16px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; box-shadow: 0 4px 14px rgba(11, 26, 74, .06);
}
.wi-progress-label { font-weight: 700; font-size: 14px; white-space: nowrap; }
.wi-progress-bar { flex: 1 1 160px; height: 8px; background: var(--wi-soft); border-radius: 999px; overflow: hidden; }
.wi-progress-fill { height: 100%; background: linear-gradient(90deg, var(--wi-blue), var(--wi-ok)); border-radius: 999px; transition: width .25s; }
.wi-progress-actions { display: flex; gap: 8px; margin-left: auto; }

/* component rows ---------------------------------------------------- */
.wi-comp { border: 1px solid var(--wi-border); border-radius: 12px; padding: 16px; margin-bottom: 12px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.wi-comp.is-complete { border-color: #a7f3d0; }
.wi-comp.is-incomplete.is-highlight { border-color: #fca5a5; box-shadow: 0 0 0 3px rgba(239, 68, 68, .12); }
.wi-comp-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.wi-comp-index { width: 28px; height: 28px; border-radius: 8px; background: var(--wi-soft); color: var(--wi-blue-dark); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.wi-comp-name { font-weight: 700; font-size: 15px; }
.wi-comp-desc { color: var(--wi-muted); font-size: 12.5px; flex-basis: 100%; }
.wi-comp-status { margin-left: auto; }
.wi-comp-body { display: grid; grid-template-columns: 1fr 1fr 220px; gap: 12px 14px; }
.wi-comp-body .wi-field { margin-bottom: 0; }
.wi-comp-photo { display: flex; flex-direction: column; gap: 8px; }
.wi-photo-frame {
  position: relative; border: 1px dashed var(--wi-border); border-radius: 10px; background: var(--wi-soft);
  min-height: 120px; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer;
}
.wi-photo-frame img { width: 100%; height: 140px; object-fit: cover; display: block; }
.wi-photo-frame .wi-photo-empty { color: var(--wi-muted); font-size: 13px; text-align: center; padding: 14px; }
.wi-photo-frame input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.wi-photo-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 12.5px; }
.wi-extra-list { display: flex; gap: 6px; flex-wrap: wrap; }
.wi-extra { position: relative; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; border: 1px solid var(--wi-border); }
.wi-extra img { width: 100%; height: 100%; object-fit: cover; }
.wi-extra label { position: absolute; inset: 0; margin: 0; cursor: pointer; }
.wi-extra input { position: absolute; top: 3px; right: 3px; margin: 0; }
.wi-extra.is-removed img { opacity: .3; }
.wi-cond-ok .wi-cond-detail { opacity: .55; }
.wi-checkbox { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }

/* repair lines ------------------------------------------------------ */
.wi-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.wi-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--wi-muted); padding: 6px 8px; border-bottom: 1px solid var(--wi-border); }
.wi-table td { padding: 6px 8px; border-bottom: 1px solid #eef2f8; vertical-align: middle; }
.wi-table .wi-input { padding: 7px 9px; }
.wi-table td.wi-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wi-table tfoot td { font-weight: 700; border-bottom: 0; }

/* done page --------------------------------------------------------- */
.wi-done-icon { width: 64px; height: 64px; border-radius: 50%; background: #ecfdf5; color: #047857; display: inline-flex; align-items: center; justify-content: center; font-size: 30px; margin-bottom: 12px; }
.wi-findings-ro { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.wi-findings-ro th, .wi-findings-ro td { padding: 8px; border-bottom: 1px solid #eef2f8; text-align: left; vertical-align: top; }
.wi-findings-ro img { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; }

.wi-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.wi-footnote { color: var(--wi-muted); font-size: 12.5px; text-align: center; margin-top: 18px; }

@media (max-width: 820px) {
  .wi-comp-body { grid-template-columns: 1fr; }
  .wi-progress-actions { margin-left: 0; width: 100%; }
  .wi-progress-actions .wi-btn { flex: 1; }
  .wi-head-ref { margin-left: 0; }
  .wi-card { padding: 16px; }
  .wi-actions { flex-direction: column-reverse; align-items: stretch; }
  .wi-table thead { display: none; }
  .wi-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 0; border-bottom: 1px solid #eef2f8; }
  .wi-table td { border: 0; padding: 0; }
  .wi-table td:first-child { grid-column: 1 / -1; }
  .wi-table tfoot tr { grid-template-columns: 1fr 1fr; }
}

/* parts lookup (repair lines) ---------------------------------------- */
.wi-part-cell { position: relative; }
.wi-part-cell .wi-input { padding-right: 96px; }
.wi-part-badge { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; pointer-events: none; white-space: nowrap; }
.wi-part-badge--stock { background: #ecfdf5; color: #047857; }
.wi-part-badge--free { background: #fff7ed; color: #b45309; }
.wi-part-results { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid var(--wi-border); border-radius: 10px; box-shadow: 0 10px 30px rgba(15, 23, 42, .14); max-height: 280px; overflow-y: auto; display: none; }
.wi-part-results.is-open { display: block; }
.wi-part-result { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; cursor: pointer; border-bottom: 1px solid #eef2f8; font-size: 13px; }
.wi-part-result:last-child { border-bottom: 0; }
.wi-part-result:hover, .wi-part-result.is-active { background: var(--wi-soft); }
.wi-part-result .wi-part-code { font-weight: 700; color: var(--wi-navy); }
.wi-part-result .wi-part-name { color: var(--wi-muted); }
.wi-part-result .wi-part-meta { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wi-part-result .wi-part-meta small { display: block; color: var(--wi-muted); }
.wi-part-empty { padding: 10px 12px; font-size: 13px; color: var(--wi-muted); }

/* ------------------------------------------------------------------ per-item tabs (diesel) */
.wi-tabs { margin-top: 6px; }
.wi-tabbar { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 2px solid var(--wi-border, #e5e9f2); padding-bottom: 0; margin-bottom: 14px; }
.wi-tab { display: inline-flex; align-items: center; gap: 8px; background: #f6f8fb; border: 1.5px solid var(--wi-border, #e5e9f2); border-bottom: none;
          border-radius: 10px 10px 0 0; padding: 8px 14px; font-size: 13px; font-weight: 700; color: #475467; cursor: pointer; position: relative; top: 2px; }
.wi-tab:hover { background: #eef2f9; }
.wi-tab.is-active { background: #fff; color: #0b1a4a; border-color: var(--wi-border, #e5e9f2); box-shadow: 0 -2px 0 0 #2563eb inset; }
.wi-tab-name { white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.wi-tab-dot { width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; flex: 0 0 auto; }
.wi-tab-dot.is-pass { background: #12b76a; }
.wi-tab-dot.is-fail { background: #f04438; }
.wi-tabpanel { display: none; }
.wi-tabpanel.is-active { display: block; }
.wi-section { border: 1.5px solid var(--wi-border, #e5e9f2); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; background: #fff; }
.wi-section.is-filled { border-color: #bcd4ff; background: #fcfdff; }
.wi-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.wi-section-name { font-weight: 700; }
.wi-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #667085; background: #f6f8fb;
           border: 1px solid var(--wi-border, #e5e9f2); border-radius: 999px; padding: 3px 10px; margin: 0 6px 6px 0; cursor: pointer; white-space: nowrap; }
.wi-chip--del { color: #b42318; border-color: #fecdca; background: #fffafa; margin-left: auto; }
.wi-thumb { max-width: 160px; border-radius: 8px; border: 1px solid var(--wi-border, #e5e9f2); display: block; margin-bottom: 6px; }
.wi-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #475467; }

/* customer questionnaire (read-only reference at the top of the report) ---
   Deliberately looks different from the cards the partner fills in: tinted
   surface, no step number, so nobody mistakes it for something to complete. */
.wi-card--customer {
  background: #f8fbff;
  border-color: #cfe0f8;
}
.wi-card--customer .wi-card-title { color: var(--wi-blue-dark); }
.wi-summary--tight { gap: 8px 18px; }
.wi-summary--tight dd { font-size: 14px; }
.wi-cust-block + .wi-cust-block {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed #cfe0f8;
}
.wi-cust-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.wi-cust-idx {
  background: var(--wi-blue-dark);
  color: #fff;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 9px;
  text-transform: uppercase;
}
.wi-cust-prod { font-weight: 700; font-size: 15px; }
.wi-cust-qa { background: #fff; border: 1px solid #e3ecfa; border-radius: 10px; padding: 12px 14px; }
.wi-cust-qa ol.o_wz_qa { margin: 0; padding-left: 0; list-style: none; }
.wi-cust-qa ol.o_wz_qa > li { padding: 5px 0; border-bottom: 1px solid #f1f5fb; font-size: 14px; line-height: 1.5; }
.wi-cust-qa ol.o_wz_qa > li:last-child { border-bottom: 0; }
.wi-cust-qa ol.o_wz_qa_follow { list-style: none; margin: 4px 0 0; padding-left: 22px; }
.wi-cust-qa ol.o_wz_qa_follow > li { border: 0; padding: 2px 0; font-size: 13.5px; }
.wi-cust-qa .o_wz_qa_n { color: var(--wi-muted); font-weight: 700; margin-right: 6px; }
.wi-cust-qa .o_wz_qa_q { color: #374151; }

/* the customer's own photos and files -------------------------------------
   Thumbnails, not full-size: a workshop laptop on a phone hotspot should not
   be made to pull eight 4MB photos to show the technician what is on the job.
   The thumbnail links to the original, which is what they open when they want
   to actually look at something. */
.wi-cust-evidence { margin-top: 12px; }
.wi-cust-evidence-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wi-muted);
  margin-bottom: 8px;
}
.wi-cust-shots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
}
.wi-cust-shot {
  display: block;
  background: #fff;
  border: 1px solid #e3ecfa;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.wi-cust-shot:hover {
  border-color: var(--wi-blue);
  box-shadow: 0 2px 10px rgba(11, 92, 255, .14);
}
/* Fixed-height box with object-fit so a portrait photo and a landscape photo
   sit on the same row without one of them stretching. This is a browser, not
   wkhtmltopdf - object-fit works here. */
.wi-cust-shot img {
  display: block;
  width: 100%;
  height: 104px;
  object-fit: cover;
  background: #f1f5fb;
}
.wi-cust-shot-label {
  display: block;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--wi-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wi-cust-files { list-style: none; margin: 10px 0 0; padding: 0; }
.wi-cust-files li + li { margin-top: 4px; }
.wi-cust-files a {
  display: flex;
  align-items: baseline;
  gap: 6px;
  background: #fff;
  border: 1px solid #e3ecfa;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13.5px;
  color: var(--wi-blue-dark);
  text-decoration: none;
}
.wi-cust-files a:hover { border-color: var(--wi-blue); }
.wi-cust-file-label { font-weight: 600; }
.wi-cust-file-name {
  color: var(--wi-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .wi-cust-shots { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .wi-cust-shot img { height: 84px; }
}

@media (max-width: 640px) {
  .wi-cust-head { gap: 6px; }
  .wi-cust-prod { font-size: 14px; }
}

/* customer company + contact (so the partner can phone them directly) -------- */
.wi-contact-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e6edf8;
}
.wi-contact-block {
  background: #f8fbff;
  border: 1px solid #dfe9f8;
  border-radius: 10px;
  padding: 12px 14px;
}
.wi-contact-head {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--wi-muted);
  font-weight: 700;
  margin-bottom: 6px;
}
.wi-contact-name { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.wi-contact-line { font-size: 13.5px; line-height: 1.55; color: #374151; }
.wi-contact-line a { color: var(--wi-blue-dark); text-decoration: none; }
.wi-contact-line a:hover { text-decoration: underline; }

/* "copy this write-up to the other items" -----------------------------------
   Sits under Add section, styled as a quieter action than the ones that change
   the report's state. The confirm strip is deliberately loud about what it is
   going to overwrite: this replaces work, so it should never be a one-click
   accident on a phone. */
.wi-copyall { margin-top: 10px; border-top: 1px dashed var(--wi-border, #e5e9f2); padding-top: 10px; }
.wi-copy-toggle.is-open { background: #eef4ff; border-color: #bcd4ff; color: var(--wi-blue-dark, #1849a9); }
.wi-copy-box {
  margin-top: 10px;
  border: 1.5px solid #bcd4ff;
  background: #f8fbff;
  border-radius: 12px;
  padding: 12px 14px;
}
.wi-copy-text { font-size: 13px; line-height: 1.5; color: #475467; margin: 0 0 10px; }
.wi-copy-warn { color: #b42318; }

/* inspection partner portal: sign in + the job list -------------------------
   Shares the report page's shell deliberately - the partner moves between the
   two constantly and they should not look like different products. The table
   collapses to stacked cards on a phone, because a workshop's PC is often a
   phone in someone's pocket. */
.wi-input--pin { font-size: 22px; letter-spacing: 8px; text-align: center; font-weight: 700; }
.wi-jobs-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.wi-jobs-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.wi-jobs-search { flex: 1 1 220px; min-width: 160px; }
.wi-seg { display: inline-flex; border: 1.5px solid var(--wi-border, #e5e9f2); border-radius: 999px; overflow: hidden; }
.wi-seg-item { padding: 6px 14px; font-size: 13px; font-weight: 600; color: #667085; text-decoration: none; white-space: nowrap; }
.wi-seg-item:hover { background: #f6f8fb; color: #344054; text-decoration: none; }
.wi-seg-item.is-active { background: var(--wi-blue, #1570ef); color: #fff; }
.wi-jobs-wrap { margin-top: 12px; overflow-x: auto; }
.wi-jobs { width: 100%; border-collapse: collapse; }
.wi-jobs th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
              color: #667085; padding: 8px 10px; border-bottom: 2px solid var(--wi-border, #e5e9f2); white-space: nowrap; }
.wi-jobs td { padding: 10px; border-bottom: 1px solid var(--wi-border, #e5e9f2); font-size: 14px; vertical-align: top; }
.wi-jobs tr:hover td { background: #fafcff; }
.wi-jobs-sub { font-size: 12px; color: #667085; margin-top: 2px; }
.wi-jobs-act { text-align: right; white-space: nowrap; }
.wi-jobs-act .wi-btn { margin-left: 6px; }
.wi-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
           text-transform: uppercase; letter-spacing: .3px; background: #f1f5f9; color: #475467; white-space: nowrap; }
/* A job we have sent that nobody at the workshop has opened yet. Grey rather
   than red: it is waiting, not wrong. */
.wi-pill--not_started { background: #f1f5f9; color: #475569; }
.wi-pill--draft { background: #fff4e5; color: #b54708; }
.wi-pill--pending_approval { background: #eef4ff; color: #1849a9; }
.wi-pill--submitted { background: #ecfdf3; color: #027a48; }
.wi-pill--reviewed { background: #f4f3ff; color: #5925dc; }

@media (max-width: 720px) {
  .wi-jobs, .wi-jobs tbody, .wi-jobs tr, .wi-jobs td { display: block; width: 100%; }
  .wi-jobs thead { display: none; }
  .wi-jobs tr { border: 1.5px solid var(--wi-border, #e5e9f2); border-radius: 12px; padding: 6px 4px; margin-bottom: 10px; }
  .wi-jobs td { border: 0; padding: 6px 10px; display: flex; justify-content: space-between; gap: 12px; }
  .wi-jobs td::before { content: attr(data-label); font-size: 11px; text-transform: uppercase;
                        letter-spacing: .4px; color: #667085; font-weight: 700; flex: 0 0 auto; }
  .wi-jobs td.wi-jobs-act { justify-content: flex-end; }
  .wi-jobs-act .wi-btn { margin: 4px 0 0 6px; }
}

/* two people, one report -----------------------------------------------------
   The conflict banner has to be readable while somebody is upset, so the text
   they nearly lost is collapsed rather than dumped on the page. */
.wi-lastsaved { font-size: 12.5px; color: #667085; margin: -4px 0 12px; }
.wi-lastsaved .fa { margin-right: 5px; }
.wi-conflict-carry { margin-top: 8px; }
.wi-conflict-carry summary { cursor: pointer; font-weight: 700; font-size: 13px; }
.wi-conflict-row { margin-top: 8px; padding: 8px 10px; background: #fff; border: 1px solid var(--wi-border, #e5e9f2); border-radius: 8px; }
.wi-conflict-label { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: #667085; font-weight: 700; }
.wi-conflict-value { font-size: 13.5px; white-space: pre-line; margin-top: 3px; }
#wi-stale { position: sticky; top: 8px; z-index: 30; }