:root {
  color-scheme: light dark;
  --bg: #f6f7f9;
  --panel: #ffffff;
  --border: #d8dce3;
  --ink: #1c2230;
  --muted: #5c6676;
  --accent: #2563eb;
  --accent-soft: #dbeafe;
  --danger: #b91c1c;
  --warn: #b45309;
  --ok: #15803d;
  --edge: #4b5563;
  --canvas: #ffffff;
  --grid: #eef1f5;
}

/*
 * Tema escuro em três situações, não duas: o sistema operacional pode pedir
 * escuro (prefers-color-scheme), e o hospedeiro pode marcar a escolha explícita
 * do leitor em data-theme. A marcação explícita vence dos dois lados, por isso
 * a media query é guardada contra data-theme="light". A lista de tokens é a
 * mesma nos dois blocos de propósito: CSS não permite reaproveitar um bloco de
 * declarações entre seletores.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14181f;
    --panel: #1b212b;
    --border: #2c3542;
    --ink: #e6eaf0;
    --muted: #9aa5b4;
    --accent: #60a5fa;
    --accent-soft: #1e3a5f;
    --danger: #f87171;
    --warn: #fbbf24;
    --ok: #4ade80;
    --edge: #9aa5b4;
    --canvas: #10141a;
    --grid: #1a1f27;
  }
}

:root[data-theme="dark"] {
  --bg: #14181f;
  --panel: #1b212b;
  --border: #2c3542;
  --ink: #e6eaf0;
  --muted: #9aa5b4;
  --accent: #60a5fa;
  --accent-soft: #1e3a5f;
  --danger: #f87171;
  --warn: #fbbf24;
  --ok: #4ade80;
  --edge: #9aa5b4;
  --canvas: #10141a;
  --grid: #1a1f27;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- barra de menus ---------- */

.menubar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 8px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.menubar h1 {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0.02em;
}

.menus { display: flex; gap: 2px; }

.menu { position: relative; }

.menu > summary {
  list-style: none;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 6px;
  user-select: none;
}

.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { background: var(--bg); }
.menu[open] > summary { background: var(--accent-soft); }

.menu-items {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  min-width: 230px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 30px #0003;
}

.menu-items button,
.menu-items a {
  border: none;
  background: none;
  text-align: left;
  padding: 7px 10px;
  border-radius: 5px;
}

.menu-items a {
  display: block;
  color: var(--ink);
  text-decoration: none;
}

.menu-items button:hover,
.menu-items a:hover { background: var(--accent-soft); }
.menu-items hr { border: none; border-top: 1px solid var(--border); margin: 5px 2px; width: 100%; }

/* Menu de contexto (botão direito no diagrama) */
.context-menu {
  position: fixed;
  z-index: 40;
  min-width: 210px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 30px #0003;
}
.context-menu[hidden] { display: none; }
.context-menu button {
  border: none;
  background: none;
  text-align: left;
  padding: 7px 10px;
  border-radius: 5px;
  color: var(--ink);
}
.context-menu button:hover:not(:disabled) { background: var(--accent-soft); }
.context-menu button:disabled { opacity: 0.45; cursor: default; }
.context-menu button.danger { color: var(--danger); }
.context-menu hr { border: none; border-top: 1px solid var(--border); margin: 5px 2px; }

button {
  font: inherit;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}

button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: 0.45; cursor: default; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.danger { color: var(--danger); }

.modes { display: flex; gap: 6px; }

.modes button.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  font-weight: 600;
}

.file-name {
  margin-left: auto;
  color: var(--muted);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
}

/* ---------- layout principal ---------- */

main {
  flex: 1;
  display: flex;
  min-height: 0;
}

.canvas-wrap {
  flex: 1;
  position: relative;
  min-width: 0;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--canvas);
}

#canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

.status {
  position: absolute;
  left: 12px;
  bottom: 12px;
  margin: 0;
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--muted);
  max-width: calc(100% - 24px);
}

