/* ============================================
   lua.email — /recursos
   Exemplos interativos (bloco P do main.js) e recursos em abas (bloco Q).
   Só carregado no recursos.html. Tokens vêm do style.css.
   ============================================ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* O atributo hidden sempre vence o display dos componentes */
.demos [hidden],
.feat-group[hidden] { display: none !important; }

/* ---- Na prática: lista de exemplos + janela ---- */

.demos {
  display: grid;
  gap: 1.25rem;
}

.demos__tabs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.demos__tabs::-webkit-scrollbar { display: none; }

.demos__tab {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.demos__tab .icon {
  flex-shrink: 0;
  font-size: 1.125rem;
  color: var(--color-text-subtle);
  transition: color var(--transition);
}

.demos__tab span { display: grid; gap: 0.125rem; }
.demos__tab strong { font-size: 0.9375rem; font-weight: 600; color: var(--color-text); }
.demos__tab small { font-size: 0.8125rem; color: var(--color-text-subtle); }

.demos__tab:hover { border-color: rgba(255, 255, 255, 0.3); }

.demos__tab[aria-selected="true"] {
  border-color: var(--color-accent);
  background: rgba(var(--color-accent-rgb), 0.06);
}

.demos__tab[aria-selected="true"] .icon { color: var(--color-accent); }

html:not(.js) .demos__tabs { display: none; }

.demos__window {
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: #1e1e1e;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

.demos__note {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--color-text-subtle);
}

@media (min-width: 960px) {
  .demos {
    grid-template-columns: 17rem minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
  }

  .demos__tabs {
    flex-direction: column;
    overflow: visible;
  }
}

/* ---- Peças comuns dos exemplos ---- */

.demo {
  display: grid;
  gap: 1rem;
  align-content: start;
  min-height: 25rem;
  padding: 1.5rem;
  font-size: 0.9375rem;
}

html.js .demo:not([hidden]) { animation: demo-in 0.35s ease; }

@keyframes demo-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.demo__meta { color: var(--color-text-muted); font-size: 0.875rem; }
.demo__meta b { color: var(--color-text); font-weight: 600; }

.demo__label { font-size: 0.875rem; color: var(--color-text-muted); }

.demo__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.demo__chip {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.demo__chip:hover { border-color: rgba(255, 255, 255, 0.35); color: var(--color-text); }

.demo__chip[aria-pressed="true"] {
  border-color: var(--color-accent);
  background: var(--color-accent-dim);
  color: var(--color-accent);
}

.demo__chip--code { font-family: var(--font-mono); font-size: 0.8125rem; }

.demo__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.demo__btn {
  padding: 0.55rem 1rem;
  border: 0;
  border-radius: 8px;
  background: var(--color-accent);
  color: var(--color-accent-text);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), opacity var(--transition);
}

.demo__btn:hover { background: var(--color-accent-hover); }
.demo__btn:disabled { opacity: 0.35; cursor: not-allowed; }

.demo__btn--ghost {
  border: 1px solid var(--color-border);
  background: none;
  color: var(--color-text);
}

.demo__btn--ghost:hover { background: rgba(255, 255, 255, 0.05); }

.demo__link {
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-subtle);
  font: inherit;
  font-size: 0.875rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.demo__link:hover { color: var(--color-text); }

.demo__done:empty { display: none; }

.demo__done {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  background: rgba(var(--color-accent-rgb), 0.07);
  border: 1px solid rgba(var(--color-accent-rgb), 0.3);
  color: var(--color-text);
  animation: demo-in 0.35s ease;
}

.demo__done.is-bad {
  background: rgba(var(--color-danger-rgb), 0.08);
  border-color: rgba(var(--color-danger-rgb), 0.35);
}

.demo__foot {
  margin-top: auto;
  font-size: 0.8125rem;
  color: var(--color-text-subtle);
}

/* E-mail voltou */
.demo-bounce {
  padding: 1rem 1.125rem;
  border: 1px solid rgba(var(--color-warm-rgb), 0.35);
  border-radius: 12px;
  background: rgba(var(--color-warm-rgb), 0.07);
}

.demo-bounce__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
  font-weight: 600;
  color: var(--color-warm);
}

.demo-bounce__text { line-height: 1.55; }
.demo-bounce__text b { font-weight: 600; }

.demo-bounce__raw {
  padding: 0.75rem 0.875rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-subtle);
  word-break: break-word;
}

/* Pesquisa */
.demo__search {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.demo__search:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-dim);
}

.demo__search .icon { width: 1rem; height: 1rem; color: var(--color-text-subtle); }

.demo__search input {
  flex: 1;
  min-width: 0;
  padding: 0.7rem 0;
  border: 0;
  background: none;
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  outline: none;
}

.demo-list { display: grid; }

.demo-list li {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr) 1rem 5.5rem;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: opacity 0.25s ease;
}

.demo-list li[hidden] { display: none; }

.demo-list b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-list span { color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-list time { font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-text-subtle); text-align: right; }

.demo-list__clip::before {
  content: '';
  display: block;
  width: 0.875rem;
  height: 0.875rem;
  background: var(--color-text-subtle);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 599px) {
  .demo-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .demo-list li span { grid-column: 1; grid-row: 2; }
  .demo-list li i { display: none; }
}

