@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Condensed:wght@700&display=swap');

/* ── Reset & base ─────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background-color: #f5f5f5;
  color: #252626;
  font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.5;
}
.page-root { min-height: 100vh; padding: 2rem 5%; max-width: 1380px; margin: 0 auto; }

/* ── Site header & nav ────────────────────────────────────────── */
.site-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #e51937;
}
.site-header .logo-block {
  flex-shrink: 0;
  text-align: center;
  text-decoration: none;
}
.site-header .logo-block img {
  height: 80px;
  display: block;
  margin-bottom: 0.3rem;
}
.site-header .logo-block .logo-title {
  font-family: 'Roboto Condensed', 'Roboto', Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #252626;
}
.pmb-tagline {
  display: block;
  font-size: 0.92rem;
  font-style: italic;
  color: #767676;
  text-decoration: none;
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 2px solid #e51937;
}
.pmb-tagline:hover {
  color: #e51937;
}
.global-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: center;
  margin-bottom: 0.75rem;
}
.global-nav a {
  color: #252626;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: color 0.15s;
}
.global-nav a:hover { color: #e51937; }
.global-nav a.active {
  color: #e51937;
  font-weight: 700;
  border-bottom: 2px solid #e51937;
  padding-bottom: 1px;
}

/* ── Common typography ────────────────────────────────────────── */
h1 { font-size: 1.75rem; margin-bottom: 0.25rem; }
.subtitle { color: #767676; font-size: 0.95rem; margin-bottom: 1.5rem; }

/* ── Links ────────────────────────────────────────────────────── */
.pn-link { color: #e51937; text-decoration: none; font-weight: 500; }
.pn-link:hover { text-decoration: underline; }

/* ── Tables ───────────────────────────────────────────────────── */
.table-wrapper {
  overflow-x: auto;
  border: 1px solid #ddd;
  border-radius: 0.5rem;
  background: #fff;
  margin-bottom: 0.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; table-layout: auto; }
thead th {
  border-bottom: 2px solid #e51937;
  padding: 0.5rem 0.6rem;
  text-align: left;
  font-weight: 700;
  white-space: nowrap;
  color: #252626;
  background: #f7f7f7;
}
thead th:first-child, tbody td:first-child {
  width: 16ch; min-width: 16ch; max-width: 16ch; white-space: nowrap;
}
tbody td {
  border-bottom: 1px solid #ededee;
  padding: 0.4rem 0.6rem;
  vertical-align: top;
  text-align: left;
}
tbody tr:nth-child(even) { background-color: #fafafa; }
tbody tr:hover { background-color: #f0f0f0; }
tbody tr.hidden { display: none; }

/* ── Copy buttons ─────────────────────────────────────────────── */
.copy-cell { text-align: right; white-space: nowrap; width: 1%; padding-left: 0.4rem; }
.copy-th { width: 1%; }
.copy-btn {
  padding: 0.15rem 0.45rem; font-size: 0.75rem;
  border: 1px solid #ccc; border-radius: 0.25rem;
  background: #f5f5f5; color: #767676;
  cursor: pointer; margin-left: 0.3rem;
  transition: background 0.15s, color 0.15s;
}
.copy-btn:hover { background: #e8e8e8; color: #252626; }
.copy-btn.copied { background: rgba(0,161,45,0.15); color: #00a12d; border-color: #00a12d; }

/* ── Search box ───────────────────────────────────────────────── */
.search-box { margin-bottom: 1rem; }
.search-box input {
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 0.35rem;
  background: #fff;
  color: #252626;
  min-width: 16rem;
}
.search-box input::placeholder { color: #aab1b3; }
.search-box input:focus { outline: none; border-color: #e51937; box-shadow: 0 0 0 2px rgba(229,25,55,0.15); }
.search-count { color: #767676; font-size: 0.9rem; margin-left: 0.75rem; }

/* ── Lists ────────────────────────────────────────────────────── */
ul { list-style: none; margin-bottom: 0.5rem; }
li {
  padding: 0.35rem 0;
  border-bottom: 1px solid #ededee;
  font-size: 0.95rem;
}
li a { color: #e51937; text-decoration: none; font-size: 0.95rem; }
li a:hover { text-decoration: underline; }

/* ── Category sections ────────────────────────────────────────── */
.category-section { margin-bottom: 1.5rem; }
.category-section.hidden { display: none; }
.category-title {
  font-family: 'Roboto Condensed', 'Roboto', Arial, sans-serif;
  font-size: 1.1rem;
  color: #252626;
  margin-bottom: 0.4rem;
  padding-bottom: 0.2rem;
  border-bottom: 2px solid #e51937;
}
.cat-count { color: #767676; font-size: 0.85rem; font-weight: 400; }

/* ── Filter bars & checkboxes ─────────────────────────────────── */
.filter-bar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.6rem; margin-bottom: 0.75rem;
  padding: 0.75rem 1rem;
  background: #fff; border: 1px solid #ddd;
  border-radius: 0.5rem;
}
.filter-label {
  font-size: 0.85rem; font-weight: 600; color: #e51937;
  margin-right: 0.2rem; white-space: nowrap;
}
.filter-checkbox {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.9rem; cursor: pointer; color: #252626;
}
.filter-checkbox input { cursor: pointer; accent-color: #e51937; }
.filter-checkbox.hidden { display: none; }
.filter-count { color: #767676; font-size: 0.9rem; margin-bottom: 1rem; }

/* ── Toggle buttons (Level / Iteration) ───────────────────────── */
.toggle-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem 0.75rem; font-size: 0.85rem; font-weight: 500;
  border: 1px solid #ddd; border-radius: 0.35rem;
  background: #fff; color: #767676; cursor: pointer;
  margin-bottom: 0.5rem; transition: all 0.15s;
}
.toggle-btn:hover { border-color: #e51937; color: #e51937; }
.toggle-btn.active { border-color: #e51937; color: #e51937; background: rgba(229,25,55,0.05); }
.toggle-btn .arrow { font-size: 0.7rem; transition: transform 0.2s; }
.toggle-btn.active .arrow { transform: rotate(90deg); }
.filter-bar.collapsed { display: none; }
.toggle-row { display: flex; gap: 0.5rem; }

/* ── Code-name page badges ────────────────────────────────────── */
.code-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.25rem; }
.code-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 0.25rem;
  font-size: 0.82rem;
  font-weight: 500;
}
.cat-badge { background: rgba(229,25,55,0.1); color: #e51937; }
.family-badge { background: rgba(37,38,38,0.08); color: #252626; }
.level-badge { background: rgba(0,161,45,0.1); color: #00a12d; }
.iter-badge { background: rgba(0,100,200,0.1); color: #0064c8; }

/* ── PN page ──────────────────────────────────────────────────── */
.pn-title {
  font-family: 'Roboto Condensed', 'Roboto', Arial, sans-serif;
  font-size: 2.5rem; margin-bottom: 0.5rem; font-weight: 700; color: #252626;
}
.category-badge {
  display: inline-block;
  background: rgba(229,25,55,0.1); color: #e51937;
  padding: 0.2rem 0.6rem; border-radius: 0.25rem;
  font-size: 0.85rem; font-weight: 500; margin-bottom: 0.75rem;
}
.descr { font-size: 1.1rem; line-height: 1.6; margin-bottom: 1.5rem; color: #252626; }
.pn-page h2 { font-size: 1.15rem; color: #e51937; margin-bottom: 0.5rem; }
.mention-link { color: #e51937; text-decoration: none; }
.mention-link:hover { text-decoration: underline; }
.mention-detail { color: #767676; font-size: 0.85rem; margin-left: 0.3rem; }
.copy-bar { margin-bottom: 1.5rem; display: flex; gap: 0.5rem; }
.copy-bar .copy-btn {
  padding: 0.3rem 0.7rem; font-size: 0.85rem;
}

/* ── Categories index ─────────────────────────────────────────── */
.cat-index-list { list-style: none; margin-bottom: 0.5rem; }
.cat-index-list li {
  padding: 0.4rem 0;
  border-bottom: 1px solid #ededee;
}
.cat-index-list li a {
  color: #e51937; text-decoration: none; font-size: 1rem;
}
.cat-index-list li a:hover { text-decoration: underline; }

/* ── Index page (code names) ──────────────────────────────────── */
.type-section.hidden { display: none; }
.product-section.hidden { display: none; }
li.hidden { display: none; }
.type-title {
  font-size: 1.35rem; margin-top: 2rem; margin-bottom: 0.5rem;
  color: #e51937; border-bottom: 2px solid #e51937; padding-bottom: 0.3rem;
}
.type-count { color: #aab1b3; font-size: 0.85rem; font-weight: 400; }
.product-title { font-size: 1.05rem; margin-top: 1rem; margin-bottom: 0.3rem; color: #252626; }
.product-count { color: #aab1b3; font-size: 0.85rem; font-weight: 400; }
.count { color: #aab1b3; font-size: 0.85rem; margin-left: 0.3rem; }
.detail { color: #767676; font-size: 0.82rem; margin-left: 0.4rem; font-style: italic; }

/* ── Search page toolbar ──────────────────────────────────────── */
.toolbar {
  display: flex; gap: 0.5rem; align-items: center;
  margin-bottom: 1rem; flex-wrap: wrap;
}
.toolbar input[type="text"] {
  padding: 0.5rem 0.75rem; font-size: 1rem;
  border: 1px solid #ccc; border-radius: 0.35rem;
  background: #fff; color: #252626; min-width: 12rem;
}
.toolbar input[type="text"]::placeholder { color: #aab1b3; }
.toolbar input[type="text"]:focus { outline: none; border-color: #e51937; box-shadow: 0 0 0 2px rgba(229,25,55,0.15); }
.toolbar button {
  padding: 0.5rem 1rem; font-size: 0.95rem;
  border: 1px solid #ccc; border-radius: 0.35rem;
  background: #fff; color: #252626; cursor: pointer;
}
.toolbar button:hover { background: #f0f0f0; }
.toolbar select {
  padding: 0.5rem 0.75rem; font-size: 1rem;
  border: 1px solid #ccc; border-radius: 0.35rem;
  background: #fff; color: #252626; min-width: 10rem; cursor: pointer;
}
.toolbar select:focus { outline: none; border-color: #e51937; }
.toolbar select option { background: #fff; color: #252626; }

/* ── Search page extra cells ──────────────────────────────────── */
.cat-cell { color: #252626; }
.family-cell { color: #252626; font-size: 0.85rem; }
.mention-cell { font-size: 0.85rem; color: #767676; }