/* Planta Luan: folha de desenho (claro) e sala de controle (escuro). */

:root {
  --paper: #e4ebe7;
  --grid: #d3ddd8;
  --grid-major: #c3d0ca;
  --ink: #0f2a3a;
  --ink-soft: #4b6371;
  --fill: #eef3f0;
  --flow: #c98a00;
  --liquid: rgba(201, 138, 0, 0.26);
  --signal: #2856c4;
  --alarm: #c4122f;
  --focus: #2856c4;
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0b1a22;
    --grid: #112631;
    --grid-major: #16303d;
    --ink: #cfe2da;
    --ink-soft: #84a0ab;
    --fill: #0f222c;
    --flow: #f2b02e;
    --liquid: rgba(242, 176, 46, 0.24);
    --signal: #7598ff;
    --alarm: #ff5468;
    --focus: #f2b02e;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0b1a22;
  --grid: #112631;
  --grid-major: #16303d;
  --ink: #cfe2da;
  --ink-soft: #84a0ab;
  --fill: #0f222c;
  --flow: #f2b02e;
  --liquid: rgba(242, 176, 46, 0.24);
  --signal: #7598ff;
  --alarm: #ff5468;
  --focus: #f2b02e;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--ink); color: var(--paper); padding: 8px 12px; }
.skip:focus { top: 16px; }

/* Folha com moldura dupla, como uma prancha de engenharia. */
.sheet {
  min-height: 100dvh;
  margin: 0;
  padding: 14px;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 0;
  position: relative;
}
.sheet::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid var(--ink);
  pointer-events: none;
}
.sheet::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 2px solid var(--ink);
  pointer-events: none;
}

/* Cabeçalho */
.head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  padding: 16px 26px 8px;
  border-bottom: 1px solid var(--ink);
}
.id-row { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.avatar {
  width: 64px; height: 64px; flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--ink);
  outline: 1px solid var(--ink);
  outline-offset: 3px;
  background: var(--fill);
}
.avatar[hidden] { display: none; }
h1 {
  margin: 0;
  font-stretch: 125%;
  font-weight: 800;
  font-size: clamp(26px, 2.7vw, 44px);
  line-height: 1;
  letter-spacing: -0.015em;
}
.lede {
  margin: 0 0 8px;
  max-width: 62ch;
  color: var(--ink-soft);
  font-size: 16px;
}
.links { display: flex; flex-wrap: wrap; gap: 6px 20px; font-weight: 600; }
.links a, .linklike { text-decoration: underline; text-decoration-thickness: 1px; }
.linklike {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
}
.linklike--case { color: var(--flow); text-decoration-thickness: 2px; }

.side { display: grid; gap: 9px; justify-items: end; flex-shrink: 0; }
.controls { display: flex; gap: 8px; }

