/* W13 UI: #staffPanel + #menuPanel. Palette from ui/ui.css:
   panel #3d3129, deep #2b2320, border #6b4a34, gold #e8b84b, text #f2e9d8, muted #c9b393, dim #bdb09c, green #4a7a4f, red #b5533c. */

#staffPanel, #menuPanel { margin: 10px 0; }
.u2-panel { background: #3d3129; border: 2px solid #6b4a34; border-radius: 6px; padding: 10px; }
.u2-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.u2-title { font-size: 13px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; color: #c9b393; }
.u2-title b { color: #f2e9d8; margin-left: 4px; }
.u2-meta { font-size: 11px; color: #bdb09c; }
.u2-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.u2-tabs button { flex: 1; min-height: 44px; font-size: 12px; font-weight: bold; color: #c9b393; background: #2b2320;
  border: 2px solid #6b4a34; border-radius: 6px; }
.u2-tabs button[aria-selected="true"] { background: #e8b84b; color: #2b2320; border-color: #e8b84b; }

#staffPanel .row-name, #menuPanel .row-name { font-size: 13px; font-weight: bold; margin: 0; }
#staffPanel .row-sub, #menuPanel .row-sub { font-size: 11px; color: #c9b393; margin: 0; }
.sf-empty, .sf-note { font-size: 12px; color: #c9b393; text-align: center; padding: 10px; border: 2px dashed #6b4a34; border-radius: 6px; margin: 0 0 8px; }
.sf-note { border-style: solid; border-color: #b5533c; color: #f2e9d8; }
.sf-tag { display: inline-block; font-size: 10px; font-weight: bold; padding: 1px 5px; border-radius: 3px; background: #5a5048;
  color: #f2e9d8; vertical-align: 1px; }
.sf-tag.gold { background: #e8b84b; color: #2b2320; }

/* ---------- staff cards ---------- */
.sf-card { background: #2b2320; border: 2px solid #6b4a34; border-radius: 6px; padding: 8px; margin-bottom: 8px; }
.sf-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sf-name { min-width: 0; flex: 1; }
.sf-job { display: flex; flex-shrink: 0; border: 2px solid #6b4a34; border-radius: 6px; overflow: hidden; }
.sf-job button { min-height: 44px; min-width: 52px; font-size: 11px; font-weight: bold; border: 0; background: #3d3129; color: #bdb09c; }
.sf-job button[aria-pressed="true"] { background: #3b6640; color: #f2e9d8; }
.sf-xp { position: relative; height: 14px; margin: 6px 0; background: #3d3129; border: 1px solid #6b4a34; border-radius: 7px; overflow: hidden; }
.sf-xp i { position: absolute; inset: 0 auto 0 0; background: #3f6f8a; }
.sf-xp span { position: relative; display: block; font-size: 9px; line-height: 12px; text-align: center; color: #f2e9d8;
  font-variant-numeric: tabular-nums; }
.sf-xp.sm { margin: 4px 0 0; }
.sf-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; }
.sf-bar { display: grid; grid-template-columns: 38px 1fr 30px; align-items: center; gap: 4px; font-size: 11px; }
.sf-bar .k { color: #c9b393; }
.sf-bar .t { height: 8px; background: #3d3129; border-radius: 4px; overflow: hidden; }
.sf-bar i { display: block; height: 100%; border-radius: 4px; }
.sf-bar b { text-align: right; font-variant-numeric: tabular-nums; }
.s-cook { background: #d9793b; } .s-serve { background: #3f9a8a; } .s-speed { background: #6f8ad0; } .s-stamina { background: #6fae4f; }
.sf-skill { font-size: 11px; margin: 6px 0 0; color: #f2e9d8; }
.sf-skill span { color: #2b2320; background: #c9b393; font-size: 9px; font-weight: bold; text-transform: uppercase; padding: 1px 4px; border-radius: 3px; margin-right: 2px; }
.sf-skill em { font-style: normal; color: #e8b84b; font-weight: bold; }
.sf-trainrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 8px; }
.sf-train { min-height: 44px; padding: 3px 2px; font-size: 11px; font-weight: bold; line-height: 1.15; color: #2b2320;
  background: #e8b84b; border: 2px solid #6b4a34; border-radius: 6px; }
.sf-train small, .sf-hire small, .mu-presets small { display: block; font-size: 9px; font-weight: normal; }
.sf-train:disabled, .sf-hire:disabled, .sf-up:disabled { background: #5a5048; color: #bdb09c; border-color: #5a5048; cursor: not-allowed; }
.sf-hire { min-height: 44px; min-width: 88px; padding: 4px 8px; font-size: 12px; font-weight: bold; line-height: 1.15; color: #2b2320;
  background: #e8b84b; border: 2px solid #6b4a34; border-radius: 6px; flex-shrink: 0; }
.sf-up { width: 100%; min-height: 44px; margin-top: 8px; font-size: 11px; font-weight: bold; color: #f2e9d8; background: #3f6f8a;
  border: 2px solid #6b4a34; border-radius: 6px; }
.sf-fire { width: 100%; min-height: 44px; margin-top: 6px; font-size: 11px; color: #bdb09c; background: transparent;
  border: 1px dashed #6b4a34; border-radius: 6px; }
.sf-fire.armed { color: #f2e9d8; background: #9a4430; border-style: solid; }
.sf-card.cand .sf-bars { margin-top: 6px; }

/* ---------- menu rows ---------- */
.mu-row { background: #2b2320; border: 2px solid #6b4a34; border-radius: 6px; padding: 8px; margin-bottom: 8px; }
.mu-row.off { opacity: 0.6; }
.mu-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mu-name { min-width: 0; flex: 1; }
.mu-name .row-name { line-height: 1.25; white-space: normal; overflow-wrap: anywhere; }
.pos { color: #8fcf7f; } .neg { color: #e0826a; } #menuPanel .row-sub.good { color: #8fcf7f; }
.mu-price { display: grid; grid-template-columns: 44px 44px 1fr 44px 44px; gap: 4px; margin-top: 8px; }
.mu-step { min-height: 44px; font-size: 12px; font-weight: bold; color: #f2e9d8; background: #3d3129; border: 2px solid #6b4a34; border-radius: 6px; padding: 0; }
.mu-step:active, .sf-train:active:not(:disabled), .sf-hire:active:not(:disabled), .mu-presets button:active { transform: scale(0.95); }
.mu-in { display: flex; align-items: center; background: #3d3129; border: 2px solid #e8b84b; border-radius: 6px; padding: 0 8px; min-width: 0; }
.mu-in input { width: 100%; min-width: 0; min-height: 44px; font: bold 16px/1 ui-monospace, "Consolas", monospace; text-align: right;
  color: #f2e9d8; background: transparent; border: 0; -moz-appearance: textfield; }
.mu-in input::-webkit-outer-spin-button, .mu-in input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mu-in span { font-weight: bold; color: #e8b84b; margin-left: 2px; }
.mu-presets { display: flex; gap: 4px; margin-top: 4px; }
.mu-presets button { flex: 1; min-height: 44px; padding: 2px; font-size: 11px; font-weight: bold; line-height: 1.15; color: #c9b393;
  background: #3d3129; border: 2px solid #6b4a34; border-radius: 6px; }
.mu-presets button[aria-pressed="true"] { background: #e8b84b; color: #2b2320; border-color: #e8b84b; }
.mu-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; font-size: 11px; }
.mu-diff { color: #bdb09c; white-space: nowrap; }
.mu-dem { display: flex; align-items: center; gap: 6px; font-weight: bold; }
.mu-dem .t { width: 70px; height: 8px; background: #3d3129; border-radius: 4px; overflow: hidden; }
.mu-dem i { display: block; height: 100%; }
.mu-dem.hi { color: #8fcf7f; } .mu-dem.hi i { background: #4a9a4f; }
.mu-dem.ok { color: #e8b84b; } .mu-dem.ok i { background: #e8b84b; }
.mu-dem.lo { color: #e0a06a; } .mu-dem.lo i { background: #d9793b; }
.mu-dem.bad { color: #e0826a; } .mu-dem.bad i { background: #b5533c; }
.mu-dem.none { color: #bdb09c; font-weight: normal; }

/* ---------- guests ---------- */
.mu-guest { display: flex; gap: 8px; background: #2b2320; border: 2px solid #6b4a34; border-radius: 6px; padding: 8px; margin-bottom: 6px; }
.mu-gi { flex: 1; min-width: 0; }
.mu-av { position: relative; width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: #c9b393; color: #2b2320;
  display: grid; place-items: center; font-weight: 900; font-size: 18px; border: 2px solid #6b4a34; }
.mu-av .star { position: absolute; right: -4px; top: -4px; font-size: 14px; color: #e8b84b; text-shadow: 0 0 2px #2b2320; }
.mu-av.sil { background: #5a5048; border-color: #5a5048; overflow: hidden; }
.mu-av.sil::before { content: ""; position: absolute; left: 50%; top: 7px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #8a8074; }
.mu-av.sil::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 28px; height: 20px; margin-left: -14px; border-radius: 14px 14px 0 0; background: #8a8074; }
.mu-likes { font-size: 11px; color: #c9b393; margin: 3px 0 0; display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.mu-chip { font-size: 10px; font-weight: bold; padding: 1px 5px; border-radius: 3px; }
.mu-chip.soup { background: #e8b84b; color: #2b2320; } .mu-chip.nd { background: #3f6f8a; color: #f2e9d8; }
.mu-sub { font-size: 11px; color: #bdb09c; text-transform: uppercase; letter-spacing: 0.5px; margin: 10px 0 6px; }
.mu-lockrow { background: #2b2320; border: 2px dashed #6b4a34; border-radius: 6px; padding: 8px; margin-bottom: 6px; }
.mu-lockrow b { color: #f2e9d8; }
.mu-sils { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mu-sils .mu-av { width: 34px; height: 34px; }

#staffPanel button:focus-visible, #menuPanel button:focus-visible, #menuPanel input:focus-visible { outline: 3px solid #f2e9d8; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .mu-step:active, .sf-train:active, .sf-hire:active, .mu-presets button:active { transform: none; }
}

/* ---------- PV3 pixel polish: section headers, portraits, bowl thumbnails (shared by the other panels) ---------- */
/* .pxh = RS-style rust title strip with a gold pixel diamond; used by staff, menu, goals, items, rank, sides and map. */
.pxh { display: flex; align-items: center; gap: 7px; margin: 10px 0 6px; padding: 5px 8px; min-height: 28px; box-sizing: border-box;
  font: bold 12px/1.2 system-ui, sans-serif; color: #fbf3e2; text-transform: uppercase; letter-spacing: 0.6px;
  background: #7f3a1d; border: 2px solid #2b1d16; border-radius: 3px; box-shadow: inset 0 2px 0 #a8552e, inset 0 -2px 0 #5e2912;
  text-shadow: 0 1px 0 #3a150a; }
.pxh::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; background: #e8b84b; box-shadow: 0 0 0 1px #2b1d16; transform: rotate(45deg); }
.pxh .hint, .pxh .u2-meta { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: normal; font-size: 11px; color: #fbe6cf; text-align: right; }
.pxh:first-child { margin-top: 0; }
.u2-top.pxh { margin: 0 0 8px; }
.u2-top.pxh .u2-title { color: #fbf3e2; font-size: 12px; }
.u2-top.pxh .u2-title b { color: #f2d27a; }
.mu-sub.pxh { font-size: 12px; color: #fbf3e2; }

.sf-face { width: 42px; height: 51px; flex-shrink: 0; border: 2px solid #2b1d16; border-radius: 3px; box-shadow: 0 0 0 1px #6b4a34; overflow: hidden; background: #cfe9f2; }
.sf-face .pt-img { width: 42px; height: 51px; }
.sf-card.cand .sf-face { box-shadow: 0 0 0 1px #e8b84b; }
.mu-bowl { width: 60px; height: 40px; flex-shrink: 0; display: grid; place-items: center; background: #2b2320; border: 2px solid #6b4a34; border-radius: 4px; }
.mu-bowl .pt-img { width: 60px; height: 40px; }
.mu-row .mu-bowl { background: #3d3129; }
.mu-av.px { width: 42px; height: 51px; border-radius: 3px; background: #cfe9f2; border: 2px solid #2b1d16; box-shadow: 0 0 0 1px #6b4a34; overflow: visible; }
.mu-av.px .pt-img { width: 42px; height: 51px; }
.mu-av .lv { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); font: bold 9px/1 ui-monospace, "Consolas", monospace; color: #f2e9d8;
  background: #26365e; border: 1px solid #2b1d16; border-radius: 2px; padding: 2px 3px; white-space: nowrap; }
.mu-av.px.sil2 { width: 30px; height: 36px; background: #4a4440; }
.mu-av.px.sil2 .pt-img { width: 28px; height: 34px; }
.mu-guest { align-items: flex-start; padding-bottom: 12px; }