/* Painel da unit, a produção e o Silo (P-108; design aprovado "M12 — da mina ao lingote":
 * M12Prod, M12Run, M12Target, M12Silo, M12Mobile): a seção Produção antes dos containers, uma
 * caixa por módulo com o estado, a barra do lote e o seletor do alvo do Refiner, e o Silo com a
 * pílula da form, a linha das ligações, a pureza no alvo e uma linha por element. No desktop rola
 * o corpo do painel, sem a caixa de 330 px do design (VISUAL, P-108: duas barras de rolagem
 * espremiam a linha do element); no celular a produção e os containers rolam juntos numa caixa
 * de 220 px, o fim esmaecido. */
.up-scroll { display: contents; }
.up-prod { display: flex; flex-direction: column; gap: 7px; padding-top: 10px; border-top: 1px solid rgba(150, 185, 255, 0.12); }
.up-prod[hidden], .upp-run[hidden], .upp-sub[hidden], .upp-tg[hidden], .upp-next[hidden], .upp-ref[hidden],
.upp-lb[hidden], .upp-auto[hidden] { display: none; }
.upp-h { display: flex; align-items: center; gap: 6px; }
.upp-t, .upp-sum { font: 600 11px ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace; }
.upp-t { letter-spacing: 0.1em; text-transform: uppercase; color: #C4CFEA; }
.upp-sum { margin-left: auto; font-weight: 400; color: #6CF2E0; }
.upp-sum.off { color: #93A3C8; }
.upp-rows { display: flex; flex-direction: column; gap: 7px; }
.upp-row {
  display: flex; flex-direction: column; gap: 6px; padding: 8px 9px; border-radius: 10px;
  background: rgba(7, 11, 26, 0.35); border: 1px solid rgba(150, 185, 255, 0.14);
}
.upp-row.wait, .upp-row.block { border-color: rgba(183, 156, 255, 0.35); }
/* Nome e estado que não cabem na linha (a barra de rolagem da plataforma come largura): o estado
 * desce, alinhado à direita, como as cabeças do quadro Ordem; o nome nunca vira reticências. */
.upp-top { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; }
.upp-ic { flex: none; color: #9DBBFF; }
.upp-n { flex: 1 0 auto; max-width: 100%; font-size: 13.5px; font-weight: 600; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upp-s { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #93A3C8; }
.upp-s.go { color: #6CF2E0; }
.upp-s.wait, .upp-s.block { color: #D9CCFF; }
/* As marcas: ponto cinza parado, quadrado plasma rodando, anel violeta esperando, losango sem link. */
.upp-dot { flex: none; width: 8px; height: 8px; box-sizing: border-box; border-radius: 50%; background: #5B6788; }
.upp-dot.go { border-radius: 2px; background: #6CF2E0; box-shadow: 0 0 0 3px rgba(108, 242, 224, 0.18); }
.upp-dot.wait { background: transparent; border: 2px solid #B79CFF; }
.upp-dot.block { border-radius: 0; background: #B79CFF; transform: rotate(45deg) scale(0.85); }
.upp-run { display: flex; align-items: center; gap: 8px; }
.upp-bar { flex: 1; height: 4px; border-radius: 2px; overflow: hidden; background: rgba(150, 185, 255, 0.16); }
.upp-bar span { display: block; height: 100%; background: #6CF2E0; }
.upp-pc { font: 11px ui-monospace, Menlo, Consolas, monospace; color: #6CF2E0; font-variant-numeric: tabular-nums; }
.upp-sub { margin: 0; font-size: 12px; line-height: 15px; color: #93A3C8; }
/* O seletor do element-alvo (M12Target): botão de 30 px (44 no celular) e a lista ali embaixo. */
.upp-tg { display: flex; align-items: center; gap: 8px; }
.upp-tgl { font-size: 12.5px; color: #93A3C8; }
.upp-sel {
  flex: 1; min-width: 0; height: 30px; box-sizing: border-box; padding: 0 8px 0 10px; display: flex;
  align-items: center; gap: 6px; border: 0; border-radius: 8px; cursor: pointer; font-family: inherit;
  color: #E8EEFF; background: rgba(130, 160, 255, 0.10); box-shadow: inset 0 0 0 1px rgba(150, 185, 255, 0.30);
}
.upp-sel[aria-expanded="true"] { box-shadow: inset 0 0 0 1px rgba(108, 242, 224, 0.55); }
.upp-sel.busy { opacity: 0.8; box-shadow: inset 0 0 0 1px rgba(108, 242, 224, 0.4); }
.upp-sel:focus-visible { outline: 2px solid #6CF2E0; outline-offset: 2px; }
.upp-tgn { font-size: 13.5px; font-weight: 650; white-space: nowrap; color: #6CF2E0; }
.upp-tgn.dim { color: #93A3C8; }
.upp-auto {
  flex: none; padding: 0 4px; border-radius: 6px; border: 1px solid rgba(150, 185, 255, 0.3);
  font: 10px/14px ui-monospace, Menlo, Consolas, monospace; color: #93A3C8;
}
.upp-chev { flex: none; margin-left: auto; color: #93A3C8; }
.upp-next { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 15px; color: #C4CFEA; }
.upp-ring { flex: none; width: 7px; height: 7px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid #6CF2E0; }
.upp-ref {
  display: flex; gap: 7px; padding: 6px 8px; border-radius: 8px;
  background: rgba(255, 143, 128, 0.10); border: 1px solid rgba(255, 143, 128, 0.40);
  font-size: 12px; line-height: 15px; color: #F2D2CC;
}
.upp-ref b { font-weight: 650; color: #FFB4A9; }
.upp-bang {
  flex: none; width: 15px; height: 15px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 800; color: #1A0B0B; background: #FF8F80;
}
.upp-lb {
  max-height: 232px; overflow-y: auto; padding: 4px; border-radius: 10px; background: #0B1128;
  border: 1px solid rgba(150, 185, 255, 0.22); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  mask-image: linear-gradient(180deg, #000 88%, transparent);
}
.upp-oh {
  padding: 6px 8px 2px; letter-spacing: 0.1em; text-transform: uppercase; color: #6F7D9E;
  font: 10px ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
}
.upp-opt {
  height: 28px; box-sizing: border-box; padding: 0 8px; display: flex; align-items: center; gap: 8px;
  border-radius: 7px; font-size: 13px; color: #E8EEFF; cursor: pointer;
}
.upp-opt:hover { background: rgba(130, 160, 255, 0.14); }
.upp-opt.on { color: #6CF2E0; background: rgba(108, 242, 224, 0.10); }
.upp-ck { flex: none; width: 10px; height: 6px; }
.upp-opt.on .upp-ck { border-left: 2px solid #6CF2E0; border-bottom: 2px solid #6CF2E0; transform: rotate(-45deg) translate(1px, -1px); }
.upp-on { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upp-op { font: 11px ui-monospace, Menlo, Consolas, monospace; color: #93A3C8; }

/* O Silo (M12Silo). */
/* A barra fina também no corpo do painel: a larga comia o nome do element ("Mangan…"). */
.upp-lb, .up-scroll, .up-body { scrollbar-width: thin; scrollbar-color: rgba(150, 185, 255, 0.3) transparent; }
.upc-sec.ups { gap: 6px; }
.ups-form { flex: none; height: 18px; padding: 0 7px; box-sizing: border-box; display: inline-flex; align-items: center; border-radius: 9px; font-size: 10.5px; font-weight: 650; }
.ups-form.ore { color: #F2C46C; background: rgba(124, 108, 86, 0.45); border: 1px solid rgba(242, 196, 108, 0.45); }
.ups-form.ingot { color: #E8EEFF; background: rgba(127, 140, 166, 0.35); border: 1px solid rgba(232, 238, 255, 0.4); }
.ups-form.slag { color: #E7B49A; background: rgba(90, 63, 53, 0.55); border: 1px solid rgba(201, 138, 106, 0.5); }
.upc-bar.mix.full span.on { background: #E8EEFF; }
.ups-io { margin: 0; font: 10.5px/14px ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; color: #6F7D9E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ups-pur {
  margin: 0; min-height: 26px; box-sizing: border-box; padding: 3px 8px; display: flex; align-items: center; gap: 7px; line-height: 16px;
  border-radius: 8px; font-size: 12.5px; color: #C4CFEA; background: rgba(108, 242, 224, 0.08); border: 1px solid rgba(108, 242, 224, 0.28);
}
.ups-pur svg { flex: none; }
.ups-pur span { flex: 1; min-width: 0; }
.ups-pur b { font: 650 13px ui-monospace, Menlo, Consolas, monospace; color: #6CF2E0; font-variant-numeric: tabular-nums; }
.ups-list { gap: 1px; }
.ups-row { height: 22px; box-sizing: border-box; padding: 0 6px; display: flex; align-items: center; gap: 7px; border-radius: 7px; }
.ups-row.tg { background: rgba(108, 242, 224, 0.06); }
.ups-row.hot { background: rgba(108, 242, 224, 0.12); box-shadow: inset 2px 0 0 #6CF2E0; }
.ups-n { flex: 1; min-width: 0; font-size: 13px; line-height: 16px; font-weight: 500; color: #E8EEFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ups-row.tg .ups-n { color: #6CF2E0; font-weight: 650; }
.ups-el { flex: none; width: 34px; height: 4px; border-radius: 2px; overflow: hidden; background: rgba(150, 185, 255, 0.16); }
.ups-el span { display: block; height: 100%; background: #9DBBFF; }
.ups-row.tg .ups-el span { background: #6CF2E0; }
.ups-q, .ups-p { flex: none; text-align: right; font-family: ui-monospace, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
.ups-q { width: 40px; font-size: 11px; color: #93A3C8; }
.ups-p { width: 54px; font-size: 12px; color: #E8EEFF; }
.ups-row.hot .ups-p { color: #6CF2E0; }

@media (max-width: 860px) {
  .up-scroll {
    display: flex; flex-direction: column; gap: 10px; max-height: 220px; overflow-y: auto; padding-right: 4px;
    mask-image: linear-gradient(180deg, #000 82%, transparent);
  }
  .upp-n { font-size: 14.5px; }
  .upp-sel, .upp-opt { height: 44px; }
  .upp-lb { max-height: 260px; }
  .ups-row { height: 26px; }
  .ups-n { font-size: 14px; }
  .ups-p { font-size: 12.5px; }
  /* M12Panel: Minerar e Produzir (ou os Parar) antes do resto; com as duas funções, o Editar
   * na largura toda; no drone com obra, as seis de 2 colunas e o Mover e o Editar de 3. */
  .up-btn[data-id="7"], .up-btn[data-id="8"], .up-btn[data-id="9"], .up-btn[data-id="10"] { order: -1; }
  .up-list:has([data-id="7"], [data-id="8"]):has([data-id="9"], [data-id="10"]) .up-btn[data-id="128"] { grid-column: 1 / -1; }
  .up-list.build:has([data-id="7"], [data-id="8"]) .up-btn[data-id="1"],
  .up-list.build:has([data-id="7"], [data-id="8"]) .up-btn[data-id="128"] { grid-column: span 3; }
  /* M14Panel: o minerador, Minerar e Carregar em metades, Descarregar, Entregar e Mover em terços */
  .up-list:not(.build):has([data-id="7"], [data-id="8"]) .up-btn[data-id="2"] { grid-column: span 3; }
  .up-list:not(.build):has([data-id="7"], [data-id="8"]):has([data-id="2"]) .up-btn[data-id="1"] { grid-column: span 2; }
}