/* Prancheta no /game (P-077, T141; design aprovado "M08 — prancheta: módulos": M08Steps,
 * M08Catalog, M08Texts, M08Mobile): a doca com as abas de etapa presas à borda esquerda
 * do painel, as três células de quadrados da cabeça, o catálogo de módulos e a folha do
 * celular. Carregado depois de editor.css e editor-squares.css. */
.ed-dock { top: 16px; right: 16px; bottom: 16px; display: flex; align-items: flex-start; }

/* Abas de etapa (M08Steps, "Medidas das abas"): coluna de 66 px a 24 px do topo do
 * painel, sobre 1 px da borda dele; ativa #19223F com filete plasma de 3 px à esquerda. */
.ed-steps { flex: none; width: 66px; margin: 24px -1px 0 0; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; }
.ed-steps button {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 66px; height: 58px; padding: 8px 0 0; border-radius: 12px 0 0 12px; font-family: inherit; cursor: pointer;
  background: #0B1126; border: 1px solid rgba(150, 185, 255, 0.18); color: var(--muted);
}
.ed-steps button[aria-pressed="true"] {
  cursor: default; color: var(--text); background: #19223F; border-color: rgba(108, 242, 224, 0.50);
  border-right-color: #19223F; box-shadow: inset 3px 0 0 var(--plasma);
}
.ed-steps button:disabled { cursor: not-allowed; color: #6F7D9E; background: #0B1126; border: 1px dashed rgba(147, 163, 200, 0.40); box-shadow: none; }
.ed-steps button:disabled[aria-pressed="true"] { color: #A9B6D6; }
.ed-steps button:focus-visible { outline: 2px solid var(--plasma); outline-offset: 2px; }
.ed-steps kbd { position: absolute; top: 4px; left: 7px; padding: 0; border: 0; font: 10px/12px var(--mono); color: #6F7D9E; }
.ed-steps span { font-size: 10.5px; font-weight: 600; line-height: 13px; }
.ed-steps i { position: absolute; top: 6px; right: 8px; width: 8px; height: 8px; border-radius: 2px; box-shadow: 0 0 0 2px #0B1126; display: none; }
.ed-steps i.v { display: block; background: var(--violet); }
.ed-steps i.c { display: block; background: #FF8F80; }

/* Vivos, ocupados e livres (M08Catalog, item 4): três células de 30 px no lugar do total
 * da P-070; livres em plasma, cinza em 0; "— sem contagem" ocupa a linha. */
.ed-sq3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); height: 30px; }
.ed-c { display: flex; flex-direction: column; min-width: 0; }
.ed-c + .ed-c { padding-left: 8px; border-left: 1px solid rgba(150, 185, 255, 0.16); }
.ed-c small { font: 9.5px/12px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.ed-c b { font-size: 15px; line-height: 18px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ed-c.o b { color: #C4CFEA; }
.ed-c.p b { color: var(--plasma); }
.ed-c.zero b { color: var(--muted); }
.ed-c.none b { color: #5B6788; }
.ed-c.wide { grid-column: 1 / -1; }

/* Etapa Módulos: as seções do hull saem, o catálogo ocupa o que sobra e rola dentro.
 * Etapa Hull: a cabeça cresceu ~10 px (as três células); 1 px a menos entre as seções do
 * hull a devolve inteira a 1280 × 720. Nada encolhe sobre o pé: com um aviso longo quem
 * cede é a Qualidade, recortada embaixo (M08Panel), e Cancelar / Salvar ficam à vista. */
.ed.step-mods .ed-hullsec, .ed:not(.step-mods) .ed-cat { display: none; }
@media (min-width: 861px) {
  .ed > * { flex-shrink: 0; }
  .ed-hullsec { margin-top: -1px; }
  .ed > .ed-sec:nth-of-type(5) { flex-shrink: 1; min-height: 0; overflow: hidden; }
  .ed > .ed-cat { flex-shrink: 1; }
}
.ed-cat { flex: 1; min-height: 0; }
.ed-list {
  flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 10px;
  scrollbar-width: thin; scrollbar-color: rgba(150, 185, 255, 0.45) rgba(150, 185, 255, 0.12);
}
/* M14Desc (P-126): a frase entre o nome e a linha de baixo; a linha cresce de 56 para no
 * mínimo 72 px e a miniatura sobe para o topo. */
.ed-mod {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; min-height: 72px; flex: none; padding: 8px 10px 8px 8px;
  border-radius: 12px; text-align: left; cursor: pointer; background: rgba(4, 8, 22, 0.55); border: 1px solid rgba(150, 185, 255, 0.22);
}
.ed-mod > svg { flex: none; margin-top: 2px; }
.ed-mod[aria-pressed="true"] { cursor: default; background: rgba(108, 242, 224, 0.10); border-color: rgba(108, 242, 224, 0.55); box-shadow: inset 0 -2px 0 var(--plasma); }
.ed-mod.hot:not([aria-pressed="true"]):not(:disabled) { border-color: rgba(157, 187, 255, 0.55); }
.ed-mod-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* Até duas linhas; a terceira vira reticências. */
.ed-mod-desc {
  font-size: 13px; line-height: 17px; color: #C4CFEA; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
.ed-mod-top { display: flex; align-items: center; gap: 8px; }
.ed-mod-top b { flex: 1; min-width: 0; font-size: 15px; line-height: 20px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed .ed-mod:disabled b { color: #A9B6D6; }
.ed-pill { flex: none; padding: 0 6px; border-radius: 999px; font: 11px/16px var(--mono); background: rgba(150, 185, 255, 0.12); color: #C4CFEA; }
.ed-pill[hidden] { display: none; }
.ed-marks { flex: none; display: flex; gap: 4px; }
.ed-mod-meta { display: flex; align-items: center; gap: 5px; font: 11.5px/15px var(--mono); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ed-mod-meta strong { color: #C4CFEA; font-weight: 600; }
.ed-mod-io { font-size: 12px; line-height: 15px; color: #C4CFEA; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Celular (M08Mobile): abas de pasta de 44 px em cima da folha, faixa de quatro células
 * (o escolhido, vivos, ocupados, livres), catálogo rolando dentro. */
@media (max-width: 860px) {
  .ed-dock { top: auto; left: 12px; right: 12px; bottom: 12px; flex-direction: column; align-items: stretch; }
  .ed-steps { width: auto; margin: 0 0 -1px; padding: 0 12px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .ed-steps button { width: auto; height: 44px; padding: 0 2px; border-radius: 12px 12px 0 0; }
  .ed-steps button[aria-pressed="true"] { background: #0F1630; border-bottom-color: #0F1630; border-right-color: rgba(108, 242, 224, 0.50); box-shadow: inset 0 3px 0 var(--plasma); }
  .ed-steps kbd, .ed-steps svg { display: none; }
  .ed-steps span { font-size: 13px; }
  .ed-sq3 { display: none; }
  .ed-sqm { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ed-sqm .ed-c { justify-content: center; padding: 0 0 0 10px; }
  .ed-sqm .ed-c small { letter-spacing: 0.08em; }
  .ed-sqm .ed-c b { font-size: 14px; line-height: 17px; }
  .ed-sqm .ed-c.wide { grid-column: 2 / -1; }
  .ed.step-mods { grid-template-areas: "head head" "sq sq" "tool tool" "cat cat" "status status" "foot foot"; }
  .ed.step-mods .ed-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 10px; }
  .ed-cat { grid-area: cat; }
  .ed-list { flex: none; height: 196px; }   /* duas linhas e meia de 76 px: a meia diz que rola */
  .ed-mod { min-height: 76px; }
  .ed-mod-top b { font-size: 15.5px; }
  .ed-mod-desc { font-size: 13.5px; line-height: 18px; }
}