/* Morae — the kit (v4 "Sistema", 29/10, rounder): the small parts every page is built from. Loaded on every page right
   after sistema.css (tokens), before the page's own CSS. Nothing here moves by itself unless html.movimento is set
   (motion allowed); with reduced motion everything is shown in its final state. Sharp corners only where they are
   strictly needed: the full-width section boundaries (.faixa). Everything else is rounded.

   Surfaces. The defaults are for navy. Inside a light surface (.folha, .claro or [data-tema="claro"]) the same
   classes switch to ink lines; a [data-tema="escuro"] inside a light surface switches back. Override per element
   with the variables listed below.

   .quadro          a rounded hairline frame on an element (1 px, ice ~14 % on navy, ink ~12 % on light), drawn on
                    ::before so the element keeps its own border and background. Radius: the element's own
                    border-radius, by default --raio-3 (24 px; zero specificity, any radius of yours wins).
                    Vars: --quadro-cor.
   .cantos          retired (29/10: no corner markers). The class is inert, old markup does no harm.
   .trilho          a metadata rail: Geist Mono, small, items separated by space (never dots). Real data only
                    (index 01–14, type, platform, status, versions, addresses, counts that exist); no location.
                    <p class="trilho"><span>04</span><span>Sistema</span><span>Em uso</span></p>
                    .trilho--linha adds a hairline above it. .trilho .forte: the item that matters (brighter).
   .no              a node: a small rounded card (hairline, --raio-no, 14 px). .no--ativo: brighter frame.
                    .no--vazio: a dashed, empty node (waiting to be connected).
   .porta           a port: a small circle on an edge of its positioned parent (put <i class="porta"> inside a .no).
                    --porta-lado: top | right | bottom | left (default right), --porta-pos: where along that edge
                    (default 50 %). The keyword works in Chrome and Safari 18+; the classes .porta--top, --right,
                    --bottom, --left work everywhere. States: .porta--ligada (filled), .porta--ativa (amber).
   .faixa           a band of the page in the frame system: a hairline on its top edge (the section boundary, the one
                    straight edge of the site), on wide screens two vertical hairlines just outside the content edges,
                    and a small dot where they meet. Uses ::before and ::after (do not combine with .quadro on the
                    same element). The first band in <main> has no boundary above it (the top bar is there).
   .grade-pontos    a faint dot grid on a canvas (the act and the close only).
   SVG strokes      draw wires as orthogonal paths with small rounded corners, in an SVG at 1:1 (viewBox = its size
                    in px).
     .conexao       a hairline wire. .conexao--ativa: an active wire (amber).
     .pacote        a data packet: a short amber dash with round ends running along its path (give it the same d as
                    the wire). Set --pacote-vao to the path length in px (path.getTotalLength()) so one packet runs at a
                    time, --pacote-tempo for its speed, --pacote-atraso to offset several. It runs only under
                    html.movimento; .pausado on any ancestor (or .pacote--parado) holds it; reduced motion hides it. */

/* kept registered for pages that still animate it (it no longer draws anything) */
@property --quadro-traco { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --canto { syntax: "<length>"; inherits: true; initial-value: 5px; }

/* ---------------------------------------------------------------- surface variables */
:root,
[data-tema="escuro"] {
  --quadro-cor: var(--linha-escura);
  --canto-cor: var(--marca-canto);
  --trilho-cor: var(--nevoa);
  --trilho-forte: var(--gelo);
  --no-fundo: var(--painel);
  --no-linha: rgba(238, 242, 250, 0.16);
  --no-linha-forte: var(--linha-forte-escura);
  --no-texto: var(--gelo);
  --porta-cor: rgba(238, 242, 250, 0.52);
  --conexao-cor: rgba(238, 242, 250, 0.26);
  --conexao-ativa: var(--ambar);
  --pacote-cor: var(--ambar);
}
.folha,
.claro,
[data-tema="claro"] {
  --quadro-cor: var(--linha);
  --canto-cor: var(--marca-canto-claro);
  --trilho-cor: var(--ardosia);
  --trilho-forte: var(--tinta);
  --no-fundo: #fbfcfe;
  --no-linha: rgba(12, 26, 61, 0.16);
  --no-linha-forte: var(--linha-forte);
  --no-texto: var(--tinta);
  --porta-cor: rgba(12, 26, 61, 0.5);
  --conexao-cor: rgba(12, 26, 61, 0.24);
  --conexao-ativa: #b06d1c; /* amber deep enough to read as a 1 px line on the light surface */
  --pacote-cor: #b06d1c;
}
.folha [data-tema="escuro"],
.claro [data-tema="escuro"] {
  --quadro-cor: var(--linha-escura);
  --canto-cor: var(--marca-canto);
  --trilho-cor: var(--nevoa);
  --trilho-forte: var(--gelo);
  --no-fundo: var(--painel);
  --no-linha: rgba(238, 242, 250, 0.16);
  --no-linha-forte: var(--linha-forte-escura);
  --no-texto: var(--gelo);
  --porta-cor: rgba(238, 242, 250, 0.52);
  --conexao-cor: rgba(238, 242, 250, 0.26);
  --conexao-ativa: var(--ambar);
  --pacote-cor: var(--ambar);
}

/* ---------------------------------------------------------------- .quadro: a rounded hairline frame */
:where(.quadro) { position: relative; border-radius: var(--raio-3); }
.quadro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--quadro-z, auto);
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--quadro-cor);
  pointer-events: none;
}

