/* /downloads/mac/ -- o que e proprio da pagina do Mac.
 *
 * A pagina reusa o c-downloads.css inteiro (cartao, ficha, SHA copiavel,
 * passos, FAQ). Aqui fica so o que nao existe la: o bloco da primeira
 * abertura, a lista de requisitos e o estado "em breve".
 *
 * Nenhum seletor desta folha vale fora de .c-mac, entao mexer aqui nao tem
 * como afetar a /downloads/. O cartao do Mac QUE APARECE NA /downloads/ e
 * estilizado la, no c-downloads.css (.c-downloads__cartao--mac).
 */

/* ============================================================ o cartao ==
   Um cartao so, na largura da pagina: o botao nao estica de ponta a ponta. */

.c-mac__cartao .c-downloads__botao {
	width: auto;
	align-self: flex-start;
}

/* iPhone e iPad: o arquivo nao abre la, entao o botao some. O aviso do topo
   (c-downloads__ios) explica. O iPad em "modo computador" chega aqui pelo
   js/c-downloads.js, que troca o data-plataforma pelo toque. */
.c-mac[data-plataforma="ios"] .c-mac__botao { display: none; }

.c-mac__depois {
	margin-top: var(--e-3);
	max-width: 62ch;
	color: var(--ink);
}

/* ================================================= a primeira abertura ==
   Borda dourada e fundo proprio: e o bloco que o jogador precisa achar quando
   o Mac nao abre o jogo direto. So existe com "notarizado": false na ficha. */

.c-mac__aviso {
	border: 1px solid var(--ouro-escuro);
	border-radius: var(--raio);
	background: var(--surface);
	padding: var(--e-3);
	scroll-margin-top: calc(var(--altura-header) + var(--e-2));
}

.c-mac__aviso .c-downloads__secaoTitulo {
	display: flex;
	align-items: center;
	gap: var(--e-1);
}

.c-mac__aviso > p { max-width: 68ch; }

.c-mac__avisoIcone {
	flex: none;
	width: 24px;
	height: 24px;
	color: var(--ouro);
}

.c-mac__avisoQual {
	margin-top: var(--e-1);
	color: var(--ink-3);
	font-size: 0.925rem;
}

/* Os dois caminhos lado a lado: o jogador acha a versao dele e le so aquele. */
.c-mac__caminhos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--e-3);
	margin-top: var(--e-3);
}

.c-mac__caminho {
	padding: var(--e-2);
	border: 1px solid var(--linha);
	border-radius: var(--raio-sm);
	background: var(--bg-alt);
}

.c-mac__caminho .c-downloads__dxTitulo {
	margin-bottom: var(--e-2);
	color: var(--ouro);
}

.c-mac__avisoPassos { gap: var(--e-2); }

.c-mac__avisoPassos .c-downloads__passo { padding-left: 2.6rem; }

.c-mac__avisoPassos .c-downloads__passo::before {
	width: 1.8rem;
	height: 1.8rem;
	font-size: 0.85rem;
}

.c-mac__avisoPassos .c-downloads__passoTitulo { font-size: 0.975rem; }
.c-mac__avisoPassos .c-downloads__passoTexto { font-size: 0.925rem; }

.c-mac__terminal {
	margin-top: var(--e-2);
	border-bottom: 0;
	border-top: 1px solid var(--linha);
}

.c-mac__terminal summary { color: var(--ink-2); font-weight: 400; font-size: 0.925rem; }
.c-mac__terminal .c-downloads__cmd { margin: 0 0 var(--e-1) 1.4rem; }

/* ============================================================ requisitos ==
   Lista de duas colunas, no desenho da ficha do cartao, em tamanho de texto. */

.c-mac__req {
	display: grid;
	margin: 0;
	border-top: 1px solid var(--linha);
}

.c-mac__req > div {
	display: grid;
	grid-template-columns: 15rem 1fr;
	gap: var(--e-2);
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--linha);
}

.c-mac__req dt { color: var(--ink); font-weight: 600; }
.c-mac__req dd { margin: 0; }

/* O selo nasce escondido; acende so na linha do chip que o js/c-macos.js
   conseguiu descobrir. Sem JS ou sem conclusao, nenhum aparece. */
.c-mac__seu {
	display: none;
	margin-left: 0.4rem;
	padding: 0.1rem 0.5rem;
	border: 1px solid var(--ouro-escuro);
	border-radius: 999px;
	color: var(--ouro);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.c-mac[data-chip="arm64"]  .c-mac__req [data-chip="arm64"]  .c-mac__seu,
.c-mac[data-chip="x86_64"] .c-mac__req [data-chip="x86_64"] .c-mac__seu { display: inline-block; }

.c-mac__reqQual {
	margin-top: var(--e-2);
	color: var(--ink-3);
	font-size: 0.925rem;
}

.c-mac__hashTexto { margin-top: var(--e-2); max-width: 62ch; }

/* ============================================================== em breve ==
   A pagina existe antes do primeiro arquivo e diz isso. */
.c-mac__vazio {
	display: grid;
	justify-items: start;
	gap: var(--e-2);
	padding: var(--e-3);
	border: 1px solid var(--linha-forte);
	border-radius: var(--raio);
	background: var(--surface);
}

.c-mac__vazio .c-downloads__secaoTitulo { margin-bottom: 0; }
.c-mac__vazio .c-downloads__botao { width: auto; }

@media (max-width: 768px) {
	.c-mac__aviso { padding: var(--e-2); }
	.c-mac__caminhos { grid-template-columns: minmax(0, 1fr); }
	.c-mac__req > div { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
	.c-mac__cartao .c-downloads__botao { width: 100%; align-self: stretch; }
	.c-mac__vazio { justify-items: stretch; }
	.c-mac__vazio .c-downloads__botao { width: 100%; }
}