.btn {
  font: 600 14px/1 var(--font);
  font-stretch: 110%;
  color: var(--ink);
  background: var(--fill);
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn--icon { padding: 8px; display: inline-grid; place-items: center; }
.btn--icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.btn--run[aria-pressed="true"] { background: var(--flow); border-color: var(--flow); color: #1b1300; }

.legend {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 4px 14px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.legend div { display: flex; align-items: center; gap: 8px; }
.legend dt, .legend dd { margin: 0; }
.legend svg { width: 34px; height: 8px; display: block; overflow: visible; }
.lg { stroke: var(--ink); stroke-width: 2.4; }
.lg--utility { stroke-width: 1.2; }
.lg--signal { stroke: var(--signal); stroke-width: 1.4; stroke-dasharray: 5 3; }
.lg--recycle { stroke-dasharray: 10 3 2 3; stroke-width: 1.8; }
.lg--planned { stroke: var(--ink-soft); stroke-dasharray: 3 4; stroke-width: 1.8; }

/* Área do desenho com papel quadriculado */
/* Altura proporcional à largura (viewBox 1600x760), limitada à altura da tela:
   em notebook o desenho não encolhe para caber o cabeçalho e o rodapé. */
.drawing {
  margin: 0;
  height: clamp(420px, calc((100vw - 28px) * 0.475), calc(100dvh - 60px));
  position: relative;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: -1px -1px;
}
.plant { width: 100%; height: 100%; display: block; }

/* Equipamentos */
.eq { fill: var(--fill); stroke: var(--ink); stroke-width: 2; }
.eq-line { fill: none; stroke: var(--ink); stroke-width: 2; }
.eq-thin { fill: none; stroke: var(--ink); stroke-width: 1.3; }
.eq-txt { font: 600 11px var(--mono); fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.node--desenvolvimento .eq, .node--desenvolvimento .eq-line { stroke-dasharray: 7 4; }

.liquid {
  fill: var(--liquid);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(0.08);
  transition: transform 1.6s cubic-bezier(.3, .7, .2, 1);
}
.is-running .liquid { transform: scaleY(var(--lvl, 0.6)); }

.impeller { transform-box: fill-box; transform-origin: 50% 50%; }
.is-running .impeller { animation: spin 0.8s linear infinite; }
@keyframes spin { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }

.led { fill: var(--ink-soft); }
.is-running .led { fill: var(--flow); animation: blink 1.4s steps(2, end) infinite; }
.is-running .led:nth-of-type(2) { animation-delay: 0.45s; }
@keyframes blink { 50% { opacity: 0.25; } }

.valve-body { fill: var(--fill); }
.is-running .valve-body { fill: var(--flow); }

.node { cursor: pointer; outline: none; }
.node .halo { fill: transparent; stroke: none; }
.node:hover .eq, .node:focus-visible .eq, .node.is-selected .eq { stroke: var(--flow); stroke-width: 3; }
.node:focus-visible .halo { stroke: var(--focus); stroke-width: 2; stroke-dasharray: 4 4; }

.lbl {
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 6px;
  stroke-linejoin: round;
  text-anchor: middle;
}
.lbl-tag { font: 500 13px var(--mono); fill: var(--ink-soft); }
.lbl-name { font: 700 15px var(--font); font-stretch: 105%; fill: var(--ink); }
.lbl-status { font: italic 500 12.5px var(--font); fill: var(--ink-soft); }
.lbl-pipe { font: italic 500 12.5px var(--font); fill: var(--ink-soft); }
.lbl-feature { font: 700 12.5px var(--font); fill: var(--flow); }
.plant--d .lbl-feature { font-size: 15px; }
.node--featured .eq-line { stroke-width: 2.6; }
/* No desenho largo o SVG é reduzido para caber na tela; os rótulos compensam. */
.plant--d .lbl-tag { font-size: 15px; }
.plant--d .lbl-name { font-size: 19px; }
.plant--d .lbl-status, .plant--d .lbl-pipe { font-size: 15px; }

/* Status no desenho */
.node--diario .lbl-status { fill: var(--flow); font-style: normal; font-weight: 700; }
.node--finalizado .lbl-status { fill: var(--ink); font-style: normal; font-weight: 600; }
.plant[data-filter] .node { transition: opacity 0.25s; }
.plant[data-filter="diario"] .node:not([data-status="diario"]),
.plant[data-filter="finalizado"] .node:not([data-status="finalizado"]),
.plant[data-filter="desenvolvimento"] .node:not([data-status="desenvolvimento"]) { opacity: 0.22; }

.filters { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.filter {
  font: 600 12.5px/1 var(--font);
  color: var(--ink);
  background: transparent;
  border: 1.5px solid var(--ink-soft);
  border-radius: 999px;
  padding: 6px 10px;
  cursor: pointer;
}
.filter:hover { border-color: var(--ink); }
.filter--diario { color: var(--flow); }
.filter[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Personagem */
.char { cursor: pointer; outline: none; transition-property: transform; transition-timing-function: cubic-bezier(.45, .05, .3, 1); }
.char:focus-visible .ch-shadow { stroke: var(--focus); stroke-width: 2; }
.ch-shadow { fill: var(--ink); opacity: 0.18; }
.ch-coat { fill: #fbfdfc; stroke: var(--ink); stroke-width: 1.5; }
.ch-shirt { fill: #2f6db5; stroke: var(--ink); stroke-width: 1; }
.ch-line { fill: none; stroke: var(--ink); stroke-width: 1; }
.ch-pen { stroke: var(--signal); stroke-width: 1.6; stroke-linecap: round; }
.ch-badge { fill: var(--flow); }
.ch-pants { fill: #23364a; }
.ch-shoe { fill: #15202b; }
.ch-skin { fill: #e3ad8a; stroke: #8a5a3e; stroke-width: 0.8; }
.ch-hair { fill: #241c18; }
.ch-brow { stroke: #241c18; stroke-width: 2.2; stroke-linecap: round; fill: none; }
.ch-lip { stroke: #9c5a4c; stroke-width: 1.6; fill: none; stroke-linecap: round; }
.ch-eye { fill: #1a1411; }
.ch-goggles { fill: rgba(117, 152, 255, 0.45); stroke: var(--ink); stroke-width: 1.2; }
.ch-board { fill: #b98a4e; stroke: var(--ink); stroke-width: 1; }
.ch-paper { fill: #fff; }
.ch-bubble { fill: var(--paper); stroke: var(--ink); stroke-width: 1.4; }
.ch-text { font: 500 10.5px var(--font); fill: var(--ink-soft); }
.ch-text--b { font-weight: 700; fill: var(--ink); }

.ch-eyes { transform-box: fill-box; transform-origin: 50% 50%; animation: ch-blink 4.5s infinite; }
@keyframes ch-blink { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(0.1); } }
.ch-leg { transform-box: fill-box; transform-origin: 50% 0; }
.is-walking .ch-leg--l { animation: ch-step 0.36s ease-in-out infinite alternate; }
.is-walking .ch-leg--r { animation: ch-step 0.36s ease-in-out infinite alternate-reverse; }
@keyframes ch-step { from { transform: rotate(-18deg); } to { transform: rotate(18deg); } }
.is-walking .ch-body > *:not(.ch-leg):not(.ch-shadow) { animation: ch-bob 0.18s ease-in-out infinite alternate; }
@keyframes ch-bob { to { transform: translateY(-1.5px); } }
.ch-arm { transform-box: fill-box; transform-origin: 50% 8%; transition: transform 0.3s ease-out; }
.is-pointing .ch-arm { transform: rotate(-105deg); }
.ch-say { animation: ch-pop 0.25s ease-out; }
@keyframes ch-pop { from { opacity: 0; } }

/* Tubulações */
.pipe { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: miter; }
.pipe--utility { stroke-width: 1.2; }
.pipe--signal { stroke: var(--signal); stroke-width: 1.4; stroke-dasharray: 6 4; }
.pipe--recycle { stroke-width: 1.8; stroke-dasharray: 12 4 2 4; }
.pipe--planned { stroke: var(--ink-soft); stroke-width: 1.8; stroke-dasharray: 3 5; }
.pipe.is-lit { stroke: var(--flow); }
.pipe--signal.is-lit { stroke: var(--signal); stroke-width: 2.4; }

.flow {
  fill: none;
  stroke: var(--flow);
  stroke-width: 4;
  stroke-dasharray: 2 22;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 0.4s;
}
.flow--utility { stroke-width: 2.5; }
.is-running .flow { opacity: 1; animation: flow 1.1s linear infinite; }
.is-running .flow--recycle { animation-duration: 1.8s; }
@keyframes flow { to { stroke-dashoffset: -24; } }

/* Sequência de abertura: as linhas se desenham uma vez. */
.is-drawing .pipe { stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len); animation: draw 0.9s cubic-bezier(.5, 0, .2, 1) forwards; animation-delay: var(--delay); }
.is-drawing .node { opacity: 0; animation: appear 0.5s ease-out forwards; animation-delay: var(--delay); }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes appear { to { opacity: 1; } }

/* Rodapé: console, indicadores e carimbo */
.foot {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) auto minmax(320px, 430px);
  border-top: 1px solid var(--ink);
}
.console {
  padding: 10px 16px 12px 26px;
  border-right: 1px solid var(--ink);
  font: 13px/1.5 var(--mono);
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.log {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  height: 6em;
  overflow-y: auto;
  color: var(--ink-soft);
  scrollbar-width: thin;
}
.log li { white-space: pre-wrap; word-break: break-word; }
.log .you { color: var(--ink); }
.log .warn { color: var(--alarm); }
.log button {
  font: inherit; color: var(--ink); background: none; border: 0; padding: 0;
  text-decoration: underline; cursor: pointer;
}
.prompt { display: flex; gap: 8px; align-items: center; }
.ps1 { color: var(--flow); white-space: nowrap; font-weight: 500; }
.prompt input {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px dashed var(--ink-soft);
  padding: 2px 0;
}
.prompt input:focus { outline: none; border-bottom: 1px solid var(--flow); }

.gauges {
  list-style: none;
  margin: 0;
  padding: 10px 18px;
  display: flex;
  gap: 18px;
  align-items: center;
  border-right: 1px solid var(--ink);
}
.gauges li { display: flex; align-items: center; gap: 10px; max-width: 150px; }
.bubble {
  width: 58px; height: 58px; flex-shrink: 0;
  border: 1.5px solid var(--ink); border-radius: 50%;
  display: grid; grid-template-rows: 1fr 1fr; place-items: center;
  position: relative; background: var(--fill);
  font-family: var(--mono);
}
.bubble::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px solid var(--ink); }
.bubble b { font-weight: 500; font-size: 12px; align-self: end; padding-bottom: 2px; color: var(--ink-soft); }
.bubble span { font-weight: 500; font-size: 16px; align-self: start; padding-top: 1px; }
.gauges p { margin: 0; font-size: 12.5px; line-height: 1.3; color: var(--ink-soft); }

.titleblock {
  border-collapse: collapse;
  width: 100%;
  font-size: 12.5px;
  align-self: stretch;
}
.titleblock th, .titleblock td { border: 1px solid var(--ink); padding: 4px 8px; text-align: left; vertical-align: top; }
.titleblock tr:first-child th, .titleblock tr:first-child td { border-top: 0; }
.titleblock tr > :first-child { border-left: 0; }
.titleblock tr > :last-child { border-right: 0; }
.titleblock tr:last-child > * { border-bottom: 0; }
.titleblock th { font-weight: 500; color: var(--ink-soft); white-space: nowrap; width: 1%; }
.titleblock td { font-weight: 600; }

/* Folha de dados */
.datasheet {
  position: fixed;
  top: 0; right: 0;
  width: min(460px, 100vw);
  height: 100dvh;
  background: var(--paper);
  border-left: 2px solid var(--ink);
  box-shadow: -18px 0 0 -10px color-mix(in srgb, var(--ink) 12%, transparent);
  transform: translateX(104%);
  transition: transform 0.35s cubic-bezier(.3, .7, .2, 1);
  display: grid;
  grid-template-rows: auto 1fr auto;
  z-index: 20;
}
.datasheet.is-open { transform: none; }
.ds-head { padding: 22px 24px 14px; border-bottom: 2px solid var(--ink); position: relative; }
.ds-kicker { margin: 0 0 4px; font-size: 13px; color: var(--ink-soft); }
#ds-title { margin: 0; padding-right: 44px; display: grid; gap: 2px; outline: none; }
.ds-tag { font: 500 15px var(--mono); color: var(--flow); }
.ds-name { font-size: 26px; line-height: 1.1; font-weight: 800; font-stretch: 115%; }
.ds-close { position: absolute; top: 18px; right: 18px; }
.ds-table { border-collapse: collapse; width: 100%; align-self: start; overflow-y: auto; display: block; height: 100%; }
.ds-table tbody { display: table; width: 100%; }
.ds-table th, .ds-table td { border-bottom: 1px solid var(--grid-major); padding: 12px 10px; vertical-align: top; text-align: left; }
.ds-table th { width: 96px; padding-left: 24px; font-weight: 500; font-size: 13px; color: var(--ink-soft); }
.ds-table td { padding-right: 24px; font-size: 15px; max-width: 60ch; }
.ds-table td ul { margin: 0; padding-left: 18px; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.status-pill::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--flow); }
.status-pill--finalizado::before { background: var(--ink); }
.status-pill--desenvolvimento::before { background: transparent; border: 2px dashed var(--flow); }
.ds-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 14px 24px; border-top: 2px solid var(--ink); }
.ds-count { font: 13px var(--mono); color: var(--ink-soft); }

/* Abas "sobre mim", abaixo da prancha, como as folhas seguintes de um desenho */
.about {
  max-width: 1080px;
  margin: 0 auto;
  padding: 64px 32px 80px;
}
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 2px solid var(--ink);
}
.tab {
  font: 600 15px/1 var(--font);
  font-stretch: 110%;
  color: var(--ink-soft);
  background: transparent;
  border: 1.5px solid var(--ink-soft);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  padding: 12px 18px;
  margin-bottom: -2px;
  cursor: pointer;
}
.tab:hover { color: var(--ink); border-color: var(--ink); }
.tab[aria-selected="true"] {
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-bottom: 2px solid var(--paper);
}
.panel { padding: 32px 0 0; outline: none; }
.panel:focus-visible { outline: 2px solid var(--focus); outline-offset: 8px; }
.panel h2 { margin: 0 0 4px; font-size: 30px; font-weight: 800; font-stretch: 120%; line-height: 1.1; }
.notes-sub { margin: 0 0 22px; color: var(--ink-soft); max-width: 60ch; }

/* Idiomas: escala do QECR com o nível marcado */
.langs { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.langs li { padding: 20px 0 22px; border-bottom: 1px solid var(--grid-major); }
.lang-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.lang-head b { font-size: 21px; font-stretch: 110%; }
.lang-head span { color: var(--ink-soft); }
.scale { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; max-width: 520px; counter-reset: lvl; }
.scale i {
  font: 500 12px/1 var(--mono);
  font-style: normal;
  text-align: center;
  padding: 9px 0;
  border: 1.5px solid var(--ink);
  color: var(--ink-soft);
}
.scale i:nth-child(-n + 4) { background: var(--liquid); color: var(--ink); }
.scale i:nth-child(4) { background: var(--flow); color: #1b1300; border-color: var(--flow); }
.scale--native i { background: var(--liquid); color: var(--ink); }
.scale--native i:nth-child(4) { background: var(--liquid); color: var(--ink); border-color: var(--ink); }
.scale--native i:last-child { background: var(--flow); color: #1b1300; border-color: var(--flow); }
.langs p { margin: 12px 0 0; max-width: 62ch; }

/* Stack */
.stack { margin: 0; border-top: 2px solid var(--ink); }
.stack > div { display: grid; grid-template-columns: 190px 1fr; gap: 6px 24px; padding: 16px 0; border-bottom: 1px solid var(--grid-major); }
.stack dt { font-weight: 700; font-stretch: 110%; color: var(--ink); }
.stack dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; color: var(--ink); }
.stack dd span { position: relative; }
.stack dd span + span::before { content: ""; position: absolute; left: -12px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: var(--ink-soft); }

/* Contato */
.contacts { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.contacts li {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  align-items: center;
  gap: 8px 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--grid-major);
}
.c-label { color: var(--ink-soft); font-size: 14px; }
.c-value { font-size: clamp(17px, 2.2vw, 22px); font-weight: 700; font-stretch: 105%; overflow-wrap: anywhere; }
.c-copy { font-size: 13px; padding: 8px 12px; }

.general-notes { margin: 0; padding: 0; list-style: none; counter-reset: note; border-top: 2px solid var(--ink); }
.general-notes li {
  counter-increment: note;
  position: relative;
  padding: 14px 0 14px 44px;
  border-bottom: 1px solid var(--grid-major);
  max-width: 68ch;
}
.general-notes li::before {
  content: counter(note);
  position: absolute;
  left: 0;
  top: 14px;
  font: 500 14px/1 var(--mono);
  width: 28px; height: 28px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  display: grid; place-items: center;
}
.general-notes b, .revisions b { font-weight: 700; }
.revisions { width: 100%; border-collapse: collapse; border-top: 2px solid var(--ink); }
.revisions thead th { font-weight: 500; font-size: 13px; color: var(--ink-soft); text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--ink); }
.revisions tbody th { font: 500 18px var(--mono); color: var(--flow); width: 52px; vertical-align: top; text-align: left; padding: 14px 10px 14px 0; }
.revisions td { padding: 14px 0; border-bottom: 1px solid var(--grid-major); }
.revisions tbody th { border-bottom: 1px solid var(--grid-major); }

/* Versão em texto */
.texto { max-width: 760px; margin: 0 auto; padding: 56px 24px 80px; }
.texto h2 { font-stretch: 120%; font-weight: 800; font-size: 32px; margin: 0 0 6px; }
.texto > p { color: var(--ink-soft); margin: 0 0 28px; }
.texto article { border-top: 2px solid var(--ink); padding: 18px 0 22px; }
.texto h3 { margin: 0 0 8px; font-size: 21px; font-stretch: 110%; }
.texto h3 small { font: 500 14px var(--mono); color: var(--ink-soft); margin-right: 10px; }
.texto dl { margin: 0; display: grid; grid-template-columns: 110px 1fr; gap: 6px 16px; }
.texto dt { color: var(--ink-soft); font-size: 14px; }
.texto dd { margin: 0; }

/* Celular e tablet estreito: o desenho fica vertical e a página rola. */
@media (max-width: 820px) {
  .sheet { height: auto; min-height: 0; padding: 10px; }
  .drawing { height: auto; }
  .sheet::before { inset: 4px; }
  .sheet::after { inset: 10px; }
  .head { flex-direction: column; gap: 16px; padding: 20px 18px 14px; }
  .side { justify-items: start; }
  .filters { justify-content: flex-start; }
  .legend { grid-template-columns: repeat(2, auto); }
  .plant { height: auto; max-width: 500px; margin: 0 auto; padding: 8px 0; }
  .foot { grid-template-columns: 1fr; }
  .console { border-right: 0; border-bottom: 1px solid var(--ink); padding: 12px 18px; }
  .gauges { border-right: 0; border-bottom: 1px solid var(--ink); flex-wrap: wrap; padding: 14px 18px; }
  .gauges li { max-width: none; flex: 1 1 140px; }
  .about { padding: 44px 18px 56px; }
  .tab { padding: 10px 12px; font-size: 14px; }
  .contacts li { grid-template-columns: 1fr auto; }
  .stack > div { grid-template-columns: 1fr; }
  .c-label { grid-column: 1 / -1; }
  .texto dl { grid-template-columns: 1fr; gap: 0; }
  .texto dd { margin-bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .is-running .flow { opacity: 1; }
}