/* Relational Cartography (rcft) */

:root {
  --blue: rgb(0, 24, 255);
  --fg: #ffffff;
  --s: 1;                       /* escala da interface, definida por ?scale= */
  --pad: calc(6px * var(--s));  /* folga dos painéis de texto */
  --font: Helvetica, Arial, sans-serif;
}

[hidden] { display: none !important; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--blue);
  color: var(--fg);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

::selection { background: var(--fg); color: var(--blue); }

/* ---------- Mapa ---------- */

body.map {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

#stage, #stage canvas {
  position: fixed;
  inset: 0;
  display: block;
}

/* Texto transparente por cima do canvas: os nós e as linhas veem-se por baixo,
   como na versão original. Os painéis não captam o rato, exceto o botão. */
.panel {
  position: fixed;
  z-index: 2;
  margin: 0;
  padding: var(--pad);
  background: transparent;
  color: var(--fg);
  font-weight: normal;
  pointer-events: none;
}

#contribute { pointer-events: auto; }

#title {
  left: calc(40px * var(--s) - var(--pad));
  top: calc(40px * var(--s) - var(--pad));
  font-size: calc(12px * var(--s));
  line-height: 1;
  letter-spacing: 0;
}

/* Texto por baixo do título, alinhado à esquerda com ele */
#about {
  left: calc(40px * var(--s) - var(--pad));
  top: calc(64px * var(--s) - var(--pad));
  width: calc(min(42vw, 520px * var(--s)) + 2 * var(--pad));
  font-size: calc(11px * var(--s));
  line-height: calc(16px * var(--s));
}

#about p { margin: 0; }

#legend {
  left: calc(44px * var(--s) - var(--pad));
  bottom: calc(36px * var(--s) - var(--pad));
  font-size: calc(10px * var(--s));
  pointer-events: none;
}

#legend .row {
  display: flex;
  align-items: center;
  height: calc(20px * var(--s));
}

#legend .row:nth-child(3) { margin-top: calc(3px * var(--s)); }
#legend .row:nth-child(3),
#legend .row:nth-child(4) { height: calc(14px * var(--s)); }

#legend svg { flex: none; overflow: visible; }
#legend circle { fill: none; stroke: var(--fg); stroke-width: 1; vector-effect: non-scaling-stroke; }
#legend line { stroke: var(--fg); stroke-width: 1; vector-effect: non-scaling-stroke; }

#legend .dot {
  width: calc(12px * var(--s));
  height: calc(12px * var(--s));
  margin: 0 calc(11px * var(--s)) 0 calc(-2px * var(--s));
}

#legend .ln {
  width: calc(80px * var(--s));
  height: calc(2px * var(--s));
  margin-right: calc(10px * var(--s));
}

#legend .pulse {
  transform-origin: 50% 50%;
  animation: rcft-pulse 1.57s linear infinite;
}

@keyframes rcft-pulse {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.2); }
  50%  { transform: scale(1); }
  75%  { transform: scale(0.8); }
  100% { transform: scale(1); }
}

#coords {
  right: calc(40px * var(--s) - var(--pad));
  bottom: calc(36px * var(--s) - var(--pad));
  font-size: calc(10px * var(--s));
  line-height: calc(18px * var(--s));
  text-align: right;
  white-space: pre;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

#coords:empty { display: none; }

.button,
#contribute {
  display: inline-block;
  padding: calc(8px * var(--s)) calc(16px * var(--s));
  border: 1px solid var(--fg);
  color: var(--fg);
  background: transparent;
  font-family: var(--font);
  font-size: calc(10px * var(--s));
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

#contribute {
  left: 50%;
  bottom: max(calc(12px * var(--s)), calc(4vh - 15px));
  transform: translateX(-50%);
  white-space: nowrap;
}

.button:hover,
.button:focus-visible,
#contribute:hover,
#contribute:focus-visible {
  background: var(--fg);
  color: var(--blue);
  outline: none;
}

/*
  QR code da instalação, tratado como um elemento do sistema: ocupa células da
  grelha (posição calculada no sketch), tem um enquadramento de cantos como as
  caixas de deteção da visão máquina, e uma etiqueta na mesma gramática da
  legenda e das coordenadas. O fundo do QR é opaco para as linhas não passarem
  por cima (impediriam a leitura).
*/
#qr {
  --qr-size: 160px;
  --qr-frame: calc(8px * var(--s));
  --qr-corner: calc(14px * var(--s));
  padding: 0;
  display: flex;
  align-items: flex-end;
  gap: calc(14px * var(--s));
}

#qr-frame {
  padding: var(--qr-frame);
  background:
    linear-gradient(var(--fg), var(--fg)) left top / var(--qr-corner) 1px no-repeat,
    linear-gradient(var(--fg), var(--fg)) left top / 1px var(--qr-corner) no-repeat,
    linear-gradient(var(--fg), var(--fg)) right top / var(--qr-corner) 1px no-repeat,
    linear-gradient(var(--fg), var(--fg)) right top / 1px var(--qr-corner) no-repeat,
    linear-gradient(var(--fg), var(--fg)) left bottom / var(--qr-corner) 1px no-repeat,
    linear-gradient(var(--fg), var(--fg)) left bottom / 1px var(--qr-corner) no-repeat,
    linear-gradient(var(--fg), var(--fg)) right bottom / var(--qr-corner) 1px no-repeat,
    linear-gradient(var(--fg), var(--fg)) right bottom / 1px var(--qr-corner) no-repeat,
    var(--blue);
}

#qr-code {
  width: var(--qr-size);
  height: var(--qr-size);
  background: var(--blue);
}

#qr[data-style="light"] #qr-code { background: var(--fg); }

#qr-code svg { display: block; width: 100%; height: 100%; }

