/*
  Relational Cartography (rcft): interface do site como folha de mapa.

  Sistema:
  - Moldura (neatline) a --m das bordas, com a graduação da grelha de 80 px
    marcada nas margens, como numa carta topográfica (js/ui.js desenha-a).
  - Margem superior (colar): identificação à esquerda, estado da ligação à direita.
  - Uma única cartouche (bloco de título) no canto inferior esquerdo da moldura
    com tudo o que explica a peça: título, texto, totais, legenda e botão.
  - Uma leitura de dados (últimas entradas) no canto inferior direito.
  Todo o texto é Fragment Mono (desenho de base Helvetica, em monoespaçado).
  Os blocos são transparentes: as palavras e as linhas veem-se por baixo.
*/

html[data-ui="sheet"] {
  --m: 32px;          /* distância da moldura às bordas */
  --in: 16px;         /* distância dos blocos à moldura */
  --line: rgba(255, 255, 255, 0.55);
  --dim: rgba(255, 255, 255, 0.62);
  --mono: "Fragment Mono", ui-monospace, Menlo, Consolas, monospace;
  --t-xs: 9px;
  --t-s: 10px;
  --t-m: 11px;
}

html[data-ui="sheet"] body { font-family: var(--mono); }

/* ---------- moldura e graduação ---------- */

#sheet {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

#sheet .neat { fill: none; stroke: var(--line); stroke-width: 1; }
#sheet .tick { stroke: var(--line); stroke-width: 1; }
#sheet .tick.major { stroke: #fff; }
#sheet text {
  fill: var(--dim);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.04em;
}

/* ---------- cartouche ---------- */

.cartouche {
  position: fixed;
  z-index: 2;
  left: calc(var(--m) + var(--in));
  bottom: calc(var(--m) + var(--in));
  width: 344px;
  border: 1px solid var(--line);
  font-size: var(--t-m);
  line-height: 1.5;
  pointer-events: none;
}

.cartouche > * { padding: 10px 12px; }
.cartouche > * + * { border-top: 1px solid var(--line); }

