/* =============================================================================
   Código Penal — Quebrada Paulista Roleplay
   Folha de estilo única. Sem frameworks, sem pré-processadores.

   Sumário
     1. Tokens e temas
     2. Base e utilitários
     3. Barra superior
     4. Estrutura da página
     5. Navegação lateral
     6. Estatísticas
     7. Barra de filtros
     8. Cartão de artigo
     9. Página do artigo
    10. Estados (carregando, vazio, erro)
    11. Elementos flutuantes
    12. Responsivo
   ========================================================================== */

/* 1. Tokens e temas ======================================================== */

:root {
  color-scheme: dark;

  --bg: #0d1117;
  --bg-elevated: #0f141b;
  --surface: #161b22;
  --surface-2: #1b222b;
  --hover: #21262d;
  --border: #232a34;
  --border-strong: #30363d;

  --text: #f0f6fc;
  --muted: #8b949e;
  --faint: #6e7681;

  --primary: #3b82f6;
  --primary-soft: rgba(59, 130, 246, 0.14);
  --success: #22c55e;
  --success-soft: rgba(34, 197, 94, 0.13);
  --danger: #ef4444;
  --danger-soft: rgba(239, 68, 68, 0.13);
  --warning: #f59e0b;
  --warning-soft: rgba(245, 158, 11, 0.13);

  --track: rgba(240, 246, 252, 0.09);
  --fill: rgba(240, 246, 252, 0.42);
  --shadow: 0 1px 2px rgba(1, 4, 9, 0.6), 0 8px 24px -12px rgba(1, 4, 9, 0.9);
  --mark: rgba(59, 130, 246, 0.28);

  --sans: 'Inter', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Cascadia Mono', Menlo,
    Consolas, monospace;

  --radius: 10px;
  --radius-sm: 7px;
  --topbar-h: 60px;
  --sidebar-w: 236px;
  --shell: 1400px;

  --ease: cubic-bezier(0.2, 0, 0.13, 1);
}

[data-theme='light'] {
  color-scheme: light;

  --bg: #ffffff;
  --bg-elevated: #ffffff;
  --surface: #f6f8fa;
  --surface-2: #ffffff;
  --hover: #eaeef2;
  --border: #d8dee4;
  --border-strong: #c2c9d1;

  --text: #1f2328;
  --muted: #59636e;
  --faint: #78818c;

  --primary: #1f6feb;
  --primary-soft: rgba(31, 111, 235, 0.1);
  --success: #1a7f37;
  --success-soft: rgba(26, 127, 55, 0.1);
  --danger: #cf222e;
  --danger-soft: rgba(207, 34, 46, 0.1);
  --warning: #9a6700;
  --warning-soft: rgba(154, 103, 0, 0.12);

  --track: rgba(31, 35, 40, 0.1);
  --fill: rgba(31, 35, 40, 0.45);
  --shadow: 0 1px 2px rgba(31, 35, 40, 0.08), 0 8px 24px -14px rgba(31, 35, 40, 0.3);
  --mark: rgba(31, 111, 235, 0.18);
}

/* 2. Base e utilitários ==================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

/* `display` declarado nos componentes vence o padrão do atributo hidden. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  font-feature-settings: 'tnum' 1, 'cv05' 1;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.014em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--primary); }

button, input, select { font: inherit; color: inherit; }

svg { display: block; flex: none; }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--mark); }

mark {
  background: var(--mark);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

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

.skip-link {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius-sm);
  transform: translateY(-160%);
  transition: transform 0.16s var(--ease);
}
.skip-link:focus { transform: translateY(0); color: #fff; }

.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
}

/* 3. Barra superior ======================================================== */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
}
.brand:hover { color: inherit; }
.brand:hover .brand__sub { color: var(--muted); }