/* Escrever (anexo e agendar) */
.demo-compose {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg);
  overflow: hidden;
}

.demo-compose p {
  padding: 0.6rem 0.875rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.demo-compose p span {
  display: inline-block;
  width: 4.5rem;
  color: var(--color-text-subtle);
  font-size: 0.875rem;
}

.demo-compose__body { min-height: 4.5rem; line-height: 1.6; }

.demo-compose mark {
  padding: 0 0.15em;
  border-radius: 3px;
  background: rgba(var(--color-warm-rgb), 0.22);
  color: inherit;
}

.demo-compose__files { border-bottom: 0 !important; }
.demo-compose__files:empty { display: none; }

.demo-file {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.8125rem;
  animation: demo-in 0.3s ease;
}

.demo-alert {
  display: grid;
  gap: 0.75rem;
  padding: 1rem 1.125rem;
  border: 1px solid rgba(var(--color-warm-rgb), 0.4);
  border-radius: 12px;
  background: rgba(var(--color-warm-rgb), 0.08);
  animation: demo-in 0.3s ease;
}

.demo-alert b { color: var(--color-warm); }

/* Endereço interno */
.demo-route {
  display: flex;
  align-items: center;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: var(--color-bg);
}

.demo-route__node {
  flex-shrink: 0;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}

.demo-route__node--hub {
  border-color: rgba(var(--color-accent-rgb), 0.5);
  color: var(--color-accent);
}

.demo-route__line {
  position: relative;
  flex: 1;
  height: 1px;
  margin: 0 0.5rem;
  background: var(--color-border);
}

.demo-route__line i {
  position: absolute;
  top: -2px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: 0;
}

.demo-route.is-running .demo-route__line:first-of-type i { animation: route-dot 0.6s linear forwards; }
.demo-route.is-ok .demo-route__line:last-of-type i { animation: route-dot 0.6s linear 0.6s forwards; }

@keyframes route-dot {
  0%   { left: 0; opacity: 1; }
  100% { left: calc(100% - 5px); opacity: 1; }
}

.demo-route.is-ok [data-interno-to] {
  border-color: rgba(var(--color-accent-rgb), 0.5);
  color: var(--color-text);
  transition-delay: 1.1s;
}

.demo-route.is-bad [data-interno-to] {
  border-color: rgba(var(--color-danger-rgb), 0.5);
  color: var(--color-danger);
  transition-delay: 0.6s;
}

/* Recuperar apagados */
.demo-list--check li { grid-template-columns: 1fr; padding: 0; }

.demo-list--check label {
  display: grid;
  grid-template-columns: 1.25rem 9rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.25rem;
  cursor: pointer;
}

.demo-list--check input { accent-color: var(--color-accent); width: 1rem; height: 1rem; }

.demo-list--check em {
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.75rem;
  font-style: normal;
  color: var(--color-text-muted);
}

.demo-list--check li.is-restored {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

@media (max-width: 599px) {
  .demo-list--check label { grid-template-columns: 1.25rem minmax(0, 1fr); }
  .demo-list--check label span,
  .demo-list--check label em { grid-column: 2; }
  .demo { padding: 1.125rem; min-height: 0; }
}

/* ---- Todos os recursos: abas por categoria ---- */

.feat-tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  scrollbar-width: none;
}

.feat-tabs::-webkit-scrollbar { display: none; }

html:not(.js) .feat-tabs { display: none; }

.feat-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  margin-bottom: -1px;
  padding: 0.75rem 1rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}

.feat-tabs__tab span {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-subtle);
}

.feat-tabs__tab:hover { color: var(--color-text); }

.feat-tabs__tab[aria-selected="true"] {
  color: var(--color-text);
  border-bottom-color: var(--color-accent);
}

.feat-group + .feat-group { margin-top: 3.5rem; }
html.js .feat-group + .feat-group { margin-top: 0; }
html.js .feat-group:not([hidden]) { animation: demo-in 0.35s ease; }

.feat-group__head { max-width: 44rem; margin-bottom: 1.75rem; }

.feat-group__title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.feat-group__desc { margin-top: 0.375rem; color: var(--color-text-muted); }

.feat-grid {
  display: grid;
  gap: 0 2.5rem;
}

@media (min-width: 768px) {
  .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .feat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.feat {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  column-gap: 0.75rem;
  align-content: start;
  padding: 1.25rem 0;
  border-top: 1px solid var(--color-border);
}

.feat__icon {
  grid-row: span 3;
  padding-top: 0.15rem;
  color: var(--color-accent);
}

.feat__title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

.feat__text {
  margin-top: 0.375rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* Duas linhas e "Ler mais" (o botão só aparece quando o texto não cabe) */
html.js .feat__text:not(.is-open) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.feat__more {
  justify-self: start;
  margin-top: 0.375rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.feat__more:hover { color: var(--color-accent); }

@media (prefers-reduced-motion: reduce) {
  html.js .demo:not([hidden]),
  html.js .feat-group:not([hidden]),
  .demo__done,
  .demo-alert,
  .demo-file { animation: none; }

  .demo-route__line i { animation: none !important; }
}

.feat-group__tag {
  margin-bottom: 0.375rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--color-accent);
}