/* Editor no celular e no tablet em pé (até 900 px): canvas na tela, barra embaixo, folha inferior.
   Tudo escopado em #editor-app.is-mobile, ligado por mobile-editor.js. */
body.mobile-editor { overflow: hidden; overscroll-behavior: none; }
#editor-app.is-mobile { --mobile-bar: 60px; --sheet-bar: 44px; --sheet-top: calc(100dvh - 104px);
  height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
#editor-app.is-mobile .lab-header { position: relative; flex: none; height: 48px; min-height: 48px; }
/* Cabeçalho numa linha só: marca, Modelo/Resolução e o menu. Projetos, Cálculos, Exemplos, Aprender e Sobre
   não cabem lado a lado em 320–430 px e se sobrepunham à conta: vão para o topo do menu (structcalc.js). */
#editor-app.is-mobile .lab-header { flex-wrap: nowrap; gap: 6px; }
#editor-app.is-mobile .main-navigation { display: none; }
#editor-app.is-mobile .lab-header .mode-switch { margin: 0; flex: none; }
#editor-app.is-mobile .header-actions { flex: none; margin-left: auto; }
#editor-app.is-mobile .account-menu > summary { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px;
  min-height: 40px; padding: 0 12px; border-radius: 20px; font-size: 13px; }
#editor-app.is-mobile .account-menu > summary::-webkit-details-marker { display: none; }
#editor-app.is-mobile .account-menu > summary::before { content: "☰"; font-size: 16px; line-height: 1; }
#editor-app.is-mobile .account-content { width: min(280px, calc(100vw - 16px)); gap: 2px; padding: 8px; max-height: calc(100dvh - 60px); overflow: auto; z-index: 70; }
#editor-app.is-mobile .menu-navigation { display: grid; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--lab-line); }
/* Dentro do menu, "Entrar" volta a ter texto (a regra de ≤590 px o reduzia ao ícone, pensando na barra). */
#editor-app.is-mobile .account-content .profile-link { width: auto; overflow: visible; font-size: 14px; }
#editor-app.is-mobile .account-content .profile-link::before { content: none; }
#editor-app.is-mobile .account-content > [hidden] { display: none; }
#editor-app.is-mobile .account-content > a,
#editor-app.is-mobile .account-content > button,
#editor-app.is-mobile .menu-navigation a,
#editor-app.is-mobile .menu-navigation button { display: flex; align-items: center; min-height: 44px; padding: 0 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--lab-ink); font: 600 14px Inter, "Segoe UI", sans-serif; text-align: left; text-decoration: none; }
#editor-app.is-mobile .account-content > a:active,
#editor-app.is-mobile .account-content > button:active,
#editor-app.is-mobile .menu-navigation a:active,
#editor-app.is-mobile .menu-navigation button:active { background: #eef3fb; }
#editor-app.is-mobile .account-menu summary:focus-visible,
#editor-app.is-mobile .account-content :focus-visible { outline: 3px solid #e08a13; outline-offset: 2px; }
#editor-app.is-mobile .lab-shell { flex: 1; min-height: 0; display: flex; flex-direction: column; height: auto; overflow: hidden;
  /* O canvas termina onde a folha começa: a estrutura fica sempre visível acima dela. */
  padding-bottom: var(--sheet-rest, calc(var(--mobile-bar) + var(--sheet-bar))); }
#editor-app.is-mobile .toolbox,
#editor-app.is-mobile .status-bar,
#editor-app.is-mobile .vertical-resize,
#editor-app.is-mobile .learning-path { display: none !important; }
#editor-app.is-mobile .drawing-area { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

/* Linha de cima compacta: abas do projeto + método/salvar numa faixa que rola de lado. */
#editor-app.is-mobile .project-tabs { flex: none; display: flex; flex-wrap: nowrap; align-items: center; gap: 6px;
  height: auto; padding: 4px 8px; overflow-x: auto; scrollbar-width: none; }
