/* Arautos de Tsukimori (src/creators.js): o painel de convites e divulgação, o bloco "Apoiar um Arauto" na loja de
   cristais e a moldura de retrato do programa. Identidade Sumi: papel, tinta, um acento de laca para a ação da vez e
   ouro só para recompensa. */
.heralds{display:grid;gap:12px;max-width:820px}
.heralds p,.her-card p{margin:0}
.her-card{display:grid;gap:8px;min-width:0;padding:12px 14px;border:1px solid var(--line2,#2a2733);border-left:3px solid var(--line2,#2a2733);border-radius:4px;background:rgba(255,255,255,.03)}
.her-card.hot{border-left-color:var(--shu,#c9472d)}
.her-card.done{border-left-color:var(--gold,#d8b062)}
.her-card .eyebrow{color:var(--gold,#d8b062)}
.her-card p{color:var(--washi,#ece2d0);font-size:13.5px;line-height:1.45;overflow-wrap:anywhere}
.her-card p.dim,.her-card small.dim{color:var(--dim,#a39d92);font-size:12px;line-height:1.4}
.her-card .box-actions{margin:0;display:flex;flex-wrap:wrap;gap:6px}
.her-tier{margin:0;font:700 19px var(--display);color:var(--washi,#ece2d0);overflow-wrap:anywhere}
.her-line{font-size:13.5px}
.her-line b{color:var(--washi,#ece2d0)}
.her-warn{padding:8px 10px;border-left:3px solid var(--shu,#c9472d);background:rgba(201,71,45,.08);font-size:12.5px}
.her-gem{color:var(--gold,#d8b062);font-weight:700;white-space:nowrap}
/* o código: grande, para ler em voz alta e copiar */
.her-code{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;min-width:0}
.her-code strong{font:900 clamp(24px,7vw,34px) var(--ui);letter-spacing:.12em;color:var(--gold,#d8b062);overflow-wrap:anywhere;user-select:all}
.her-link{padding:8px 10px;border-radius:3px;background:rgba(0,0,0,.26);color:var(--washi,#ece2d0);font:500 12.5px var(--ui);overflow-wrap:anywhere;user-select:all}
/* formulário de uma linha: campo e botão; no celular o botão desce */
.her-form{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.her-form input,.her-form select{flex:1 1 200px;width:100%;min-width:0;min-height:40px;padding:8px 12px;border-radius:3px;border:1px solid var(--line2,#2a2733);background:#16141e;color:var(--washi,#ece2d0);font:400 14px var(--ui)}
.her-form input:focus-visible,.her-form select:focus-visible{outline:2px solid var(--gold,#d8b062);outline-offset:1px}
.her-form .action{min-height:40px}
.her-form.col{display:grid;gap:10px;max-width:560px}
.her-form.col label{display:grid;gap:5px;min-width:0}
.her-form.col .cap-line small{color:var(--dim,#a39d92);font-weight:400;text-transform:none;letter-spacing:0}
/* barra do próximo degrau */
.her-bar{height:8px;border-radius:2px;background:rgba(0,0,0,.35);overflow:hidden}
.her-bar span{display:block;height:100%;background:var(--gold,#d8b062)}
/* degraus e marcos: número, nome com o prêmio, estado */
.her-ladder,.her-list,.her-board,.her-rules,.her-steps{margin:0;padding:0;list-style:none;display:grid;gap:6px;min-width:0}
.her-ladder li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;padding:7px 10px;border-radius:3px;background:rgba(0,0,0,.2);opacity:.72}
.her-ladder li.next,.her-ladder li.done{opacity:1}
.her-ladder li.next{box-shadow:inset 2px 0 0 var(--shu,#c9472d)}
.her-ladder li>b{font:900 18px var(--ui);color:var(--dim,#a39d92);text-align:center}
.her-ladder li.done>b,.her-ladder li.next>b{color:var(--gold,#d8b062)}
.her-ladder span,.her-list.roles span{display:grid;gap:1px;min-width:0}
.her-ladder strong,.her-list.roles strong{font:700 13.5px var(--ui);color:var(--washi,#ece2d0);overflow-wrap:anywhere}
.her-ladder small,.her-list.roles small{color:var(--dim,#a39d92);font-size:11.5px;line-height:1.35;overflow-wrap:anywhere}
.her-ladder em,.her-list em{font-style:normal;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold,#d8b062);white-space:nowrap}
/* listas: convidados, divulgações, pedidos, mentores */
.her-list li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;min-width:0;padding:7px 10px;border-radius:3px;background:rgba(0,0,0,.2);font-size:12.5px;color:var(--dim,#a39d92)}
.her-list li.done{box-shadow:inset 2px 0 0 var(--gold,#d8b062)}
.her-list li.done>span:last-of-type{color:var(--washi,#ece2d0)}
.her-list .post-who{font-size:13.5px}
.her-net{color:var(--washi,#ece2d0)}
.her-rules li,.her-steps li{position:relative;padding-left:14px;color:var(--washi,#ece2d0);font-size:12.5px;line-height:1.45;overflow-wrap:anywhere}
.her-rules li::before{content:"";position:absolute;left:2px;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--gold,#d8b062)}
.her-steps{counter-reset:her}
.her-steps li{counter-increment:her;padding-left:26px}
.her-steps li::before{content:counter(her);position:absolute;left:0;top:0;width:18px;height:18px;border-radius:2px;background:var(--shu,#c9472d);color:#fff;font:800 11px/18px var(--ui);text-align:center}
/* placar */
.her-board li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:2px 10px;padding:7px 10px;border-radius:3px;background:rgba(0,0,0,.2);font-size:12.5px;color:var(--washi,#ece2d0)}
.her-board li>b{font:900 16px var(--ui);color:var(--gold,#d8b062);text-align:center}
.her-board li>span{font-weight:700;white-space:nowrap}
.her-board li>small{grid-column:2 / -1;color:var(--dim,#a39d92);font-size:11.5px}
.her-board li.me{box-shadow:inset 2px 0 0 var(--shu,#c9472d);background:rgba(201,71,45,.08)}
.her-support{margin-top:2px}
/* Moldura do Arauto (retrato no perfil e no chat): o laranja das lanternas, com filete escuro e um fio de ouro. */
.av.fr-f_herald{box-shadow:0 0 0 2px #e8752c,0 0 0 3px #5a2410,0 0 0 4px #d8b062}
@media (max-width:520px){
  .her-card{padding:10px 11px}
  .her-form .action{flex:1 1 100%}
  .her-ladder li{grid-template-columns:36px minmax(0,1fr)}
  .her-ladder em{grid-column:2}
  .her-code .box-actions .action{flex:1 1 auto}
}