/* A placa mantém a altura constante nos dois temas, evitando salto ao trocar. */
.brand__plate {
  display: grid;
  place-items: center;
  padding: 5px 8px;
  border-radius: 7px;
  transition: background 0.14s var(--ease);
}
/* O logotipo é branco: no tema claro ele precisa de fundo escuro para
   continuar legível — preservando a cor da faixa, que um filtro apagaria. */
[data-theme='light'] .brand__plate { background: #0d1117; }

.brand__logo {
  display: block;
  width: 77px;
  height: 28px;
}

.brand__divider {
  width: 1px;
  height: 17px;
  background: var(--border-strong);
}

.brand__sub {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
  transition: color 0.14s var(--ease);
}

/* Campo de busca — comporta-se como paleta de comandos. */
.search {
  position: relative;
  flex: 1 1 auto;
  max-width: 560px;
  margin: 0 auto;
}

.search__field {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  padding: 0 10px 0 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.14s var(--ease), background 0.14s var(--ease);
}
.search__field:focus-within {
  border-color: var(--primary);
  background: var(--bg-elevated);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.search__field > svg { color: var(--faint); }

.search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  outline: none;
  font-size: 13.5px;
}
.search input::placeholder { color: var(--faint); }
.search input::-webkit-search-cancel-button { display: none; }

kbd {
  font-family: var(--mono);
  font-size: 10.5px;
  padding: 2px 6px;
  color: var(--faint);
  background: var(--hover);
  border: 1px solid var(--border);
  border-radius: 5px;
  white-space: nowrap;
}

/* Histórico de buscas */
.search__history {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  z-index: 60;
  padding: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.search__history[hidden] { display: none; }
.search__history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px 6px;
}
.search__history button.item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 8px;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
  color: var(--muted);
}
.search__history button.item:hover,
.search__history button.item:focus-visible { background: var(--hover); color: var(--text); }
.search__history .clear {
  background: none;
  border: 0;
  padding: 2px 4px;
  font-size: 11.5px;
  color: var(--faint);
  cursor: pointer;
}
.search__history .clear:hover { color: var(--danger); }

.topbar__actions { display: flex; align-items: center; gap: 6px; flex: none; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.14s var(--ease), color 0.14s var(--ease);
}
.icon-btn:hover { background: var(--hover); color: var(--text); }
.icon-btn[aria-pressed='true'] { color: var(--warning); }
.icon-btn .icon-moon { display: none; }
[data-theme='light'] .icon-btn .icon-moon { display: block; }
[data-theme='light'] .icon-btn .icon-sun { display: none; }

.topbar__menu { display: none; }

/* 4. Estrutura da página =================================================== */

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 20px;
}

.layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  padding-bottom: 80px;
}

.page-head { padding: 28px 0 20px; }
.page-head h1 { font-size: 21px; }
.page-head p { color: var(--muted); margin-top: 5px; max-width: 62ch; }

/* 5. Navegação lateral ===================================================== */

.sidebar {
  position: sticky;
  top: calc(var(--topbar-h) + 20px);
  max-height: calc(100vh - var(--topbar-h) - 40px);
  overflow-y: auto;
  padding: 24px 0 24px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.sidebar__group + .sidebar__group { margin-top: 22px; }
.sidebar__title { padding: 0 10px 8px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--muted);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background 0.13s var(--ease), color 0.13s var(--ease);
}
.nav-item:hover { background: var(--hover); color: var(--text); }
.nav-item[aria-current='true'] {
  background: var(--primary-soft);
  color: var(--text);
  font-weight: 550;
}
.nav-item__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item__count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.nav-item[aria-current='true'] .nav-item__count { color: var(--primary); }

.sigla {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  padding: 1px 5px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
}

/* 6. Estatísticas ========================================================== */

.stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}

