/* Editor de hull no /game (P-066, T129; design aprovado "P-066 — editor de hull":
 * P066Game, P066Panel, P066Status, P066Mobile). Painel DOM sobre o canvas, aberto pelo
 * Editar do painel da unit (P-084, M09Editor); só lê o EditorStatus do wasm (editor.js).
 * Tokens de site.css; a posição do thumb da qualidade vem de --q (CSSOM, a CSP não
 * admite style inline). */
.ed-dock { position: fixed; z-index: 3; }
.ed-dock[hidden] { display: none; }
/* O painel mora na doca (editor-mods.css), com as abas de etapa à esquerda dele (M08Steps). */
.ed {
  position: relative; flex: none; align-self: stretch; width: min(340px, calc(100vw - 97px)); padding: 18px; border-radius: 18px;
  display: flex; flex-direction: column; gap: 12px; overflow-y: auto; color: var(--text);
  background: linear-gradient(160deg, rgba(130, 160, 255, 0.10), rgba(130, 160, 255, 0.03)), #0F1630;
  border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 64px rgba(0, 0, 0, 0.45);
}
.ed::before {
  content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(108, 242, 224, 0.55), rgba(183, 156, 255, 0.45), transparent);
}
.ed button, .ed input { font-family: inherit; color: var(--text); }
.ed-head { display: flex; align-items: stretch; gap: 12px; }
.ed-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ed-eyebrow, .ed-lab { font: 11.5px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.ed-eyebrow { color: var(--plasma); }
.ed-sub, .ed-cur { font: 12px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.ed-cur { display: none; }
.ed-prev {
  flex: none; width: 60px; display: flex; flex-direction: column; align-items: center;
  border-radius: 12px; background: rgba(4, 8, 22, 0.55); border: 1px solid rgba(150, 185, 255, 0.22);
}
/* A unit aberta (P-084, M09EdHead): no lugar das abas Structure / Drone, mesma altura de
 * 30 px, glifo de 18 px em plasma e o título 17 px/650; texto, não botão (D107). */
.ed-unit { min-height: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; }   /* a etiqueta desce se o título não a comporta (M11EdPanel) */
.ed-unit-g { flex: none; color: var(--plasma); }
.ed-unit-g[hidden] { display: none; }
.ed-unit-g.ghost path { stroke-dasharray: 2.2 1.6; }   /* a Nova structure e o ghost: glifo tracejado (M11EdPanel) */
.ed-tag {
  flex: none; height: 20px; padding: 0 7px; display: inline-flex; align-items: center; border-radius: 10px;
  font: 600 10.5px ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.06em;
  border: 1px dashed;
}
.ed-tag.ghost { color: #45BCCF; border-color: rgba(69, 188, 207, 0.7); }
.ed-tag.edit { color: #9DBBFF; border-color: rgba(157, 187, 255, 0.6); }
.ed-tag[hidden] { display: none; }
.ed-title { margin: 0; font-size: 17px; font-weight: 650; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-sec { display: flex; flex-direction: column; gap: 6px; }
.ed-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ed-lab { letter-spacing: 0.12em; }
.ed-val { font-size: 13px; color: #C4CFEA; white-space: nowrap; font-variant-numeric: tabular-nums; }
kbd { font: 500 11px/16px var(--mono); padding: 0 5px; border-radius: 5px; border: 1px solid rgba(150, 185, 255, 0.28); color: var(--muted); }

/* Seletor segmentado (P-025): ativo em plasma translúcido com traço; Apagar em coral. */
.ed-seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px;
  border-radius: 12px; background: rgba(4, 8, 22, 0.55); border: 1px solid rgba(150, 185, 255, 0.22);
}
.ed-seg button {
  display: flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 8px; border: 0;
  border-radius: 9px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer;
}
.ed-seg button[aria-pressed="true"] {
  font-weight: 650; color: var(--text); cursor: default; background: rgba(108, 242, 224, 0.12);
  box-shadow: inset 0 0 0 1px rgba(108, 242, 224, 0.50), inset 0 -2px 0 var(--plasma);
}
.ed-seg button.ed-bad[aria-pressed="true"] {
  background: rgba(255, 143, 128, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 143, 128, 0.50), inset 0 -2px 0 #FF8F80;
}
.ed-forms { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.ed-ib, .ed-gb {
  display: flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0; border-radius: 10px;
  background: rgba(4, 8, 22, 0.55); border: 1px solid rgba(150, 185, 255, 0.22); cursor: pointer;
}
.ed-gb { height: 40px; padding: 0 10px; font-size: 14px; font-weight: 600; background: rgba(130, 160, 255, 0.10); border-color: rgba(150, 185, 255, 0.30); }
.ed-ib[aria-pressed="true"], .ed-gb[aria-pressed="true"] {
  background: rgba(108, 242, 224, 0.12); border-color: rgba(108, 242, 224, 0.55); box-shadow: inset 0 -2px 0 var(--plasma);
}
.ed-rot { display: flex; align-items: center; gap: 6px; }
#ed-mir { flex: 1; }
.ed-qrow { display: flex; align-items: center; gap: 10px; }
.ed-track { position: relative; flex: 1; height: 40px; display: flex; align-items: center; }
.ed-tones {
  position: absolute; left: 0; right: 0; height: 10px; border-radius: 999px; overflow: hidden; background: #070B1A;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; box-shadow: 0 0 0 1px rgba(69, 188, 207, 0.45);
}
.ed-tones span:nth-child(1) { background: #13242A; } .ed-tones span:nth-child(2) { background: #12313A; }
.ed-tones span:nth-child(3) { background: #134049; } .ed-tones span:nth-child(4) { background: #145160; }
.ed-tones span:nth-child(5) { background: #166474; }
.ed-thumb {
  position: absolute; top: 11px; left: calc(var(--q, 100) * 1% - 9px); width: 18px; height: 18px; border-radius: 50%;
  background: var(--plasma); box-shadow: 0 0 0 3px rgba(108, 242, 224, 0.18), 0 0 0 5px #0F1630; pointer-events: none;
}
#ed-qr { position: absolute; inset: 0; width: 100%; height: 40px; margin: 0; opacity: 0; cursor: pointer; }
#ed-q {
  flex: none; width: 64px; height: 40px; border-radius: 10px; background: rgba(4, 8, 22, 0.55); text-align: center;
  border: 1px solid rgba(150, 185, 255, 0.22); font: 600 15px var(--mono); font-variant-numeric: tabular-nums;
}
.ed-status { margin-top: auto; min-height: 78px; display: flex; flex-direction: column; justify-content: flex-end; }
.ed-st { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid; }
.ed-st > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ed-st b { font: 400 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.ed-st span { font-size: 14px; line-height: 1.45; }
.ed-st i { flex: none; width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; font-style: normal; }
.ed-st small { font: 12.5px var(--mono); color: var(--muted); }
.ed-line { flex-direction: column; gap: 4px; background: rgba(4, 8, 22, 0.40); border-color: rgba(150, 185, 255, 0.14); }
.ed-line span { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.ed-line small { padding-left: 20px; }
.ed-line i { margin: 0; background: var(--plasma); box-shadow: 0 0 0 3px rgba(108, 242, 224, 0.16), 0 0 14px rgba(108, 242, 224, 0.45); }
.ed-line.clean i { background: #5B6788; box-shadow: 0 0 0 3px rgba(147, 163, 200, 0.14); }
.ed-line.busy i { background: none; border: 2px solid var(--plasma); box-shadow: 0 0 0 3px rgba(108, 242, 224, 0.14); }
.ed-warn { background: rgba(183, 156, 255, 0.08); border-color: rgba(183, 156, 255, 0.42); }
.ed-warn i { border-radius: 3px; background: var(--violet); box-shadow: 0 0 0 3px rgba(183, 156, 255, 0.16), 0 0 14px rgba(183, 156, 255, 0.45); }
.ed-warn b { color: var(--violet); } .ed-warn span { color: #E4DAFF; }
.ed-refuse { background: rgba(255, 120, 105, 0.09); border-color: rgba(255, 140, 125, 0.40); }
.ed-refuse i { width: 20px; height: 20px; margin-top: 1px; background: #FF8F80; color: #1A0608; font: 800 13px/20px var(--sans); text-align: center; }
.ed-refuse b { color: #FF9E90; } .ed-refuse span { color: #FFD2CB; }
.ed-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 10px; }
.ed-foot button {
  position: relative; overflow: hidden; height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; border: 1px solid rgba(150, 185, 255, 0.30);
  background: rgba(130, 160, 255, 0.10);
}
.ed-foot .ed-save { border: 0; font-weight: 650; color: var(--ink); background: linear-gradient(135deg, #6CF2E0, #7AA8FF); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset, 0 10px 34px rgba(108, 242, 224, 0.30); }
.ed-foot .ed-save[aria-busy="true"] {
  color: #E8FFFB; cursor: progress; border: 1px solid rgba(108, 242, 224, 0.55);
  background: linear-gradient(135deg, rgba(108, 242, 224, 0.16), rgba(122, 168, 255, 0.16));
}
.ed-foot .ed-save[aria-busy="true"]::after {
  content: ""; position: absolute; left: 31%; bottom: 0; width: 38%; height: 3px; background: linear-gradient(90deg, transparent, #6CF2E0, transparent);
}
/* Desabilitado (sem mundo pronto, pendente, ou Salvar sem o que salvar): tracejado de form.css. */
.ed button:disabled, .ed input:disabled { color: #6F7D9E; background: transparent; border: 1px dashed rgba(147, 163, 200, 0.40); box-shadow: none; cursor: not-allowed; }
.ed button:disabled[aria-pressed="true"] { color: #A9B6D6; background: rgba(147, 163, 200, 0.08); }
.ed .ed-save:disabled:not([aria-busy="true"]) { color: #A9B6D6; background: rgba(147, 163, 200, 0.08); }
.ed button:focus-visible, .ed input:focus-visible { outline: 2px solid var(--plasma); outline-offset: 2px; }

/* Legenda da carga (P-067, item 2; P067Bands): só com a structure aberta; cada faixa é a
 * cor da superfície a 78 % sobre a parede teal do hexágono. */
.ed-key {
  position: fixed; z-index: 3; left: 16px; bottom: 16px; height: 40px; padding: 0 16px 0 14px; display: flex;
  align-items: center; gap: 14px; border-radius: 999px; background: #0F1630; border: 1px solid rgba(150, 185, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 28px rgba(0, 0, 0, 0.35); font-size: 13px; color: #C4CFEA; white-space: nowrap;
}
.ed-key[hidden] { display: none; }
.ed-key-lab { font: 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.ed-key > span:not(.ed-key-lab) { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.ed-key svg { width: 16px; height: 16px; } .ed-key b { font-weight: 400; } .ed-key i { display: none; font-style: normal; }

/* Celular (P066Mobile, P067Mobile): folha na base, botões de 44 px, sem etiquetas de tecla. */
@media (max-width: 860px) {
  .ed-key { top: 64px; bottom: auto; left: 12px; height: 32px; padding: 0 12px 0 10px; gap: 10px; font-size: 12px; }
  .ed-key-lab { font-size: 10.5px; } .ed-key > span:not(.ed-key-lab) { gap: 4px; }
  .ed-key svg { width: 13px; height: 13px; } .ed-key b { display: none; } .ed-key i { display: inline; }
  .ed {
    width: auto; max-height: calc(100dvh - 115px); padding: 14px; gap: 10px;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    grid-template-areas: "head foot" "sq sq" "tool rot" "forms forms" "types types" "qual qual" "status status";
  }
  .ed-head { grid-area: head; gap: 10px; } .ed-foot { grid-area: foot; display: flex; gap: 8px; }
  /* Desenhar drone (M13EdPanel, celular): o pé com "Salvar Blueprint" desce, como nas outras etapas */
  .ed.draw:not(.step-mods):not(.step-ports):not(.step-bp) { grid-template-areas: "head head" "sq sq" "tool rot" "forms forms" "types types" "qual qual" "status status" "foot foot"; }
  .ed.draw .ed-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 10px; }
  .ed-sec:nth-of-type(1) { grid-area: tool; } .ed-sec:nth-of-type(2) { grid-area: forms; } .ed-sec:nth-of-type(3) { grid-area: rot; }
  .ed-sec:nth-of-type(4) { grid-area: types; } .ed-sec:nth-of-type(5) { grid-area: qual; } .ed-status { grid-area: status; min-height: 0; }
  .ed-prev, .ed-sub, .ed-tot, #ed-dial, kbd { display: none; }
  .ed-titles { gap: 2px; } /* M09EdHead mobile: sem eyebrow; a unit em 15 px e a linha mono */
  .ed-eyebrow { display: none; }
  .ed-unit { height: 22px; } .ed-title { font-size: 15px; } .ed-tag { display: none; } /* a coluna da cabeça não cabe o título e a etiqueta */
  .ed-cur { display: block; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ed-row { display: none; }
  .ed-sec:nth-of-type(5) { flex-direction: row; align-items: center; gap: 10px; }
  .ed-sec:nth-of-type(5) .ed-row { display: flex; } .ed-sec:nth-of-type(5) .ed-val, .ed-sec:nth-of-type(5) .ed-qrow { flex: none; }
  .ed-sec:nth-of-type(5) .ed-val { display: none; } .ed-sec:nth-of-type(5) .ed-qrow { flex: 1; }
  .ed-foot button { height: 44px; padding: 0 14px; font-size: 15px; } .ed-seg button, .ed-ib { height: 44px; }
  .ed-rot { gap: 6px; } .ed-gb { width: 44px; padding: 0; } #ed-mir span { display: none; }
}