/* Atomurus UI V2 — Explore hub
   Loaded on explore.html. Tokens come from assets/ui/index.css.
   Category tints on .ex-el stay scientific (same hexes as the table). */

.ps-body .content {
  font-family: var(--font-ui);
  color: var(--color-text);
}

:root {
  --c-nonmetal:       #C8E0C8; --c-nonmetal-t:    #1A3A1A; --c-nonmetal-b:  #98C898;
  --c-noble:          #FFF0B0; --c-noble-t:       #6A4800; --c-noble-b:     #D8C060;
  --c-alkali:         #FFCACA; --c-alkali-t:      #7A1010; --c-alkali-b:    #E89090;
  --c-alkaline:       #FFE0B0; --c-alkaline-t:    #6A3800; --c-alkaline-b:  #E8B860;
  --c-metalloid:      #DDD8FF; --c-metalloid-t:   #2E1E78; --c-metalloid-b: #B0A0F0;
  --c-polyatomic:     #BFE8E8; --c-polyatomic-t:  #003A3A; --c-polyatomic-b:#80C8C8;
  --c-posttrans:      #D0D0D0; --c-posttrans-t:   #2A2A2A; --c-posttrans-b: #A0A0A0;
  --c-transition:     #E4E0D4; --c-transition-t:  #38321C; --c-transition-b:#C4C0A8;
  --c-lanthanide:     #FFD8E8; --c-lanthanide-t:  #6A0040; --c-lanthanide-b:#E0A0C0;
  --c-actinide:       #FFE0D0; --c-actinide-t:    #6A2810; --c-actinide-b:  #E0A088;
}
html[data-theme="dark"] {
  --c-nonmetal:       #122418; --c-nonmetal-t:    #7AC890; --c-nonmetal-b:  #1E3A28;
  --c-noble:          #28220A; --c-noble-t:       #C8A028; --c-noble-b:     #403800;
  --c-alkali:         #280C0C; --c-alkali-t:      #D87070; --c-alkali-b:    #421818;
  --c-alkaline:       #281800; --c-alkaline-t:    #D8A050; --c-alkaline-b:  #422800;
  --c-metalloid:      #140E28; --c-metalloid-t:   #9E90E8; --c-metalloid-b: #241848;
  --c-polyatomic:     #0A2424; --c-polyatomic-t:  #70C8C8; --c-polyatomic-b:#163838;
  --c-posttrans:      #1E1E1E; --c-posttrans-t:   #A0A0A0; --c-posttrans-b: #2A2A2A;
  --c-transition:     #1C1A14; --c-transition-t:  #A8A080; --c-transition-b:#2C2A1E;
  --c-lanthanide:     #28101C; --c-lanthanide-t:  #E090B8; --c-lanthanide-b:#421830;
  --c-actinide:       #281408; --c-actinide-t:    #E09078; --c-actinide-b:  #422010;
}

.ex-shell { max-width: 1180px; margin: 0 auto; padding: 0 var(--space-5); }

.ex-hero {
  padding: var(--space-7) var(--space-5) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.ex-hero-inner { max-width: 1180px; margin: 0 auto; }

html body.ps-body .ex-kicker {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.ex-kicker .pill { display: none; }

html body.ps-body .ex-title {
  font-family: var(--font-serif);
  font-size: clamp(34px, 5vw, 54px);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
  color: var(--color-text);
  font-weight: 400;
}
.ex-title em { font-style: italic; color: var(--color-brand); }

.ex-desc {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 62ch;
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-5);
}

.ex-search-wrap {
  position: sticky;
  top: 0;
  background: var(--color-bg);
  z-index: 20;
  padding: var(--space-3) 0 var(--space-2);
  margin-top: var(--space-1);
}
.ex-search {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0 var(--space-3);
  min-height: var(--control-height);
  transition: border-color var(--ui-duration) var(--ui-ease), box-shadow var(--ui-duration) var(--ui-ease);
}
.ex-search:focus-within {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-ring);
}
.ex-search svg { flex-shrink: 0; color: var(--color-text-muted); }
.ex-search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: var(--color-text);
  font-size: var(--text-base);
  font-family: var(--font-ui);
  min-width: 0;
  min-height: var(--control-height);
}
.ex-search input::placeholder { color: var(--color-text-muted); }
.ex-search-kbd {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}
.ex-search-clear {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  display: none;
}
.ex-search-clear:hover { color: var(--color-text); background: var(--color-border); }
.ex-search.has-query .ex-search-clear { display: inline-flex; }

.ex-search-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: var(--space-2) 2px 0;
}
.ex-search-meta .ex-count strong { color: var(--color-text); font-weight: 600; }
.ex-jump {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}
.ex-jump a {
  color: var(--color-text-muted);
  text-decoration: none;
  border: 1px solid transparent;
  padding: 3px 7px;
  border-radius: var(--radius-sm);
}
.ex-jump a:hover { color: var(--color-brand); border-color: var(--color-border); }

