/* FILE-MAP:
purpose: >
  Camada de estilo do guia do sistema TELEMETRY. Reusa os tokens de main.css e
  adiciona componentes documentais: swatches de fosfóro, espécimes tipográficos
  variáveis, tabelas de instrumentação e blocos de doutrina técnica.
plain: >
  O visual da página "manual do console" — mesmos verdes de fósforo, mas em
  formato de documentação.
depends_on:
  - path: main.css
    uses: ["custom properties :root", "fontes Martian Mono"]
    via: cascade
    kind: extend
used_by:
  - sites/telemetry/guide/index.html
touches:
  db_tables: []
  env: []
  config_files: []
  cache_keys: []
effects: []
invariants:
  - nenhuma cor nova além dos tokens de main.css (contrato DIRECTIONS §4)
  - única família tipográfica (Martian Mono variável)
category: frontend-style
kind: stylesheet
tags: [telemetry, guide, ezon-showcase]
END-FILE-MAP */

/* ── aliases documentais ─────────────────────────────
   Nomes herdados do vocabulário EDDINGTON, resolvidos
   para tokens TELEMETRY (contrato DIRECTIONS §4: nenhuma
   cor nova). Emissão plena = destaque; emissão baixa = prosa. */
:root {
  --ink: var(--phos);
  --ink-soft: var(--phos-dim);
  --ink-muted: var(--phos-dim);
  --grid-line: var(--grid);
}

/* ── guide shell ─────────────────────────────────── */
.g-shell {
  max-width: 1080px;
  margin-inline: auto;
  padding: 0 clamp(1rem, 4vw, 2.5rem) 4rem;
}

.g-back {
  display: inline-block;
  margin-top: 1.25rem;
  color: var(--phos-dim);
  text-decoration: none;
  font-size: var(--fs-small);
  letter-spacing: .08em;
}
.g-back:hover { color: var(--phos); }

.g-head {
  margin: 2.5rem 0 3rem;
  border: 1px solid var(--grid-line);
  padding: 1.5rem;
  position: relative;
}
.g-head::before {
  content: "DOC ▸ SISTEMA";
  position: absolute;
  top: -0.6em; left: 1rem;
  background: var(--graphite);
  padding: 0 .5em;
  font-size: var(--fs-micro);
  color: var(--phos-dim);
  letter-spacing: .2em;
}
.g-head h1 {
  font-size: clamp(2rem, 6vw, 3.4rem);
  font-weight: 800;
  font-stretch: 112.5%;
  letter-spacing: -.01em;
  margin: 0 0 .5rem;
  color: var(--phos);
  text-shadow: 0 0 18px rgba(198,242,56,.25);
}
.g-head .sub {
  color: var(--ink-soft);
  max-width: 62ch;
  font-size: var(--fs-body);
  line-height: 1.65;
}
.g-head .meta {
  display: flex; flex-wrap: wrap; gap: .4em 1.6em;
  margin-top: 1.1rem;
  font-size: var(--fs-micro);
  color: var(--phos-dim);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ── sections ────────────────────────────────────── */
.g-sec { margin-bottom: 3.5rem; }
.g-sec-title {
  font-size: var(--fs-h2);
  font-weight: 700;
  font-stretch: 105%;
  color: var(--phos);
  border-bottom: 1px solid var(--grid-line);
  padding-bottom: .5rem;
  margin-bottom: 1.4rem;
}
.g-sec-title .idx { color: var(--phos-dim); margin-right: .6em; }
.g-sec > p { max-width: 68ch; color: var(--ink-soft); line-height: 1.7; margin-bottom: 1rem; }
.g-sec strong { color: var(--ink); font-weight: 700; }

/* ── phosphor swatches ───────────────────────────── */
.g-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--grid-line);
  border: 1px solid var(--grid-line);
}
.g-swatch {
  background: var(--graphite);
  padding: .9rem;
  min-height: 118px;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: .3em;
}
.g-swatch .chip { height: 2.2rem; margin-bottom: auto; border: 1px solid rgba(198,242,56,.14); }
.g-swatch .nm { font-size: var(--fs-small); color: var(--ink); }
.g-swatch .hx { font-size: var(--fs-micro); color: var(--phos-dim); letter-spacing: .08em; }
.g-swatch .use { font-size: var(--fs-micro); color: var(--ink-muted); line-height: 1.5; }

/* ── type specimens ──────────────────────────────── */
.g-spec {
  border: 1px solid var(--grid-line);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: baseline;
}
.g-spec .sample { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.g-spec .axes {
  font-size: var(--fs-micro);
  color: var(--phos-dim);
  letter-spacing: .1em;
  text-align: right;
  white-space: nowrap;
}
.s-hero  { font-size: clamp(1.6rem, 4.5vw, 2.6rem); font-weight: 800; font-stretch: 112.5%; }
.s-title { font-size: 1.25rem; font-weight: 700; font-stretch: 105%; }
.s-body  { font-size: var(--fs-body); font-weight: 400; color: var(--ink-soft); }
.s-data  { font-size: var(--fs-body); font-weight: 500; font-stretch: 75%; color: var(--phos); }
.s-thin  { font-size: 1.25rem; font-weight: 100; color: var(--ink-soft); }

/* ── instrument table ────────────────────────────── */
.g-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.g-table th, .g-table td {
  border: 1px solid var(--grid-line);
  padding: .55em .8em;
  text-align: left;
  vertical-align: top;
}
.g-table th {
  color: var(--phos-dim);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: var(--fs-micro);
}
.g-table td { color: var(--ink-soft); }
.g-table td.k { color: var(--ink); white-space: nowrap; }

/* ── doctrine blocks ─────────────────────────────── */
.g-rule {
  border: 1px solid var(--grid-line);
  border-left: 3px solid var(--phos-dim);
  padding: .9rem 1.1rem;
  margin-bottom: 1px;
}
.g-rule .t { color: var(--ink); font-weight: 700; font-size: var(--fs-small); letter-spacing: .06em; }
.g-rule .d { color: var(--ink-muted); font-size: var(--fs-small); line-height: 1.65; margin-top: .3em; }
.g-rule .d code {
  color: var(--phos);
  font-size: .92em;
  background: rgba(198,242,56,.07);
  padding: .1em .35em;
}

/* ── amber exception callout ─────────────────────── */
.g-amber {
  border: 1px dashed var(--amber, #E8A13B);
  padding: 1rem 1.2rem;
  margin-top: 1.25rem;
}
.g-amber .t { color: var(--amber, #E8A13B); font-size: var(--fs-small); letter-spacing: .15em; text-transform: uppercase; }
.g-amber .d { color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.65; margin-top: .35em; max-width: 68ch; }

/* ── footer nav ──────────────────────────────────── */
.g-foot {
  border-top: 1px solid var(--grid-line);
  padding-top: 1.25rem;
  display: flex; flex-wrap: wrap; gap: .5em 2em;
  font-size: var(--fs-small);
  color: var(--ink-muted);
}
.g-foot a { color: var(--phos-dim); text-decoration: none; }
.g-foot a:hover { color: var(--phos); }

@media (max-width: 560px) {
  .g-spec { grid-template-columns: 1fr; gap: .25rem; }
  .g-spec .axes { text-align: left; }
}