/* =============================================================================
   PLATFORM — "system inspection" (readme §20)
   Sete atos, sete mecânicas. Cada seção tem composição própria de propósito.
   ============================================================================= */

/* ---------- P01 hero: o system map é o protagonista ------------------------- */

/* Sem foto de fundo (D22): o fundo é o campo de luz de `.hero__glow`, definido
   em atmosphere.css. O que sobra aqui é a geometria do capítulo. */
.hero--platform { min-height: max(78svh, 460px); }

/* O mapa ocupa a metade direita e a copy fica na safe area à esquerda — é o
   "foco centro-direita" da regra de hero. Ocupando a largura inteira ele
   atravessava por baixo do parágrafo de apoio, e os dois ficavam ilegíveis
   (visto na revisão da captura de Platform em 1440x900). */
.hero__systemmap {
  position: absolute; bottom: 8%; left: auto;
  /* Alinhado à MARGEM DO CONTEÚDO, não à borda da janela: colado em
     `--container-pad` o mapa passava do limite direito da coluna de texto e a
     página perdia o alinhamento vertical que organiza tudo o mais. */
  right: max(var(--container-pad),
             calc((100% - var(--container)) / 2 + var(--container-pad)));
  z-index: 2; width: min(54%, 720px);
  opacity: .92; pointer-events: auto;
}

/* TABLET / MOBILE: o mapa sai de trás da copy e vira o capítulo seguinte —
   empilhar os dois no mesmo espaço tornaria ambos ilegíveis (readme §13). */
@media (max-width: 1080px) {
  .hero__systemmap {
    position: static; width: auto; opacity: 1;
    padding: var(--space-12) var(--container-pad) var(--space-16);
    /* O parallax de mouse não se aplica a um bloco de fluxo: em toque nem
       existe ponteiro fino, e deslocar o bloco empurraria o layout. */
    transform: none !important;
  }
  .hero--platform { min-height: 0; padding-bottom: var(--space-10); }
}


/* ---------- P02 agents: inspector técnico ----------------------------------- */

.plat-agents__claim {
  font-size: var(--text-mono-label); letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--text-muted); margin-top: var(--space-9);
}

.plat-agents {
  margin-top: var(--space-14);
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: var(--gap-split);
  /* O palco do diagrama é bem mais baixo que o inspector ao lado: alinhado
     pelo topo, a coluna visual deixava um vão do tamanho de meia tela. */
  align-items: center;
}
.plat-agents__facets {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-split);
  margin-bottom: var(--space-12);
}
.plat-agents__facet { color: var(--text-muted); max-width: 46ch; }

.plat-agents__stage { min-width: 0; }

.plat-agents__inspector {
  border: 1px solid var(--border-card); border-radius: var(--radius-md);
  background: var(--surface-card); padding: var(--space-9);
}
.plat-agents__tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.plat-agents__tab {
  min-height: var(--tap-min); padding: 0 var(--space-7);
  background: none; border: 1px solid var(--border-faint); border-radius: var(--radius-sm);
  cursor: pointer; color: var(--text-muted);
  font-family: var(--font-mono); font-size: var(--text-mono-meta);
  letter-spacing: var(--track-meta); text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease-hud), border-color var(--dur-fast) var(--ease-hud);
}
.plat-agents__tab:hover { color: var(--text-body); }
.plat-agents__tab[aria-selected="true"] {
  color: var(--accent); border-color: var(--accent); background: var(--maia-cyan-wash);
}

.plat-agents__spec { margin: var(--space-9) 0 0; display: grid; gap: var(--space-3); }
.plat-agents__spec > div {
  display: flex; justify-content: space-between; gap: var(--space-7);
  padding-block: var(--space-3); border-top: 1px solid var(--border-faint);
}
.plat-agents__spec dt {
  font-family: var(--font-mono); font-size: var(--text-mono-meta);
  letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--text-label);
}
.plat-agents__spec dd { margin: 0; font-size: var(--text-ui); }

/* Atravessa as duas colunas: o diagrama tem largura natural de ~1000px e não
   cabe legível na coluna do inspector (ver o comentário em PlatformAgents.razor). */
.plat-agents__anatomy { grid-column: 1 / -1; margin-top: var(--space-16); }

