/* Modo Resolução: layout novo, identidade do EstruLab mantida (variáveis --lab-*). */

/* Chave Modelo | Resolução no cabeçalho */
.lab-header .mode-switch{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:#ffffff1f;margin:0 12px;flex:none}
.lab-header .mode-switch button{min-height:30px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:#cfd8ea;font-size:.78rem;font-weight:600;cursor:pointer}
.lab-header .mode-switch button:hover{background:#ffffff1a;color:#fff}
.lab-header .mode-switch button[aria-selected="true"]{background:#fff;color:#17243a}

/* Em Resolução somem as ferramentas de edição; o desenho vai para o palco */
.lab.is-resolution .toolbox,.lab.is-resolution .inspector,.lab.is-resolution .drawing-area{display:none}
.lab.is-resolution .lab-shell{grid-template-columns:minmax(0,1fr);overflow:auto}
/* Mais específica que as colunas do modo Modelo (#editor-app[data-results=...] .lab-shell e a faixa 901–1099 px):
   sem isso, com o modelo vazio a Resolução caía na coluna do menu da esquerda. */
#editor-app.lab.is-resolution .lab-shell{grid-template-columns:minmax(0,1fr)}

.resolution{display:grid;grid-template-columns:220px minmax(0,1fr) 300px;gap:14px;padding:12px;align-items:start;min-width:0}
.resolution[hidden]{display:none}
.resolution-rail{background:#17243a;color:#cfd8ea;border-radius:10px;padding:12px;overflow:auto;position:sticky;top:0;max-height:calc(100vh - 80px)}
.resolution-rail h2{font-size:14px;color:#fff;margin:0 0 8px}
.resolution-chapter{display:flex;gap:8px;align-items:center;width:100%;background:none;border:0;color:inherit;padding:6px 4px;text-align:left;font:inherit;cursor:pointer}
.resolution-chapter .dot{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;border:1.5px solid #6d7d9c;flex:none}
.resolution-chapter.is-feito .dot{background:#1b8a55;border-color:#1b8a55;color:#fff}
.resolution-chapter.is-atual{color:#fff;font-weight:700}
.resolution-chapter.is-atual .dot{background:#2f6fdc;border-color:#2f6fdc;color:#fff}
.resolution-chapter.is-travado{opacity:.6}
.resolution-stages{list-style:none;margin:2px 0 6px 28px;padding:0 0 0 8px;border-left:1.5px solid #3a4a6a}
.resolution-stages button{background:none;border:0;color:#cfd8ea;font:12px/1.4 inherit;text-align:left;padding:2px 0;cursor:pointer}
.resolution-stages .is-current button{color:#e19a1d;font-weight:700}

.resolution-main{display:grid;gap:12px;align-content:start;min-width:0}
.resolution-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#fff;border:1px solid var(--lab-line,#d9dee7);border-radius:10px;padding:8px 12px}
.resolution-bar .muted{color:var(--lab-muted,#596784);font-size:.82rem;margin-right:auto}
.resolution-bar .diagnostic{flex:1 0 100%;margin:0}
.resolution-progress{flex:0 0 140px;height:6px;border-radius:3px;background:linear-gradient(90deg,#2f6fdc var(--done,0%),#e3e8f2 var(--done,0%))}
.resolution-stage{min-width:0}
.resolution-stage .canvas-stage{height:clamp(220px,34vh,380px);flex:none;border:1px solid var(--lab-line,#d9dee7);border-radius:10px}
.resolution-stage .canvas-stage svg{min-height:0;cursor:default}
/* PC: a figura fica no alto enquanto o cartão rola, para o foco de uma linha lá embaixo (o corpo livre de um corte)
   continuar à vista. A altura já é limitada (até 34vh, no máximo 380 px). No celular o palco já é fixo (abaixo). */
@media (min-width:1024px){
  .resolution-stage{position:sticky;top:0;z-index:4}
  .resolution-stage .canvas-stage{box-shadow:0 10px 18px -14px #0005}
}
/* PC: a Resolução cresce com o conteúdo e a área abaixo do cabeçalho rola. No modo Modelo a linha da grade
   tem a altura da tela (minmax(0,1fr)); aqui isso prendia o contêiner em uma tela de altura e o conteúdo
   vazava: o menu (sticky) era empurrado para cima até a borda do contêiner e sumia sob o cabeçalho. */
@media (min-width:901px){
  #editor-app.lab.is-resolution .lab-shell{grid-template-rows:auto}
  .resolution-rail{top:12px;max-height:calc(100dvh - 72px)}
}
/* A barra da etapa (Anterior/Próximo e progresso) fica no alto e a figura logo abaixo dela (--res-bar-h vem de resolution.js). */
@media (min-width:1024px){
  .resolution-bar{position:sticky;top:0;z-index:5}
  .resolution-stage{top:var(--res-bar-h,64px)}
}
/* Com três colunas, Detalhes · Fórmulas · Conceitos acompanha a etapa como o menu, com rolagem própria. */
@media (min-width:1101px){
  .resolution > .resolution-panel{position:sticky;top:12px;max-height:calc(100dvh - 72px)}   /* sticky também ancora as dicas (.trace-tip) */
}
/* Na Resolução não se edita: o "Selecionar vários" do editor não aparece sobre a figura. */
.lab.is-resolution .multi-select{display:none!important}
.resolution-card{background:#fff;border:1px solid var(--lab-line,#d9dee7);border-radius:10px;padding:14px 16px}
.resolution-card h3{margin:0 0 10px}
.resolution-card h4{margin:8px 0 4px;font-size:.85rem;color:var(--lab-muted,#596784)}
.resolution-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px}
.resolution-col{min-width:0}
.resolution-info,.resolution-why{background:#f3f6fb;border-radius:8px;padding:8px 10px;margin-bottom:10px}
.resolution-info p,.resolution-why p{margin:4px 0 0}
.resolution-calc{list-style:none;counter-reset:calc;padding:0;margin:0}
.resolution-calc li{counter-increment:calc;position:relative;padding:4px 0 8px 30px;overflow-x:auto}
.resolution-calc li:before{content:counter(calc);position:absolute;left:0;top:6px;width:20px;height:20px;border-radius:50%;background:#2f6fdc;color:#fff;font-size:11px;display:grid;place-items:center}
.resolution-calc small{display:block;color:var(--lab-muted,#596784)}
.resolution-calc .math-equation{font-size:1.15em}
/* Linha do corte de um trecho (etapa de sistema): apontá-la mostra o corpo livre; o fundo laranja-claro diz qual linha. */
.resolution-calc li.has-line-focus{border-radius:6px}
.resolution-calc li.has-line-focus:hover{background:rgba(225,154,29,.1)}
.resolution-more{margin-top:8px}
.resolution-more summary{cursor:pointer;color:#2f6fdc;font-weight:600}
.resolution-result{background:#e8f6ee;border:1px solid #bfe3cd;border-radius:8px;padding:10px;margin-bottom:10px;overflow-x:auto}
.resolution-panel{background:#fff;border:1px solid var(--lab-line,#d9dee7);border-radius:10px;padding:12px;overflow:auto;min-height:120px}
.resolution-panel:empty{display:none}
.resolution-tray>summary{cursor:pointer;padding:8px 12px;background:#fff;border:1px solid var(--lab-line,#d9dee7);border-radius:10px}

@media (max-width:1100px){
  .resolution{grid-template-columns:190px minmax(0,1fr)}
  .resolution-panel{grid-column:1/-1}
  .resolution-grid{grid-template-columns:minmax(0,1fr)}
}

/* Tema escuro: mesmas superfícies e bordas já usadas no editor (#16243a, #20314c, #33476a) */
body.structcalc-dark .resolution-bar,
body.structcalc-dark .resolution-card,
body.structcalc-dark .resolution-panel,
body.structcalc-dark .resolution-tray>summary{background:#16243a;border-color:#33476a;color:#eaf0ff}
body.structcalc-dark .resolution-info,
body.structcalc-dark .resolution-why{background:#20314c;color:#eaf0ff}
body.structcalc-dark .resolution-progress{background:linear-gradient(90deg,#2f6fdc var(--done,0%),#33476a var(--done,0%))}
body.structcalc-dark .resolution-result{background:#16243a;border-color:#2f5a3d;color:#86efac}
body.structcalc-dark .resolution-more summary{color:#7fa8f0}
/* Equações no escuro: mesmos valores do painel de solução (calculation.css) */
body.structcalc-dark [data-resolution] .math-equation{background:#20314c;color:#e5edfb;border:1px solid #33476a}
body.structcalc-dark [data-resolution] .resolution-result .math-equation{background:transparent;border-color:#2f5a3d;color:#86efac}

/* Foco no desenho: com foco ativo o resto da estrutura cai para 25% e o suave para 60%; o forte é laranja #e19a1d de 4 px
   com halo de 9 px na cor do fundo do desenho por baixo (cópias .focus-halo feitas pelo resolution.js).
   O foco é só visual — nada aqui altera o modelo. */
#structure-canvas{--focus-halo:#fff}
body.structcalc-dark #structure-canvas{--focus-halo:#16243a}
#structure-canvas.has-focus [data-node-id]:not([data-reaction-node]):not(.focus-strong):not(.focus-soft):not(.focus-normal),
#structure-canvas.has-focus [data-element-id]:not(.focus-strong):not(.focus-soft):not(.focus-normal),
#structure-canvas.has-focus [data-load-id]:not(.focus-strong):not(.focus-soft):not(.focus-normal),
#structure-canvas.has-focus [data-support-node]:not(.focus-strong):not(.focus-soft):not(.focus-normal),
#structure-canvas.has-focus [data-reaction-node]:not(.focus-strong):not(.focus-soft):not(.focus-normal),
#structure-canvas.has-focus [data-drawing] :is(.node-label,.hinge,.label-leader,.application-leader):not(.focus-strong):not(.focus-soft):not(.focus-normal),
#structure-canvas.has-focus [data-dimensions]{opacity:.25;transition:opacity .15s}
#structure-canvas [data-drawing] .focus-soft{opacity:.6}
#structure-canvas [data-drawing] :is(.focus-strong,.focus-soft):not(text){filter:none;stroke:#e19a1d}
#structure-canvas [data-drawing] :is(.structural-node,.load-head,.reaction-head):is(.focus-strong,.focus-soft){fill:#e19a1d}
#structure-canvas [data-drawing] [data-load-id].focus-strong:not(text):not(.load-head){stroke-width:4px;stroke-linecap:round}
#structure-canvas [data-drawing] .structural-element.focus-strong{stroke-width:calc(var(--drawing-bar-width,4px) + 2px)}
#structure-canvas [data-drawing] text.focus-strong{fill:#a35f00!important;font-weight:700!important;paint-order:stroke;stroke:var(--focus-halo);stroke-width:4px;stroke-linejoin:round}
#structure-canvas .focus-halo{fill:none;stroke:var(--focus-halo);stroke-linecap:round;stroke-linejoin:round;opacity:1;filter:none;pointer-events:none}
#structure-canvas .focus-halo.is-filled{fill:var(--focus-halo)}
#structure-canvas .focus-layer{pointer-events:none}
#structure-canvas.has-focus-cota [data-dimensions]{display:none}
.focus-layer .focus-soft{opacity:.6}
.focus-layer .focus-dim-line{stroke:#e19a1d;stroke-width:3px;stroke-linecap:round}
.focus-layer .focus-dim-line.focus-strong{stroke-width:4px}
.focus-layer .focus-dim-tick{stroke:#e19a1d;stroke-width:1.6px}
.focus-layer .focus-pill rect{fill:#e19a1d;stroke:var(--focus-halo,#fff);stroke-width:2px}
.focus-layer .focus-pill-text{fill:#fff}
.focus-layer .focus-dim-text{fill:#a35f00}
/* Os textos do desenho têm fonte e halo próprios (structcalc.css, com !important); aqui só tamanho, peso e halo do foco. */
:is(#structure-canvas,.report-structure) .focus-layer .focus-pill-text{font-size:14px!important;font-weight:700!important;stroke:none}
:is(#structure-canvas,.report-structure) .focus-layer :is(.focus-dim-text,.focus-cut-text){font-size:13px!important;font-weight:700!important;paint-order:stroke;stroke:var(--focus-halo,#fff);stroke-width:4px;stroke-linejoin:round}
.focus-layer .focus-cut{stroke:#2f6fdc;stroke-width:2;stroke-dasharray:6 4}
.focus-layer .focus-cut-text{fill:#2f6fdc}
.focus-layer .focus-arrow{stroke:#e19a1d;stroke-width:4px;stroke-linecap:round}.focus-layer .focus-arrow-head{fill:#e19a1d;stroke:none}
.focus-layer .focus-turn{fill:none;stroke:#2f6fdc;stroke-width:2.2}
.focus-layer .focus-span{stroke:#e19a1d;stroke-width:6;stroke-linecap:round;opacity:.35}

/* Números rastreáveis no cálculo */
.trace-number{cursor:pointer;border-radius:4px;padding:0 1px}
/* A moldura do boxed (KaTeX) é uma sobreposição absoluta por cima do conteúdo: sem isso ela engole o mouse nos números dentro da caixa. */
[data-resolution] .katex .katex-stretchy{pointer-events:none}
/* Os números ficam acima dos sub/sobrescritos vizinhos (vlist), que também se sobrepõem a eles. */
[data-resolution] .katex .trace-number{position:relative;z-index:1}
.trace-number[data-trace]:hover,.trace-number[data-trace]:focus-visible,.trace-number.is-pinned{background:#fff3d6;box-shadow:0 0 0 2px #e19a1d}
.trace-number[data-const]:hover,.trace-number[data-const]:focus-visible{background:#eef1f7;box-shadow:0 0 0 1px #9aa8c4}
.resolution-card{position:relative}
.trace-tip{position:absolute;z-index:5;max-width:320px;background:#14203c;color:#fff;border-radius:8px;padding:6px 10px;font:12px/1.4 Inter,"Segoe UI",sans-serif;box-shadow:0 4px 14px #0003}
.trace-tip[hidden]{display:none}
.trace-tip .trace-from{margin-top:2px;color:#c9d6f2}
.trace-tip .trace-link{background:none;border:0;padding:0;color:#ffd28a;text-decoration:underline;cursor:pointer;font:inherit}
.resolution-return{border-color:#e19a1d;color:#8a5200}

/* Foco e rastros no tema escuro */
body.structcalc-dark #structure-canvas [data-drawing] text.focus-strong{fill:#ffc46b!important}
body.structcalc-dark .focus-layer .focus-dim-text{fill:#ffc46b}
body.structcalc-dark .focus-layer .focus-cut-text{fill:#7fa8f0}
body.structcalc-dark .focus-layer .focus-cut,body.structcalc-dark .focus-layer .focus-turn{stroke:#7fa8f0}
body.structcalc-dark .trace-number[data-trace]:hover,body.structcalc-dark .trace-number[data-trace]:focus-visible,body.structcalc-dark .trace-number.is-pinned{background:#4a3a14;box-shadow:0 0 0 2px #e19a1d}
body.structcalc-dark .trace-number[data-const]:hover,body.structcalc-dark .trace-number[data-const]:focus-visible{background:#2a3b5c;box-shadow:0 0 0 1px #5d7299}
body.structcalc-dark .trace-tip{background:#0d1626;border:1px solid #33476a}
body.structcalc-dark .resolution-return{color:#ffc46b}

/* Corte: o lado fora da conta é coberto por um véu na cor do fundo do desenho */
.focus-layer .focus-outside{fill:#fff;opacity:.65;pointer-events:none}
.focus-layer .focus-outside-text{font:italic 600 11px Inter,"Segoe UI",sans-serif;fill:#6b7893;pointer-events:none}
body.structcalc-dark .focus-layer .focus-outside{fill:#16243a}
body.structcalc-dark .focus-layer .focus-outside-text{fill:#9fb0cf}

/* Seta de reação desenhada na camada de foco (existe mesmo sem o overlay de reações) */
.focus-layer .focus-react{fill:none;stroke:#e19a1d;stroke-width:4px;stroke-linecap:round}
.focus-layer .focus-react-head{fill:#e19a1d;stroke:none}
.focus-layer .focus-react.focus-soft,.focus-layer .focus-react-head.focus-soft{opacity:.6}
/* Figura de um sistema (método das forças): vínculo retirado tracejado, M do sistema na cor do diagrama M do editor. */
#structure-canvas [data-drawing] .focus-released{stroke-dasharray:4 3;opacity:.4!important;fill:none}
.focus-layer .focus-diagram{fill:#d14b34;fill-opacity:.12;stroke:none}
.focus-layer .focus-diagram-line{fill:none;stroke:#d14b34;stroke-width:2.5px;stroke-linejoin:round;stroke-linecap:round}
:is(#structure-canvas,.report-structure) .focus-layer :is(.focus-diagram-value,.focus-diagram-caption){fill:#d14b34;font-size:12.5px!important;font-weight:700!important;paint-order:stroke;stroke:var(--focus-halo,#fff);stroke-width:4px;stroke-linejoin:round}
:is(#structure-canvas,.report-structure) .focus-layer .focus-diagram-caption{font-size:12px!important;font-weight:600!important}

/* Em Resolução, o painel antigo da solução (Visão Geral, Passo a Passo, PDF/Link/Exportar) e as alças de redimensionar
   ficam escondidos — não removidos: voltam sozinhos ao sair da Resolução. */
.lab.is-resolution .solution-panel,.lab.is-resolution .resize-handle{display:none}

/* Painel de contexto: Detalhes / Fórmulas / Conceitos */
.resolution-panel{position:relative}
.resolution-tabs{display:flex;gap:4px;margin-bottom:10px}
.resolution-tabs button{flex:1;padding:6px;border:0;border-radius:6px;background:#eef1f7;color:#3b4b68;font:600 12px Inter,"Segoe UI",sans-serif;cursor:pointer}
.resolution-tabs .is-active{background:#dbe7fb;color:#2f6fdc}
.resolution-tab-view{position:relative}
.resolution-tab-view h4{margin:10px 0 4px;font-size:.85rem;color:var(--lab-muted,#596784)}
.resolution-empty{margin:6px 0;color:var(--lab-muted,#596784);font-size:12.5px}
.resolution-focus{margin-bottom:6px}
.resolution-focus-lines{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:2px;font-size:12.5px}
.resolution-focus-lines .is-soft{color:var(--lab-muted,#596784)}
.resolution-data{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.resolution-data li{padding:6px 8px;border:1px solid var(--lab-line,#d9dee7);border-radius:6px;font-size:12.5px}
.resolution-data li span{color:var(--lab-muted,#596784)}
.resolution-formula{margin-bottom:8px;overflow-x:auto}
.resolution-formula small{display:block;color:var(--lab-muted,#596784)}
.resolution-uses{display:grid;gap:4px;justify-items:start}
.resolution-uses .trace-link{background:none;border:0;padding:0;color:#2f6fdc;text-decoration:underline;cursor:pointer;font:inherit;text-align:left}
.resolution-where{margin-top:10px;padding-top:8px;border-top:1px dashed var(--lab-line,#d9dee7)}
.resolution-where small{display:block;margin-bottom:4px;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--lab-muted,#596784)}
.resolution-where .trace-link{font-size:12.5px}
.is-resolution [data-view-resolution]{display:none}
.resolution-panel .trace-tip{max-width:min(320px,100%)}
.resolution-concept{border-top:1px solid var(--lab-line,#d9dee7);padding-top:10px;margin-top:10px}
.resolution-concept:first-child{border-top:0;padding-top:0;margin-top:0}
.resolution-concept h4{margin:0 0 6px;color:inherit;font-size:.95rem}
.resolution-concept p{margin:6px 0;font-size:12.5px;line-height:1.45}
.resolution-concept-formula{overflow-x:auto}
/* A figura fica sobre fundo claro nos dois temas: o desenho do editor tem traços escuros */
.resolution-concept-figure{width:100%;height:auto;max-height:220px;display:block;color:#14203c;background:#fff;border:1px solid var(--lab-line,#d9dee7);border-radius:8px}
/* Foco na figura: mesmos níveis do desenho principal. O prefixo :is(#structure-canvas,…) iguala a especificidade das
   regras do editor (structcalc.css), que usam o mesmo truque para o relatório. */
:is(#structure-canvas,.resolution-concept-figure).resolution-concept-figure.has-focus :is([data-node-id],[data-element-id],[data-load-id],[data-support-node]):not(.focus-strong):not(.focus-soft):not(.focus-normal){opacity:.4}
:is(#structure-canvas,.resolution-concept-figure).resolution-concept-figure .focus-strong:not(text){filter:drop-shadow(0 0 3px #e19a1d);stroke:#e19a1d}
:is(#structure-canvas,.resolution-concept-figure).resolution-concept-figure .focus-soft:not(text){stroke:#e19a1d99}
:is(#structure-canvas,.resolution-concept-figure).resolution-concept-figure .structural-node.focus-strong,
:is(#structure-canvas,.resolution-concept-figure).resolution-concept-figure .load-head.focus-strong{fill:#e19a1d}
:is(#structure-canvas,.resolution-concept-figure).resolution-concept-figure .structural-node.focus-soft,
:is(#structure-canvas,.resolution-concept-figure).resolution-concept-figure .load-head.focus-soft{fill:#e19a1d99}
:is(#structure-canvas,.resolution-concept-figure).resolution-concept-figure .structural-element.focus-strong{stroke-width:calc(var(--drawing-bar-width,4px) + 2px)}
:is(#structure-canvas,.resolution-concept-figure).resolution-concept-figure text.focus-strong{fill:#a35f00;font-weight:700}
/* Mesmo no escuro a figura é clara: os textos da camada de foco voltam às cores do tema claro */
body.structcalc-dark .resolution-concept-figure .focus-layer .focus-dim-text{fill:#a35f00}
body.structcalc-dark .resolution-concept-figure .focus-layer .focus-cut-text{fill:#2f6fdc}
body.structcalc-dark .resolution-concept-figure .focus-layer .focus-cut{stroke:#2f6fdc}

/* Bandeja de diagramas: o conteúdo antigo (N, V, M, V+M, Tabelas) vem para cá; recolhida até o aluno abrir */
.resolution-tray[open]>summary{border-bottom-left-radius:0;border-bottom-right-radius:0}
.resolution-tray .results-content{position:relative;display:flex;flex-direction:column;padding:9px;background:#fff;border:1px solid var(--lab-line,#d9dee7);border-top:0;border-radius:0 0 10px 10px;overflow:auto}
.resolution-tray .results-head,.resolution-tray .diagnostics .calculation-empty,.resolution-tray .diagnostic.ok{display:none}
.resolution-tray .diagnostics{flex:0 0 auto;margin:0}
/* Na Resolução o desenho mostra só a estrutura: a escolha de vista do desenho (Geometria, Reações, N, V, M, Deformada,
   camadas) e o atalho "Mostrar deformada sobre a estrutura" ficam no Modelo. Zoom e desfazer continuam no desenho. */
.lab.is-resolution :is(.structure-view-controls,.show-deformation,.show-deformation-note){display:none}

/* Painel de contexto e bandeja no tema escuro: mesmas superfícies do editor */
body.structcalc-dark .resolution-tabs button{background:#20314c;color:#cfd8ea}
body.structcalc-dark .resolution-tabs .is-active{background:#33476a;color:#eaf0ff}
body.structcalc-dark .resolution-tab-view h4,body.structcalc-dark .resolution-empty,body.structcalc-dark .resolution-focus-lines .is-soft,
body.structcalc-dark .resolution-data li span,body.structcalc-dark .resolution-formula small{color:#9fb0cf}
body.structcalc-dark .resolution-data li,body.structcalc-dark .resolution-concept{border-color:#33476a}
body.structcalc-dark .resolution-concept h4{color:#eaf0ff}
body.structcalc-dark .resolution-uses .trace-link{color:#7fa8f0}
body.structcalc-dark .resolution-concept-figure{border-color:#33476a}
body.structcalc-dark .resolution-tray .results-content{background:#16243a;border-color:#33476a;color:#eaf0ff}

/* ===== Celular (abaixo de 900 px) =====
   Estrutura fixa no topo; capítulos num menu que abre por cima; o painel direito vira blocos dentro do cartão;
   rodapé fixo com Anterior · Diagramas · Próximo. Tudo escopado em .is-resolution: o Modelo não muda. */
.resolution-chapter-title{font-weight:700}
.resolution-menu-toggle,.resolution-scrim,.resolution-footer,.resolution-inline-panel{display:none}
@media (max-width:900px){
  .lab.is-resolution{--res-stage-h:clamp(150px,32dvh,320px);height:100dvh;min-height:0;grid-template-rows:auto minmax(0,1fr)}
  .lab.is-resolution > .results-panel{display:none}
  .lab.is-resolution .lab-shell{display:block;height:auto;min-height:0;padding:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
  .resolution{grid-template-columns:minmax(0,1fr);padding:0;gap:0;align-items:stretch}

  /* Menu de capítulos: o trilho abre por cima, sob a barra da etapa */
  .resolution-rail{position:fixed;left:0;right:0;top:var(--res-rail-top,104px);z-index:30;max-height:calc(100dvh - var(--res-rail-top,104px) - 72px);
    border-radius:0 0 12px 12px;box-shadow:0 14px 30px #0b183380;opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .15s,transform .15s,visibility 0s .15s}
  .resolution.is-menu-open .resolution-rail{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .resolution-scrim{display:block;position:fixed;inset:0;z-index:25;background:#0b183366}
  .resolution-scrim[hidden]{display:none}
  .resolution-chapter{min-height:44px}
  .resolution-stages button{min-height:36px}

  /* Estrutura fixa no topo e barra da etapa logo abaixo; só o cartão rola */
  .resolution-main{display:flex;flex-direction:column;gap:0;padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  .resolution-stage{order:0;position:sticky;top:0;z-index:6;background:#fff}
  .resolution-stage .canvas-stage{height:var(--res-stage-h);min-height:0;border-width:0 0 1px;border-radius:0}
  .resolution-bar{order:1;position:sticky;top:var(--res-stage-h);z-index:5;border-radius:0;border-width:0 0 1px;padding:6px 12px;gap:6px 10px}
  .resolution-card{order:2}
  .resolution-tray{order:3;scroll-margin-top:calc(var(--res-stage-h) + 64px)}
  .resolution-bar .btn:not(.resolution-return){display:none}
  .resolution-chapter-title{display:none}
  .resolution-menu-toggle{display:inline-flex;align-items:center;gap:6px;flex:1 1 auto;min-width:0;max-width:100%;min-height:40px;padding:0 12px;
    border:1px solid var(--lab-line,#d9dee7);border-radius:8px;background:#f3f6fb;color:inherit;font:700 .9rem/1.2 inherit;cursor:pointer}
  .resolution-menu-toggle>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .resolution-menu-toggle .chev{flex:none;transition:transform .15s}
  .resolution-menu-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
  .resolution-progress{order:3;flex:1 0 100%;height:4px}   /* a barra de progresso vira um fio sob a linha do menu */
  .resolution-bar .muted{margin-right:0;white-space:nowrap}
  .resolution-bar .resolution-return{order:2}
  .resolution-bar .diagnostic{order:4}
  .resolution-col:empty{display:none}
  .resolution-bar .resolution-return{min-height:36px}

  .resolution-card{border-radius:0;border-width:0;padding:12px;overflow-x:hidden}
  .resolution-grid{grid-template-columns:minmax(0,1fr)}
  .resolution-why{display:none}   /* o "Por quê?" vira bloco recolhido no fim do cartão */
  .resolution-card .math-equation{max-width:100%;overflow-x:auto}
  .resolution-tray>summary{border-radius:0;border-width:1px 0}
  .resolution-tray .results-content{border-width:0;border-radius:0}

  /* Blocos do painel dentro do cartão */
  .resolution-inline-panel{display:grid;gap:8px;margin-top:14px}
  .resolution-block{border:1px solid var(--lab-line,#d9dee7);border-radius:8px;background:#fff}
  .resolution-block>summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;font-weight:600;cursor:pointer;list-style:none}
  .resolution-block>summary::-webkit-details-marker{display:none}
  .resolution-block>summary::before{content:"▸";flex:none;transition:transform .15s}
  .resolution-block[open]>summary::before{transform:rotate(90deg)}
  .resolution-block>:not(summary){margin:0;padding:0 12px 12px}
  .resolution-block .resolution-concept-figure{max-height:180px}

  /* Toque num número: a explicação entra no fluxo, logo abaixo dele */
  .trace-tip{position:static;margin:6px 0;max-width:none;scroll-margin:calc(var(--res-stage-h) + 72px) 0 84px}
  .resolution-panel .trace-tip{max-width:none}

  /* Rodapé fixo */
  .resolution-footer{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:10;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));
    background:#fff;border-top:1px solid var(--lab-line,#d9dee7);box-shadow:0 -6px 18px #0b183314}
  .resolution-footer[hidden]{display:none}
  .resolution-footer .btn{flex:1 1 0;min-width:0;min-height:44px;padding:0 8px;border:1px solid #b4c3d8;border-radius:8px;background:#fff;color:inherit;font:600 .85rem Inter,"Segoe UI",sans-serif;cursor:pointer}
  .resolution-footer .btn.primary{background:#2f6fdc;border-color:#2f6fdc;color:#fff}
  .resolution-footer .btn:disabled{opacity:.45;cursor:default}
  .resolution-footer .btn:focus-visible,.resolution-menu-toggle:focus-visible,.resolution-block>summary:focus-visible{outline:3px solid #e19a1d;outline-offset:2px}
}

/* A camada de edição do celular (mobile-editor.css) fica de fora da Resolução e volta sozinha ao voltar para o Modelo */
#editor-app.is-mobile.is-resolution .mobile-toolbar,
#editor-app.is-mobile.is-resolution .mobile-sheet-bar,
#editor-app.is-mobile.is-resolution .mobile-solve,
#editor-app.is-mobile.is-resolution .touch-hint,
#editor-app.is-mobile.is-resolution .solution-panel,
#editor-app.is-mobile.is-resolution .results-panel,
#editor-app.is-mobile.is-resolution .inspector,
#editor-app.is-mobile.is-resolution .drawing-area{display:none !important}
#editor-app.is-mobile.is-resolution .lab-header{overflow:hidden}   /* a segunda linha do cabeçalho do editor transborda sobre a estrutura */
#editor-app.is-mobile.is-resolution .lab-shell{display:block;padding:0;overflow-x:hidden;overflow-y:auto}
#editor-app.is-mobile.is-resolution .resolution-stage .canvas-stage{flex:none;height:var(--res-stage-h) !important;min-height:0}
#editor-app.is-mobile.is-resolution .canvas-stage svg{touch-action:pan-y}   /* o dedo na estrutura rola a página */

@media (min-width:901px){.resolution-footer,.resolution-menu-toggle,.resolution-inline-panel,.resolution-scrim{display:none}}

/* Celular no tema escuro: mesmas superfícies do resto da Resolução */
body.structcalc-dark .resolution-stage{background:#16243a}
body.structcalc-dark .resolution-menu-toggle{background:#20314c;border-color:#33476a;color:#eaf0ff}
body.structcalc-dark .resolution-block{background:#16243a;border-color:#33476a;color:#eaf0ff}
body.structcalc-dark .resolution-footer{background:#16243a;border-color:#33476a;box-shadow:0 -6px 18px #0006}
body.structcalc-dark .resolution-footer .btn{background:#20314c;border-color:#33476a;color:#eaf0ff}
body.structcalc-dark .resolution-footer .btn.primary{background:#2f6fdc;border-color:#2f6fdc;color:#fff}
/* Celular deitado: pouca altura, então a estrutura fica numa coluna fixa à esquerda e o cartão rola à direita */
@media (max-width:900px) and (orientation:landscape) and (max-height:520px){
  .lab.is-resolution{--res-stage-h:calc(100dvh - 112px)}
  .resolution-main{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);grid-template-rows:auto auto 1fr;align-content:start;padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .resolution-stage{grid-column:1;grid-row:1/span 4;align-self:start}
  .resolution-bar,.resolution-card,.resolution-tray{grid-column:2}
  .resolution-bar{top:0}
  .resolution-footer .btn{min-height:40px}
  .resolution-tray{scroll-margin-top:72px}
  .trace-tip{scroll-margin-top:72px}
}
@media (max-width:900px){body:has(.lab.is-resolution) .toast{bottom:84px}}   /* o aviso do editor não cobre o rodapé fixo */

/* PTV trecho a trecho: bloco de cada trecho com as duas formas, a célula da tabela e as contas */
.resolution-calc li.resolution-trecho{border:1px solid var(--lab-line,#dfe7f2);border-radius:8px;padding:8px 10px;margin:4px 0 10px;background:var(--lab-panel,#fff)}
.resolution-calc li.resolution-trecho{counter-increment:none;padding-left:10px}
.resolution-calc li.resolution-trecho:before{display:none}
.resolution-calc .trecho-lines .math-equation{font-size:1em}
.trecho-head{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;font-size:13px}
.trecho-head span{color:var(--lab-muted,#596784)}
.trecho-top{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:flex-start;margin:6px 0 4px}
.trecho-figure{width:260px;max-width:100%;height:auto;flex:0 0 auto;overflow:visible}
.trecho-figure .trecho-fill{fill:#d14b34;fill-opacity:.14;stroke:none}
.trecho-figure .trecho-curve{fill:none;stroke:#d14b34;stroke-width:1.8;stroke-linejoin:round}
.trecho-figure .trecho-axis{stroke:var(--lab-ink,#10203c);stroke-width:1.6}
.trecho-figure text{font:11px Inter,"Segoe UI",sans-serif;fill:var(--lab-ink,#10203c)}
.trecho-figure .trecho-name{font-weight:700;fill:#d14b34}
.trecho-figure .trecho-role{font-size:10px;fill:var(--lab-muted,#596784)}
.trecho-figure .trecho-value{font-weight:600}
.trecho-cells{flex:1 1 200px;min-width:0;display:grid;gap:6px}
.trecho-cell{border:1px solid #f0d49c;background:#fffaf0;border-radius:7px;padding:6px 8px;min-width:0}
.trecho-cell-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;font:600 12px Inter,"Segoe UI",sans-serif}
.trecho-cell-head .kb-tag{display:inline;margin:0}
.trecho-see{margin-left:auto;background:none;border:0;padding:0;color:#2f6fdc;text-decoration:underline;cursor:pointer;font:600 12px Inter,"Segoe UI",sans-serif}
.resolution-calc .trecho-shapes,.resolution-calc .trecho-note{display:block;font-size:11.5px;line-height:1.35}
.resolution-calc .trecho-note{color:#8a5200}
.trecho-formula{overflow-x:auto;padding:2px 0;font-size:13px}
.trecho-lines .trecho-line{overflow-x:auto;padding-top:4px}
.kb-grid td.is-target{background:#f0d49c;box-shadow:inset 0 0 0 3px #e19a1d}
.focus-layer .focus-point{fill:#e19a1d;stroke:var(--focus-halo,#fff);stroke-width:2px}
.focus-layer .focus-ordinate{stroke:#e19a1d;stroke-width:2.5px;stroke-dasharray:5 3}
body.structcalc-dark .resolution-calc li.resolution-trecho{background:#16243a;border-color:#33476a}
body.structcalc-dark .trecho-cell{background:#20314c;border-color:#4a3812}
body.structcalc-dark .trecho-figure text{fill:#e5edfb}
body.structcalc-dark .trecho-figure .trecho-axis{stroke:#e5edfb}
body.structcalc-dark .trecho-figure .trecho-name{fill:#d14b34}
body.structcalc-dark .trecho-figure .trecho-fill{fill-opacity:.22}
body.structcalc-dark .trecho-figure .trecho-role{fill:#a7b6cf}
body.structcalc-dark .resolution-calc .trecho-note{color:#ffc46b}
body.structcalc-dark .trecho-see{color:#7fa8f0}
body.structcalc-dark .kb-grid td.is-target{background:#4a3812;box-shadow:inset 0 0 0 3px #ffc46b}
/* Etapa com trechos do PTV: o cálculo ganha a largura toda (as contas dos trechos são longas); o resultado vem depois da soma. */
.resolution-grid.has-trechos{grid-template-columns:minmax(0,1fr)}
/* Corte como corpo livre: a parte retirada some do desenho; N, V e M na face do corte no azul do corte. */
#structure-canvas .focus-gone{display:none!important}
.focus-layer .focus-internal{fill:none;stroke:#2f6fdc;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round}
.focus-layer .focus-internal-head{fill:#2f6fdc;stroke:none}
.focus-layer .focus-internal-text{fill:#2f6fdc}
:is(#structure-canvas,.report-structure) .focus-layer .focus-internal-text{font-size:14px!important;font-weight:700!important;paint-order:stroke;stroke:var(--focus-halo,#fff);stroke-width:4px;stroke-linejoin:round}
body.structcalc-dark .focus-layer .focus-internal{stroke:#7fa8f0}
body.structcalc-dark .focus-layer .focus-internal-head,body.structcalc-dark .focus-layer .focus-internal-text{fill:#7fa8f0}
.focus-layer .focus-arrow.is-resultant{stroke-dasharray:9 5}
/* x e R escritos pelo nome também são apontáveis, como os números marcados. */
.trace-number[data-sym]:hover,.trace-number[data-sym]:focus-visible,.trace-number[data-sym].is-pinned{background:#fff3d6;box-shadow:0 0 0 2px #e19a1d}
body.structcalc-dark .trace-number[data-sym]:hover,body.structcalc-dark .trace-number[data-sym]:focus-visible,body.structcalc-dark .trace-number[data-sym].is-pinned{background:#4a3a14;box-shadow:0 0 0 2px #e19a1d}
/* Resultado longo quebra a linha no "=" e nos operadores (conta em linha), em vez de ser cortado. */
.resolution-result .math-equation.is-inline{white-space:normal;overflow-x:visible;line-height:1.9}
.resolution-result .math-equation.is-inline .katex{white-space:normal}
/* Chave Equilíbrio | Superposição no topo do capítulo Reações (método das forças), no estilo das outras chaves. */
.resolution-variant{display:flex;width:max-content;max-width:100%;margin:0 0 10px}
.resolution-variant button{min-height:30px;padding:0 14px;font-size:12.5px;cursor:pointer}
body.structcalc-dark .resolution-variant button{color:#cfd8ea}