/* ---------------------------------------------------------------- .trilho: a metadata rail */
.trilho {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3em 1.5em;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--fonte-mono);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--trilho-cor);
}
.trilho > * { white-space: nowrap; }
.trilho .forte { color: var(--trilho-forte); }
.trilho--linha { padding-top: 10px; box-shadow: inset 0 1px 0 var(--quadro-cor); }

/* ---------------------------------------------------------------- .no: a node, .porta: a port */
:where(.no) { position: relative; display: block; }
.no {
  padding: 9px 12px;
  border-radius: var(--raio-no);
  background: var(--no-fundo);
  color: var(--no-texto);
  box-shadow: inset 0 0 0 1px var(--no-linha);
  font-size: 0.8125rem;
  line-height: 1.35;
}
.no--ativo { box-shadow: inset 0 0 0 1px var(--no-linha-forte); }
.no--vazio {
  background: transparent;
  box-shadow: none;
  outline: 1px dashed var(--no-linha-forte);
  outline-offset: -1px;
}

.porta { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
.porta::before {
  content: "";
  position: absolute;
  left: 100%;
  top: var(--porta-pos, 50%);
  width: var(--porta-tam);
  height: var(--porta-tam);
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--porta-fundo, var(--no-fundo));
  box-shadow: inset 0 0 0 1px var(--porta-cor);
  transition: background-color 0.35s, box-shadow 0.35s;
}
@container style(--porta-lado: top) { .porta::before { left: var(--porta-pos, 50%); top: 0%; } }
@container style(--porta-lado: bottom) { .porta::before { left: var(--porta-pos, 50%); top: 100%; } }
@container style(--porta-lado: left) { .porta::before { left: 0%; top: var(--porta-pos, 50%); } }
@container style(--porta-lado: right) { .porta::before { left: 100%; top: var(--porta-pos, 50%); } }
.porta--top::before { left: var(--porta-pos, 50%); top: 0%; }
.porta--bottom::before { left: var(--porta-pos, 50%); top: 100%; }
.porta--left::before { left: 0%; top: var(--porta-pos, 50%); }
.porta--right::before { left: 100%; top: var(--porta-pos, 50%); }
.porta--ligada::before { background: var(--porta-cor); }
.porta--ativa::before { background: var(--conexao-ativa); box-shadow: inset 0 0 0 1px var(--conexao-ativa); }

/* ---------------------------------------------------------------- wires and packets (SVG) */
.conexao {
  fill: none;
  stroke: var(--conexao-cor);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.35s;
}
.conexao--ativa { stroke: var(--conexao-ativa); }
.pacote {
  fill: none;
  stroke: var(--pacote-cor);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: var(--pacote, 7px) var(--pacote-vao, 1000px);
  stroke-dashoffset: var(--pacote, 7px);
}
.movimento .pacote { animation: kit-pacote var(--pacote-tempo, 1.8s) linear var(--pacote-atraso, 0s) infinite; }
.pausado .pacote,
.pacote--parado { animation-play-state: paused !important; }
@keyframes kit-pacote {
  from { stroke-dashoffset: var(--pacote, 7px); }
  to { stroke-dashoffset: calc(-1 * var(--pacote-vao, 1000px)); }
}

/* ---------------------------------------------------------------- .faixa: a band of the page in the frame system */
.faixa {
  --faixa-folga: clamp(14px, 1.7vw, 26px);
  --faixa-x: calc(max(var(--gutter), (100% - var(--largura)) / 2) - var(--faixa-folga));
  position: relative;
  box-shadow: inset 0 1px 0 var(--quadro-cor);
}
.faixa::after {
  /* the small dots where the boundary meets the vertical lines */
  content: "";
  position: absolute;
  left: calc(var(--faixa-x) - var(--canto) / 2 + 0.5px);
  right: calc(var(--faixa-x) - var(--canto) / 2 + 0.5px);
  top: calc(var(--canto) / -2 + 0.5px);
  height: var(--canto);
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(circle, var(--canto-cor) 0 45%, transparent 55%) left top / var(--canto) var(--canto) no-repeat,
    radial-gradient(circle, var(--canto-cor) 0 45%, transparent 55%) right top / var(--canto) var(--canto) no-repeat;
}
/* the first band of a page has no boundary above it (the top bar sits there) */
main > .faixa:first-child { box-shadow: none; }
main > .faixa:first-child::after { display: none; }
@media (max-width: 1023px) {
  .faixa { --faixa-x: calc(var(--gutter) / 2); }
}
@media (min-width: 1024px) {
  .faixa::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--faixa-x);
    right: var(--faixa-x);
    z-index: 2;
    pointer-events: none;
    box-shadow: inset 1px 0 0 var(--quadro-cor), inset -1px 0 0 var(--quadro-cor);
  }
}

/* ---------------------------------------------------------------- .grade-pontos: a faint dot grid */
.grade-pontos {
  background-image: radial-gradient(circle at 50% 50%, var(--ponto-grade) 0 1px, transparent 1.4px);
  background-size: 24px 24px;
  background-position: var(--grade-x, 0) var(--grade-y, 0);
}

@media (prefers-reduced-motion: reduce) {
  .pacote { display: none; }
  .porta::before, .conexao { transition: none; }
}