/* A transição P02 → P03 sai de dentro do campo PROVIDER: linguagem, sem régua. */
.plat-agents__bridge {
  margin-top: var(--space-16);
  font-size: var(--text-mono-label); letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--text-muted);
}
.plat-agents__bridge-next { color: var(--accent); margin-inline-start: var(--space-5); }

@media (max-width: 1080px) {
  .plat-agents { grid-template-columns: 1fr; }
  .plat-agents__facets { grid-template-columns: 1fr; gap: var(--space-8); }
}


/* ---------- P03 providers: routing matrix ----------------------------------- */

.providers-matrix { margin-top: var(--space-14); }

.providers-matrix__legend {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-9);
  font-family: var(--font-mono); font-size: var(--text-mono-meta);
  letter-spacing: var(--track-tight); color: var(--text-muted);
}
.providers-matrix__legend li { display: flex; align-items: center; gap: var(--space-4); }
.providers-matrix__mark { width: 8px; height: 8px; flex: none; }
[data-register="visible"] .providers-matrix__mark { background: var(--maia-amber); }
[data-register="invisible"] .providers-matrix__mark { background: var(--accent); }

.providers-matrix__grid {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-11);
}
.providers-matrix__chip {
  padding: var(--space-4) var(--space-8);
  border: 1px solid var(--border-faint); border-radius: var(--radius-sm);
  font-size: var(--text-mono-label); letter-spacing: var(--track-meta);
  text-transform: uppercase; color: var(--text-nav);
}

.providers-matrix__flow { margin-top: var(--space-16); }


/* ---------- P04 extensibility: bancada única -------------------------------- */

.workbench { margin-top: var(--space-14); }

.workbench__tabs { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.workbench__tab {
  display: inline-flex; align-items: center; gap: var(--space-5);
  min-height: var(--tap-min); padding: 0 var(--space-9);
  background: none; border: 1px solid var(--border-faint); border-radius: var(--radius-sm);
  cursor: pointer; color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-hud), border-color var(--dur-fast) var(--ease-hud);
}
.workbench__tab:hover { color: var(--text-body); border-color: var(--maia-line-strong); }
.workbench__tab[aria-selected="true"] {
  color: var(--text-body); border-color: var(--accent); background: var(--maia-cyan-wash);
}
.workbench__tab-num {
  font-family: var(--font-mono); font-size: var(--text-mono-meta); color: var(--text-label);
}
.workbench__tab[aria-selected="true"] .workbench__tab-num { color: var(--accent); }
.workbench__tab-label {
  font-family: var(--font-mono); font-size: var(--text-mono-label);
  letter-spacing: var(--track-label); text-transform: uppercase;
}

.workbench__panel {
  margin-top: var(--space-12);
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: var(--gap-split); align-items: center;
}
.workbench__title { font-size: var(--text-h3); max-width: 20ch; }
.workbench__text { color: var(--text-muted); margin-top: var(--space-7); }
.workbench__ui { margin-top: var(--space-11); }
.workbench__diagram { min-width: 0; }

.workbench__bridge {
  margin-top: var(--space-16);
  font-size: var(--text-mono-label); letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--text-muted);
}
.workbench__bridge-next { color: var(--accent); margin-inline-start: var(--space-5); }

@media (max-width: 1080px) {
  .workbench__panel { grid-template-columns: 1fr; gap: var(--space-12); }
}


/* ---------- P05 real actions: media theater --------------------------------- */

.theater { margin-top: var(--space-14); }

.theater__modes { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.theater__mode {
  min-height: var(--tap-min); padding: 0 var(--space-9);
  background: none; border: 1px solid var(--border-faint); border-radius: var(--radius-sm);
  cursor: pointer; color: var(--text-muted);
  font-family: var(--font-mono); font-size: var(--text-mono-label);
  letter-spacing: var(--track-label); text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease-hud), border-color var(--dur-fast) var(--ease-hud);
}
.theater__mode:hover { color: var(--text-body); border-color: var(--maia-line-strong); }
.theater__mode[aria-selected="true"] {
  color: var(--accent); border-color: var(--accent); background: var(--maia-cyan-wash);
}

.theater__panel { margin-top: var(--space-12); }
.theater__head { max-width: var(--measure-prose); }
.theater__title { font-size: var(--text-h3); }
.theater__text { color: var(--text-muted); margin-top: var(--space-6); }