.ex-section { padding: var(--space-7) var(--space-5) var(--space-1); max-width: 1180px; margin: 0 auto; }
.ex-section + .ex-section { padding-top: var(--space-6); }
.ex-section.is-empty { display: none; }
.ex-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-4);
  gap: var(--space-3);
  flex-wrap: wrap;
}
.ex-section-head h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--text-2xl);
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.ex-section-head h2 .h-no { display: none; }
.ex-section-sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-family: var(--font-ui);
}

.ex-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.ex-pill {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  padding: 0 var(--space-3);
  min-height: 36px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  background: transparent;
  cursor: pointer;
}
.ex-pill:hover {
  color: var(--color-text);
  border-color: color-mix(in oklab, var(--color-brand) 40%, var(--color-border));
}
html body .ex-pill.active {
  background: color-mix(in oklab, var(--color-brand) 10%, transparent);
  color: var(--color-brand);
  border-color: color-mix(in oklab, var(--color-brand) 40%, var(--color-border));
}

.ex-el-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: var(--space-2);
}
.ex-el {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 9px 10px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  background: var(--color-surface);
  min-height: 80px;
}
.ex-el:hover { border-color: var(--color-brand); }
.ex-el .ex-el-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-family: var(--font-mono);
  font-size: 10.5px;
  opacity: .75;
}
.ex-el .ex-el-sym {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  margin: 4px 0 2px;
}
.ex-el .ex-el-name {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.ex-el.c-nonmetal   { background: var(--c-nonmetal);   color: var(--c-nonmetal-t);   border-color: var(--c-nonmetal-b); }
.ex-el.c-noble      { background: var(--c-noble);      color: var(--c-noble-t);      border-color: var(--c-noble-b); }
.ex-el.c-alkali     { background: var(--c-alkali);     color: var(--c-alkali-t);     border-color: var(--c-alkali-b); }
.ex-el.c-alkaline   { background: var(--c-alkaline);   color: var(--c-alkaline-t);   border-color: var(--c-alkaline-b); }
.ex-el.c-metalloid  { background: var(--c-metalloid);  color: var(--c-metalloid-t);  border-color: var(--c-metalloid-b); }
.ex-el.c-polyatomic { background: var(--c-polyatomic); color: var(--c-polyatomic-t); border-color: var(--c-polyatomic-b); }
.ex-el.c-posttrans  { background: var(--c-posttrans);  color: var(--c-posttrans-t);  border-color: var(--c-posttrans-b); }
.ex-el.c-transition { background: var(--c-transition); color: var(--c-transition-t); border-color: var(--c-transition-b); }
.ex-el.c-lanthanide { background: var(--c-lanthanide); color: var(--c-lanthanide-t); border-color: var(--c-lanthanide-b); }
.ex-el.c-actinide   { background: var(--c-actinide);   color: var(--c-actinide-t);   border-color: var(--c-actinide-b); }
.ex-el .ex-el-name { color: inherit; opacity: .85; }
.ex-el .ex-el-top { color: inherit; }

.ex-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-3);
}
.ex-card,
.ex-card.ui-card {
  display: flex;
  flex-direction: row;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  background: var(--color-surface);
  align-items: flex-start;
}
.ex-card:hover,
.ex-card.ui-card-interactive:hover {
  border-color: color-mix(in oklab, var(--color-brand) 40%, var(--color-border));
}
.ex-card-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ex-card:hover .ex-card-icon { background: var(--color-brand); color: var(--color-on-brand); }
.ex-card-body { flex: 1; min-width: 0; }
.ex-card-kicker {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}
html body.ps-body .ex-card-title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}
.ex-card-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

.ex-empty {
  display: none;
  padding: var(--space-8) var(--space-5);
  text-align: center;
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  max-width: 1180px;
  margin: 0 auto;
}
.ex-empty.show { display: block; }
.ex-empty strong {
  color: var(--color-text);
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  display: block;
  margin-bottom: var(--space-2);
  font-weight: 400;
}

.ex-more {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
}

.ex-hide { display: none !important; }
mark.ex-hl { background: transparent; color: var(--color-brand); font-weight: 600; padding: 0; }

@media (max-width: 720px) {
  .ex-hero { padding: var(--space-5) var(--space-4) var(--space-4); }
  .ex-section { padding: var(--space-6) var(--space-4) var(--space-1); }
  .ex-shell, .ex-hero-inner, .ex-section, .ex-empty { padding-left: var(--space-4); padding-right: var(--space-4); }
  .ex-el-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .ex-el { min-height: 72px; padding: 8px 8px 9px; }
  .ex-el .ex-el-sym { font-size: 20px; }
  .ex-card-grid { grid-template-columns: 1fr; }
}