.stat {
  padding: 13px 14px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.15s var(--ease);
}
.stat:hover { border-color: var(--border-strong); }
.stat__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--faint);
}
.stat__value {
  margin-top: 7px;
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat__value.is-compact { font-size: 16px; }
.stat__note {
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stat--bail .stat__value { color: var(--success); }
.stat--nobail .stat__value { color: var(--danger); }

/* 7. Barra de filtros ====================================================== */

.toolbar {
  position: sticky;
  top: var(--topbar-h);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.field {
  position: relative;
  display: flex;
  align-items: center;
}
.field select {
  appearance: none;
  height: 32px;
  /* Largura fixa: nomes de categoria são longos e esticariam a barra toda. */
  width: 178px;
  padding: 0 28px 0 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
  text-overflow: ellipsis;
  transition: border-color 0.14s var(--ease), background 0.14s var(--ease);
}
.field--wide select { width: 232px; }
.field--narrow select { width: 152px; }
.field select:hover { background: var(--hover); }
.field select:focus-visible { border-color: var(--primary); }
.field > svg {
  position: absolute;
  right: 9px;
  pointer-events: none;
  color: var(--faint);
}
.field.is-active select {
  border-color: color-mix(in srgb, var(--primary) 60%, var(--border));
  background: var(--primary-soft);
  color: var(--text);
}

.segmented {
  display: flex;
  padding: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.segmented button {
  padding: 4px 11px;
  background: none;
  border: 0;
  border-radius: 5px;
  font-size: 12.5px;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.13s var(--ease), color 0.13s var(--ease);
}
.segmented button:hover { color: var(--text); }
.segmented button[aria-pressed='true'] {
  background: var(--hover);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.toolbar__spacer { flex: 1 1 auto; }

.ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 11px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.13s var(--ease), color 0.13s var(--ease);
}
.ghost-btn:hover { background: var(--hover); color: var(--text); }

.resultbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 2px 12px;
  font-size: 12.5px;
  color: var(--muted);
}
.resultbar strong { color: var(--text); font-weight: 600; }

/* 8. Cartão de artigo ====================================================== */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 10px;
}

@media (prefers-reduced-motion: no-preference) {
  .grid { animation: rise 0.22s var(--ease); }
  @keyframes rise {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
  }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 13px 14px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease),
    transform 0.15s var(--ease);
}
.card:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.card:focus-within { border-color: var(--primary); }

.card__head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 4px;
}

.card__ref {
  flex: none;
  margin-top: 1px;
  padding: 1px 6px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  white-space: nowrap;
}
[data-theme='light'] .card__ref { background: #fff; }

.card__title {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 550;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Um link invisível cobre o cartão inteiro; os controles ficam acima dele. */
.card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--radius);
}
.card:focus-within .card__link:focus-visible { outline-offset: -3px; }

.card__fav {
  position: relative;
  z-index: 2;
  flex: none;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  margin: -3px -4px 0 0;
  background: none;
  border: 0;
  border-radius: 6px;
  color: var(--faint);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.14s var(--ease), color 0.14s var(--ease), background 0.14s var(--ease);
}
.card:hover .card__fav,
.card__fav:focus-visible,
.card__fav[aria-pressed='true'] { opacity: 1; }
.card__fav:hover { background: var(--hover); color: var(--warning); }
.card__fav[aria-pressed='true'] { color: var(--warning); }
.card__fav[aria-pressed='true'] svg { fill: currentColor; }

.card__path {
  font-size: 11.5px;
  color: var(--faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card__metrics {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--border);
}

.metric { min-width: 0; }
.metric__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}
.metric__value {
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.metric__value.is-muted { color: var(--faint); font-weight: 400; }
.metric__value.is-bail { color: var(--success); }

/* Medidor: proporção do valor frente ao maior valor do catálogo.
   Monocromático de propósito — a informação está no comprimento. */
.meter {
  height: 2px;
  margin-top: 6px;
  border-radius: 2px;
  background: var(--track);
  overflow: hidden;
}
.meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--fill);
  transform-origin: left;
  animation: meter 0.5s var(--ease) both;
}
@keyframes meter { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  .meter i { animation: none; }
  .grid { animation: none; }
}