.theater__stage {
  position: relative; margin-top: var(--space-11);
  max-width: min(100%, 1060px); margin-inline: auto;
}
/* Embaixo, e não no topo: o próprio slot já escreve o TIPO de mídia no canto
   superior esquerdo, e as duas linhas mono se sobrepunham letra sobre letra —
   visto na revisão de P05 em 390x844. Aqui a anotação contextual fica na base
   do palco, onde ela lê como legenda e não como um segundo rótulo. */
.theater__kind {
  position: absolute; left: var(--space-9); bottom: var(--space-8);
  font-size: var(--text-mono-meta); letter-spacing: var(--track-meta);
  text-transform: uppercase; color: var(--maia-amber);
}
.theater__chain {
  margin-top: var(--space-9); text-align: center;
  font-size: var(--text-mono-meta); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--text-muted);
}
.theater__diagram { margin-top: var(--space-14); }


/* ---------- P06 local-first: cutaway + tabela ------------------------------- */

.plat-local { margin-top: var(--space-16); }

.plat-local__table {
  width: 100%; margin-top: var(--space-18);
  border-collapse: collapse; text-align: start;
}
.plat-local__table th, .plat-local__table td {
  padding: var(--space-6) var(--space-7);
  border-top: 1px solid var(--border-faint);
  vertical-align: top;
}
.plat-local__table thead th {
  font-family: var(--font-mono); font-size: var(--text-mono-meta);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--text-label); border-top: 0; text-align: start;
}
.plat-local__table tbody th {
  font-size: var(--text-ui); font-weight: var(--weight-medium);
  color: var(--text-body); text-align: start;
}
.plat-local__table td { font-size: var(--text-sm); color: var(--text-muted); }
.plat-local__note {
  display: block; margin-top: var(--space-2);
  font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--text-muted);
}

/* LOCAL / EXTERNAL sempre com rótulo escrito — a cor não carrega sozinha. */
.plat-local__status {
  display: inline-flex; align-items: center; gap: var(--space-3); white-space: nowrap;
  font-family: var(--font-mono); font-size: var(--text-mono-meta);
  letter-spacing: var(--track-meta); text-transform: uppercase;
}
.plat-local__dot { width: 6px; height: 6px; border-radius: var(--radius-round); flex: none; }
[data-where="local"] .plat-local__dot { background: var(--status-available); }
[data-where="local"] .plat-local__status { color: var(--status-available); }
[data-where="external"] .plat-local__dot { background: var(--maia-amber); }
[data-where="external"] .plat-local__status { color: var(--maia-amber); }

.plat-local__unspecified {
  margin-top: var(--space-11);
  font-size: var(--text-mono-meta); letter-spacing: var(--track-tight);
  color: var(--maia-amber); max-width: var(--measure-prose);
}

@media (max-width: 760px) {
  /* Tabela larga não cabe no celular: cada linha vira um bloco. */
  .plat-local__table, .plat-local__table tbody, .plat-local__table tr,
  .plat-local__table th, .plat-local__table td { display: block; width: 100%; }
  .plat-local__table thead { display: none; }
  .plat-local__table tr { border-top: 1px solid var(--border-faint); padding-block: var(--space-7); }
  .plat-local__table th, .plat-local__table td { border-top: 0; padding-inline: 0; }
}


/* ---------- P07 start: continuidade, não banner centralizado ---------------- */

.plat-start { position: relative; padding-block: clamp(100px, 16vh, 180px); overflow: hidden; }
.plat-start__environment {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 50% at 28% 40%, rgba(0, 212, 255, .06), transparent 70%),
    linear-gradient(180deg, var(--maia-bg) 0%, var(--maia-black) 70%, var(--maia-black-2) 100%);
}
.plat-start__content {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .6fr);
  gap: var(--gap-split); align-items: center;
}
.plat-start__title { font-size: clamp(28px, 3.6vw, var(--text-h2-lg)); margin-top: var(--space-7); max-width: 18ch; }
.plat-start__actions { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-11); }
.plat-start__system {
  margin-top: var(--space-12);
  font-size: var(--text-mono-label); letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--text-label);
}
.plat-start__ready { color: var(--status-available); margin-inline-start: var(--space-5); }

.plat-start__acts { list-style: none; margin: 0; padding: 0; }
.plat-start__act {
  display: flex; align-items: baseline; gap: var(--space-6);
  padding-block: var(--space-4);
  border-top: 1px solid var(--border-faint);
  font-size: var(--text-mono-meta); letter-spacing: var(--track-meta);
  text-transform: uppercase; color: var(--text-label);
}
.plat-start__act[data-last="True"] { color: var(--text-body); }
.plat-start__act-num { color: var(--accent); }

