/* ARTIGO
   Paginas de artigo da wiki (pages/wiki/*.html): cabecalho com trilha,
   sumario lateral, corpo de texto, tabelas de dados, passos e avisos.
   Carregado por ultimo, depois de 15-wiki.css. */

.artigo-hero {
  position:relative;
  padding:58px 0 42px;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(ellipse at 80% 10%,#5c132430,transparent 60%),
    linear-gradient(180deg,#101014,#0b0b0e)
}
.trilha {
  display:flex;
  align-items:center;
  gap:9px;
  font:9px var(--sans);
  font-weight:600;
  letter-spacing:.24em;
  color:#7d7478
}
.trilha a:hover {
  color:var(--gold-light)
}
.trilha span {
  color:#4e474a
}
.artigo-hero h1 {
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(32px,4.4vw,52px);
  line-height:1.1;
  margin:16px 0 0
}
.artigo-hero h1 em {
  font-style:normal;
  color:var(--red)
}
.artigo-resumo {
  max-width:620px;
  margin:16px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.75
}

.artigo-layout {
  display:grid;
  grid-template-columns:1fr 216px;
  gap:60px;
  align-items:start;
  padding:52px 0 96px
}
.artigo-corpo {
  min-width:0;
  max-width:760px
}

/* sumario */
.sumario {
  position:sticky;
  top:112px;
  order:2
}
.sumario p {
  margin:0 0 14px;
  font:9px var(--sans);
  font-weight:600;
  letter-spacing:.3em;
  color:var(--gold)
}
.sumario a {
  display:block;
  padding:8px 0 8px 14px;
  border-left:1px solid var(--line);
  color:var(--muted);
  font-size:12.5px;
  line-height:1.45;
  transition:color .2s ease,border-color .2s ease
}
.sumario a:hover,
.sumario a.ativo {
  color:var(--text);
  border-left-color:var(--red)
}

/* texto */
.artigo-corpo h2 {
  font-family:var(--serif);
  font-weight:600;
  font-size:25px;
  margin:54px 0 16px;
  scroll-margin-top:112px
}
.artigo-corpo h2:first-child {
  margin-top:0
}
.artigo-corpo h3 {
  font-family:var(--serif);
  font-weight:600;
  font-size:17px;
  margin:34px 0 12px;
  color:var(--gold-light)
}
.artigo-corpo p {
  margin:0 0 16px;
  font-size:14px;
  line-height:1.8;
  color:#cfc8c4
}
.artigo-corpo strong {
  color:var(--text);
  font-weight:600
}
.artigo-corpo ul {
  margin:0 0 18px;
  padding-left:20px
}
.artigo-corpo li {
  margin-bottom:9px;
  font-size:14px;
  line-height:1.75;
  color:#cfc8c4
}
.artigo-corpo li::marker {
  color:var(--gold)
}
.artigo-corpo code {
  padding:2px 6px;
  border:1px solid var(--line);
  background:#17161a;
  font:12px ui-monospace,Consolas,monospace;
  color:var(--gold-light)
}

/* icone de item inline e em tabela */
.icone-item {
  width:44px;
  height:44px;
  image-rendering:pixelated;
  vertical-align:middle;
  flex:none
}
.icone-item.pequeno {
  width:30px;
  height:30px
}

/* tabelas de dados */
.tabela-dados {
  width:100%;
  border-collapse:collapse;
  margin:0 0 20px;
  font-size:13px
}
.tabela-dados caption {
  text-align:left;
  padding-bottom:12px;
  font:9px var(--sans);
  font-weight:600;
  letter-spacing:.24em;
  color:#7d7478
}
.tabela-dados th {
  text-align:left;
  padding:11px 12px;
  border-bottom:1px solid #c5a77340;
  font:9px var(--sans);
  font-weight:600;
  letter-spacing:.18em;
  color:var(--gold);
  white-space:nowrap
}
.tabela-dados td {
  padding:11px 12px;
  border-bottom:1px solid var(--line);
  color:#cfc8c4;
  vertical-align:middle
}
.tabela-dados tbody tr:hover td {
  background:#ffffff05
}
.tabela-dados .celula-item {
  display:flex;
  align-items:center;
  gap:11px
}
.tabela-dados b {
  color:var(--text);
  font-weight:600
}
.tabela-dados .valor {
  font-family:var(--condensed);
  font-size:16px;
  font-weight:700;
  letter-spacing:.04em;
  white-space:nowrap
}
.tabela-dados code {
  font:11px ui-monospace,Consolas,monospace;
  color:#8a8286
}

/* cor por runa */
.cor-vermelha { color:#e2545f }
.cor-amarela  { color:#e0bb4c }
.cor-verde    { color:#5fc46a }
.cor-azul     { color:#5aa8e8 }
.cor-roxa     { color:#a877e0 }

/* passos do tutorial */
.passos {
  list-style:none;
  margin:0 0 22px;
  padding:0;
  counter-reset:passo
}
.passos > li {
  position:relative;
  counter-increment:passo;
  padding:0 0 26px 54px;
  margin:0
}
.passos > li::before {
  content:counter(passo,decimal-leading-zero);
  position:absolute;
  left:0;
  top:-2px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid #c5a77359;
  background:#16141a;
  font:12px var(--condensed);
  font-weight:700;
  letter-spacing:.06em;
  color:var(--gold-light)
}
.passos > li::after {
  content:"";
  position:absolute;
  left:17px;
  top:36px;
  bottom:4px;
  width:1px;
  background:linear-gradient(180deg,var(--line),transparent)
}
.passos > li:last-child {
  padding-bottom:0
}
.passos > li:last-child::after {
  display:none
}
.passos b {
  display:block;
  font-family:var(--serif);
  font-weight:600;
  font-size:16px;
  color:var(--text);
  margin-bottom:7px;
  padding-top:5px
}
.passos p {
  margin:0 0 10px
}
.passos .fala-jogo {
  display:inline-block;
  margin-top:2px;
  padding:7px 13px;
  border-left:2px solid var(--gold);
  background:#ffffff06;
  font-size:12.5px;
  color:#b9b1ac;
  font-style:italic
}

/* avisos */
.aviso {
  display:flex;
  gap:14px;
  margin:0 0 22px;
  padding:16px 18px;
  border:1px solid var(--line);
  border-left-width:2px;
  background:#ffffff04;
  font-size:13px;
  line-height:1.7;
  color:#cfc8c4
}
.aviso svg {
  width:18px;
  height:18px;
  margin-top:2px;
  color:var(--gold)
}
.aviso p {
  margin:0;
  font-size:13px
}
.aviso p + p {
  margin-top:8px
}
.aviso.atencao {
  border-left-color:var(--red)
}
.aviso.atencao svg {
  color:var(--red)
}
.aviso.pendente {
  border-left-color:#8a5f52;
  border-style:dashed;
  border-left-style:solid
}
.aviso b {
  color:var(--text)
}

/* grade de ferramentas */
.grade-itens {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(238px,1fr));
  gap:12px;
  list-style:none;
  margin:0 0 22px;
  padding:0
}
.grade-itens li {
  display:flex;
  align-items:flex-start;
  gap:13px;
  padding:14px 15px;
  margin:0;
  border:1px solid var(--line);
  background:linear-gradient(160deg,#141318,#0f0e12)
}
.grade-itens b {
  display:block;
  font-family:var(--serif);
  font-weight:600;
  font-size:13.5px;
  color:var(--text);
  margin-bottom:4px
}
.grade-itens small {
  display:block;
  font-size:11.5px;
  line-height:1.6;
  color:var(--muted)
}

/* faixa das 5 cores */
.faixa-cores {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(138px,1fr));
  gap:12px;
  list-style:none;
  margin:0 0 24px;
  padding:0
}
.faixa-cores li {
  margin:0;
  padding:18px 14px 16px;
  text-align:center;
  border:1px solid var(--line);
  background:linear-gradient(170deg,#151318,#0f0e12)
}
.faixa-cores img {
  width:50px;
  height:50px;
  image-rendering:pixelated
}
.faixa-cores b {
  display:block;
  margin-top:10px;
  font-family:var(--serif);
  font-weight:600;
  font-size:15px
}
.faixa-cores small {
  display:block;
  margin-top:3px;
  font:8px var(--sans);
  font-weight:600;
  letter-spacing:.22em;
  color:#7d7478
}

/* navegacao no fim */
.artigo-fim {
  margin-top:58px;
  padding-top:28px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap
}
.artigo-fim p {
  margin:0;
  font-size:12.5px;
  color:#7d7478
}

@media(max-width:900px) {
  .artigo-layout {
    grid-template-columns:1fr;
    gap:30px;
    padding:38px 0 70px
  }
  .sumario {
    position:static;
    order:0;
    padding-bottom:22px;
    border-bottom:1px solid var(--line)
  }
  .sumario nav {
    display:flex;
    flex-wrap:wrap;
    gap:7px
  }
  .sumario a {
    padding:7px 12px;
    border:1px solid var(--line);
    font-size:12px
  }
  .sumario a:hover,
  .sumario a.ativo {
    border-color:var(--red)
  }
}
@media(max-width:600px) {
  .artigo-hero {
    padding:42px 0 32px
  }
  .artigo-corpo h2 {
    font-size:21px;
    margin-top:42px
  }
  .passos > li {
    padding-left:44px
  }
  .passos > li::before {
    width:29px;
    height:29px
  }
  .passos > li::after {
    left:14px
  }
  /* tabela vira lista de blocos no celular */
  .tabela-dados,
  .tabela-dados tbody,
  .tabela-dados tr,
  .tabela-dados td {
    display:block;
    width:100%
  }
  .tabela-dados thead {
    display:none
  }
  .tabela-dados tr {
    margin-bottom:12px;
    border:1px solid var(--line);
    padding:6px 4px
  }
  .tabela-dados td {
    border-bottom:0;
    padding:7px 12px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px
  }
  .tabela-dados td::before {
    content:attr(data-rotulo);
    font:8px var(--sans);
    font-weight:600;
    letter-spacing:.2em;
    color:#7d7478
  }
  .tabela-dados td:first-child::before {
    display:none
  }
}

/* ---------- grade dos sheltoms ---------- */
.grade-sheltoms {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
  gap:10px;
  list-style:none;
  margin:0 0 22px;
  padding:0
}
.grade-sheltoms li {
  margin:0;
  padding:14px 8px 11px;
  text-align:center;
  border:1px solid var(--line);
  background:linear-gradient(170deg,#151318,#0f0e12)
}
.grade-sheltoms img {
  width:42px;
  height:42px;
  image-rendering:pixelated
}
.grade-sheltoms b {
  display:block;
  margin-top:8px;
  font-family:var(--serif);
  font-weight:600;
  font-size:13px;
  color:var(--text)
}
.grade-sheltoms small {
  display:block;
  margin-top:3px;
  font-size:10px;
  color:#7d7478
}
.grade-sheltoms code {
  font:10px ui-monospace,Consolas,monospace;
  color:#8a8286;
  border:0;
  background:none;
  padding:0
}

/* ---------- tabela de aging ---------- */
.tabela-aging td {
  vertical-align:top;
  padding-top:14px;
  padding-bottom:14px
}
.nivel-aging {
  font-family:var(--condensed);
  font-size:21px;
  font-weight:700;
  letter-spacing:.03em;
  color:var(--gold-light);
  white-space:nowrap
}
.tabela-aging .valor.faixa-alta    { color:#5fc46a }
.tabela-aging .valor.faixa-media   { color:#e0bb4c }
.tabela-aging .valor.faixa-baixa   { color:#e2854c }
.tabela-aging .valor.faixa-critica { color:#e2545f }
.valor-falha {
  font-family:var(--condensed);
  font-size:15px;
  font-weight:600;
  color:#8a8286
}

/* lista de sheltoms exigidos dentro da celula */
.pedidos {
  display:flex;
  flex-wrap:wrap;
  gap:6px
}
.pedido {
  display:flex;
  align-items:center;
  gap:5px;
  padding:4px 8px 4px 5px;
  border:1px solid var(--line);
  background:#ffffff05;
  white-space:nowrap
}
.pedido img {
  width:22px;
  height:22px;
  image-rendering:pixelated;
  flex:none
}
.pedido i {
  font-family:var(--condensed);
  font-style:normal;
  font-weight:700;
  font-size:13px;
  color:var(--gold-light)
}
.pedido em {
  font-style:normal;
  font-size:11.5px;
  color:#b9b1ac
}
.total-pedido {
  display:block;
  margin-top:7px;
  font:9px var(--sans);
  font-weight:600;
  letter-spacing:.18em;
  color:#6f676b
}

@media(max-width:600px) {
  .tabela-aging td {
    display:flex;
    justify-content:space-between;
    align-items:flex-start
  }
  /* a celula de sheltoms precisa de largura inteira no celular */
  .tabela-aging td:last-child {
    flex-direction:column;
    align-items:stretch;
    gap:8px
  }
  .tabela-aging td:first-child {
    border-bottom:1px solid var(--line);
    padding-bottom:10px;
    margin-bottom:4px
  }
}