#editor-app.is-mobile .project-tabs::-webkit-scrollbar,
#editor-app.is-mobile .structure-view-controls::-webkit-scrollbar,
#editor-app.is-mobile .mobile-toolbar::-webkit-scrollbar { display: none; }
#editor-app.is-mobile .project-tab-list { flex: none; min-width: 0; max-width: none; }
/* Só o projeto aberto (o nome); as outras abas ficam para a tela grande. */
#editor-app.is-mobile .project-tab-list .project-tab { display: none; }
#editor-app.is-mobile .project-identity { flex: none; width: clamp(120px, 38vw, 220px); max-width: none; }
#editor-app.is-mobile .project-identity input { min-width: 0; width: 100%; text-overflow: ellipsis; }
#editor-app.is-mobile .canvas-toolbar { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; padding: 0; margin: 0; flex: none; }
#editor-app.is-mobile .canvas-toolbar [data-analyze],
#editor-app.is-mobile .canvas-toolbar .solve-status { display: none; }
#editor-app.is-mobile .canvas-toolbar select,
#editor-app.is-mobile .canvas-toolbar button,
#editor-app.is-mobile .canvas-toolbar summary { min-height: 36px; }
#editor-app.is-mobile .structure-view-controls { flex: none; display: flex; flex-wrap: nowrap; align-items: center; gap: 8px;
  padding: 4px 8px; overflow-x: auto; scrollbar-width: none; }
#editor-app.is-mobile .structure-view-controls > * { flex: none; }
/* Faixas que rolam de lado: a borda esmaece onde ainda há controles, para não parecerem cortadas
   (mobile-editor.js marca data-more="start|end|both"). */
#editor-app.is-mobile [data-more="end"] { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
#editor-app.is-mobile [data-more="start"] { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); }
#editor-app.is-mobile [data-more="both"] { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
#editor-app.is-mobile .view-segments button { min-height: 34px; }
#editor-app.is-mobile .canvas-stage { flex: 1; min-height: 0; height: auto !important; }
#editor-app.is-mobile .canvas-stage svg { touch-action: none; overscroll-behavior: none; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; }
#editor-app.is-mobile .canvas-controls { right: 8px; bottom: 8px; left: auto; }
#editor-app.is-mobile .canvas-controls .history-actions { display: none; }
#editor-app.is-mobile .zoom-button { min-width: 40px; min-height: 40px; }

/* Barra de ferramentas inferior. */
.mobile-toolbar { position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; display: flex; gap: 2px; overflow-x: auto;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #dfe5ee;
  scrollbar-width: none; touch-action: pan-x; }
