/* The customer's job link (/j/:token) — the few classes the customer mock uses
   that pos_shell.css + storage_shell.css lack. All on the POS tokens; amber and
   the soft-ok tint are the only new ones. */
.pos-shell {
  --amb: #92400e; --ambsoft: #fef3c7; --ambline: #fcd34d;
  --okfill: #046c4e; --oksoft: #def7ec;
}
.dark .pos-shell {
  --amb: #fcd34d; --ambsoft: #3d2a06; --ambline: #78520a;
  --okfill: #046c4e; --oksoft: #0f2f24;
}

.jp-body { padding: 14px 14px 20px; gap: 11px; }
.jp-body .pos-btn-primary, .jp-body .pos-btn-secondary, .jp-body .pos-btn-ghost, .jp-body .pos-btn-charge {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
}
.jp-body form { margin: 0; }
.pos-shell a.pos-btn-charge { color: var(--acctext); }
.pos-btn-charge--ok { background: var(--okfill); color: var(--acctext); }
.pos-alert--amb { cursor: default; border-color: var(--ambline); background: var(--ambsoft); color: var(--amb); font: 700 12.5px/1.35 var(--font); }
.pos-dcard__h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pos-drow { gap: 12px; }
.pos-drow__v { min-width: 0; text-align: right; overflow-wrap: anywhere; }
.pos-drow--total { border-top: 1px solid var(--line); padding-top: 9px; }
.pos-drow--total .pos-drow__k, .pos-drow--total .pos-drow__v { font-weight: 800; font-size: 14px; color: var(--text); }
.amt { font-family: var(--mono); }
.fault { font: 600 13.5px/1.45 var(--font); }

.cx-logo { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--text); color: var(--surface); display: flex; align-items: center; justify-content: center; font: 800 18px/1 var(--font); }
.cx-hero { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.cx-eyebrow { font: 600 10.5px/1.2 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--sub); }
.cx-h { margin: 0; font: 800 22px/1.2 var(--font); letter-spacing: -.01em; }
.cx-sub { margin: 0; font: 500 13px/1.45 var(--font); color: var(--sub); }
.cx-when { display: flex; align-items: center; gap: 7px; font: 700 13px/1.3 var(--font); color: var(--acc); }
.cx-when--ok { color: var(--ok); }
.cx-amtlabel { font: 600 11px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--sub); }
.cx-amt { font: 800 34px/1 var(--mono); }
.cx-paid { border: 1px solid var(--ok); background: var(--oksoft); color: var(--ok); border-radius: 12px; padding: 11px 13px; font: 600 12.5px/1.45 var(--font); }
.cx-paid b { display: block; font-weight: 800; }
.cx-foot { display: flex; justify-content: center; font: 500 11px/1.4 var(--font); color: var(--sub); padding: 8px 0 2px; }

/* The 5-step stepper. */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; margin-top: 4px; }
.step { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; position: relative; min-width: 0; }
.step::before { content: ""; position: absolute; top: 11px; right: 50%; width: 100%; height: 2px; background: var(--line); }
.step:first-child::before { display: none; }
.step--done::before, .step--now::before, .step--wait::before { background: var(--acc); }
.step__dot { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; background: var(--surfacealt); border: 2px solid var(--line); color: var(--sub); display: flex; align-items: center; justify-content: center; }
.step--done .step__dot { background: var(--accfill); border-color: var(--accfill); color: var(--acctext); }
.step--now .step__dot { background: var(--surface); border-color: var(--acc); color: var(--acc); }
.step--wait .step__dot { background: var(--ambsoft); border-color: var(--amb); color: var(--amb); }
.step__l { font: 600 10px/1.2 var(--font); color: var(--sub); }
.step--now .step__l, .step--wait .step__l { color: var(--text); font-weight: 800; }

/* Priced lines. */
.line { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.line:last-of-type { border-bottom: 0; }
.line__tag { flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--surfacealt); color: var(--sub); display: flex; align-items: center; justify-content: center; }
.line__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.line__name { font: 700 12.5px/1.25 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.line__sub { font: 500 10.5px/1.2 var(--font); color: var(--sub); }
.line__amt { flex: none; font: 700 13px var(--mono); }

.st-contact > * { padding: 12px; font-size: 13.5px; }

/* Optional rating once the job is over: five submit buttons, CSS-only hover fill. */
.cx-rate { display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.cx-rate__t { font: 700 13px/1.2 var(--font); text-align: center; }
.cx-rate .pos-field { width: 100%; resize: vertical; }
.cx-stars { display: flex; justify-content: center; gap: 4px; }
.cx-star { cursor: pointer; border: none; background: transparent; color: var(--line); width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.cx-star svg { fill: currentColor; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.cx-star--on, .cx-stars:hover .cx-star { color: var(--amb); }
.cx-stars .cx-star:hover ~ .cx-star { color: var(--line); }