/* Texto das regras — usado no site e dentro do editor (o que se vê ao editar é o que sai no site). */

.page-title {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  font-size: 36px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text);
  text-wrap: pretty;
}
.page-icon {
  font-family: var(--emoji);
  font-weight: 400;
  letter-spacing: 0;
  flex: none;
}

.content {
  font-size: 16px;
  line-height: 26px;
  color: var(--text);
  overflow-wrap: anywhere;
}
.content > * {
  margin: 0;
}
.content > * + * {
  margin-top: 20px;
}

/* margens dos blocos ficam só no ".content > * + *" (especificidade baixa aqui) */
:where(.content) :is(p, h2, h3, h4, ul, ol, table, hr) {
  margin: 0;
}

/* títulos */
.content h2,
.content h3,
.content h4 {
  font-weight: 600;
  color: var(--text);
  position: relative;
  scroll-margin-top: calc(var(--hdr-h, 64px) + 24px);
}
.content h2 {
  font-size: 30px;
  line-height: 36px;
  letter-spacing: -0.0125em;
  padding-top: 1em;
}
.content h3 {
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.0125em;
  padding-top: 0.75em;
}
.content h4 {
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.0125em;
  padding-top: 0.5em;
}
.h-hash {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 8px;
  padding: 4px;
  border-radius: 8px;
  color: var(--text-subtle);
  opacity: 0;
  transition: opacity 0.15s;
  text-decoration: none;
}
.content h2:hover .h-hash,
.content h3:hover .h-hash,
.content h4:hover .h-hash,
.h-hash:focus-visible {
  opacity: 1;
}
.h-hash:hover {
  color: var(--accent-text);
  background: var(--hover);
}

.content strong {
  font-weight: 700;
}

/* links */
.content a {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-color: rgb(var(--primary-9) / 0.4);
  text-decoration-thickness: max(0.07em, 1px);
  text-underline-offset: 2px;
  transition: text-decoration-color 0.1s;
}
.content a:hover {
  text-decoration-color: currentColor;
}

/* listas */
.content ul,
.content ol {
  padding: 0;
}
.content li {
  line-height: 24px;
}
.content li + li {
  margin-top: 8px;
}
.content ul > li {
  list-style: none;
  position: relative;
  padding-left: 28px;
}
.content ul > li::before {
  content: '•';
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-subtle);
  font-family: Arial, sans-serif;
  font-size: 24px;
  line-height: 1;
}
.content ul ul > li::before {
  content: '◦';
  font-size: 18px;
}
.content ul ul ul > li::before {
  content: '▪';
  font-size: 14px;
}
.content ol {
  padding-left: 28px;
}
.content ol > li {
  padding-left: 2px;
}
.content ol > li::marker {
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}
.content ol ol {
  list-style-type: lower-alpha;
}
.content li > ul,
.content li > ol,
.content li > p,
.content li > .hint,
.content li > .table-wrap,
.content li > table {
  margin-top: 8px;
}