.status.ok { color: var(--accent); border-color: var(--accent); }
.status.warn { border-color: var(--warn); color: var(--warn); }
.status.error { border-color: var(--danger); color: var(--danger); }

.sidebar {
  width: 340px;
  flex-shrink: 0;
  border-left: 1px solid var(--border);
  background: var(--panel);
  overflow-y: auto;
  padding: 4px 16px 24px;
}

.sidebar h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 20px 0 8px;
}

.sidebar h3 { margin: 14px 0 8px; font-size: 14px; }

.hint, .counts { color: var(--muted); margin: 4px 0; }

.problems {
  margin: 8px 0;
  padding-left: 18px;
  color: var(--warn);
}

.actions { display: flex; flex-wrap: wrap; gap: 6px; }

.symbols { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }

.symbols li {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 4px 2px 8px;
}

.symbols code { font-size: 13px; }
.symbols button { padding: 0 6px; border: none; background: none; color: var(--muted); }
.symbols button:hover { color: var(--danger); }

/* ---------- simulação ---------- */

.sim-run { display: flex; gap: 6px; }

.sim-run input {
  flex: 1;
  min-width: 0;
  font: 14px ui-monospace, Menlo, monospace;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink);
}

.sim-run input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.verdict {
  margin: 10px 0 4px;
  padding: 6px 10px;
  border-radius: 6px;
  font-weight: 600;
}

.verdict.accept { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.verdict.reject { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }

.path { font-family: ui-monospace, Menlo, monospace; font-size: 13px; line-height: 2; }
.path .arrow { color: var(--muted); }

.stepper { display: flex; align-items: center; gap: 4px; margin: 10px 0 8px; flex-wrap: wrap; }
.stepper button { padding: 4px 9px; }
.stepper .counts { margin-left: 4px; font-size: 12px; }

.configs { list-style: none; margin: 6px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }

.configs li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.configs li.accept { border-color: var(--ok); }
.cfg-state { font-weight: 600; min-width: 34px; }

.tape { font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
.tape .done { color: var(--muted); }
.tape .eof { color: var(--muted); }

.tape .caret {
  display: inline-block;
  width: 0;
  border-left: 2px solid var(--accent);
  height: 1.1em;
  vertical-align: text-bottom;
  margin: 0 1px;
}

/* ---------- fita da máquina de Turing ---------- */

.tm-config { align-items: flex-start; }
.tm-config .cfg-state { padding-top: 4px; }

.tm-tape {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
}

.tm-tape .cell {
  min-width: 1.6em;
  padding: 3px 4px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg);
}

.tm-tape .cell.blank { color: var(--muted); }
.tm-tape .cell.marker { color: var(--accent); font-weight: 600; }

/* a célula sob a cabeça de leitura */
.tm-tape .cell.head {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 22%, var(--bg));
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 2px 0 var(--accent);
}

/* PDA: a configuração mostra estado, entrada restante e a pilha (topo à esquerda) */
.pda-config { align-items: center; flex-wrap: wrap; }
.pda-stack {
  display: inline-flex;
  gap: 2px;
  margin-left: auto;
  padding-left: 8px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
}
.pda-stack .cell {
  min-width: 1.4em;
  padding: 2px 4px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg);
}
.pda-stack .cell.blank { color: var(--muted); }
/* o topo da pilha, à esquerda, destacado */
.pda-stack .cell.head {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 22%, var(--bg));
  color: var(--ink);
  font-weight: 700;
}

/* ---------- diálogos ---------- */

dialog {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  color: var(--ink);
  padding: 20px;
  min-width: 300px;
  max-width: min(520px, 92vw);
  box-shadow: 0 12px 40px #0004;
}

dialog::backdrop { background: #0006; }

dialog label { display: block; font-weight: 600; margin-bottom: 8px; }

dialog input, dialog textarea {
  font: inherit;
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink);
}

dialog textarea { font-family: ui-monospace, Menlo, monospace; resize: vertical; }
dialog input:focus, dialog textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
dialog .hint { font-size: 12px; margin: 6px 0 0; }

