/* Antitese — folha de estilo da aplicação.
   Sem passo de compilação: o browser lê isto tal como está. */

/* ------------------------------------------------------------------
   Utilitários. Eram a CDN do Tailwind — um compilador a correr no
   browser, que a própria Tailwind desaconselha em produção, por 105
   classes. Estas são exatamente as que o markup usa; os valores são
   os da Tailwind, para o aspeto não mudar.
   ------------------------------------------------------------------ */
*, ::before, ::after { box-sizing: border-box; border: 0 solid var(--border) }
html { line-height: 1.5; -webkit-text-size-adjust: 100% }
body { margin: 0 }
h1, h2, h3, p { margin: 0; font-size: inherit; font-weight: inherit }
button, input, textarea { padding: 0; margin: 0; font: inherit; color: inherit; background: none }
button { cursor: pointer }
svg { display: block }
a { color: inherit; text-decoration: inherit }
/* A regra kbd da app (mais abaixo) estava a ser tapada pelo reset da
   Tailwind, que impunha monoespaçado. Sem ela, vale o que aqui se pediu. */

.flex { display:flex }
.grid { display:grid }
.hidden { display:none }
.inline-block { display:inline-block }
.absolute { position:absolute }
.flex-col { flex-direction:column }
.flex-1 { flex:1 1 0% }
.items-center { align-items:center }
.items-start { align-items:flex-start }
.justify-between { justify-content:space-between }
.justify-center { justify-content:center }
.shrink-0 { flex-shrink:0 }
.grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)) }
.overflow-y-auto { overflow-y:auto }
.pointer-events-none { pointer-events:none }
.z-10 { z-index:10 }
.z-20 { z-index:20 }
.left-1\/2 { left:50% }
.-translate-x-1\/2 { transform:translateX(-50%) }
.backdrop-blur { backdrop-filter:blur(8px) }
.gap-1 { gap:0.25rem }
.gap-1\.5 { gap:0.375rem }
.gap-2 { gap:0.5rem }
.gap-3 { gap:0.75rem }
.gap-4 { gap:1rem }
.top-1\.5 { top:0.375rem }
.top-4 { top:1rem }
.left-2 { left:0.5rem }
.w-1\.5 { width:0.375rem }
.w-7 { width:1.75rem }
.w-8 { width:2rem }
.w-11 { width:2.75rem }
.w-px { width:1px }
.w-full { width:100% }
.h-1\.5 { height:0.375rem }
.h-5 { height:1.25rem }
.h-7 { height:1.75rem }
.h-8 { height:2rem }
.h-full { height:100% }
.max-w-sm { max-width:24rem }
.max-w-2xl { max-width:42rem }
.max-w-3xl { max-width:48rem }
.max-h-\[80vh\] { max-height:80vh }
.max-h-\[85vh\] { max-height:85vh }
.p-4 { padding:1rem }
.p-6 { padding:1.5rem }
.p-7 { padding:1.75rem }
.px-2 { padding-left:0.5rem; padding-right:0.5rem }
.px-2\.5 { padding-left:0.625rem; padding-right:0.625rem }
.px-3 { padding-left:0.75rem; padding-right:0.75rem }
.px-4 { padding-left:1rem; padding-right:1rem }
.px-5 { padding-left:1.25rem; padding-right:1.25rem }
.py-0\.5 { padding-top:0.125rem; padding-bottom:0.125rem }
.py-1\.5 { padding-top:0.375rem; padding-bottom:0.375rem }
.py-2 { padding-top:0.5rem; padding-bottom:0.5rem }
.py-2\.5 { padding-top:0.625rem; padding-bottom:0.625rem }
.mb-2 { margin-bottom:0.5rem }
.mb-3 { margin-bottom:0.75rem }
.mb-5 { margin-bottom:1.25rem }
.mb-6 { margin-bottom:1.5rem }
.mt-0\.5 { margin-top:0.125rem }
.mt-1 { margin-top:0.25rem }
.mt-5 { margin-top:1.25rem }
.ml-1 { margin-left:0.25rem }
.ml-3 { margin-left:0.75rem }
.mr-1\.5 { margin-right:0.375rem }
.mx-1 { margin-left:0.25rem; margin-right:0.25rem }
.mx-4 { margin-left:1rem; margin-right:1rem }
.border { border-width:1px }
.border-b { border-bottom-width:1px }
.border-t { border-top-width:1px }
.border-transparent { border-color:transparent }
.border-\[var\(--border\)\] { border-color:var(--border) }
.border-\[var\(--border-2\)\] { border-color:var(--border-2) }
.rounded-md { border-radius:0.375rem }
.rounded-lg { border-radius:0.5rem }
.rounded-xl { border-radius:0.75rem }
.rounded-full { border-radius:9999px }
.bg-\[var\(--bg-2\)\] { background-color:var(--bg-2) }
.bg-\[var\(--bg-3\)\] { background-color:var(--bg-3) }
.bg-\[var\(--border\)\] { background-color:var(--border) }
.bg-\[var\(--coral\)\] { background-color:var(--coral) }
.text-\[var\(--fg\)\] { color:var(--fg) }
.text-\[var\(--fg-dim\)\] { color:var(--fg-dim) }
.text-\[var\(--gold\)\] { color:var(--gold) }
.text-\[var\(--muted\)\] { color:var(--muted) }
.text-white { color:#fff }
.text-xs { font-size:0.75rem; line-height:1rem }
.text-sm { font-size:0.875rem; line-height:1.25rem }
.text-base { font-size:1rem; line-height:1.5rem }
.text-xl { font-size:1.25rem; line-height:1.75rem }
.text-2xl { font-size:1.5rem; line-height:2rem }
.text-\[9px\] { font-size:9px }
.text-\[10px\] { font-size:10px }
.text-\[11px\] { font-size:11px }
.text-\[13px\] { font-size:13px }
.leading-tight { line-height:1.25 }
.leading-relaxed { line-height:1.625 }
.tracking-widest { letter-spacing:0.1em }
.uppercase { text-transform:uppercase }
.text-center { text-align:center }
.no-underline { text-decoration-line:none }
.tabular-nums { font-variant-numeric:tabular-nums }
.hover\:bg-\[var\(--bg-3\)\]:hover { background-color:var(--bg-3) }
.hover\:bg-\[var\(--border\)\]:hover { background-color:var(--border) }
.hover\:bg-red-700:hover { background-color:#b91c1c }
.hover\:border-\[var\(--border\)\]:hover { border-color:var(--border) }
.hover\:text-\[var\(--fg\)\]:hover { color:var(--fg) }

/* Tipografia local (fonts/), sem depender do Google Fonts.
   NotoSans-400.woff2 é uma fonte VARIÁVEL: um só ficheiro cobre
   todo o eixo 100–900, por isso a declaração é um intervalo e não
   duas pesagens. Ambas as fontes são OFL 1.1 — fonts/OFL.txt tem
   de acompanhar sempre estes ficheiros. */
@font-face {
    font-family: 'NotoSans';
    src: url('fonts/NotoSans-400.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Inter, para a marca e o título da ajuda. Um só ficheiro, SemiBold,
   serve os dois — ambos são títulos. É um .ttf e não um .woff2 porque
   foi o que havia no repo; ver a nota no fim, um .woff2 corta-lhe ~2/3. */
@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Architects Daughter';
    src: url('fonts/ArchitectsDaughter.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Dois registos: o que se lê e o que se anota à mão. */
    --font-ui: 'NotoSans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-hand: 'Architects Daughter', 'Bradley Hand', 'Comic Sans MS', cursive;
    --font-display: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

:root {
    --bg: #f7f8fa;
    --bg-2: #ffffff;
    --bg-3: #f0f2f5;
    --border: #e2e6eb;
    --border-2: #d1d5db;
    --fg: #14161A;
    --fg-dim: #4b5563;
    --muted: #9ca3af;
    --gold: #b8814c;
    --teal: #0d9488;
    --coral: #dc2626;
    --amber: #d97706;
    --slate: #64748b;
    --violet: #8b5cf6;
    /* superfícies compostas, para o tema as poder trocar de uma vez */
    --grade: rgba(31, 41, 55, 0.07);
    --painel: rgba(255, 255, 255, 0.95);
    --barra: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.92) 100%);
}

/* Modo escuro. É só cor: nenhum valor daqui entra no ficheiro, e um
   .tese serializa igual nos dois temas — há um teste para isso. */
:root[data-tema="escuro"] {
    --bg: #101216;
    --bg-2: #171a1f;
    --bg-3: #21252b;
    --border: #2b3037;
    --border-2: #3a4049;
    --fg: #e6e9ed;
    --fg-dim: #a8b0ba;
    --muted: #79828d;
    --gold: #d3a06a;
    --teal: #2dd4bf;
    --coral: #f87171;
    --amber: #fbbf24;
    --slate: #94a3b8;
    --violet: #a78bfa;
    --grade: rgba(226, 232, 240, 0.06);
    --painel: rgba(23, 26, 31, 0.95);
    --barra: linear-gradient(180deg, #191d22 0%, #15181c 100%);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

body {
    font-family: var(--font-ui);
    background: var(--bg);
    color: var(--fg);
    font-size: 14px;
}

/* Títulos e marca. O nome da classe ficou de quando era um serif;
   o papel é o mesmo — o registo de cabeçalho, agora manuscrito. */
.font-hand {
    font-family: var(--font-hand);
}

.font-display {
    font-family: var(--font-display);
    font-weight: 600;
}

.app {
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100vh;
}

.main {
    display: grid;
    grid-template-columns: 1fr 320px;
    overflow: hidden;
    transition: grid-template-columns 0.3s ease;
}

.main.collapsed {
    grid-template-columns: 1fr 0px;
}

#canvas-container {
    position: relative;
    overflow: hidden;
    background: var(--bg-2);
}

#canvas {
    width: 100%;
    height: 100%;
    cursor: grab;
    display: block;
}

#canvas.grabbing {
    cursor: grabbing;
}

.grid-bg {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 1px 1px, var(--grade) 1px, transparent 0);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 1;
}

.node {
    cursor: move;
    transition: opacity 0.25s;
}

.node text {
    user-select: none;
    pointer-events: none;
}

.strength-hit,
.type-hit,
.implicit-icon,
.note-icon {
    cursor: pointer;
}

.type-hit.locked {
    cursor: default;
}

.note-panel {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: var(--bg-2);
    border: 1px solid;
    border-radius: 8px;
    padding: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.note-area {
    width: 100%;
    height: 100%;
    min-height: 0;
    border: none;
    outline: none;
    resize: none;
    background: transparent;
    font-family: var(--font-ui);
    font-size: 12px;
    line-height: 1.5;
    color: var(--fg);
}

.node-bg {
    transition: stroke-width 0.15s, opacity 0.25s;
}

.edge-group {
    cursor: pointer;
}

/* Em modo ligação, a caixa sob o cursor diz que é ela a que vai ser
   ligada. Só muda o traço, nunca a área sensível — mexer na área com
   :hover cria o ciclo de realimentação que fazia o cursor tremer. */
.connecting .node {
    cursor: crosshair;
}

.connecting .node:hover .node-bg {
    stroke-width: 3;
}

/* A faixa de clique (.edge-hit) é invisível e larga; a linha visível
   (.edge-line) é que reage ao rato. Antes o :hover atingia TODOS os
   path do grupo e encolhia a faixa de clique de 14px para 3px: o rato
   passava a estar fora dela, o hover caía, a faixa voltava a 14px e o
   ciclo recomeçava — era isso que fazia o cursor tremer. E a grossura
   fixa apagava, no hover, a força da inferência que a linha codifica. */
.edge-line {
    transition: opacity 0.2s;
}

.edge-group:hover .edge-line {
    opacity: 1;
}

.inference-step {
    cursor: pointer;
}

.inference-step:hover circle {
    fill: var(--bg-3);
}

@keyframes nodeAppear {
    from {
        opacity: 0;
        transform: scale(0.85);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.node-appear {
    animation: nodeAppear 0.35s ease-out;
    transform-origin: center;
    transform-box: fill-box;
}

.toolbar {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 15;
    background: var(--painel);
    backdrop-filter: blur(16px);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.toolbar-item {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.18s ease;
    position: relative;
    background: transparent;
    border: 1px solid transparent;
    color: var(--fg-dim);
}

.toolbar-item:hover {
    background: var(--bg-3);
    border-color: var(--border-2);
    transform: scale(1.05);
}

.toolbar-item.disabled {
    opacity: 0.3;
    pointer-events: none;
}

.toolbar-item.active {
    background: var(--bg-3);
    border-color: var(--gold);
    color: var(--gold);
}

.toolbar-item .tool-label {
    position: absolute;
    left: 56px;
    top: 50%;
    transform: translate(-6px, -50%);
    background: var(--fg);
    border: 1px solid var(--fg-dim);
    color: var(--bg);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s, transform 0.15s;
    z-index: 20;
}

.toolbar-item:hover .tool-label {
    opacity: 1;
    transform: translate(0, -50%);
}

.toolbar-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 8px;
}

.sidebar {
    background: var(--bg-2);
    overflow-y: auto;
    overflow-x: hidden;
    border-left: 1px solid var(--border);
}

.sidebar.hidden {
    display: none;
}

#sidebar-toggle {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 15;
    width: 28px;
    height: 28px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.2s;
}

#sidebar-toggle:hover {
    background: var(--bg-3);
    transform: translateY(-50%) scale(1.1);
}

.btn {
    transition: all 0.15s;
    cursor: pointer;
    /* Os ícones passaram a ser SVG (display:block) e encostavam ao canto
       esquerdo dos botões quadrados. Centrar aqui serve todos. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn:hover {
    transform: translateY(-1px);
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-2);
    border-radius: 3px;
}

#minimap {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 220px;
    height: 140px;
    background: var(--painel);
    border: 1px solid var(--border);
    border-radius: 10px;
    backdrop-filter: blur(12px);
    overflow: hidden;
    z-index: 5;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    display: none;
}

#minimap.visible {
    display: block;
}

.toast {
    position: fixed;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--fg);
    color: var(--bg);
    padding: 10px 20px;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 100;
    pointer-events: none;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.header-bg {
    background: var(--barra);
    backdrop-filter: blur(10px);
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.2);
    }
}

.pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--teal);
    animation: pulse 2s infinite;
}

.pulse-dot.connecting {
    background: var(--gold);
}

textarea,
input,
select {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--fg);
    border-radius: 6px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 13px;
    transition: border-color 0.15s;
    width: 100%;
}

textarea:focus,
input:focus,
select:focus {
    outline: none;
    border-color: var(--gold);
}

textarea {
    resize: vertical;
    min-height: 70px;
    font-family: var(--font-ui);
    font-size: 14px;
}

#scratchpad {
    resize: none;
    min-height: 0;
    line-height: 1.55;
    background: var(--bg-2);
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    z-index: 50;
    display: none;
    align-items: center;
    justify-content: center;
}

.modal-backdrop.show {
    display: flex;
}

.template-card {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.template-card:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.type-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

kbd {
    background: var(--bg-3);
    border: 1px solid var(--border-2);
    border-radius: 4px;
    padding: 2px 8px;
    /* Monoespaçado e do tamanho do texto à volta: era o que o reset da
       Tailwind impunha, e é o que dá cara de tecla. Agora está dito
       aqui — antes esta regra pedia 11px em NotoSans e nunca chegava a
       aplicar-se. */
    font-size: 1em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 600;
    color: var(--fg);
    box-shadow: 0 2px 0 var(--border);
    display: inline-block;
    min-width: 24px;
    text-align: center;
}

.help-section {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
}

.help-section-title {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.help-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--border) 0%, transparent 100%);
}

.help-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.help-row:last-child {
    border-bottom: none;
}

/* Inline edit robusto */
.inline-edit-area {
    width: 100%;
    height: 100%;
    border: 2px solid var(--gold);
    background: var(--bg-2);
    resize: none;
    outline: none;
    color: var(--fg);
    font-family: var(--font-ui);
    font-size: 13px;
    padding: 6px 10px;
    line-height: 1.4;
    border-radius: 4px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Estilo do Título e Logo */
.nome.lettering {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1;
    margin: 0;
}

.nome.lettering .tit {
    color: var(--gold);
}

/* Ícones: tamanho pela font-size de quem os contém, cor por herança. */
.ic {
    width: 1.45em;
    height: 1.45em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.28em;
}