/* avisos (hints) */
.content .hint {
  position: relative;
  border-radius: 12px;
  padding: 16px 16px 16px 44px;
  font-size: 14px;
  line-height: 20px;
  background: rgb(var(--info-3));
  --hint-icon: rgb(var(--info-9));
}
.content .hint::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 17px;
  width: 16.8px;
  height: 16.8px;
  background: var(--hint-icon);
  -webkit-mask: var(--hint-mask) center / contain no-repeat;
  mask: var(--hint-mask) center / contain no-repeat;
}
.content .hint > * {
  margin: 0;
}
.content .hint > * + * {
  margin-top: 12px;
}
.content .hint strong {
  color: rgb(var(--neutral-12));
}
.content .hint li {
  line-height: 20px;
}
.content .hint ul > li::before {
  height: 20px;
}
.content .hint-info {
  background: rgb(var(--info-3));
  --hint-icon: rgb(var(--info-9));
  --hint-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1.5a10.5 10.5 0 1 0 0 21a10.5 10.5 0 1 0 0-21zM12 6a1.4 1.4 0 1 0 0 2.8a1.4 1.4 0 1 0 0-2.8zM10.8 10.5h2.4v7.5h-2.4z'/%3E%3C/svg%3E");
}
.content .hint-success {
  background: rgb(var(--success-3));
  --hint-icon: rgb(var(--success-9));
  --hint-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1.5a10.5 10.5 0 1 0 0 21a10.5 10.5 0 1 0 0-21zM6.9 12.2l1.7-1.7 2.4 2.4 4.6-4.6 1.7 1.7-6.3 6.3z'/%3E%3C/svg%3E");
}
.content .hint-warning {
  background: rgb(var(--warning-3));
  --hint-icon: rgb(var(--warning-9));
  --hint-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1.5a10.5 10.5 0 1 0 0 21a10.5 10.5 0 1 0 0-21zM10.8 6h2.4v8h-2.4zM12 15.6a1.4 1.4 0 1 0 0 2.8a1.4 1.4 0 1 0 0-2.8z'/%3E%3C/svg%3E");
}
.content .hint-danger {
  background: rgb(var(--danger-3));
  --hint-icon: rgb(var(--danger-9));
  --hint-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M10.2 2.6a2.1 2.1 0 0 1 3.6 0l9.4 16.3a2.1 2.1 0 0 1-1.8 3.1H2.6a2.1 2.1 0 0 1-1.8-3.1zM10.8 8h2.4v6.5h-2.4zM12 16a1.4 1.4 0 1 0 0 2.8a1.4 1.4 0 1 0 0-2.8z'/%3E%3C/svg%3E");
}

/* tabelas: grade completa (linhas em volta de todas as células) */
.content .table-wrap {
  overflow-x: auto;
  max-width: 100%;
}
.content table {
  border-collapse: collapse;
  min-width: 100%;
  font-size: 14px;
  line-height: 20px;
}
.content th,
.content td {
  padding: 8px 12px;
  text-align: left;
  vertical-align: middle;
  border: 1px solid var(--table-line, rgb(var(--tint-8)));
  background-clip: padding-box;
}
.content th {
  font-weight: 600;
  color: var(--text);
  background: rgb(var(--tint-3));
}
.content tbody tr:hover td {
  background-color: var(--hover);
}
.content td > *,
.content th > * {
  margin: 0;
}
.content td > * + *,
.content th > * + * {
  margin-top: 8px;
}

/* tipos de coluna */
.content .c-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.content td:has(> .chk:only-child) {
  text-align: center;
}