@media (max-width: 1080px) {
  .plat-start__content { grid-template-columns: 1fr; gap: var(--space-14); }
}
@media (max-width: 480px) { .plat-start__actions .btn { width: 100%; } }


/* =============================================================================
   DEVELOPERS — "technical laboratory" (readme §20)
   ============================================================================= */

.hero--dev { min-height: max(58svh, 420px); }
.dev-hero {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: var(--gap-split); align-items: center; width: 100%;
}
.dev-hero__bus { min-width: 0; }

@media (max-width: 1080px) {
  .dev-hero { grid-template-columns: 1fr; gap: var(--space-14); }
  .hero--dev { min-height: 0; padding-block: var(--space-20) var(--space-16); }
}

/* ---------- D02 controle programático --------------------------------------- */

.dev-control { margin-top: var(--space-14); }
.dev-control__tabs { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.dev-control__panel {
  margin-top: var(--space-12);
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: var(--gap-split); align-items: center;
}
.dev-control__trace {
  font-size: var(--text-mono-label); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--accent);
}
/* A marcação de superfície não-final é obrigatória (readme §18) e por isso
   ganha o registro âmbar de pendência, não um rodapé discreto. */
.dev-control__notfinal {
  margin-top: var(--space-9); padding: var(--space-7);
  border: 1px dashed rgba(255, 194, 75, .4); border-radius: var(--radius-sm);
  font-size: var(--text-mono-meta); letter-spacing: var(--track-meta);
  text-transform: uppercase; color: var(--maia-amber);
}
.dev-control__ui { margin-top: var(--space-9); }
.dev-control__diagram { min-width: 0; }

@media (max-width: 1080px) {
  .dev-control__panel { grid-template-columns: 1fr; gap: var(--space-12); }
}

/* ---------- D03 laboratório de extensões ------------------------------------ */

.ext-lab {
  margin-top: var(--space-14);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-grid-lg);
}
.ext-lab__item {
  border: 1px solid var(--border-faint); border-radius: var(--radius-md);
  padding: var(--space-9);
  transition: opacity var(--dur-slow) var(--ease-out), border-color var(--dur-base) var(--ease-hud);
}
.ext-lab__item[data-reveal="inactive"] { opacity: .5; }
.ext-lab__item[data-reveal="active"], .ext-lab__item[data-reveal="completed"] { opacity: 1; }
.ext-lab__item:hover { border-color: var(--maia-line-strong); }

.ext-lab__num {
  font-size: var(--text-mono-meta); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--accent);
}
.ext-lab__title { font-size: var(--text-h4); margin-top: var(--space-6); }
.ext-lab__text { color: var(--text-muted); margin-top: var(--space-6); font-size: var(--text-sm); }

.ext-lab__spec { margin: var(--space-9) 0 0; display: grid; gap: var(--space-2); }
.ext-lab__spec > div { padding-block: var(--space-3); border-top: 1px solid var(--border-faint); }
.ext-lab__spec dt {
  font-family: var(--font-mono); font-size: var(--text-mono-micro);
  letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--text-label);
}
.ext-lab__spec dd { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--text-nav); }

.ext-lab__status {
  margin-top: var(--space-9);
  font-size: var(--text-mono-micro); letter-spacing: var(--track-meta);
  text-transform: uppercase; color: var(--maia-amber);
}

@media (max-width: 1080px) { .ext-lab { grid-template-columns: 1fr; } }

/* ---------- D04 o que se constrói em cima ------------------------------------ */

.use-cases {
  margin-top: var(--space-14);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-12) var(--gap-split);
}
.use-cases__big { font-size: var(--text-h3); line-height: var(--lh-heading); }
.use-cases__pt {
  margin-top: var(--space-4);
  font-size: var(--text-mono-meta); letter-spacing: var(--track-meta);
  text-transform: uppercase; color: var(--text-label);
}

.dev-tier {
  margin-top: var(--space-24); padding-top: var(--space-12);
  border-top: 1px solid var(--border-faint);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-9);
}
.dev-tier__line { font-size: var(--text-h4); color: var(--text-body); }

@media (max-width: 760px) { .use-cases { grid-template-columns: 1fr; } }