.mobile-tool { flex: none; display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 58px; min-height: 48px;
  padding: 4px 6px; border: 0; border-radius: 9px; background: transparent; color: #33415c; font: 600 10.5px/1.1 Inter, "Segoe UI", sans-serif;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.mobile-tool svg { width: 20px; height: 20px; }
.mobile-tool b { font-size: 18px; line-height: 20px; font-weight: 600; }
.mobile-tool.is-active { background: #e8f0ff; color: #0047c2; }
.mobile-tool:disabled { opacity: .38; }
.mobile-tool:focus-visible, .sheet-tab:focus-visible, .sheet-handle:focus-visible, .mobile-solve:focus-visible { outline: 3px solid #e08a13; outline-offset: 2px; }

/* Folha inferior: alça + abas, e o painel ativo logo abaixo. */
.mobile-sheet-bar { position: fixed; z-index: 44; left: 0; right: 0; top: var(--sheet-top); height: var(--sheet-bar);
  display: flex; align-items: center; gap: 4px; padding: 0 8px; background: #fff; border-top: 1px solid #dfe5ee;
  border-radius: 14px 14px 0 0; box-shadow: 0 -8px 24px #0b18331a; touch-action: none; transition: top .22s ease; }
.mobile-sheet-bar[hidden] { display: none; }
.sheet-handle { position: relative; flex: none; width: 40px; height: 40px; border: 0; background: transparent; }
.sheet-handle::before { content: ""; position: absolute; left: 8px; right: 8px; top: 18px; height: 4px; border-radius: 4px; background: #c5cfdd; }
.sheet-tabs { flex: 1; display: flex; gap: 2px; min-width: 0; }
.sheet-tab { flex: 1; min-height: 36px; padding: 0 6px; border: 0; border-radius: 8px; background: transparent; color: #52617b;
  font: 600 13px Inter, "Segoe UI", sans-serif; white-space: nowrap; touch-action: manipulation; }
.sheet-tab[aria-selected="true"] { background: #eef3fb; color: #10203c; }
.sheet-tab:disabled { opacity: .45; }
.sheet-expand { flex: none; min-height: 36px; padding: 0 10px; border: 1px solid #d9dee7; border-radius: 8px; background: #fff;
  color: #33415c; font: 600 12px Inter, "Segoe UI", sans-serif; }
#editor-app.sheet-dragging .mobile-sheet-bar,
#editor-app.sheet-dragging .solution-panel,
#editor-app.sheet-dragging .results-panel,
#editor-app.sheet-dragging .inspector { transition: none; }

#editor-app.is-mobile .solution-panel,
#editor-app.is-mobile .results-panel,
#editor-app.is-mobile .inspector { position: fixed !important; z-index: 43; left: 0 !important; right: 0 !important; width: auto !important;
  max-width: none !important; top: calc(var(--sheet-top) + var(--sheet-bar)) !important; bottom: var(--mobile-bar) !important;
  height: auto !important; max-height: none !important; margin: 0 !important; border-radius: 0 !important; overflow: auto;
  overscroll-behavior: contain; background: #fff; transition: top .22s ease; transform: none !important;
  /* align-self também vale para caixas fixas no Chrome atual: sem stretch o painel encolhe ao conteúdo. */
  align-self: stretch !important; justify-self: stretch !important; }
#editor-app.is-mobile[data-sheet-state="collapsed"] .solution-panel,
#editor-app.is-mobile[data-sheet-state="collapsed"] .results-panel,
#editor-app.is-mobile[data-sheet-state="collapsed"] .inspector,
#editor-app.is-mobile:not([data-sheet="solution"]) .solution-panel,
#editor-app.is-mobile:not([data-sheet="diagrams"]) .results-panel,
#editor-app.is-mobile:not([data-sheet="properties"]) .inspector { display: none !important; }
#editor-app.is-mobile .results-panel > summary { display: none; }
#editor-app.is-mobile .solution-panel .solution-footer { position: sticky; bottom: 0; background: #fff; }

/* Tipo de apoio: janelinha sobre o botão Apoio (acima do aviso de cookies, que fica em 60). */
.support-picker { position: fixed; z-index: 61; width: 252px; display: grid; gap: 4px; padding: 10px; border: 1px solid #dfe5ee;
  border-radius: 12px; background: #fff; box-shadow: 0 12px 32px #0b183333; }
.support-picker[hidden] { display: none; }
.support-picker > strong { padding: 0 4px 4px; color: #10203c; font: 700 12px Inter, "Segoe UI", sans-serif; }
.support-choice { display: grid; grid-template-columns: 44px 1fr; column-gap: 10px; row-gap: 1px; align-items: center; min-height: 48px; padding: 6px 10px; border: 1px solid transparent; border-radius: 8px;
  background: transparent; text-align: left; touch-action: manipulation; }
.support-choice svg { grid-row: span 2; width: 44px; height: 30px; fill: none; stroke: #33415c; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.support-choice svg .beam { stroke: #10203c; stroke-width: 2.6; }
.support-choice svg .joint { fill: #10203c; stroke: none; }
.support-choice svg .free { stroke-dasharray: 2.5 2.5; stroke: #8a97ad; }
.support-choice[aria-pressed="true"] svg { stroke: #0047c2; }
.support-choice[aria-pressed="true"] svg .beam { stroke: #0047c2; }
.support-choice[aria-pressed="true"] svg .joint { fill: #0047c2; }
.support-choice b { align-self: end; color: #10203c; font: 600 13.5px Inter, "Segoe UI", sans-serif; }
.support-choice span { align-self: start; color: #5a6882; font: 500 11.5px Inter, "Segoe UI", sans-serif; }
.support-choice[aria-pressed="true"] { border-color: #b8cdf5; background: #e8f0ff; }
.support-choice[aria-pressed="true"] b { color: #0047c2; }
.support-choice:focus-visible { outline: 3px solid #e08a13; outline-offset: 1px; }

/* Selecionar vários (toque): no alto do canvas com Selecionar ativo; ligado, mostra a contagem e Excluir (N). */
.multi-select { position: absolute; z-index: 6; left: 10px; top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: calc(100% - 20px); }
.multi-select[hidden], .multi-count[hidden], .multi-delete[hidden] { display: none; }
.multi-toggle, .multi-delete { min-height: 36px; padding: 0 14px; border-radius: 18px; font: 600 12.5px Inter, "Segoe UI", sans-serif; touch-action: manipulation; }
.multi-toggle { border: 1px solid #d9dee7; background: #fff; color: #33415c; box-shadow: 0 2px 8px #0b18331a; }
.multi-select.is-on .multi-toggle { border-color: #0058ef; background: #0058ef; color: #fff; }
.multi-count { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border-radius: 15px; background: #10203cdd; color: #fff;
  font: 500 12px Inter, "Segoe UI", sans-serif; }
.multi-delete { border: 0; background: #c62828; color: #fff; box-shadow: 0 2px 8px #c628283d; }
.multi-toggle:focus-visible, .multi-delete:focus-visible { outline: 3px solid #e08a13; outline-offset: 2px; }

/* Resolver flutuante e a dica da ferramenta com Cancelar. */
.mobile-solve { position: absolute; z-index: 6; left: 10px; bottom: 10px; min-height: 44px; padding: 0 20px; border: 0; border-radius: 22px;
  background: #0058ef; color: #fff; font: 700 14px Inter, "Segoe UI", sans-serif; box-shadow: 0 8px 20px #0058ef40; touch-action: manipulation; }
.mobile-solve:disabled { background: #9db8e8; box-shadow: none; }
.touch-hint { position: absolute; z-index: 6; left: 10px; top: 10px; right: 10px; display: flex; align-items: center; gap: 8px;
  padding: 6px 6px 6px 12px; border-radius: 10px; background: #10203cdd; color: #fff; font: 500 12.5px/1.35 Inter, "Segoe UI", sans-serif; }
.touch-hint span { flex: 1; min-width: 0; }
.touch-hint button { flex: none; min-height: 34px; padding: 0 12px; border: 0; border-radius: 7px; background: #fff; color: #10203c;
  font: 600 12.5px Inter, "Segoe UI", sans-serif; }
.touch-hint[hidden], .touch-hint button[hidden] { display: none; }

/* Paisagem: ferramentas na lateral esquerda e a folha vira painel à direita. */
@media (orientation: landscape) and (max-height: 520px) {
  #editor-app.is-mobile { --mobile-bar: 0px; }
  #editor-app.is-mobile .lab-shell { padding: 0 var(--sheet-side, 0px) var(--sheet-rest, 44px) 72px; }
  #editor-app.is-mobile .structure-view-controls .overlay-check,
  #editor-app.is-mobile .structure-view-controls .reaction-toggle,
  #editor-app.is-mobile .structure-view-controls .symbol-legend { display: none; }
  .mobile-toolbar { top: 48px; bottom: 0; right: auto; width: 72px; flex-direction: column; overflow-x: hidden; overflow-y: auto;
    border-top: 0; border-right: 1px solid #dfe5ee; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); touch-action: pan-y; }
  .mobile-sheet-bar { left: auto; width: min(440px, 52vw); }
  #editor-app.is-mobile .solution-panel,
  #editor-app.is-mobile .results-panel,
  #editor-app.is-mobile .inspector { left: auto !important; width: min(440px, 52vw) !important; bottom: 0 !important; }
  /* A barra lateral rola em pé: o esmaecimento vai para cima/baixo. */
  #editor-app.is-mobile .mobile-toolbar[data-more="end"] { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); }
  #editor-app.is-mobile .mobile-toolbar[data-more="start"] { -webkit-mask-image: linear-gradient(to top, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(to top, #000 calc(100% - 36px), transparent); }
  #editor-app.is-mobile .mobile-toolbar[data-more="both"] { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 36px, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
}
@media print { .mobile-toolbar, .mobile-sheet-bar, .support-picker, .multi-select, .mobile-solve, .touch-hint { display: none !important; } }

/* Propriedades: os campos do objeto vêm primeiro; atalhos do modelo depois. */
#editor-app.is-mobile .inspector { display: flex; flex-direction: column; }
#editor-app.is-mobile .inspector .inspector-head { order: 1; }
#editor-app.is-mobile .inspector .properties-panel { order: 2; }
#editor-app.is-mobile .inspector .model-tree { order: 3; }
#editor-app.is-mobile .inspector .quick-actions { order: 4; }
#editor-app.is-mobile .canvas-stage svg:focus:not(:focus-visible) { outline: none; }