dialog menu {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
}

#text-area { min-height: 7em; }
#text-area:read-only { color: var(--muted); }

#batch-results { max-height: 40vh; overflow-y: auto; margin-top: 12px; }
#batch-results .accept { color: var(--ok); }
#batch-results .reject { color: var(--danger); }

table.batch { width: 100%; border-collapse: collapse; font-size: 13px; }
table.batch th, table.batch td { border: 1px solid var(--border); padding: 4px 8px; text-align: left; }

/* ---------- tabela de transições ---------- */

#transition-table table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}

#transition-table th,
#transition-table td {
  border: 1px solid var(--border);
  padding: 4px 8px;
  text-align: left;
}

#transition-table thead th { background: var(--bg); }
#transition-table tbody th { font-weight: 600; white-space: nowrap; }
#transition-table td { color: var(--muted); }
#transition-table td.cell-output { color: var(--accent); font-weight: 600; }

/* ---------- SVG ---------- */

.node-circle {
  fill: var(--panel);
  stroke: var(--ink);
  stroke-width: 2;
}

.node-circle.inner { fill: none; }

.node.selected .node-circle { stroke: var(--accent); stroke-width: 3; }
.node.pending .node-circle { stroke: var(--accent); stroke-dasharray: 4 3; }

/* estado alcançado pela simulação no passo atual */
.node.active .node-circle {
  fill: color-mix(in srgb, var(--accent) 30%, var(--panel));
  stroke: var(--accent);
  stroke-width: 3;
}

/* estado com não-determinismo */
.node.nondet .node-circle {
  stroke: var(--warn);
  stroke-width: 3;
}

.node-label {
  fill: var(--ink);
  font: 600 14px system-ui, sans-serif;
  pointer-events: none;
  user-select: none;
}

.node-note { fill: var(--muted); font: 11px system-ui, sans-serif; pointer-events: none; }

/* saída do estado numa máquina de Moore */
.node-output {
  fill: var(--accent);
  font: 600 11px ui-monospace, Menlo, monospace;
  pointer-events: none;
  user-select: none;
  paint-order: stroke;
  stroke: var(--canvas);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.initial-marker { fill: none; stroke: var(--ink); stroke-width: 2; }

.edge-line {
  fill: none;
  stroke: var(--edge);
  stroke-width: 2;
}

.edge-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 14;
  cursor: pointer;
}

.edge.selected .edge-line { stroke: var(--accent); stroke-width: 3; }
.edge.lambda .edge-line { stroke: var(--warn); stroke-width: 3; stroke-dasharray: 7 4; }

.edge-label {
  fill: var(--ink);
  font: 13px ui-monospace, Menlo, monospace;
  pointer-events: none;
  user-select: none;
  paint-order: stroke;
  stroke: var(--canvas);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.edge.lambda .edge-label { fill: var(--warn); }

.edge-ghost {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 5 4;
}

.arrow-head { fill: var(--edge); }
.arrow-head.selected { fill: var(--accent); }

/* ---------- impressão ---------- */

@media print {
  .menubar, .sidebar, .status { display: none !important; }
  body { height: auto; background: #fff; }
  main { display: block; }
  .canvas-wrap { background: #fff; }
  #canvas { height: 90vh; }
  .node-circle { fill: #fff; stroke: #000; }
  .node-label, .edge-label, .node-note { fill: #000; stroke: none; }
  .edge-line, .initial-marker { stroke: #000; }
  .arrow-head { fill: #000; }
  .node.active .node-circle, .node.nondet .node-circle,
  .node.selected .node-circle { fill: #fff; stroke: #000; stroke-width: 2; }
  .edge.lambda .edge-line { stroke: #000; stroke-dasharray: 7 4; }
}

@media (max-width: 900px) {
  main { flex-direction: column; }
  .sidebar { width: auto; border-left: none; border-top: 1px solid var(--border); max-height: 50vh; }
}