/* 工作 App（public/js/jobs.js）與「賣東西給 NPC」面板專用的樣式；行動優先，寬度一律 100%，不用固定寬度。 */

/* 我的工作：卡片 */
.jobs-card { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: #fff; border-radius: 18px; box-shadow: 0 2px 0 var(--line); }
.jobs-top { display: flex; align-items: center; gap: 10px; }
.jobs-face { width: 56px; height: 56px; flex: none; border-radius: 50%; background: var(--paper-2); object-fit: cover; }
.jobs-wages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.jobs-wage {
  display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; padding: 6px 4px;
  background: var(--paper-2); border-radius: 12px; font-size: 11.5px; color: var(--ink-soft); line-height: 1.3; text-align: center;
}
.jobs-wage b { font-size: 15px; color: var(--ink, #4a3a2a); font-variant-numeric: tabular-nums; }
.jobs-wage.on { background: #fff3c9; color: inherit; box-shadow: inset 0 0 0 2px var(--sun); }
.jobs-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.jobs-center { justify-content: center; text-align: center; }
.jobs-row .row-actions, .jobs-shift .row-actions { flex-wrap: wrap; row-gap: 4px; }
.jobs-why { color: #bb5a44; }

/* 班表：上班中／還沒上班 */
.jobs-shift { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 16px; background: #f2fbf6; box-shadow: 0 2px 0 var(--line); }
.jobs-shift.off { background: var(--paper-2); }
.jobs-timer { font-size: 26px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.jobs-mail { display: inline-flex; gap: 4px; align-items: center; }
.jobs-mail i { display: block; width: 14px; height: 18px; border-radius: 3px; background: var(--line); }
.jobs-mail i.done { background: var(--mint); }

/* 賣東西給 NPC */
.npcsell-head { display: flex; align-items: flex-end; gap: 10px; padding: 4px 2px 0; }
.npcsell-face { width: 72px; height: 72px; flex: none; object-fit: contain; }
.npcsell-bubble { flex: 1; min-width: 0; padding: 10px 12px; background: #fff; border-radius: 18px 18px 18px 4px; box-shadow: 0 2px 0 var(--line); }
.npcsell-say { font-size: 14px; line-height: 1.5; margin-top: 3px; overflow-wrap: anywhere; }
.npcsell-list { display: flex; flex-direction: column; gap: 6px; }
.npcsell-row { display: flex; gap: 8px; min-width: 0; padding: 8px 10px; background: #fff; border-radius: 16px; box-shadow: 0 2px 0 var(--line); }
.npcsell-row.done { opacity: .65; }
.npcsell-ic { width: 44px; height: 44px; flex: none; }
.npcsell-main { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.npcsell-main .row-sub { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.npcsell-base { color: var(--ink-soft); font-size: 12px; }
.npcsell-row .row-actions { flex-wrap: wrap; row-gap: 4px; }
.jobs-steps { margin: 4px 0 2px 18px; padding: 0; font-size: 12.5px; color: var(--ink-soft); display: grid; gap: 2px; }