#qr-label {
  font-size: calc(10px * var(--s));
  line-height: calc(18px * var(--s));
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

#qr-label span { display: block; }

#debug {
  position: fixed;
  z-index: 3;
  right: calc(40px * var(--s) - var(--pad));
  top: calc(40px * var(--s) - var(--pad));
  margin: 0;
  padding: var(--pad);
  background: var(--blue);
  border: 1px solid var(--fg);
  font: calc(10px * var(--s)) / 1.5 ui-monospace, Menlo, Consolas, monospace;
}

/* Modo instalação: sem cursor e sem botão (o QR code substitui-o). */
html[data-mode="install"],
html[data-mode="install"] * { cursor: none !important; }
html[data-mode="install"] #contribute { display: none; }
/* Na instalação o texto descritivo está na folha de sala; fica só o título. */
html[data-mode="install"] #about { display: none; }

/*
  Instalação:
    em cima à esquerda: coordenadas     em cima à direita: legenda
    em baixo à esquerda: título         em baixo à direita: QR, com a etiqueta à esquerda
*/
html[data-mode="install"] #title {
  top: auto;
  bottom: calc(40px * var(--s) - var(--pad));
}

html[data-mode="install"] #legend {
  left: auto;
  right: calc(40px * var(--s) - var(--pad));
  bottom: auto;
  top: calc(34px * var(--s) - var(--pad));
}

html[data-mode="install"] #coords {
  right: auto;
  left: calc(40px * var(--s) - var(--pad));
  bottom: auto;
  top: calc(36px * var(--s) - var(--pad));
  text-align: left;
}

html[data-mode="install"] #qr {
  --qr-corner: calc(10px * var(--s));
  --qr-frame: calc(6px * var(--s));
  flex-direction: row-reverse;
}

html[data-mode="install"] #qr-label { text-align: right; }

/* Ecrãs estreitos (telemóvel) */
@media (max-width: 767px) {
  #title {
    left: calc(16px - var(--pad));
    top: calc(16px - var(--pad));
  }

  #about {
    left: calc(16px - var(--pad));
    right: auto;
    top: calc(34px - var(--pad));
    width: calc(100% - 32px + 2 * var(--pad));
    font-size: 10px;
    line-height: 14px;
  }


  #legend,
  #coords {
    bottom: calc(64px - var(--pad));
    font-size: 8px;
  }

  #legend { left: calc(16px - var(--pad)); }
  #legend .row { height: 13px; }
  #legend .row:nth-child(3),
  #legend .row:nth-child(4) { height: 11px; }
  #legend .ln { width: 48px; margin-right: 8px; }
  #legend .dot { width: 10px; height: 10px; margin-right: 8px; }

  #coords {
    right: calc(16px - var(--pad));
    line-height: 13px;
  }

  #contribute { bottom: 16px; }
}

/* ---------- Formulário ---------- */
/*
  Espaçamentos proporcionais à altura do ecrã (vh) com limites (clamp): num
  telemóvel baixo ficam compactos e o formulário cabe sem scroll; num ecrã
  grande abrem até um máximo. Não há valores fixos por tipo de aparelho.
*/

body.form {
  min-height: 100vh;
  min-height: 100dvh;
  --gap-top: clamp(14px, 4.5vh, 56px);
  --gap-field: clamp(10px, 2vh, 20px);
  --gap-label: clamp(3px, 0.6vh, 6px);
  --side: clamp(16px, 5vw, 32px);
}

.form-wrap {
  width: 100%;
  max-width: calc(480px + 2 * var(--side));
  margin: 0 auto;
  padding:
    calc(var(--gap-top) + env(safe-area-inset-top))
    calc(var(--side) + env(safe-area-inset-right))
    calc(var(--gap-top) + env(safe-area-inset-bottom))
    calc(var(--side) + env(safe-area-inset-left));
}

.form-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 0;
}

.form-head h1 {
  margin: 0;
  font-size: clamp(13px, 1.6vh + 4px, 15px);
  line-height: 1.2;
  font-weight: normal;
}

.form-head .intro {
  margin: clamp(4px, 1vh, 10px) 0 0;
  font-size: clamp(10px, 1.2vh + 3px, 11px);
  line-height: 1.35;
  opacity: 0.9;
}

.close {
  flex: none;
  display: block;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  color: var(--fg);
}

.close svg { display: block; width: 100%; height: 100%; }

.close:hover, .close:focus-visible { opacity: 0.6; outline: none; }

#rcft-form { margin-top: clamp(14px, 3.5vh, 36px); }

.field { margin-bottom: var(--gap-field); }

.field label {
  display: block;
  margin-bottom: var(--gap-label);
  font-size: 9px;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.field input,
.field textarea {
  display: block;
  width: 100%;
  padding: clamp(4px, 0.8vh, 7px) 8px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.06);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;   /* 16px evita o zoom automático no iOS */
  line-height: 1.25;
  -webkit-appearance: none;
  appearance: none;
}

/* As caixas de texto começam com uma linha e crescem com a resposta (js/contribute.js). */
.field textarea { height: auto; min-height: 0; resize: none; overflow: hidden; }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--fg);
  background: rgba(255, 255, 255, 0.12);
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: clamp(12px, 2.5vh, 28px);
}

.form-actions button:disabled { opacity: 0.5; cursor: default; }
.form-actions button:disabled:hover { background: var(--blue); color: var(--fg); }

#rcft-form-status {
  font-size: 10px;
  line-height: 1.5;
  min-height: 15px;
}

#rcft-form-status a { color: var(--fg); }

/* Em ecrãs largos (rato e teclado) o texto dos campos pode ser mais pequeno. */
@media (min-width: 768px) and (hover: hover) {
  .field input,
  .field textarea { font-size: 12px; }
}