/* 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; }
    /* 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: baseline; 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; }

    /* 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; }
    .ready-divider { margin-bottom: 14px; }
    /* W33-P2 — Actions zone contract */
    #v2-choose-btn { margin-bottom: 16px; padding: 14px 14px; font-size: 15px; }
    .import-group { background: #f2f2f6; border: 1px solid #dddde6; border-radius: 6px; padding: 10px 10px 4px; }
    .import-group .action-btn { margin-bottom: 6px; background: #fff; }
    #upload-lane { margin-top: 6px; padding-top: 8px; border-top: 1px solid #dddde6; }
    /* F2 — send card acknowledgment truth line */
    #send-ack-truth { font-size: 12px; margin-top: 8px; display: none; }
    #send-ack-truth.sat-pending  { display: block; color: #555; }
    #send-ack-truth.sat-reack    { display: block; color: #7a4200; font-weight: 600; }
    #send-ack-truth.sat-valid    { display: block; color: #15803d; }

    /* K28a — Logo Home button */
    #logo-home-btn:hover { opacity: 0.7; }
    #logo-home-btn:active { opacity: 0.5; }

    /* J24a/J24b — Landing and committed create modes */
    #job-form-card.create-landing { border-color: #c8c8d4; }
    #job-form-card.create-landing #job-form-title { color: #333; }
    #job-form-card.create-committed { border-color: #4a90d9; box-shadow: 0 0 0 2px rgba(74,144,217,.15); }
    #job-form-card.create-committed #job-form-title { color: #1d4ed8; }
    #cancel-create-btn { width: 100%; margin-top: 8px; padding: 9px 16px; border: 1px solid #999; border-radius: 5px; background: #e8e8ef; font-size: 13px; color: #222; cursor: pointer; font-weight: 600; }
    #cancel-create-btn:hover { background: #dcdce6; border-color: #777; }
    #recent-jobs-card.rj-dimmed { opacity: 0.5; }
    /* E13a — field labels */
    .field-label { display: block; font-size: 11px; font-weight: 600; color: #666; margin-bottom: 3px; }
    .req-star { color: #c0392b; font-weight: 700; }
    .field-req-legend { font-size: 10px; color: #aaa; text-align: right; margin-bottom: 8px; }

    /* header-clarity-pass — Details toggle */
    .detail-toggle-btn { background: none; border: none; padding: 0; font-size: 11px; font-weight: 600; color: #aaa; cursor: pointer; letter-spacing: 0.03em; min-height: 28px; line-height: 28px; }
    .detail-toggle-btn:hover { color: #555; background: none; }
    /* composition-pass-2 — two-zone slab */
    #jh-slab { display: flex; justify-content: space-between; gap: 12px; }
    #jh-left { flex: 1; min-width: 0; }
    #jh-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
    /* 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: 1fr 1fr; gap: 2px 16px; }
    #jd-meta-grid .jd-v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* composition-pass-2 — Edit Job as scoped panel action */
    #jd-edit-btn { display: block; margin-left: auto; padding: 4px 14px; }
    /* mobile-first correction */
    @media (max-width: 480px) {
      body { margin-top: 16px; }
      #jd-meta-grid { grid-template-columns: 1fr; }
    }