/* Generic module bay (views/module.js) — the Smelter, the Rest Area, Hydroponics: the module's identity in the context
   column, and its work in the body — this level's effects, the output it holds, and the Smelter's lines. */

/* ── Identity ── */
.mb-id{
  display:flex;align-items:center;gap:16px;padding:14px 16px;
  border:1px solid color-mix(in srgb,var(--sb-accent) 32%,transparent);border-radius:var(--u-r);
  background:
    radial-gradient(90% 130% at 0% 50%,color-mix(in srgb,var(--sb-accent) 15%,transparent),transparent 70%),
    var(--u-well);
}
.mb-id .sb-badge{--badge:72px}
.mb-id-lv{display:flex;flex-direction:column;gap:3px}
.mb-id-lv span{font:600 10px/1.2 var(--u-font-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--u-label)}
.mb-id-lv b{font:700 36px/1 var(--u-font-ui);font-variant-numeric:tabular-nums;color:var(--u-value)}

/* ── Effects ── */
.mb-fx .u-chips{gap:10px}
.mb-fx .u-stat{min-width:160px;padding:12px 16px;gap:6px}
.mb-fx .u-stat-v{font-size:19px}

/* ── Output ── */
.mb-stores{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
/* The output a store or a line switch stands for, as the colour it is drawn in. */
:is(.mb-store,.mb-seg-b){--tone:var(--u-line)}
:is(.mb-store,.mb-seg-b).is-metal{--tone:var(--u-metal)}
:is(.mb-store,.mb-seg-b).is-silicon{--tone:var(--u-silicon)}
:is(.mb-store,.mb-seg-b).is-meal{--tone:var(--u-meal)}

.mb-store{
  display:flex;flex-direction:column;gap:9px;padding:14px 16px 14px 18px;
  border:1px solid var(--u-line-soft);border-radius:var(--u-r-sm);
  background:var(--u-well);box-shadow:inset 3px 0 0 var(--tone);
}
.mb-store.is-full{border-color:rgba(255,34,68,.4)}
.mb-store-k{font:700 11px/1 var(--u-font-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--tone)}
.mb-store-v{display:flex;align-items:baseline;gap:7px}
.mb-store-v b{font:700 28px/1 var(--u-font-ui);font-variant-numeric:tabular-nums;color:var(--u-value)}
.mb-store-v span{font:600 14px/1 var(--u-font-ui);font-variant-numeric:tabular-nums;color:var(--u-label)}
.mb-store .u-meter{height:7px}
.mb-store-run{font:500 13px/1.35 var(--u-font-ui);color:var(--u-body)}
.mb-store-run.is-warn{color:var(--u-warn)}

/* ── Lines ── */
.mb-lines{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px;align-items:start}
.mb-lines+.u-note{margin-top:10px}
.mb-line{
  display:flex;flex-direction:column;gap:12px;padding:14px 16px;
  border:1px solid var(--u-line-soft);border-radius:var(--u-r-sm);background:var(--u-well);
}
.mb-line.is-run{border-color:rgba(0,232,122,.3)}
.mb-line-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mb-line-name{font:700 17px/1.2 var(--u-font-ui);color:var(--u-value)}
/* The ore switch: one segment per output in wire order; the lit one is what the line refines. */
.mb-seg{
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  border:1px solid var(--u-line-dim);border-radius:var(--u-r-sm);overflow:hidden;
}
.mb-seg-b{
  appearance:none;border:0;background:transparent;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 10px;
  color:var(--u-label);transition:background .15s,color .15s;
}
.mb-seg-b+.mb-seg-b{border-left:1px solid var(--u-line-dim)}
.mb-seg-b b{font:700 13px/1 var(--u-font-ui);letter-spacing:.14em;text-transform:uppercase}
.mb-seg-b span{font:500 11px/1 var(--u-font-ui);color:var(--u-mute)}
.mb-seg-b:hover:not(.is-on){background:rgba(79,216,255,.08);color:var(--u-value)}
.mb-seg-b.is-on{
  cursor:default;color:var(--u-value);
  background:color-mix(in srgb,var(--tone) 18%,transparent);box-shadow:inset 0 -2px 0 var(--tone);
}
.mb-seg-b.is-on b{color:var(--tone)}
.mb-seg-b.is-on span{color:var(--u-body)}
.mb-line-flow{font:600 14px/1.35 var(--u-font-ui);color:var(--u-body)}
.mb-line-worker{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;
  padding-top:11px;border-top:1px solid var(--u-line-soft);
}
.mb-line-who{display:flex;flex-direction:column;gap:5px;min-width:0}
.mb-line-who>span:last-child{font:500 13px/1.35 var(--u-font-ui);color:var(--u-body);overflow-wrap:anywhere}
.mb-line-acts{display:flex;flex-wrap:wrap;gap:8px}

/* ── Crew stamina (Rest Area) ── */
.mb-rests{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px}
.mb-rest{
  display:flex;flex-direction:column;gap:8px;padding:11px 14px;
  border:1px solid var(--u-line-soft);border-radius:var(--u-r-sm);background:var(--u-well);
}
.mb-rest-name{font:600 14px/1.2 var(--u-font-ui);color:var(--u-value);overflow-wrap:anywhere}

@media (max-height:520px){
  .mb-id{padding:10px 12px;gap:12px}
  .mb-id .sb-badge{--badge:52px}
  .mb-id-lv b{font-size:26px}
  .mb-fx .u-stat{min-width:120px;padding:8px 11px}
  .mb-fx .u-stat-v{font-size:15px}
  .mb-store{padding:10px 12px 10px 14px;gap:7px}
  .mb-store-v b{font-size:21px}
  .mb-line{padding:10px 12px;gap:9px}
}
@media (max-width:900px){
  .mb-lines{grid-template-columns:minmax(0,1fr)}
}