/* W32 — Active Job state badge */
    /* F15b — heavier state badge: larger font, more padding, stronger border */
    .state-badge    { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 4px; letter-spacing: 0.03em; border: 1px solid transparent; }
    .state-draft    { background: #f0f0f5; color: #555;    border-color: #d4d4de; }
    .state-shared   { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
    .state-acked    { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
    .state-approved { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
    .state-unknown  { background: #f0f0f5; color: #555;    border-color: #d4d4de; }
    .pending-publish-chip { display: inline-block; border-radius: 4px; background: #111; color: #fff; font-size: 11px; font-weight: 800; line-height: 1.3; padding: 3px 7px; white-space: nowrap; }
    .pending-publish-chip[hidden] { display: none; }
    /* W33a — Active Job header hierarchy */
    #job-header { padding: 10px 14px; }
    #job-header .card-title { color: #bbb; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 4px; }
    .job-header-tail  { font-size: 20px; font-weight: 700; font-family: monospace; letter-spacing: -0.01em; margin-bottom: 1px; }
    .job-header-jobid { font-size: 11px; color: #aaa; font-family: monospace; margin-bottom: 4px; }
    #job-header #disp-identity { margin-top: 4px; }
    /* F15b — Job ID removed from primary view; lives only in ⚙ detail panel */
    #disp-job-id { display: none; }
    /* F15a — identity summary row */
    .job-identity-row { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-bottom: 2px; }
    .job-identity-label { font-size: 10px; color: #aaa; font-weight: 600; min-width: 52px; letter-spacing: 0.04em; text-transform: uppercase; }
    .job-identity-val { color: #444; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .job-identity-email { color: #888; font-family: monospace; font-size: 11px; font-weight: 400; }
    /* F15b — customer name elevated; tech name de-emphasized */
    #disp-customer-name { font-size: 14px; color: #111; font-weight: 700; }
    #disp-tech-name     { font-size: 11px; color: #999; font-weight: 400; }
    /* W33b — settings stub */
    .job-settings-btn { background: none; border: none; color: #bbb; font-size: 14px; cursor: pointer; padding: 4px 6px; border-radius: 4px; line-height: 1; }
    .job-settings-btn:hover { color: #777; background: #f0f0f5; }
    /* disclosure-row — clean integrated header + chrome-free chevron for utility rows */
    .disc-header { display: flex; align-items: center; justify-content: space-between; min-height: 28px; cursor: pointer; user-select: none; }
    .disc-header:hover .disc-chevron { color: #777; }
    .disc-chevron { background: none; border: none; padding: 0; margin: 0; font-size: 11px; color: #bbb; line-height: 1; pointer-events: none; cursor: inherit; }

    /* I1a — Active Job identity icons */
    .job-header-tail-row { display: flex; align-items: center; gap: 6px; }
    .jh-tail-icon { color: #bbb; flex-shrink: 0; display: block; }
    .job-identity-icon { color: #bbb; flex-shrink: 0; display: flex; align-items: center; }

    /* J1b — Job Detail panel */
    #job-detail-panel { margin-top: 10px; border-top: 1px solid #f0f0f3; padding-top: 8px; }
    .jd-row { display: flex; gap: 10px; padding: 2px 0; align-items: baseline; }
    .jd-k { color: #999; min-width: 76px; font-size: 12px; }
    .jd-v { color: #333; font-size: 12px; font-family: monospace; }
    /* W33e-a — delete de-emphasis + send spacing */
    #v2-delete-job-btn { padding: 8px 14px; font-size: 13px; font-weight: 400; }
    /* W33-P2 — Actions zone contract */
    .capture-pair { margin-bottom: 10px; }
    .action-btn-record { min-height: 52px; padding: 16px; font-size: 16px; font-weight: 600; line-height: 1; display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 6px; background: #960000; color: #fff; border-color: rgba(0,0,0,.18); }
    .action-btn-record:hover { background: #7a0000; border-color: rgba(0,0,0,.28); }
    .action-btn-snap { min-height: 48px; padding: 14px 15px; font-size: 15px; font-weight: 600; line-height: 1; display: flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 6px; background: #fff; color: #111; border-color: #111; }
    .action-btn-snap:hover { background: #f7f7f9; }
    .import-group { background: #f2f2f6; border: 1px solid #dddde6; border-radius: 6px; padding: 10px 10px 4px; }
    .import-group .action-btn { margin-bottom: 6px; background: #fff; }
    /* K28a — Logo Home button */
    #logo-home-btn { display: block; background: none; border: none; padding: 0; margin: 0 0 18px; cursor: pointer; opacity: 1; transition: opacity .15s; }
    #logo-home-btn img { display: block; max-height: 44px; width: auto; }
    #logo-home-btn:hover { opacity: 0.7; }
    #logo-home-btn:active { opacity: 0.5; }

    /* J24a/J24b — Landing and committed create modes */
    #job-form-card { padding: 14px 14px 14px; }
    #job-form-card.create-landing { border-color: #d7dbe4; }
    #job-form-card.create-landing #job-form-title { color: #111827; }
    #job-form-card.create-committed { border-color: #94a3b8; box-shadow: 0 0 0 2px rgba(148,163,184,.12); }
    #job-form-card.create-committed #job-form-title { color: #0f172a; }
    #job-form-header { min-height: 34px; margin: -2px 0 4px; }
    #job-form-title { color: #111827 !important; font-size: 12px !important; letter-spacing: 0.07em; }
    #cancel-create-btn { width: 100%; min-height: 44px; padding: 10px 16px; border: 1px solid #d1d5db; border-radius: 8px; background: #f3f4f6; font-size: 13px; color: #4b5563; cursor: pointer; font-weight: 600; }
    #cancel-create-btn:hover { background: #e5e7eb; border-color: #c4c9d1; color: #1f2937; }
    #recent-jobs-card.rj-dimmed { opacity: 0.5; }
    /* E13a — field labels */
    .field-label { display: block; font-size: 11px; font-weight: 700; color: #475569; margin-bottom: 4px; letter-spacing: 0.01em; }
    .req-star { color: #c0392b; font-weight: 700; }
    .field-req-legend { font-size: 10px; color: #94a3b8; text-align: right; margin: 2px 0 10px; }

    /* Bucket E — Create Job form */
    #job-form-body { margin-top: 10px; }
    .form-field { margin-bottom: 12px; }
    #job-form-body input[type="text"],
    #job-form-body select {
      flex: 1;
      min-height: 44px;
      padding: 10px 12px;
      border: 1px solid #d1d5db;
      border-radius: 8px;
      font-size: 14px;
      color: #111827;
      background: #fff;
      transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    }
    #job-form-body input[type="text"]::placeholder { color: #94a3b8; }
    #job-form-body input[type="text"]:focus,
    #job-form-body select:focus { outline: none; border-color: #94a3b8; box-shadow: 0 0 0 3px rgba(148,163,184,.15); }
    #create-tail-input     { font-family: monospace; }
    #create-job-type-input { background: #fff; appearance: none; }
    .create-actions { display: grid; gap: 10px; }
    #create-btn {
      width: 100%;
      min-height: 44px;
      padding: 10px 16px;
      border: 1px solid #111;
      border-radius: 8px;
      background: #111;
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
    }
    #create-btn:hover { background: #2d2d2d; border-color: #2d2d2d; }
    #create-form-msg { margin-top: 10px; }
    @media (max-width: 600px) {
      #job-form-card { padding: 12px 12px 13px; }
      .form-field { margin-bottom: 10px; }
      #job-form-title { font-size: 11px !important; }
    }

    /* Cover photo background — desktop compact: solid white left lane, clean image right zone */
    #job-header.job-header--has-cover {
      background-image: linear-gradient(to right, #fff 0%, #fff 58%, rgba(255,255,255,0) 72%), var(--cover-photo-url);
      background-size: 100% 100%, cover;
      background-position: 0 0, right center;
      background-repeat: no-repeat, no-repeat;
    }
    /* Mobile: wider solid-white safe zone (0–36%), short blend (36–56%), clean image from 56% */
    @media (max-width: 600px) {
      #job-header.job-header--has-cover {
        background-image: linear-gradient(to right, #fff 0%, #fff 36%, rgba(255,255,255,0) 56%), var(--cover-photo-url);
        background-size: 100% 100%, cover;
      }
      #job-header.job-header--has-cover #jh-left { max-width: 56%; }
    }
    /* Expanded/details state = working surface: no cover art, clean solid background */
    #job-header.job-header--has-cover:has([aria-expanded="true"]) { background-image: none; }
    /* On mobile, also restore unconstrained content width when expanded */
    @media (max-width: 600px) {
      #job-header.job-header--has-cover:has([aria-expanded="true"]) #jh-left { max-width: none; }
    }

    /* composition-pass-2 — two-zone slab; tap target for expand/collapse */
    #jh-slab { display: flex; justify-content: space-between; gap: 12px; min-width: 0; cursor: pointer; user-select: none; border-radius: 6px; -webkit-tap-highlight-color: transparent; }
    /* Keyboard focus: subtle, pushed out — readable but not jarring against cover art */
    #jh-slab:focus-visible { outline: 2px solid rgba(74, 144, 217, 0.45); outline-offset: 5px; border-radius: 6px; }
    /* Belt-and-suspenders: suppress focus outline for pointer/touch in older browsers */
    #jh-slab:focus:not(:focus-visible) { outline: none; }
    /* jh-chevron — directional indicator, follows .disc-chevron pattern */
    .jh-chevron { font-size: 10px; color: #c8c8d0; line-height: 1; pointer-events: none; display: block; transition: transform 0.18s ease, color 0.12s; }
    #jh-slab[aria-expanded="true"]  .jh-chevron { transform: rotate(180deg); }
    #jh-slab:hover .jh-chevron { color: #999; }
    #jh-left { flex: 1; min-width: 0; }
    #jh-right { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 6px; max-width: 45%; min-width: 0; }
    /* composition-pass-2 — hide identity labels and tech row in always-visible area */
    #disp-identity .job-identity-label { display: none; }
    #disp-tech-row { display: none; }
    /* composition-pass-2 — 2-column meta grid in detail panel */
    #jd-meta-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px 16px; min-width: 0; }
    #jd-meta-grid .jd-row { min-width: 0; }
    #jd-meta-grid .jd-k { flex: 0 0 76px; }
    #jd-meta-grid .jd-v { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; word-break: break-word; white-space: normal; }
    /* composition-pass-2 — Edit Job as scoped panel action */
    #jd-edit-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      min-height: 42px;
      margin: 8px 0 0;
      padding: 10px 14px;
    }
    #jd-edit-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
    #jd-assignment-stamp { white-space: pre-line; line-height: 1.35; }
    .jd-reassign {
      margin-top: 0;
      padding-top: 4px;
      padding-bottom: 2px;
      border-top: none;
      display: grid;
      gap: 5px;
    }
    .jd-reassign[hidden] { display: none; }
    .jd-reassign-bar {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      min-width: 0;
      padding: 4px 0;
    }
    .jd-reassign-label {
      display: inline-flex;
      align-items: center;
      align-self: center;
      justify-self: start;
      min-height: 30px;
      margin: 0;
      padding: 0 10px;
      border: 1px solid #e4e6ee;
      border-radius: 999px;
      background: #f7f8fb;
      color: #667085;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      white-space: nowrap;
    }
    .jd-reassign-controls {
      display: flex;
      gap: 4px;
      align-items: stretch;
      min-width: 0;
    }
    #jd-reassign-select {
      flex: 1 1 auto;
      min-width: 0;
      padding: 0 10px;
      border: 1px solid #d7d7df;
      border-radius: 6px;
      background: #fff;
      color: #222;
      font-size: 12px;
      line-height: 1.2;
      min-height: 32px;
    }
    #jd-reassign-save { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: auto; min-height: 32px; margin-bottom: 0; padding: 0 10px; white-space: nowrap; font-size: 11px; line-height: 1; font-weight: 700; border-radius: 6px; }
    #jd-reassign-feedback { margin-top: 3px; }
    @media (max-width: 480px) {
      .jd-reassign-bar {
        grid-template-columns: 1fr;
        gap: 6px;
      }
      .jd-reassign-label {
        min-height: 26px;
        padding: 0 8px;
      }
    }
    /* Tech unlock request affordance — non-admin only, inside #job-detail-panel */
    #jd-unlock-trigger {
      display: flex;
      width: 100%;
      gap: 12px;
      cursor: pointer;
      user-select: none;
      justify-content: space-between;
      align-items: center;
      text-align: left;
      margin-bottom: 0;
      background: #fff;
      color: #111;
      font-weight: 600;
    }
    #jd-unlock-trigger:hover { background: #f7f7f9; }
    #jd-unlock-trigger:focus-visible { outline: 2px solid #4a90d9; outline-offset: 2px; }
    #jd-unlock-trigger[aria-expanded="true"] .jh-chevron { transform: rotate(180deg); }
    #jd-unlock-trigger .jh-chevron { margin-left: 10px; transition: transform 0.15s ease; }
    #jd-unlock-trigger-title { flex: 1; min-width: 0; }
    .jd-unlock-trigger-detail { margin: 0 0 8px; font-size: 12px; line-height: 1.45; color: #6b7280; }
    #jd-unlock-body {
      margin-top: 8px;
      padding: 10px 12px 12px;
      border: 1px solid #fcd34d;
      border-radius: 12px;
      background: #fffaf0;
    }
    .jd-unlock-fields { margin-bottom: 6px; }
    .jd-unlock-label { display: block; font-size: 11px; font-weight: 600; color: #92400e; margin-bottom: 3px; }
    .jd-unlock-input { width: 100%; box-sizing: border-box; padding: 7px 10px; border: 1px solid #fcd34d; border-radius: 5px; font-size: 13px; background: #fffbeb; }
    .jd-unlock-input:focus { outline: none; border-color: #f59e0b; box-shadow: 0 0 0 2px rgba(245,158,11,.15); }
    #jd-unlock-request-wrap { margin-top: 8px; }
    #jd-unlock-request-help,
    #jd-unlock-request-pending { margin-bottom: 8px; }
    #jd-unlock-request-submit,
    #jd-unlock-request-deny { width: 100%; }
    #jd-unlock-request-deny { margin-top: 8px; }
    #jd-unlock-request-deny[hidden] { display: none; }
    #jd-unlock-request-slider { margin-top: 8px; }

    /* UI-PORTAL-STATUS-1 — admin portal action block, owned by Customer Portal */
    #jd-admin-unlock-wrap { margin: 8px 0 10px; }
    .aj-portal-status { border-top: 1px solid #f0f0f3; padding-top: 10px; }
    .aj-portal-status__title { font-size: 13px; font-weight: 600; color: #111; margin-bottom: 3px; }
    .aj-portal-status__body { font-size: 12px; color: #666; line-height: 1.4; margin-bottom: 10px; }
    #jd-admin-request-review { margin-bottom: 10px; }
    #jd-admin-request-pending { margin-bottom: 8px; }
    #jd-admin-deny-btn { width: 100%; margin-top: 8px; }
    #jd-unlock-submit { width: 100%; }

    /* mobile-first correction */
    @media (max-width: 480px) {
      body { margin-top: 16px; }
      #jd-meta-grid { grid-template-columns: minmax(0, 1fr); }
    }