/* Título e texto: caixa expansível, fechada por omissão; abre ao clicar no título. */
.cartouche > .c-box { padding: 0; }
.c-box > summary { padding: 10px 12px; list-style: none; cursor: pointer; pointer-events: auto; }
.c-box > summary::-webkit-details-marker { display: none; }
.c-box > .c-about { padding: 10px 12px; border-top: 1px solid var(--line); }
.c-box > summary:hover .c-title,
.c-box > summary:focus-visible .c-title { text-decoration: underline; text-underline-offset: 3px; }
.c-box > summary:focus-visible { outline: none; }
.c-toggle { display: inline-block; width: 1ch; margin-left: 10px; color: #fff; }
.c-toggle::before { content: "+"; }
.c-box[open] .c-toggle::before { content: "-"; }

.c-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.c-title {
  margin: 0;
  font-size: var(--t-m);
  font-weight: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.c-meta { font-size: var(--t-xs); color: var(--dim); letter-spacing: 0.08em; }

.c-about p { margin: 0; font-size: 10.5px; line-height: 1.55; }
.c-about p + p { margin-top: 6px; }

/* Totais do corpus: mesmo registo da legenda (valor no lugar do símbolo). */
.c-stats,
.c-legend {
  list-style: none;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  font-size: var(--t-s);
}

/* Totais numa linha; a última entrada na linha seguinte. */
.c-stats { grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 20px; }
.c-stats li { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.c-stats .c-wide { grid-column: 1 / -1; gap: 8px; }

.c-legend li { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.c-legend svg { flex: none; width: 24px; height: 10px; overflow: visible; }
.c-legend svg[viewBox="0 0 12 12"] { width: 10px; height: 10px; margin: 0 7px; }
.c-legend circle { fill: none; stroke: #fff; stroke-width: 1; vector-effect: non-scaling-stroke; }
.c-legend line { stroke: #fff; stroke-width: 1; vector-effect: non-scaling-stroke; }
.c-legend .pulse { transform-origin: 50% 50%; animation: rcft-pulse 1.57s linear infinite; }

.cartouche #contribute {
  /* anula as regras do botão antigo em rcft.css */
  position: static;
  transform: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border: 0;
  border-top: 1px solid var(--line);
  padding: 11px 12px;
  background: transparent;
  color: #fff;
  font-family: var(--mono);
  font-size: var(--t-s);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  pointer-events: auto;
}

.cartouche #contribute::after { content: "+"; font-size: 13px; letter-spacing: 0; }
.cartouche #contribute:hover,
.cartouche #contribute:focus-visible { background: #fff; color: var(--blue); outline: none; }

/* ---------- leitura de dados ---------- */

.readout {
  position: fixed;
  z-index: 2;
  right: calc(var(--m) + var(--in));
  bottom: calc(var(--m) + var(--in));
  width: 236px;
  font-size: var(--t-s);
  line-height: 1.8;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

html[data-ui="sheet"] #coords {
  position: static;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  text-align: left;
  white-space: normal;
}

.r-row { display: grid; grid-template-columns: 1fr 56px 56px; }
.r-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-row span:nth-child(2), .r-row span:nth-child(3) { text-align: right; }

/* Cabeçalho da tabela no registo do botão "Contribute a response": branco, maiúsculas espaçadas. */
.r-head {
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
  font-size: var(--t-s);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}

/* ---------- ecrãs estreitos ---------- */
/*
  No site, abaixo de 768 px. Na instalação só abaixo de 600 px (telemóvel): um
  ecrã ao alto de 720 px (TV na vertical a 1280x720) mantém a disposição do
  ecrã grande. As duas listas são iguais; :where() não muda a especificidade.
*/

@media (max-width: 767px) {
  html[data-ui="sheet"]:where(:not([data-mode="install"])) { --m: 10px; --in: 8px; }

  :where(html:not([data-mode="install"])) .cartouche {
    left: calc(var(--m) + var(--in));
    right: calc(var(--m) + var(--in));
    bottom: calc(var(--m) + var(--in) + env(safe-area-inset-bottom));
    width: auto;
  }

  :where(html:not([data-mode="install"])) .cartouche > * { padding: 8px 10px; }
  :where(html:not([data-mode="install"])) .c-about p { font-size: 9.5px; line-height: 1.5; }

  :where(html:not([data-mode="install"])) .readout {
    right: calc(var(--m) + var(--in));
    bottom: auto;
    top: calc(var(--m) + 34px);
    width: 150px;
    font-size: 8px;
    line-height: 1.7;
  }

  :where(html:not([data-mode="install"])) .r-row { grid-template-columns: 1fr 34px 34px; }
  :where(html:not([data-mode="install"])) .r-head span:first-child { font-size: 0; }
  :where(html:not([data-mode="install"])) .r-head span:first-child::before { content: "Latest"; font-size: var(--t-s); }
}

@media (max-width: 599px) {
  html[data-ui="sheet"]:where([data-mode="install"]) { --m: 10px; --in: 8px; }

  :where(html[data-mode="install"]) .cartouche {
    left: calc(var(--m) + var(--in));
    right: calc(var(--m) + var(--in));
    bottom: calc(var(--m) + var(--in) + env(safe-area-inset-bottom));
    width: auto;
  }

  :where(html[data-mode="install"]) .cartouche > * { padding: 8px 10px; }

  :where(html[data-mode="install"]) .r-row { grid-template-columns: 1fr 34px 34px; }
  :where(html[data-mode="install"]) .r-head span:first-child { font-size: 0; }
  :where(html[data-mode="install"]) .r-head span:first-child::before { content: "Latest"; font-size: var(--t-s); }
}

/* ---------- formulário (folha) ---------- */
/*
  O formulário é uma folha com o mesmo registo da cartouche: um bloco com
  linhas finas entre as perguntas, numeradas; os campos são a própria linha
  (sem caixa), com um sublinhado. O envio é a última linha, como o botão do mapa.
  Espaçamentos proporcionais à altura do ecrã, para caber num telemóvel.
*/

html[data-ui="sheet"] body.form {
  --f-pad: clamp(6px, 1.3vh, 12px);
  min-height: 100vh;
  min-height: 100dvh;
}

.f-wrap {
  width: 100%;
  max-width: calc(560px + 2 * (var(--m) + var(--in)));
  margin: 0 auto;
  padding:
    calc(var(--m) + var(--in) + env(safe-area-inset-top))
    calc(var(--m) + var(--in) + env(safe-area-inset-right))
    calc(var(--m) + var(--in) + env(safe-area-inset-bottom))
    calc(var(--m) + var(--in) + env(safe-area-inset-left));
  position: relative;
  z-index: 2;
}

.f-sheet {
  border: 1px solid var(--line);
  font-size: var(--t-m);
  line-height: 1.45;
}

.f-sheet > * + * { border-top: 1px solid var(--line); }

.f-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: var(--f-pad) 12px;
}

.f-head .close { width: 12px; height: 12px; color: #fff; }

.f-intro {
  margin: 0;
  padding: var(--f-pad) 12px;
  font-size: var(--t-s);
  color: var(--dim);
}

.f-row {
  display: grid;
  grid-template-columns: 24px 1fr;
  column-gap: 8px;
  padding: var(--f-pad) 12px;
  transition: background-color .15s;
}

.f-row:focus-within { background: rgba(255, 255, 255, 0.07); }

.f-n {
  grid-row: 1 / span 2;
  font-size: var(--t-s);
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
}

.f-row label {
  font-size: var(--t-s);
  line-height: 1.45;
}

.f-row input,
.f-row textarea {
  display: block;
  width: 100%;
  margin-top: clamp(2px, 0.5vh, 5px);
  padding: 2px 0 3px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-family: var(--mono);
  font-size: 16px;            /* evita o zoom automático no iOS */
  line-height: 1.35;
  -webkit-appearance: none;
  appearance: none;
  resize: none;
  overflow: hidden;
}

.f-row input:focus,
.f-row textarea:focus { outline: none; border-bottom-color: #fff; }

.f-submit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-family: var(--mono);
  font-size: var(--t-s);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.f-submit::after { content: "+"; font-size: 13px; letter-spacing: 0; }
.f-submit:hover,
.f-submit:focus-visible { background: #fff; color: var(--blue); outline: none; }
.f-submit:disabled { opacity: 0.5; cursor: default; }
.f-submit:disabled:hover { background: transparent; color: #fff; }

.f-status {
  margin: 0;
  padding: 9px 12px;
  font-size: var(--t-s);
}

.f-status:empty { display: none; }
.f-status a { color: #fff; }

@media (min-width: 768px) and (hover: hover) {
  .f-row input,
  .f-row textarea { font-size: 13px; }
}

html[data-ui="sheet"] #rcft-form { margin-top: 0; }

/* O mapa a correr por trás do formulário, esbatido. */
body.form #stage.f-backdrop { opacity: 0.3; pointer-events: none; }

/* No computador o formulário fica ao centro da página (margin auto evita
   cortar o topo se a janela for mais baixa do que o formulário). */
@media (min-width: 768px) {
  .f-wrap {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }
  html[data-ui="sheet"] .f-wrap > #rcft-form { margin-block: auto; }
}