/* Selos de situação */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  padding: 2px 8px 2px 6px;
  font-size: 11px;
  font-weight: 550;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.badge--bail { color: var(--success); background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 26%, transparent); }
.badge--nobail { color: var(--danger); background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 26%, transparent); }
.badge--revoked { color: var(--warning); background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 26%, transparent); }
.badge--neutral { color: var(--muted); background: var(--surface); border-color: var(--border); }

.card__badges {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  margin-top: 1px;
}

/* 8b. Índice das leis ====================================================== */

.laws { display: grid; gap: 12px; }

.law {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.law__head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
}
.law__head .sigla { min-width: 42px; padding: 3px 7px; font-size: 11px; }
.law__title { flex: 1; min-width: 0; }
.law__title h2 { font-size: 15px; }
.law__title p { font-size: 12px; color: var(--faint); margin-top: 1px; }
.law__count {
  flex: none;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.tree { border-top: 1px solid var(--border); }
.tree__item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 16px 8px 0;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--muted);
  transition: background 0.13s var(--ease), color 0.13s var(--ease);
}
.tree > .tree__item:first-child { border-top: 0; }
.tree__item:hover { background: var(--hover); color: var(--text); }
.tree__item span:first-child { flex: 1; min-width: 0; }
.tree__item .nav-item__count { flex: none; }
.tree__item[data-depth='1'] { padding-left: 16px; }
.tree__item[data-depth='2'] { padding-left: 34px; }
.tree__item[data-depth='3'] { padding-left: 52px; }
.tree__item .kicker { color: var(--faint); font-family: var(--mono); font-size: 11px; margin-right: 6px; }

/* 9. Página do artigo ====================================================== */

.article-shell {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px 96px;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 22px 0 18px;
  font-size: 12.5px;
  color: var(--faint);
}
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb svg { color: var(--border-strong); }
.breadcrumb li { display: flex; align-items: center; gap: 4px; }
.breadcrumb li:last-child { color: var(--muted); }

