/* Bunker (client/panels-bunker.js) — the cutaway canvas fills the panel under a gunmetal crew strip; sheets reuse the base look. */
.bk-root { margin: -12px -12px 0; height: calc(100% + 12px); display: flex; flex-direction: column; overflow: hidden; background: #1b1620; }
#panel .pn-wrap.bk-root { padding-bottom: 0; }
html.land #panel .pn-wrap.bk-root { max-width: none; margin: -12px -12px 0; } /* the cutaway spans the whole width */
.bk-root .pn-title { position: relative; top: 0; margin: 0; flex: 0 0 auto; }
.bk-info { width: 40px; height: 40px; padding: 0 !important; border-radius: 50%; border: 2px solid var(--pn-gold2); background: rgba(0,0,0,.35); color: var(--pn-gold); font: 800 20px/1 system-ui !important; }

/* crew strip: dig crew, builders, depth */
.bk-bar { position: relative; z-index: 2; flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; padding: 6px 8px;
  background: linear-gradient(rgba(24,26,30,.9), rgba(24,26,30,.96)), repeating-linear-gradient(-45deg, #e0a52a 0 12px, #2a2a2a 12px 24px);
  border-bottom: 2px solid #0b0c0e; box-shadow: 0 4px 10px rgba(0,0,0,.55); }
.bk-job { min-width: 0; display: grid; grid-template-columns: 26px 1fr; gap: 6px; align-items: center; padding: 5px 8px; text-align: left; border-radius: 10px;
  background: linear-gradient(#333a41, #22272c); border: 1px solid #4a535b; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); color: var(--c-text); }
.bk-job .ic { font-size: 19px; line-height: 1; filter: grayscale(.6); opacity: .8; }
.bk-job .tx { min-width: 0; display: grid; }
.bk-job b { font: 800 12px/1.2 system-ui; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-job small { font-size: 11px; line-height: 1.25; color: #aab4bd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-job small i { font: 800 11px/1 ui-monospace, Menlo, monospace; font-style: normal; color: var(--c-amber-hi); }
.bk-job.busy { border-color: var(--c-amber-lo); background: linear-gradient(#4a3a1a, #2a2110); box-shadow: inset 0 1px 0 rgba(255,220,140,.18), 0 0 8px rgba(240,180,60,.25); }
.bk-job.busy .ic { filter: none; opacity: 1; animation: bk-work 1s ease-in-out infinite; }
@keyframes bk-work { 50% { transform: rotate(-18deg) translateY(-1px); } }
.bk-meta { display: grid; align-content: center; justify-items: center; min-width: 46px; padding: 2px 6px; border-radius: 10px; background: #14171a; border: 1px solid #4a535b; }
.bk-meta b { font: 900 16px/1.1 system-ui; color: var(--c-amber-hi); }
.bk-meta small { font-size: 10px; color: #c9d1d8; white-space: nowrap; }

/* the cutaway */
.bk-stage { position: relative; flex: 1 1 0; min-height: 0; background: #1b1620; }
.bk-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.bk-stage canvas:active { cursor: grabbing; }

/* cell sheet */
.bk-sheet { display: grid; gap: 6px; }
.bk-sheet .pn-note { margin: 2px 0; font-size: 13px; line-height: 1.35; }
.bk-sheet .row { min-height: 34px; }
.bk-sheet .pn-btn-row { margin-top: 6px; }
.bk-sheet .pn-btn-row button { min-height: 46px; font-size: 15px; font-weight: 800; }
.bk-prev { width: min(100%, 266px); aspect-ratio: 200 / 114; justify-self: center; display: block; border-radius: 8px; background: #0e1012; box-shadow: 0 0 0 2px #3a434b, 0 0 0 3px #000, 0 5px 12px rgba(0,0,0,.45); }
.bk-prev.one { width: 132px; aspect-ratio: 100 / 114; }
.bk-warn { padding: 7px 10px; border-radius: 10px; background: #3a2418; border: 1px solid #a5562c; color: #ffc9a8; font-size: 13px; }
.bk-good { padding: 7px 10px; border-radius: 10px; background: #1c2f1f; border: 1px solid #3f7a45; color: #cdeccd; font-size: 13px; }
.bk-good b { color: #fff; }
.bk-center { text-align: center; }
.bk-up { color: var(--good); font-weight: 700; }
.bk-cap { color: var(--muted); font-weight: 400; font-size: 12px; }
.bk-jobbox { display: grid; gap: 6px; padding: 8px 10px; border-radius: 12px; background: #20262b; border: 1px solid var(--c-amber-lo); }
.bk-jobbox .row { border: 0; padding: 0; min-height: 0; }
.bk-jobbox .row b { font: 800 15px/1 ui-monospace, Menlo, monospace; color: var(--c-amber-hi); }
.bk-jobbox .pn-bar { height: 10px; margin: 0; } .bk-jobbox .pn-bar i { transition: none; }
.bk-link { justify-self: center; margin-top: 2px; padding: 6px 12px; border: 0; background: none; color: var(--muted); font-size: 12px; text-decoration: underline; }

/* build list */
.bk-opts { display: grid; gap: 6px; }
.bk-opt { display: grid; grid-template-columns: 82px 1fr auto; gap: 8px; align-items: center; padding: 6px; border-radius: 12px; background: linear-gradient(#262d33, #1b2025); border: 1px solid #3a434b; }
.bk-opt .bk-thumb { justify-self: center; border-radius: 5px; box-shadow: 0 0 0 1px #000, 0 2px 6px rgba(0,0,0,.5); }
.bk-opt .tx { min-width: 0; display: grid; gap: 1px; }
.bk-opt .nm { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.bk-opt .nm b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-opt .nm i { flex: 0 0 auto; padding: 0 6px; border-radius: 999px; background: #0e1114; border: 1px solid #3a434b; font: 700 10.5px/1.5 system-ui; font-style: normal; color: #aab4bd; }
.bk-opt .tx small { font-size: 11px; color: var(--muted); line-height: 1.25; }
.bk-opt .tx .eff { color: #9fd8a4; }
.bk-opt .tx .why { color: #ffb08a; font-weight: 700; }
.bk-opt .cost { gap: 6px; font-size: 12px; margin-top: 1px; }
.bk-opt button { min-width: 62px; min-height: 46px; padding: 6px 8px; display: grid; justify-items: center; align-content: center; gap: 1px; font-size: 14px; line-height: 1.1; }
.bk-opt button small { font: 700 10.5px/1 ui-monospace, Menlo, monospace; opacity: .85; }
.bk-opt.locked { opacity: .62; } .bk-opt.locked .bk-thumb { filter: grayscale(.8) brightness(.7); }

/* overview popup */
.bk-over { display: grid; gap: 2px; }
.bk-over h3:first-of-type { margin-top: 10px; }
.bk-how { margin: 0; padding-left: 18px; display: grid; gap: 5px; font-size: 13px; line-height: 1.35; color: #d5ddd4; }