.njwiz-page { display: none; }
  .njwiz-page.active { display: block; }
  .njwiz-stepbar {
    display: flex; gap: 6px; align-items: center;
    padding: 12px 0 16px; border-bottom: 1px solid var(--bdr);
    margin-bottom: 12px;
  }
  /* PR-WIZ-UX: the dots were 28×28 — below the 44px WCAG 2.5.5 / Apple HIG
     minimum tap target. Keep the ~28px VISUAL circle (drawn by ::before) but
     make the clickable element a 44×44 transparent hit area so fat-finger taps
     land. Border/background/color now live on ::before; text is centered over
     it via z-index. Steplines still align because the visual circle is centered
     inside the taller box (dots are 44 tall, lines sit on the flex centerline). */
  .njwiz-stepdot {
    position: relative;
    width: 44px; height: 44px;
    background: transparent; border: none; padding: 0;
    color: var(--dim); font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    /* PR-NJWIZ-STEPCLICK (2026-08-13): dots are now clickable shortcuts. */
    cursor: pointer;
  }
  .njwiz-stepdot::before {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 28px; height: 28px; margin: -14px 0 0 -14px;
    border-radius: 50%;
    border: 1.5px solid var(--bdr); background: var(--sf);
    transition: border-color .15s ease, background .15s ease;
    z-index: -1;  /* sits BEHIND the raw text-node label of the dot */
  }
  .njwiz-stepdot:hover { color: var(--acc); }
  .njwiz-stepdot:hover::before { border-color: var(--acc); }
  .njwiz-stepdot:focus-visible { outline: none; }
  .njwiz-stepdot:focus-visible::before { outline: 2px solid var(--acc); outline-offset: 2px; }
  .njwiz-stepdot.active { color: var(--sf-bg); }
  .njwiz-stepdot.active::before { border-color: var(--acc); background: var(--acc); }
  .njwiz-stepdot.done { color: var(--acc); }
  .njwiz-stepdot.done::before { border-color: var(--acc); background: transparent; }
  .njwiz-stepline {
    flex: 1; height: 2px; background: var(--bdr); margin: 0 2px;
  }
  .njwiz-stepline.done { background: var(--acc); }
  .njwiz-pageinfo { color: var(--dim); font-size: 11px; margin-bottom: 8px; }
  .njwiz-shopdef-badge {
    display: inline-block; padding: 1px 6px; border-radius: 8px;
    background: rgba(127,127,127,0.18); color: var(--dim);
    font-size: 10px; font-weight: 600; margin-left: 6px;
    vertical-align: middle;
  }
  .njwiz-overrided-badge {
    display: inline-block; padding: 1px 6px; border-radius: 8px;
    /* PR-CUTFLOOR-DASH-APPLE (2026-06-14): was hardcoded #4a90d9 blue — use the
       theme accent so the New Job wizard matches the graphite palette. */
    background: color-mix(in srgb, var(--acc) 20%, transparent); color: var(--acc);
    font-size: 10px; font-weight: 600; margin-left: 6px;
    vertical-align: middle;
  }
  .njwiz-review-row {
    display: flex; padding: 6px 0; border-bottom: 1px dashed var(--bdr);
    font-size: 13px;
  }
  .njwiz-review-row dt { flex: 0 0 180px; color: var(--dim); margin: 0; }
  .njwiz-review-row dd { flex: 1; margin: 0; color: var(--txt); }

  /* PR-W2G (2026-05-08): center the New Job wizard on screen instead of
   * docking it to the right rail. Forward-focused attention — the
   * operator is committing job-level globals, not glancing at a side
   * tool, so the page should fall behind the dialog. We override
   * .drawer-overlay + .drawer ONLY for #cab-newjob-modal so other
   * drawers (Job Defaults, Globals right-rail) keep their right-side
   * placement. */
  #cab-newjob-modal.drawer-overlay {
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.42);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }
  #cab-newjob-modal > .drawer {
    width: 760px;
    max-width: 92vw;
    max-height: 92vh;
    height: auto;
    border-left: none;
    border: 1px solid var(--bdr);
    border-radius: 12px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.55);
    padding: 28px 32px;
  }
  /* PR-FORMS-CSS (2026-05-28): force single-column form layout per
   * CXL n=702 study (single-column completes 15.4 s faster than
   * multi-column, fewer skipped fields, lower error rate). Pre-PR
   * the wizard used `flex-wrap: wrap` with `min-width: 180px` which
   * produced 2-column on iPad landscape, 3-column on desktop —
   * faster to fill in theory but the research disagrees for B2B
   * forms with mixed novice/power users. Exception: logical pairs
   * (W×H, top/bottom rail width) keep multi-column via `.fr-pair`.
   *   Baymard: "Avoid Multi-Column Form Layouts" except for logical pairs.
   *   CXL Institute: cxl.com/research-study/form-field-usability/
   */
  #cab-newjob-modal .fr {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 14px;
    align-items: stretch;
  }
  #cab-newjob-modal .fr > .fg {
    width: 100%;
    min-width: 0;
  }
  /* `.fr-pair` exception: tightly-related fields stay side-by-side
   * (W×H, expiry MM/YY, top-rail × bottom-rail, etc.). Per Baymard
   * "Avoid Multi-Column" exception clause. */
  #cab-newjob-modal .fr.fr-pair {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14px;
  }
  #cab-newjob-modal .fr.fr-pair > .fg {
    flex: 1 1 0;
    min-width: 140px;
  }
  #cab-newjob-modal .fg label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--txt);
    /* Lock min-height so labels that wrap (long name + Shop default
     * badge) don't push their input out of alignment with the
     * neighbouring cell's input. Two lines @ 1.35 line-height ≈ 32px. */
    min-height: 32px;
    line-height: 1.35;
  }
  /* Reveals per-axis grid (Page 2, PR-NJWIZ-6PAGE) — uniform 2-column grid
   * for every reveal/spacing field. No mixed 2-col/3-col rows; every cell has
   * the same width so inputs align across the page. Hidden inline by default
   * (symmetric mode); JS clears the inline style to reveal this grid. */
  #cab-newjob-modal #nj-reveal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
  }
  #cab-newjob-modal #nj-reveal-grid > .fg { min-width: 0; }
  #cab-newjob-modal .fg input,
  #cab-newjob-modal .fg select,
  #cab-newjob-modal .fg textarea {
    width: 100%;
    box-sizing: border-box;
    /* PR-FORMS-CSS (2026-05-28): WCAG 2.5.5 AAA = 44 CSS px min target
     * + Apple HIG 44pt. 16px font is the iOS-Safari magic threshold —
     * below 16px, focusing an input on iPad triggers auto-zoom and the
     * form scrolls weirdly. Both apply specifically to iPad/tablet
     * primary use; desktop benefits too.
     *   W3C WCAG 2.5.5: w3.org/WAI/WCAG21/Understanding/target-size.html
     *   Apple HIG: 44×44pt minimum hit target. */
    min-height: 44px;
    font-size: 16px;
    padding: 8px 12px;
  }
  #cab-newjob-modal .fg textarea {
    min-height: 88px; /* 2× line so multi-line input feels different */
  }
  #cab-newjob-modal button {
    min-height: 44px;
    font-size: 16px;
  }
  /* PR-FORMS-CSS (2026-05-28): required-field asterisk — NN/g
   * recommendation. Operator scans the form and immediately sees
   * which fields block submission. Today only "Job Name *" and
   * "Customer *" carry plain-text asterisks; this CSS makes them
   * unmistakably red. Use the `<span class="required-mark">*</span>`
   * markup on each required field label.
   *   NN/g: nngroup.com/articles/required-fields/ */
  #cab-newjob-modal .required-mark {
    color: var(--no);
    margin-left: 4px;
    font-weight: 700;
  }
  /* PR-FORMS-CSS (2026-05-28): on-blur fraction-parse error state
   * for PR-FRACTION-INPUT. Red border + slight bg tint when the
   * input fails parseInchesWithFraction(). On focus the class is
   * cleared (per Baymard "errors clear on keystroke" rule).
   *   Baymard: baymard.com/blog/inline-form-validation */
  #cab-newjob-modal .fg input.input-err {
    border-color: var(--no);
    background: color-mix(in srgb, var(--no) 8%, transparent);
  }
  #cab-newjob-modal .fg .err-msg {
    color: var(--no);
    font-size: 12px;
    margin-top: 4px;
  }
  #cab-newjob-modal .fg > div {
    font-size: 11px;
    color: var(--dim);
    margin-top: 3px;
    line-height: 1.35;
  }
  #cab-newjob-modal h3 {
    margin: 18px 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--txt);
    border-bottom: 1px solid var(--bdr);
    padding-bottom: 4px;
  }

  /* ─────────────────────────────────────────────────────────────────
     PR-NEWROOM-WIZARD (2026-08-13): the New Room modal's left rail is now a
     random-access stepped surface (Type / Shape & size / Openings / Review),
     reusing the .jdwiz grammar but scoped to #cab-newroom-modal and compacted
     for the narrow rail. The canvas pane is a SIBLING (never a .jdwiz-page), so
     it stays mounted + visible across every step — no blank-canvas bug.
     ───────────────────────────────────────────────────────────────── */
  #cab-newroom-modal .jdwiz-page { display: none; }
  #cab-newroom-modal .jdwiz-page.active { display: block; }
  #cab-newroom-modal .jdwiz-tabs {
    display: flex; gap: 5px; align-items: stretch; flex-wrap: wrap;
    padding: 0 0 10px; margin: 0 0 10px; border-bottom: 1px solid var(--bdr);
  }
  #cab-newroom-modal .jdwiz-tab {
    flex: 1 1 0; min-width: 64px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 6px; border: 1.5px solid var(--bdr); border-radius: 8px;
    background: var(--sf); color: var(--dim); cursor: pointer;
    font-family: inherit; font-size: 11px; font-weight: 600; line-height: 1.2;
    text-align: center;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
  }
  #cab-newroom-modal .jdwiz-tab:hover { border-color: var(--acc2); background: var(--pn-h); color: var(--txt); }
  #cab-newroom-modal .jdwiz-tab:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
  #cab-newroom-modal .jdwiz-tab .jdwiz-tab-num {
    width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
    border: 1.5px solid var(--bdr); background: var(--sf);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
  }
  #cab-newroom-modal .jdwiz-tab.active {
    border-color: var(--acc); color: var(--txt);
    background: color-mix(in srgb, var(--acc) 8%, transparent);
  }
  #cab-newroom-modal .jdwiz-tab.active .jdwiz-tab-num {
    border-color: var(--acc); background: var(--acc); color: var(--sf-bg, var(--pn));
  }
  #cab-newroom-modal .nr-type-seed {
    margin-top: 12px; padding: 10px 12px; border: 1px solid var(--bdr);
    border-radius: 8px; background: var(--sf); font-size: 11.5px; line-height: 1.5;
  }
  #cab-newroom-modal .nr-type-seed b { color: var(--txt); }
  #cab-newroom-modal .nr-review-row {
    display: flex; justify-content: space-between; gap: 10px;
    padding: 7px 0; border-bottom: 1px solid var(--bdr); font-size: 12.5px;
  }
  #cab-newroom-modal .nr-review-row .k { color: var(--dim); }
  #cab-newroom-modal .nr-review-row .v { color: var(--txt); font-weight: 600; text-align: right; }