/* Survivors (client/panels-survivors.js) — camp ledger on the shared dark green: canvas-khaki cards, rust for trouble,
   portrait chips in twelve hues. Mobile first (375px); reuses the pn-* building blocks from panels.css. */
.sv-root { --sv-card: linear-gradient(#232f27, #19221c); --sv-edge: #3b4f41; --sv-rust: var(--c-blood); --sv-amber: var(--c-amber); }

/* buttons */
.sv-btn { min-height: 44px; padding: 8px 14px; border-radius: 12px; font-weight: 800; letter-spacing: .02em; white-space: nowrap;
  background: linear-gradient(#34463a, #223028); border: 1px solid #4a6352; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 0 rgba(0,0,0,.45); transition: transform .08s; }
.sv-btn:active:not([disabled]) { transform: translateY(1px) scale(.98); }
.sv-btn[disabled] { filter: grayscale(1) brightness(.7); cursor: default; }
.sv-btn.gold { background: linear-gradient(#ffd97a, #e3a12f 55%, #b8761a); border-color: #ffe7a6; color: #2a1a03; text-shadow: 0 1px 0 rgba(255,255,255,.4); }
.sv-btn.sm { min-height: 38px; padding: 6px 12px; font-size: 13px; }
.sv-btn.pulse { animation: svPulse 1.6s ease-in-out infinite; }
@keyframes svPulse { 50% { box-shadow: 0 0 0 4px rgba(255,210,110,.22), 0 0 18px rgba(255,190,70,.55); } }
.pn-title .pn-right .sv-help { width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid var(--pn-gold2); background: rgba(0,0,0,.35); color: var(--pn-gold); font: 900 17px/1 system-ui; }

/* portrait chip */
.sv-chip { --h: 40; --z: 44px; position: relative; flex: 0 0 var(--z); width: var(--z); height: var(--z); border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 26%, hsl(var(--h) 58% 60%), hsl(var(--h) 52% 30%) 78%); border: 2px solid rgba(255,236,196,.8);
  box-shadow: 0 2px 5px rgba(0,0,0,.5), inset 0 -5px 8px rgba(0,0,0,.28), inset 0 3px 4px rgba(255,255,255,.22); }
.sv-chip > b { font: 900 calc(var(--z) * .36)/1 system-ui; color: #fff; letter-spacing: .03em; text-shadow: 0 1px 2px rgba(0,0,0,.65); }
.sv-chip > i { position: absolute; font-style: normal; display: grid; place-items: center; border-radius: 50%; }
.sv-chip .sk { right: calc(var(--z) * -.12); bottom: calc(var(--z) * -.1); width: calc(var(--z) * .46); height: calc(var(--z) * .46); font-size: calc(var(--z) * .25); line-height: 1; background: #0e1510; border: 1.5px solid var(--pn-gold2); }
.sv-chip .bang { left: calc(var(--z) * -.12); top: calc(var(--z) * -.14); width: calc(var(--z) * .44); height: calc(var(--z) * .44); font: 900 calc(var(--z) * .3)/1 system-ui; color: #2a1a03;
  background: linear-gradient(#ffe08a, #f0a52c); border: 1.5px solid #fff6d8; box-shadow: 0 2px 4px rgba(0,0,0,.5); animation: svBang 1.2s ease-in-out infinite; }
@keyframes svBang { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px) rotate(-8deg); } }
.sv-chip.sick { filter: saturate(.3) brightness(.85); border-color: var(--sv-rust); }

/* health / happiness meters */
.sv-meter { display: grid; grid-template-columns: 16px 1fr 24px; gap: 4px; align-items: center; font-size: 11px; min-width: 0; }
.sv-meter > span { font-size: 11px; line-height: 1; }
.sv-meter .pn-bar { margin: 0; height: 7px; }
.sv-meter > b { font: 700 11px/1 system-ui; color: var(--muted); text-align: right; }
.sv-meter.hp .pn-bar i { background: linear-gradient(90deg, #c8473d, #ff8a7a); }
.sv-meter.mood .pn-bar i { background: linear-gradient(90deg, var(--c-amber-lo), #ffd97a); }
.sv-meter.low > b { color: var(--sv-rust); }
.sv-meter.low .pn-bar { border-color: var(--sv-rust); }

/* needs summary */
.sv-sum { display: grid; gap: 10px; }
.sv-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sv-stat { display: grid; justify-items: center; gap: 1px; padding: 8px 4px 7px; border-radius: 12px; background: #0e1510; border: 1px solid var(--line); min-width: 0; }
.sv-stat > span { font-size: 20px; line-height: 1.1; }
.sv-stat > b { font: 900 17px/1.15 system-ui; color: #fff; white-space: nowrap; }
.sv-stat > small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.sv-stat.bad { border-color: var(--sv-rust); } .sv-stat.bad > b { color: #ff8a7a; }
.sv-avgs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sv-avgs .sv-meter { grid-template-columns: 18px 1fr 26px; font-size: 13px; } .sv-avgs .sv-meter > span { font-size: 13px; } .sv-avgs .sv-meter > b { font-size: 12px; color: var(--text); }
.sv-fx .pn-chip { font-weight: 700; color: #cfe8b8; border-color: #3f5a3a; }
.sv-alert { padding: 7px 10px; border-radius: 10px; font-size: 13px; line-height: 1.3; background: #2a2410; border: 1px solid var(--pn-gold2); color: var(--c-amber-pale); }
.sv-alert.bad { background: #331a16; border-color: var(--sv-rust); color: #ffc2b8; }

/* "!" moments */
.sv-talks { display: grid; gap: 8px; margin-bottom: 10px; }
.sv-talk { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; }
.sv-talk .sv-chip { margin-top: 4px; }
.sv-talk .bub { position: relative; display: grid; gap: 4px; padding: 8px 10px 10px; border-radius: 4px 14px 14px 14px; background: linear-gradient(#f3e6c4, #dcc793); color: #2a2110; box-shadow: 0 3px 8px rgba(0,0,0,.4); }
.sv-talk .bub::before { content: ''; position: absolute; left: -8px; top: 10px; border: 8px solid transparent; border-right-color: #ecdcb2; border-left: 0; }
.sv-talk .bub > b { font: 800 13px/1.2 system-ui; color: #6a3a12; }
.sv-talk .bub > p { margin: 0; font-size: 14px; line-height: 1.35; }
.sv-talk .bub .sv-btn { justify-self: end; margin-top: 2px; }

/* optimize bar */
.sv-opt { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; margin-bottom: 10px; border-radius: var(--pn-r); background: var(--sv-card); border: 1px solid var(--sv-edge); }
.sv-opt.todo { border-color: var(--pn-gold2); background: linear-gradient(#2c2a16, #1c2219); }
.sv-opt .tx { flex: 1; min-width: 0; display: grid; }
.sv-opt .tx b { font-size: 15px; } .sv-opt .tx small { font-size: 12px; color: var(--muted); }
.sv-opt.todo .tx small { color: #ffd97a; }
.sv-tabs button { flex: 1 1 0; }

/* roster */
.sv-list { display: grid; gap: 8px; }
.sv-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 9px 10px 9px 10px; border-radius: 14px; background: var(--sv-card); border: 1px solid var(--sv-edge); cursor: pointer; }
.sv-row:active { filter: brightness(1.12); }
.sv-row.idle { border-color: #8a6a22; box-shadow: inset 3px 0 0 var(--sv-amber); }
.sv-row.sick { border-color: #7a2f28; box-shadow: inset 3px 0 0 var(--sv-rust); }
.sv-row .in, .sv-card .in, .sv-pick .in { min-width: 0; display: grid; gap: 3px; }
.sv-row .nm { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.sv-row .nm b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-row .nm span { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--pn-gold); text-transform: uppercase; letter-spacing: .04em; }
.sv-root .st, #sheet .st { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st.warn { color: var(--sv-amber); } .st.bad { color: #ff9a8c; } .st b { font-weight: 800; color: #fff; }
.st .star, .sv-pick .star, .sv-slot .star { font-style: normal; color: var(--pn-gold); } .st .hun { font-style: normal; color: #ff9a8c; }
.sv-row .ms { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sv-row .go { color: var(--muted); font-size: 22px; padding: 0 4px; }
.sv-btn.bangbtn { min-width: 40px; padding: 6px 0; font: 900 18px/1 system-ui; border-radius: 50%; }

/* job board */
.sv-job { border-radius: 14px; overflow: hidden; background: var(--sv-card); border: 1px solid var(--sv-edge); }
.sv-job .hd { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; background: rgba(0,0,0,.28); border-bottom: 1px solid rgba(255,255,255,.05); }
.sv-job .hd .ic { font-size: 24px; text-align: center; }
.sv-job .hd .tt { min-width: 0; display: grid; } .sv-job .hd .tt b { font-size: 15px; color: var(--pn-gold); } .sv-job .hd .tt small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-job .hd .val { padding: 3px 9px; border-radius: 999px; background: #1f3a1c; color: var(--c-good-hi); font: 900 13px/1.2 system-ui; white-space: nowrap; }
.sv-job .hd .val.zero { background: #2a3036; color: #8a949c; }
.sv-job .bd { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-top: 1px solid rgba(255,255,255,.05); }
.sv-job .bd:first-of-type { border-top: 0; }
.sv-job .bd .nm { min-width: 0; display: grid; } .sv-job .bd .nm b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sv-job .bd .nm small { font-size: 11.5px; color: var(--muted); }
.sv-job .slots { flex: 0 0 auto; display: flex; gap: 8px; }
.sv-slot { position: relative; width: 44px; height: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(224,87,76,.1); border: 2px dashed var(--sv-rust); color: #ff9a8c; font: 800 22px/1 system-ui; }
.sv-slot.on { background: none; border: 0; }
.sv-slot.on.sick::after { content: '🤒'; position: absolute; left: -4px; top: -6px; font-size: 15px; }
.sv-slot .star { position: absolute; right: -3px; top: -6px; font-size: 14px; text-shadow: 0 1px 2px #000; }

/* sheets */
.sv-card { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: center; padding: 10px 6px 12px; }
.sv-card .in { gap: 6px; } .sv-card .sv-meter { grid-template-columns: 18px 1fr 28px; font-size: 13px; } .sv-card .sv-meter > span { font-size: 13px; } .sv-card .sv-meter > b { font-size: 12px; }
.sv-quote { display: grid; gap: 8px; padding: 10px 12px; margin-bottom: 4px; border-radius: 12px; background: linear-gradient(#f3e6c4, #dcc793); color: #2a2110; }
.sv-quote p { margin: 0; font-size: 14px; line-height: 1.35; }
.sv-quote.ill { background: #331a16; border: 1px solid var(--sv-rust); color: #ffc2b8; }
.sv-picks { display: grid; }
.sv-pick { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--line); }
.sv-pick:last-child { border-bottom: 0; }
.sv-pick .ic { font-size: 24px; text-align: center; }
.sv-pick .in b { font-size: 14px; } .sv-pick .in small { font-size: 12px; color: var(--muted); }
.sv-pick .sv-btn { min-width: 72px; }
.sv-rules { margin: 6px 0 4px; padding-left: 20px; display: grid; gap: 7px; font-size: 14px; line-height: 1.4; }