/* ══════════════════════════════════════════════════════════════════════
   Crafting — the workshop panel (js/crafting.js), quality colours and
   the crafter's mark on items. Shares buttons with css/careers.css.
   ══════════════════════════════════════════════════════════════════════ */

.cf-overlay { position: fixed; inset: 0; z-index: 100020; background: rgba(8,6,3,.72); display: none; align-items: center; justify-content: center; padding: 16px; }
.cf-overlay.open { display: flex; }
.cf-panel { width: min(1060px, 100%); height: min(820px, 100%); display: flex; flex-direction: column; border-radius: 16px;
  background: radial-gradient(ellipse at 20% 0%, #2c1d10 0%, #17120b 60%); border: 1px solid rgba(200,148,26,.45);
  box-shadow: 0 30px 80px rgba(0,0,0,.6); overflow: hidden; color: #f2e6c9; }
.cf-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 14px 18px 10px; border-bottom: 1px solid rgba(200,148,26,.2); }
.cf-head h2 { margin: 0; font-family: 'IM Fell English', Georgia, serif; font-size: 22px; color: #f4c95d; }
.cf-sub { font-size: 13px; color: rgba(242,230,201,.75); margin-top: 2px; }
.cf-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cf-pad { padding: 10px 2px; }
.cf-empty { margin: auto; text-align: center; max-width: 420px; padding: 24px; }
.cf-empty-icon { font-size: 54px; }

/* Crafters strip */
.cf-crafters { display: flex; gap: 8px; padding: 10px 18px; overflow-x: auto; border-bottom: 1px solid rgba(200,148,26,.15); flex-shrink: 0; }
.cf-crafter { position: relative; display: grid; gap: 1px; text-align: left; min-width: 140px; padding: 8px 12px; border-radius: 10px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(200,148,26,.22); color: inherit; font: inherit; cursor: pointer; }
.cf-crafter.on { border-color: #f4c95d; background: rgba(244,201,93,.1); box-shadow: 0 0 14px rgba(244,201,93,.15); }
.cf-c-name { font-weight: 700; }
.cf-c-sub { font-size: 12px; color: rgba(242,230,201,.7); }
.cf-c-q { font-size: 10px; letter-spacing: 2px; color: #f4c95d; }
.cf-c-named { position: absolute; top: 4px; right: 6px; }

.cf-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 320px 1fr; }
.cf-queue { padding: 12px 16px; border-right: 1px solid rgba(200,148,26,.15); overflow-y: auto; }
.cf-recipes { padding: 12px 16px; overflow-y: auto; }
.cf-h { display: flex; justify-content: space-between; align-items: center; font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: rgba(242,230,201,.6); margin: 0 0 8px; }
.cf-h-sm { margin-top: 14px; }
.cf-qty-l { text-transform: none; letter-spacing: 0; font-size: 13px; color: #f2e6c9; }
.cf-qty-l input { width: 48px; background: #1d160e; color: #f2e6c9; border: 1px solid rgba(200,148,26,.35); border-radius: 6px; padding: 3px 6px; font: inherit; }

/* Queue */
.cf-job { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.03);
  border: 1px solid rgba(200,148,26,.15); margin-bottom: 6px; font-size: 13px; }
.cf-job.active { border-color: rgba(244,160,60,.5); background: linear-gradient(90deg, rgba(232,111,40,.12), rgba(255,255,255,.03)); }
.cf-job.done { opacity: .85; }
.cf-job-icon { font-size: 22px; }
.cf-job.active .cf-job-icon { animation: cf-hammer 1.1s ease-in-out infinite; transform-origin: 70% 80%; }
.cf-job-main { flex: 1; min-width: 0; }
.cf-bar { height: 6px; border-radius: 4px; background: rgba(255,255,255,.08); margin: 5px 0 2px; overflow: hidden; }
.cf-bar-fill { height: 100%; background: linear-gradient(90deg, #e86f28, #f4c95d); transition: width 1s linear; }
.cf-left { font-size: 11px; }
.cf-cancel { padding: 3px 8px; }
@keyframes cf-hammer { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(-24deg); } 55% { transform: rotate(6deg); } }

/* Recipes */
.cf-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.cf-recipe { padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.035); border: 1px solid rgba(200,148,26,.22); display: grid; gap: 7px; }
.cf-recipe.locked { opacity: .6; }
.cf-r-head { display: flex; gap: 10px; align-items: center; }
.cf-r-icon { font-size: 28px; }
.cf-r-title { flex: 1; min-width: 0; }
.cf-r-name { font-weight: 700; color: #f4e2b0; }
.cf-r-sub { font-size: 12px; color: rgba(242,230,201,.7); }
.cf-r-time { font-size: 12px; white-space: nowrap; color: rgba(242,230,201,.8); }
.cf-needs { display: flex; flex-wrap: wrap; gap: 5px; }
.cf-need { padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,.06); font-size: 12px; }
.cf-need small { color: rgba(242,230,201,.5); }
.cf-need.short { background: rgba(232,111,74,.18); color: #f0a08a; }
.cf-odds { display: flex; height: 9px; border-radius: 5px; overflow: hidden; background: rgba(255,255,255,.06); }
.cf-odds span { display: block; min-width: 2px; }
.cf-odds-key { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 11px; color: rgba(242,230,201,.75); }
.cf-odds-key i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 3px; }
.cf-why { font-size: 12px; color: rgba(242,230,201,.7); }
.cf-r-act { display: flex; gap: 6px; justify-content: flex-end; }
.cf-name { flex: 1; min-width: 0; background: #1d160e; color: #f2e6c9; border: 1px solid rgba(244,201,93,.5); border-radius: 6px; padding: 4px 8px; font: inherit; font-size: 13px; }
.cf-locked { margin-top: 12px; }
.cf-locked summary { cursor: pointer; color: rgba(242,230,201,.7); font-size: 13px; margin-bottom: 8px; }
.cf-tag { padding: 0 6px; border-radius: 999px; background: rgba(244,201,93,.14); color: #f4c95d; font-size: 11px; }

/* The crafter's mark on items (inventory detail, Market) */
.cf-markline { font-size: 12px; color: rgba(242,230,201,.75); margin-top: 2px; }
.cf-q { font-weight: 700; }
.cf-mark { font-style: italic; }

/* Dev Tools: recipes (rows and form reuse .qa-row / .qa-form / .ce-* from main.css) */
.ra-meta { font-size: 10px; color: rgba(192,221,151,.45); flex-shrink: 0; white-space: nowrap; }
.ra-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ra-btn { width: auto; padding: 4px 10px; }
.ra-muted { opacity: .4; font-size: 11px; padding: 8px; }
.ra-err { color: #e07a6a; font-size: 11px; padding: 8px; }
@media (max-width: 600px) { .ra-meta { display: none; } }

@media (max-width: 760px) {
  .cf-overlay { padding: 0; }
  .cf-panel { height: 100%; border-radius: 0; }
  .cf-main { grid-template-columns: 1fr; overflow-y: auto; }
  .cf-queue { border-right: none; border-bottom: 1px solid rgba(200,148,26,.15); overflow: visible; }
  .cf-recipes { overflow: visible; }
  .cf-list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .cf-job.active .cf-job-icon { animation: none; } .cf-bar-fill { transition: none; } }

/* Finish-up: list-at-stall control, still-to-learn, outcomes */
.cf-make-ctl { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; text-transform: none; letter-spacing: 0; }
.cf-list-l { font-size: 13px; color: #f2e6c9; }
.cf-list-l select { background: #1d160e; color: #f2e6c9; border: 1px solid rgba(200,148,26,.35); border-radius: 6px; padding: 3px 6px; font: inherit; font-size: 13px; }
.cf-sub2 { font-size: 12px; color: rgba(242,230,201,.75); margin-top: 2px; }
.cf-warn { color: #f0a08a; }
.cf-learn summary { color: #f4c95d; }
@media (max-width: 760px) { .cf-h { flex-wrap: wrap; gap: 6px; } }

/* How this works (first visit opens it) */
.cf-help { margin: 8px 18px 0; padding: 6px 10px; border-radius: 10px; background: rgba(244,201,93,.06); border: 1px solid rgba(244,201,93,.2); font-size: 13px; flex-shrink: 0; }
.cf-help summary { cursor: pointer; color: #f4c95d; }
.cf-help ul { margin: 6px 0 2px; padding-left: 18px; color: rgba(242,230,201,.85); }
.cf-help li { margin: 3px 0; }
.cf-help[open] { max-height: 40vh; overflow-y: auto; }

/* Recipe book (every recipe at this workshop) */
.cf-book-btn { padding: 3px 10px; font-size: 12px; text-transform: none; letter-spacing: 0; }
.cf-book { display: grid; gap: 6px; }
.cf-book-row { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 4px 12px; align-items: center;
  padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(200,148,26,.15); font-size: 13px; }
.cf-book-row.locked { opacity: .75; }
.cf-book-name { display: flex; gap: 8px; align-items: center; min-width: 0; }
.cf-book-name .cf-r-icon { font-size: 22px; }
.cf-book-who { font-size: 12px; color: rgba(242,230,201,.8); }
.cf-book-find { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: rgba(242,230,201,.6); }
.cf-find { padding: 2px 8px; font-size: 12px; }
@media (max-width: 760px) { .cf-book-row { grid-template-columns: 1fr; } }

/* Dev Tools → 📊 Careers (js/career-balance.js) */
.cb-tunes { display: grid; gap: 6px; margin-bottom: 10px; }
.cb-tune { display: grid; grid-template-columns: minmax(0, 1fr) 80px auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.03); }
.cb-tune-in { width: 80px; }
.cb-tight { padding: 0; }
.cb-scroll { overflow-x: auto; margin-bottom: 10px; }
.cb-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.cb-table th, .cb-table td { padding: 4px 6px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.06); white-space: nowrap; }
.cb-table th { font-weight: 600; color: rgba(192,221,151,.6); font-size: 11px; }
.cb-hist { display: flex; align-items: flex-end; gap: 1px; width: 100px; height: 22px; background: rgba(255,255,255,.03); border-radius: 3px; }
.cb-hist span { flex: 1; min-height: 1px; background: #c8a86a; border-radius: 1px 1px 0 0; }
.cb-facts { display: grid; gap: 4px; font-size: 12px; margin-bottom: 8px; }
.cb-tune-l { color: rgba(242,230,201,.85); min-width: 0; }
.cb-tune-l b { color: #f4e2b0; font-weight: 600; font-size: 13px; }
.cb-tune-l .ra-muted { opacity: 1; color: rgba(242,230,201,.55); }
.cb-table td { color: rgba(242,230,201,.85); }