.article-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.article-head__main { flex: 1 1 380px; min-width: 0; }
.article-head__ref {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.article-head__ref .sigla { min-width: auto; font-size: 11px; padding: 2px 7px; }
.article-head h1 { font-size: 24px; line-height: 1.28; }
.article-head__full {
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}
.article-head__actions { display: flex; gap: 6px; flex: none; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.14s var(--ease), border-color 0.14s var(--ease);
}
.btn:hover { background: var(--hover); border-color: var(--border-strong); color: var(--text); }
.btn--primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn--primary:hover { background: color-mix(in srgb, var(--primary) 86%, #000); color: #fff; }

.panels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 20px 0;
}
.panel {
  padding: 15px 16px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.panel__label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
}
.panel__value {
  margin-top: 9px;
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.panel__note { margin-top: 4px; font-size: 12px; color: var(--muted); }
.panel--bail .panel__value { color: var(--success); }
.panel--nobail .panel__value { font-size: 17px; color: var(--danger); }

.datalist {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.datalist dt,
.datalist dd {
  margin: 0;
  padding: 11px 15px;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.datalist dt:first-of-type,
.datalist dt:first-of-type + dd { border-top: 0; }
.datalist dt { color: var(--muted); background: var(--surface); }
.datalist dd { min-width: 0; overflow-wrap: anywhere; }
.datalist code {
  font-family: var(--mono);
  font-size: 12px;
  padding: 1px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
}

.section-title {
  margin: 32px 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
}

.note {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  margin-top: 16px;
  background: var(--warning-soft);
  border: 1px solid color-mix(in srgb, var(--warning) 26%, transparent);
  border-radius: var(--radius);
  font-size: 12.5px;
  color: var(--text);
}
.note svg { color: var(--warning); margin-top: 1px; }

/* 10. Estados ============================================================== */

.state {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 72px 24px;
  text-align: center;
  color: var(--muted);
}
/* Dentro de uma grade de cartões, o estado vazio ocupa a linha inteira. */
.grid > .state { grid-column: 1 / -1; }
.state svg { color: var(--border-strong); }
.state h2 { font-size: 15px; color: var(--text); }
.state p { max-width: 46ch; font-size: 13px; }
.state code {
  font-family: var(--mono);
  font-size: 12px;
  padding: 2px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
}

.skeleton {
  height: 118px;
  background: linear-gradient(100deg, var(--surface) 30%, var(--hover) 50%, var(--surface) 70%);
  background-size: 220% 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  animation: sweep 1.15s linear infinite;
}
@keyframes sweep { to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* 11. Elementos flutuantes ================================================= */

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  box-shadow: var(--shadow);
  font-size: 13px;
  transform: translate(-50%, 16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast svg { color: var(--success); }

.to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 40;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--muted);
  box-shadow: var(--shadow);
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), color 0.14s;
}
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { color: var(--text); }

footer.site {
  padding: 26px 0 34px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--faint);
}
footer.site .shell { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; }
footer.site a { color: var(--muted); }

/* 12. Responsivo =========================================================== */

@media (max-width: 1180px) {
  .stats { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 960px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .topbar__menu { display: grid; }

  .sidebar {
    position: fixed;
    inset: var(--topbar-h) auto 0 0;
    z-index: 45;
    width: 268px;
    max-height: none;
    padding: 16px 12px 24px;
    background: var(--bg-elevated);
    border-right: 1px solid var(--border);
    transform: translateX(-102%);
    transition: transform 0.22s var(--ease);
  }
  .sidebar.is-open { transform: none; box-shadow: var(--shadow); }

  .scrim {
    position: fixed;
    inset: var(--topbar-h) 0 0;
    z-index: 44;
    background: rgba(1, 4, 9, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s var(--ease);
  }
  .scrim.is-open { opacity: 1; pointer-events: auto; }

  .panels { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  :root { --topbar-h: 54px; }

  .topbar { gap: 6px; padding: 0 10px; }
  /* Sobra apenas o logotipo: o nome da seção já está no título da página. */
  .brand__divider, .brand__sub { display: none; }
  .brand__plate { padding: 4px 6px; }
  .brand__logo { width: 61px; height: 22px; }
  .search { max-width: none; min-width: 0; }
  .search kbd { display: none; }
  /* O índice das leis continua acessível pelo menu e pelo rodapé. */
  .topbar__actions .icon-btn[href='leis.html'] { display: none; }
  .icon-btn { width: 32px; height: 32px; }

  .shell { padding: 0 14px; }
  .page-head { padding: 20px 0 16px; }
  .page-head h1 { font-size: 19px; }

  .stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat { padding: 11px 12px 12px; }
  .stat__value { font-size: 18px; }
  .stat__value.is-compact { font-size: 14px; }

  .grid { grid-template-columns: minmax(0, 1fr); }
  .datalist { grid-template-columns: minmax(0, 1fr); }
  .datalist dd { padding-top: 0; border-top: 0; }
  .datalist dt { background: none; padding-bottom: 3px; }
  .datalist dt:first-of-type + dd { border-top: 0; }
  .article-head h1 { font-size: 20px; }
  .article-head__actions { width: 100%; }

  .toolbar { padding: 10px 0; gap: 6px; }
  /* Os filtros rolam na horizontal em vez de empilhar em quatro linhas. */
  .toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .toolbar::-webkit-scrollbar { display: none; }
  .toolbar > * { flex: none; }
  .toolbar__spacer { display: none; }
  .field select { width: auto; min-width: 128px; max-width: 190px; }
  .field--wide select, .field--narrow select { width: auto; }

  .tree__item[data-depth='2'] { padding-left: 26px; }
  .tree__item[data-depth='3'] { padding-left: 38px; }
}

@media (max-width: 360px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
}