/* cor de fundo do cabeçalho (um tom para cada tema) */
.content th.bg-gray { background: #e5e7eb; color: #111827; }
.content th.bg-red { background: #fecaca; color: #7f1d1d; }
.content th.bg-orange { background: #fed7aa; color: #7c2d12; }
.content th.bg-yellow { background: #fef08a; color: #713f12; }
.content th.bg-green { background: #bbf7d0; color: #14532d; }
.content th.bg-teal { background: #b2e3e9; color: #0b3d44; }
.content th.bg-blue { background: #bfdbfe; color: #1e3a8a; }
.content th.bg-purple { background: #ddd6fe; color: #4c1d95; }
.content th.bg-pink { background: #fbcfe8; color: #831843; }
.content th.bg-dark { background: #1f2937; color: #f9fafb; }
html.dark .content th.bg-gray { background: #374151; color: #f3f4f6; }
html.dark .content th.bg-red { background: #7f1d1d; color: #fee2e2; }
html.dark .content th.bg-orange { background: #7c2d12; color: #ffedd5; }
html.dark .content th.bg-yellow { background: #713f12; color: #fef9c3; }
html.dark .content th.bg-green { background: #14532d; color: #dcfce7; }
html.dark .content th.bg-teal { background: #0b4f58; color: #d6f1f5; }
html.dark .content th.bg-blue { background: #1e3a8a; color: #dbeafe; }
html.dark .content th.bg-purple { background: #4c1d95; color: #ede9fe; }
html.dark .content th.bg-pink { background: #831843; color: #fce7f3; }
html.dark .content th.bg-dark { background: #030712; color: #f9fafb; }

/* caixinha de marcação (como as colunas ADV/BAN) */
.content .chk {
  display: inline-flex;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  vertical-align: middle;
  box-shadow: inset 0 0 0 1px rgb(var(--tint-12) / 0.16);
  position: relative;
}
.content .chk.on {
  background: rgb(var(--primary-9));
  box-shadow: none;
}
.content .chk.on::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: #fff;
  -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='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%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='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* divisória */
.content hr {
  border: 0;
  height: 1px;
  background: var(--border);
  margin-left: 0;
  margin-right: 0;
}
.content > hr,
.content > hr + * {
  margin-top: 32px;
}
.content hr.hr-2 {
  height: 2px;
  border-radius: 2px;
}
.content hr.hr-4 {
  height: 4px;
  border-radius: 4px;
}
.content hr[class*='tc-'] {
  background: currentColor;
}

/* espaço em branco */
.content .spacer {
  height: 32px;
}
.content .spacer-sm {
  height: 16px;
}
.content .spacer-md {
  height: 32px;
}
.content .spacer-lg {
  height: 64px;
}
.content .spacer-xl {
  height: 112px;
}
.content > .spacer + * {
  margin-top: 0;
}

/* imagens */
.content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  vertical-align: middle;
}
.content img.img-sm {
  width: 33%;
}
.content img.img-md {
  width: 50%;
}
.content img.img-lg {
  width: 75%;
}
.content img.img-full {
  width: 100%;
}

/* cores do texto (um tom para o tema claro e outro para o escuro) */
.content .tc-red { color: #c01d27; }
.content .tc-danger { color: rgb(251 44 54); }
.content .tc-orange { color: #c4520a; }
.content .tc-warning { color: rgb(254 154 0); }
.content .tc-yellow { color: #a37400; }
.content .tc-green { color: #1a7f37; }
.content .tc-success { color: rgb(0 201 80); }
.content .tc-blue { color: #0067d1; }
.content .tc-primary { color: rgb(var(--primary-9)); }
.content .tc-purple { color: #8435c4; }
.content .tc-pink { color: #c0267a; }
.content .tc-gray { color: #6e7781; }
html.dark .content .tc-red { color: #fb9890; }
html.dark .content .tc-orange { color: #ffad6b; }
html.dark .content .tc-yellow { color: #ffd666; }
html.dark .content .tc-green { color: #7ee2a0; }
html.dark .content .tc-blue { color: #7dbcff; }
html.dark .content .tc-primary { color: rgb(var(--primary-10)); }
html.dark .content .tc-purple { color: #cf9cff; }
html.dark .content .tc-pink { color: #ff99cc; }
html.dark .content .tc-gray { color: #a8b3bd; }

/* marca-texto */
.content [class*='hl-'] {
  border-radius: 3px;
  padding: 0 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.content .hl-yellow { background: rgb(255 214 0 / 0.38); }
.content .hl-green { background: rgb(64 192 87 / 0.3); }
.content .hl-blue { background: rgb(51 154 240 / 0.28); }
.content .hl-red { background: rgb(250 82 82 / 0.28); }
.content .hl-purple { background: rgb(132 94 247 / 0.28); }
.content .hl-orange { background: rgb(253 126 20 / 0.3); }
.content .hl-gray { background: rgb(134 142 150 / 0.25); }
html.dark .content .hl-yellow { background: rgb(255 214 0 / 0.26); }

@media (max-width: 640px) {
  .page-title {
    font-size: 30px;
  }
  .content h2 {
    font-size: 24px;
    line-height: 32px;
  }
  .content h3 {
    font-size: 20px;
    line-height: 28px;
  }
  .content h4 {
    font-size: 18px;
    line-height: 26px;
  }
  .content img.img-sm,
  .content img.img-md {
    width: 100%;
  }
}