/* Minimal, semantic styles — optimized for readability and AI crawlability */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: #1a1a2e;
  background: #fafafa;
}

a { color: #2563eb; text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 860px; margin: 0 auto; padding: 0 1.25rem; }

/* Navigation */
nav { background: #1a1a2e; padding: .75rem 0; }
nav .container { display: flex; align-items: center; gap: 1.5rem; }
nav a { color: #e2e8f0; font-size: .9rem; }
nav .brand { font-weight: 700; font-size: 1rem; color: #fff; }

/* Main content */
main { padding: 2rem 0 4rem; }

/* Hero / answer block */
.answer-block {
  background: #eff6ff;
  border-left: 4px solid #2563eb;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0 1.75rem;
  border-radius: 0 6px 6px 0;
}
.answer-block p { font-size: 1.05rem; }

/* Headings */
h1 { font-size: 1.75rem; font-weight: 700; margin-bottom: .5rem; line-height: 1.3; }
h2 { font-size: 1.2rem; font-weight: 600; margin: 2rem 0 .6rem; }
h3 { font-size: 1rem; font-weight: 600; margin: 1.25rem 0 .4rem; }

/* Code badge */
.code-badge {
  display: inline-block;
  background: #1a1a2e;
  color: #e2e8f0;
  font-family: monospace;
  font-size: .95rem;
  padding: .15rem .5rem;
  border-radius: 4px;
  margin-right: .4rem;
}

/* Code detail */
.code-meta { color: #64748b; font-size: .9rem; margin-bottom: 1rem; }
.code-meta a { color: #64748b; }

ul.item-list { padding-left: 1.25rem; }
ul.item-list li { margin: .3rem 0; }

/* Sections grid */
.sections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: .75rem;
  margin-top: .75rem;
}
.section-card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: .85rem 1rem;
  background: #fff;
}
.section-card .letter { font-size: 1.4rem; font-weight: 700; color: #2563eb; }
.section-card .name { font-size: .85rem; color: #475569; margin-top: .2rem; }

/* Table */
table { width: 100%; border-collapse: collapse; margin-top: .75rem; font-size: .9rem; }
th { background: #f1f5f9; text-align: left; padding: .5rem .75rem; font-weight: 600; }
td { padding: .45rem .75rem; border-bottom: 1px solid #f1f5f9; }
tr:hover td { background: #f8fafc; }

/* Mapping result */
.mapping-card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  background: #fff;
  margin: .6rem 0;
}
.mapping-card.primary { border-color: #2563eb; background: #eff6ff; }
.relation-badge {
  display: inline-block;
  font-size: .75rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
  margin-left: .5rem;
}

/* Pagination */
.pagination { display: flex; gap: .5rem; margin-top: 1.5rem; align-items: center; }
.pagination a, .pagination span {
  padding: .35rem .75rem;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: .9rem;
  background: #fff;
}
.pagination .current { background: #2563eb; color: #fff; border-color: #2563eb; }

/* FAQ */
.faq-item { margin: 1rem 0; }
.faq-item dt { font-weight: 600; margin-bottom: .25rem; }
.faq-item dd { color: #374151; padding-left: 1rem; }

/* Search form */
.search-form { display: flex; gap: .5rem; margin: 1rem 0; }
.search-form input {
  flex: 1; padding: .5rem .85rem; border: 1px solid #cbd5e1;
  border-radius: 6px; font-size: 1rem;
}
.search-form button {
  padding: .5rem 1.1rem; background: #2563eb; color: #fff;
  border: none; border-radius: 6px; cursor: pointer; font-size: 1rem;
}

/* Footer */
footer {
  border-top: 1px solid #e2e8f0;
  padding: 1.5rem 0;
  font-size: .85rem;
  color: #64748b;
  text-align: center;
}