/* Consola do Studio / runtime. Assenta nos tokens da app.css (e da skin da marca). */

.con-tag { font-family: var(--ui-display); color: var(--ui-muted); }
.con { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding-top: 20px; align-items: start; }
.con-solo { grid-template-columns: 1fr; }
.con-nav { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 16px; }
.con-nav a {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--ui-r-sm);
  color: var(--ui-text); text-decoration: none; min-height: 44px;
}
.con-nav a:hover { background: var(--ui-alt); }
.con-nav a[aria-current="page"] { background: var(--ui-card); border: 2px solid var(--ui-line); font-weight: 600; }
.con-nav .soon { margin-left: auto; font-size: .75rem; color: var(--ui-muted); }
.con-main { display: grid; gap: 20px; min-width: 0; }
.con-main h1 { font-size: 1.8rem; }
.con-main h2 { font-size: 1.2rem; margin-bottom: 10px; }
.con-lead { color: var(--ui-muted); margin: 4px 0 0; }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.tile { background: var(--ui-card); border: 2px solid var(--ui-line); border-radius: var(--ui-r-md); padding: 12px 14px; }
.tile .k { font-size: .85rem; color: var(--ui-muted); }
.tile .v { font-family: var(--ui-display); font-size: 1.6rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.tile small { color: var(--ui-muted); }

.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tbl th { text-align: left; font-size: .85rem; color: var(--ui-muted); font-weight: 600; padding: 8px; border-bottom: 2px solid var(--ui-line); }
.tbl td { padding: 10px 8px; border-bottom: 1px solid var(--ui-line); vertical-align: top; }
.tbl small { display: block; color: var(--ui-muted); }
.tbl .actions { white-space: nowrap; text-align: right; }

.pill { display: inline-block; font-size: .8rem; padding: 2px 10px; border-radius: var(--ui-r-pill); background: var(--ui-alt); }
.pill-ok { background: color-mix(in srgb, #3b7d3a 16%, var(--ui-card)); color: #2c5e2b; }
.pill-bad { background: color-mix(in srgb, #c0392b 16%, var(--ui-card)); color: #8e2a1f; }

.form { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); align-items: end; }
.form label { display: grid; gap: 4px; font-size: .9rem; }
.form .wide { grid-column: 1 / -1; }
.form input, .form select, .form textarea {
  font: inherit; padding: 8px 10px; border: 2px solid var(--ui-line); border-radius: var(--ui-r-sm);
  background: var(--ui-card); color: var(--ui-text); min-height: 44px;
}
.form textarea { min-height: 64px; resize: vertical; }
.check { display: flex !important; grid-template-columns: none; align-items: center; gap: 8px; }
.check input { min-height: auto; width: 18px; height: 18px; }

.sim { margin-top: 12px; display: grid; gap: 12px; }
.bars { display: grid; gap: 4px; min-width: 180px; }
.wbar { display: grid; grid-template-columns: 60px 1fr 48px; gap: 8px; align-items: center; font-size: .85rem; }
.wbar i { display: block; height: 10px; border-radius: var(--ui-r-pill); background: var(--ui-primary); }
.wbar .track { background: var(--ui-alt); border-radius: var(--ui-r-pill); }
.wbar span:last-child { text-align: right; }

.linkbox { display: flex; gap: 6px; align-items: center; min-width: 0; }
.linkbox code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; background: var(--ui-alt); padding: 4px 8px; border-radius: var(--ui-r-sm); max-width: 260px; }

.login { max-width: 420px; }
.err { color: #8e2a1f; margin: 0; }

@media (max-width: 760px) {
  .con { grid-template-columns: 1fr; }
  .con-nav { position: static; flex-direction: row; overflow-x: auto; }
  .con-nav a { white-space: nowrap; }
  .con-nav .soon { display: none; }
}

/* Aparência: editor estreito à esquerda, pré-visualização larga à direita */
.ap { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 20px; align-items: start; }
.ap-preview { position: sticky; top: 16px; min-width: 0; }
.ap-stage .game-root { margin-top: 8px; position: relative; height: clamp(420px, 72vh, 760px); } /* a mesa ocupa o que lhe dão (ADR-014) */
.ap-group { border: 0; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; min-width: 0; }
.ap-group legend { font-family: var(--ui-display); font-weight: 600; font-size: 1.05rem; margin-bottom: 4px; }
.ap-row { display: grid; gap: 4px; }
.ap-row label small { display: block; color: var(--ui-muted); font-size: .78rem; word-break: break-all; }
.ap-row.set > label { font-weight: 600; }
.ap-input { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ap-input input:not([type="color"]), .ap-input textarea {
  flex: 1; min-width: 140px; font: inherit; padding: 6px 10px; min-height: 40px;
  border: 2px solid var(--ui-line); border-radius: var(--ui-r-sm); background: var(--ui-card); color: var(--ui-text);
}
.ap-input textarea { font-family: ui-monospace, Consolas, monospace; font-size: .78rem; }
.ap-swatch { width: 44px; height: 40px; padding: 2px; border: 2px solid var(--ui-line); border-radius: var(--ui-r-sm); background: var(--ui-card); cursor: pointer; }
.ap-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ap-file { cursor: pointer; display: inline-flex; align-items: center; }
.ap-contrast { margin-top: 14px; padding: 10px 12px; border-radius: var(--ui-r-sm); background: var(--ui-alt); }
.ap-contrast h3 { font-size: 1rem; margin-bottom: 4px; }
.ap-contrast ul { margin: 0; padding-left: 18px; }
.ap-contrast p { margin: 0; }
.ap-dirty { color: #8e2a1f; font-weight: 600; margin: 10px 0 0; }
.ap-sample { display: grid; gap: 10px; padding: 12px; border-radius: var(--ui-r-md); background: var(--ui-bg); }
.ap-sample p { margin: 0; }
.ap-sample-btns { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 1100px) { .ap { grid-template-columns: 1fr; } .ap-preview { position: static; } }

/* Forge: cores dos quatro tipos da taxonomia BGE (como no Rule Forge) */
:root { --k-data: #2f6fb0; --k-flow: #2e8b57; --k-action: #d9722b; --k-score: #b8912f; }
.fg-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fg-name { font: inherit; font-family: var(--ui-display); font-size: 1.5rem; flex: 1; min-width: 200px; padding: 4px 10px;
  border: 2px solid transparent; border-radius: var(--ui-r-sm); background: transparent; color: var(--ui-text); }
.fg-name:hover, .fg-name:focus { border-color: var(--ui-line); background: var(--ui-card); }
.fg-status { font-size: .85rem; color: var(--ui-muted); }
.fg-status[data-state="unsaved"] { color: #8e2a1f; }
.fg-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--ui-line); }
.fg-tabs a { padding: 10px 16px; text-decoration: none; color: var(--ui-muted); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.fg-tabs a[aria-selected="true"] { color: var(--ui-text); border-color: var(--ui-primary); font-weight: 600; }
.fg-bar { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.fg-bar label { display: grid; gap: 4px; font-size: .9rem; }
.fg-bar select { font: inherit; padding: 6px 10px; min-height: 40px; border: 2px solid var(--ui-line); border-radius: var(--ui-r-sm); background: var(--ui-card); color: var(--ui-text); }
.fg-cover h2 { margin-bottom: 4px; }
.fg-cover p { margin: 4px 0; }
.fg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.fg-card { background: var(--ui-card); border: 2px solid var(--ui-line); border-left: 6px solid var(--k-action); border-radius: var(--ui-r-md); padding: 10px 12px; display: grid; gap: 8px; }
.fg-card.k-data { border-left-color: var(--k-data); } .fg-card.k-flow { border-left-color: var(--k-flow); }
.fg-card.k-action { border-left-color: var(--k-action); } .fg-card.k-score { border-left-color: var(--k-score); }
.fg-card-head { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.fg-card-head select { font: inherit; font-size: .8rem; padding: 3px 6px; border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); background: var(--ui-bg); color: var(--ui-text); }
.fg-card-head .btn { margin-left: auto; min-height: 32px; padding: 2px 8px; }
.fg-cat.cat-regra { border-color: #3b7d3a; } .fg-cat.cat-plataforma { border-color: #6b6b6b; } .fg-cat.cat-bot { border-color: #7a4bb0; }
.fg-title { font: inherit; font-weight: 600; padding: 6px 8px; border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); background: var(--ui-bg); color: var(--ui-text); }
.fg-g { display: grid; gap: 2px; font-size: .85rem; }
.fg-g b { color: var(--ui-muted); font-weight: 600; }
.fg-g textarea, .fg-rule textarea { font: inherit; font-size: .9rem; padding: 6px 8px; border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); background: var(--ui-bg); color: var(--ui-text); resize: vertical; width: 100%; }
.fg-rule { display: grid; gap: 8px; }
.fg-rule h3 { margin: 0; flex: 1; }
.fg-rule .fg-title { flex: 1; }
.fg-blocks { list-style: none; padding: 0; display: grid; gap: 6px; }
.fg-kind { display: inline-block; font-size: .7rem; font-weight: 700; color: #fff; padding: 2px 6px; border-radius: 6px; margin-right: 8px; background: var(--k-action); }
.fg-kind.k-data { background: var(--k-data); } .fg-kind.k-flow { background: var(--k-flow); } .fg-kind.k-score { background: var(--k-score); }

/* Forge › Fluxo */
.ff { display: grid; gap: 8px; }
.ff-bar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ff-bar select, .ff-bar input { font: inherit; padding: 6px 10px; min-height: 40px; border: 2px solid var(--ui-line); border-radius: var(--ui-r-sm); background: var(--ui-card); color: var(--ui-text); }
.ff-label { min-width: 200px; }
.ff-sep { width: 1px; height: 28px; background: var(--ui-line); margin: 0 4px; }
.ff-grow { flex: 1; }
.ff-canvas {
  position: relative; overflow: hidden; height: min(68vh, 640px); border: 2px solid var(--ui-line); border-radius: var(--ui-r-md);
  background-color: var(--ui-card); background-image: radial-gradient(circle, color-mix(in srgb, var(--ui-muted) 35%, transparent) 1px, transparent 1.2px);
  cursor: grab; touch-action: none; user-select: none;
}
.ff-canvas.panning { cursor: grabbing; }
.ff-canvas:focus-visible { outline: 3px solid var(--ui-accent); }
.ff-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.ff-edges { position: absolute; left: 0; top: 0; width: 8000px; height: 8000px; max-width: none; max-height: none; overflow: visible; pointer-events: none; } /* sem tamanho o Chrome não pinta; o reset do design system limita os svg */
.ff-edge { stroke: #8b8a92; stroke-width: 1.5; pointer-events: none; }
.ff-edge.hl { stroke: var(--ui-muted); stroke-width: 2; }
.ff-edge.sel { stroke: var(--ui-text); stroke-width: 3; color: var(--ui-text); }
.ff-edge.ghost { stroke: var(--ui-primary); stroke-dasharray: 6 4; }
.ff-hit { stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; }
.ff-node {
  position: absolute; min-width: 120px; max-width: 220px; padding: 6px 12px 8px; border-radius: 10px; cursor: move;
  background: var(--ui-card); border: 2px solid var(--k-action); box-shadow: 0 2px 8px -4px rgb(0 0 0 / .25);
}
.ff-node[data-kind="DATA"] { border-color: var(--k-data); } .ff-node[data-kind="FLOW"] { border-color: var(--k-flow); }
.ff-node[data-kind="SCORE"] { border-color: var(--k-score); }
.ff-node.sel { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 40%, transparent); }
.ff-node.drop { outline: 3px dashed var(--k-flow); }
.ff-node:focus-visible { outline: 3px solid var(--ui-accent); }
.ff-k { display: block; font-size: .65rem; font-weight: 700; letter-spacing: .06em; color: var(--k-action); }
.ff-node[data-kind="DATA"] .ff-k { color: var(--k-data); } .ff-node[data-kind="FLOW"] .ff-k { color: var(--k-flow); }
.ff-node[data-kind="SCORE"] .ff-k { color: var(--k-score); }
.ff-l { display: block; font-weight: 600; line-height: 1.25; }
.ff-badges { display: flex; gap: 6px; font-size: .7rem; color: var(--ui-muted); margin-top: 4px; }
.ff-badges .miss { opacity: .45; text-decoration: line-through dotted; }
.ff-handle { position: absolute; right: -8px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%;
  background: var(--ui-card); border: 2px solid var(--ui-muted); cursor: crosshair; }
.ff-handle:hover { background: var(--ui-primary); border-color: var(--ui-primary); }
.ff-help { font-size: .85rem; color: var(--ui-muted); margin: 0; }

.ff-area { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.ff-panel { width: 300px; display: grid; gap: 8px; padding: 12px; border: 2px solid var(--ui-line); border-radius: var(--ui-r-md); background: var(--ui-card); max-height: min(68vh, 640px); overflow: auto; }
.ff-panel h3 { margin: 0; font-size: 1.05rem; }
.ff-panel h4 { margin: 6px 0 0; font-size: .9rem; color: var(--ui-muted); }
.ff-warn { margin: 0; padding-left: 18px; color: #8e2a1f; font-size: .85rem; }
.ff-cards { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: .85rem; }
.ff-rule { font: inherit; font-size: .9rem; padding: 6px 8px; border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); background: var(--ui-bg); color: var(--ui-text); resize: vertical; }
.ff-mini { position: absolute; right: 10px; bottom: 10px; width: 160px; height: 110px; background: color-mix(in srgb, var(--ui-card) 90%, transparent);
  border: 1px solid var(--ui-line); border-radius: 8px; cursor: pointer; max-width: none; }
.ff-mini rect { fill: var(--k-action); opacity: .7; }
.ff-mini rect.k-data { fill: var(--k-data); } .ff-mini rect.k-flow { fill: var(--k-flow); } .ff-mini rect.k-score { fill: var(--k-score); }
.ff-mini rect.vp { fill: none; stroke: var(--ui-text); stroke-width: 6; opacity: .6; }
@media (max-width: 900px) { .ff-area { grid-template-columns: 1fr; } .ff-panel { width: auto; } }

/* Forge › Partida narrada */
.fg-play { display: grid; gap: 14px; }
.fg-commits { margin: 10px 0 0; padding-left: 18px; font-size: .9rem; }
.fg-commits small { color: var(--ui-muted); }
.fg-timeline { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.fg-timeline > li { padding: 8px 10px; border-left: 3px solid var(--ui-line); background: var(--ui-bg); border-radius: 0 var(--ui-r-sm) var(--ui-r-sm) 0; }
.fg-result { color: var(--ui-muted); margin-top: 2px; }
.fg-timeline details { margin-top: 4px; font-size: .85rem; }
.fg-timeline pre { white-space: pre-wrap; margin: 4px 0 0; font-size: .8rem; }
.fg-doubt { margin-top: 8px; padding: 8px 10px; border: 2px solid #c0392b; border-radius: var(--ui-r-sm); background: color-mix(in srgb, #c0392b 8%, var(--ui-card)); display: grid; gap: 6px; }
.fg-doubt.st-resolvida { border-color: #3b7d3a; background: color-mix(in srgb, #3b7d3a 8%, var(--ui-card)); }
.fg-doubt.st-ignorada { border-color: var(--ui-line); background: var(--ui-card); opacity: .8; }
.fg-assumed { font-size: .9rem; color: var(--ui-muted); }
.fg-doubt-acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.fg-doubt-acts input { flex: 1; min-width: 180px; font: inherit; font-size: .85rem; padding: 6px 8px; border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); background: var(--ui-card); color: var(--ui-text); }
.fg-end { margin: 12px 0 0; padding: 8px 10px; background: var(--ui-alt); border-radius: var(--ui-r-sm); }

/* Forge › Testes */
.fg-tests { display: grid; gap: 10px; margin-top: 10px; }
.fg-test { padding: 10px 12px; border: 2px solid var(--ui-line); border-radius: var(--ui-r-md); background: var(--ui-card); display: grid; gap: 6px; }
.fg-test.ok { border-color: #3b7d3a; }
.fg-gwt { display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; margin: 0; font-size: .9rem; }
.fg-gwt dt { color: var(--ui-muted); font-weight: 600; }
.fg-gwt dd { margin: 0; }
.fg-pre { white-space: pre-wrap; font-size: .8rem; background: var(--ui-bg); padding: 8px; border-radius: var(--ui-r-sm); margin: 6px 0 0; }

/* Forge › Código: relatório da verificação */
.fg-steps { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 6px; }
.fg-steps li { padding: 6px 10px; border-radius: var(--ui-r-sm); background: color-mix(in srgb, #3b7d3a 8%, var(--ui-card)); }
.fg-steps li.bad { background: color-mix(in srgb, #c0392b 10%, var(--ui-card)); }
.fg-steps li.ok b { color: #2c5e2b; } .fg-steps li.bad b { color: #8e2a1f; }

.fg-code { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: .8rem; padding: 8px; border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); background: var(--ui-bg); color: var(--ui-text); resize: vertical; }

.fg-installed { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.fg-published { border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); padding: 8px 12px; margin: 8px 0; }

/* Fluxo em ecrã inteiro e cartões editáveis no painel do bloco */
.ff.ff-full { position: fixed; inset: 0; z-index: 900; background: var(--ui-bg); padding: 12px 16px; grid-template-rows: auto minmax(0, 1fr) auto; }
.ff-full .ff-area { min-height: 0; height: 100%; }
.ff-full .ff-canvas { height: 100%; }
.ff-full .ff-panel { width: 400px; max-height: 100%; }
body.ff-noscroll { overflow: hidden; }
.ff-cards { display: grid; gap: 6px; }
.ff-card { border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); background: var(--ui-bg); }
.ff-card > summary { cursor: pointer; padding: 6px 8px; font-size: .85rem; list-style-position: inside; }
.ff-card[open] > summary { border-bottom: 1px solid var(--ui-line); }
.ff-cform { display: grid; gap: 6px; padding: 8px; }
.ff-cform input, .ff-cform select, .ff-cform textarea { font: inherit; font-size: .85rem; padding: 5px 8px; border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); background: var(--ui-card); color: var(--ui-text); width: 100%; box-sizing: border-box; }
.ff-cform textarea { resize: vertical; }
.ff-cform label { display: grid; gap: 2px; font-size: .8rem; }
.ff-cform .btn { justify-self: start; }

.fg-choice { display: grid; gap: 2px; justify-items: start; }
.fg-choice small { color: var(--ui-muted); max-width: 46ch; }