.icons-page {
  --icons-bg: var(--bh-bg-grouped);
  --icons-surface: var(--bh-bg-raised);
  --icons-surface-soft: var(--bh-bg-subtle);
  --icons-text: var(--bh-content-default);
  --icons-muted: var(--bh-content-muted);
  --icons-border: var(--bh-border-subtle);
  --icons-border-strong: var(--bh-border-strong);
  --icons-brand: var(--bh-interactive-brand-default);
  --icons-brand-dark: var(--bh-content-brand-strong);
  --icons-brand-soft: var(--bh-bg-brand-soft);
  --icons-warm: var(--bh-content-warning-default);
  --icons-warm-soft: var(--bh-bg-warning-subtle);
  --icons-danger: var(--bh-content-danger-default);
  --icons-radius: var(--bh-radius-lg-8);
  --icons-shadow: var(--shadow-component-default);

  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--bh-icon-explorer-nav-column) minmax(0, 1fr);
  background: var(--icons-bg);
  color: var(--icons-text);
  font-family: var(--bh-font-family);
  letter-spacing: 0;
}

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

.icons-page button,
.icons-page input,
.icons-page select {
  font: inherit;
}

.icons-page button {
  cursor: pointer;
}

.icons-page button:disabled {
  cursor: wait;
  opacity: var(--bh-opacity-subtle);
}

.icons-page h1,
.icons-page h2,
.icons-page h3,
.icons-page p {
  margin: 0;
}

.icons-page iconify-icon {
  display: inline-block;
  color: currentColor;
  vertical-align: -0.14em;
}

.icons-sidebar {
  height: 100vh;
  position: sticky;
  top: 0;
  overflow: auto;
  border-right: var(--bh-space-xxxs-1) solid var(--icons-border);
  background: var(--icons-surface);
  padding: calc(var(--bh-space-4xl-20) + var(--bh-space-xxs-2)) calc(var(--bh-space-xl-12) + var(--bh-space-sm-6)) calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
}

.icons-sidebar__header {
  display: flex;
  align-items: center;
  gap: var(--bh-space-lg-10);
  margin-bottom: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6));
}

.icons-sidebar__header h1 {
  font-size: var(--bh-text-heading-xs-semibold-font-size);
  line-height: 1.2;
  font-weight: var(--bh-font-weight-bold);
}

.icons-sidebar__header p,
.icons-topbar p,
.icons-panel__header span,
.icons-pack__copy span,
.icons-compare-card p,
.icons-compare-card > div:first-child span {
  color: var(--icons-muted);
  font-size: var(--bh-text-body-2xs-regular-font-size);
  line-height: 1.35;
}

.icons-mark {
  width: calc(var(--bh-space-6xl-32) + var(--bh-space-xxs-2));
  height: calc(var(--bh-space-6xl-32) + var(--bh-space-xxs-2));
  border-radius: var(--icons-radius);
  display: grid;
  place-items: center;
  color: var(--bh-content-on-brand);
  background: var(--icons-text);
}

.icons-sidebar__tools {
  display: grid;
  gap: var(--bh-space-lg-10);
  margin: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6)) 0;
}

.icons-input,
.icons-select {
  width: 100%;
  height: calc(var(--bh-space-6xl-32) + var(--bh-space-sm-6));
  border: var(--bh-space-xxxs-1) solid var(--icons-border);
  border-radius: var(--icons-radius);
  background: var(--bh-bg-raised);
  color: var(--icons-text);
  padding: 0 var(--bh-space-xl-12);
  outline: none;
}

.icons-input:focus,
.icons-select:focus {
  border-color: var(--icons-brand);
  box-shadow: var(--shadow-button-focus);
}

.icons-pack-list {
  display: grid;
  gap: var(--bh-space-md-8);
}

.icons-pack {
  width: 100%;
  display: grid;
  grid-template-columns: var(--bh-icon-explorer-pack-column) minmax(0, 1fr);
  gap: var(--bh-space-lg-10);
  align-items: center;
  border: var(--bh-space-xxxs-1) solid transparent;
  border-radius: var(--icons-radius);
  background: transparent;
  color: var(--icons-text);
  padding: calc(var(--bh-space-md-8) + var(--bh-space-xxxs-1));
  text-align: left;
}

.icons-pack:hover {
  background: var(--bh-bg-muted);
}

.icons-pack.is-active {
  background: var(--icons-brand-soft);
  border-color: var(--bh-border-brand-subtle);
}

.icons-pack__glyph {
  width: calc(var(--bh-space-7xl-40) + var(--bh-space-xxs-2));
  height: calc(var(--bh-space-7xl-40) + var(--bh-space-xxs-2));
  border-radius: var(--icons-radius);
  display: grid;
  place-items: center;
  border: var(--bh-space-xxxs-1) solid var(--icons-border);
  background: var(--bh-bg-raised);
  color: var(--icons-brand-dark);
}

.icons-pack__copy {
  min-width: 0;
  display: grid;
  gap: calc(var(--bh-space-xxs-2) + var(--bh-space-xxxs-1));
}

.icons-pack__copy strong {
  min-width: 0;
  font-size: var(--bh-text-body-xs-regular-font-size);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icons-main {
  min-width: 0;
}

.icons-topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  min-height: var(--bh-icon-explorer-topbar-min-height);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6));
  align-items: center;
  padding: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6)) calc(var(--bh-space-5xl-24) + var(--bh-space-xxs-2));
  border-bottom: var(--bh-space-xxxs-1) solid var(--icons-border);
  background: var(--bh-icon-explorer-topbar-bg);
  backdrop-filter: blur(var(--bh-space-2xl-14));
}

.icons-topbar h2 {
  font-size: var(--bh-text-heading-md-semibold-font-size);
  line-height: 1.15;
  font-weight: var(--bh-font-weight-bold);
}

.icons-topbar code {
  color: var(--icons-brand-dark);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

.icons-tabs {
  display: inline-flex;
  align-items: center;
  gap: var(--bh-space-xs-4);
  padding: var(--bh-space-xs-4);
  border: var(--bh-space-xxxs-1) solid var(--icons-border);
  border-radius: var(--icons-radius);
  background: var(--bh-bg-raised);
}

.icons-tab {
  min-height: var(--bh-space-6xl-32);
  border: 0;
  border-radius: var(--bh-radius-md-6);
  padding: 0 calc(var(--bh-space-lg-10) + var(--bh-space-xxxs-1));
  background: transparent;
  color: var(--icons-muted);
  font-size: var(--bh-text-body-xs-regular-font-size);
  font-weight: var(--bh-font-weight-bold);
}

.icons-tab.is-active {
  background: var(--icons-text);
  color: var(--bh-content-on-brand);
}

.icons-content {
  max-width: var(--bh-icon-explorer-canvas-max-width);
  margin: 0 auto;
  padding: var(--bh-space-5xl-24) calc(var(--bh-space-5xl-24) + var(--bh-space-xxs-2)) var(--bh-space-8xl-48);
  display: grid;
  gap: calc(var(--bh-space-4xl-20) + var(--bh-space-xxs-2));
}

.icons-panel,
.icons-compare-card {
  background: var(--icons-surface);
  border: var(--bh-space-xxxs-1) solid var(--icons-border);
  border-radius: var(--icons-radius);
  box-shadow: var(--icons-shadow);
}

.icons-summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(var(--bh-icon-explorer-preview-column), 0.75fr);
  gap: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6));
}

.icons-hero-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6));
  align-items: center;
  padding: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6));
}

.icons-hero-glyph {
  width: var(--bh-icon-explorer-detail-preview-size);
  height: var(--bh-icon-explorer-detail-preview-size);
  border-radius: var(--icons-radius);
  display: grid;
  place-items: center;
  color: var(--icons-brand-dark);
  background: var(--icons-brand-soft);
  border: var(--bh-space-xxxs-1) solid var(--bh-border-brand-subtle);
}

.icons-hero-copy {
  min-width: 0;
  display: grid;
  gap: var(--bh-space-lg-10);
}

.icons-hero-copy h3 {
  font-size: var(--bh-text-heading-lg-semibold-font-size);
  line-height: 1.05;
  font-weight: var(--bh-font-weight-bold);
}

.icons-hero-copy p {
  max-width: var(--bh-icon-explorer-detail-max-width);
  color: var(--icons-muted);
  font-size: var(--bh-text-body-sm-regular-font-size);
  line-height: 1.55;
}

.icons-tags,
.icons-links,
.icons-variants,
.icons-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bh-space-md-8);
}

.icons-tag {
  min-height: calc(var(--bh-space-5xl-24) + var(--bh-space-xxs-2));
  border-radius: var(--bh-radius-full);
  display: inline-flex;
  align-items: center;
  border: var(--bh-space-xxxs-1) solid var(--icons-border);
  background: var(--bh-bg-subtle);
  color: var(--icons-text);
  padding: 0 calc(var(--bh-space-md-8) + var(--bh-space-xxxs-1));
  font-size: var(--bh-text-body-2xs-regular-font-size);
  font-weight: var(--bh-font-weight-bold);
}

.icons-tag.is-warm {
  background: var(--icons-warm-soft);
  border-color: var(--bh-border-warning-subtle);
  color: var(--bh-content-warning-strong);
}

.icons-links a {
  color: var(--icons-brand-dark);
  text-decoration: none;
  font-size: var(--bh-text-body-2xs-regular-font-size);
  font-weight: var(--bh-font-weight-bold);
}

.icons-links a:hover {
  text-decoration: underline;
}

.icons-panel__header {
  padding: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6)) calc(var(--bh-space-xl-12) + var(--bh-space-sm-6)) 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--bh-space-xl-12);
}

.icons-panel__header h3 {
  font-size: var(--bh-text-body-md-font-size);
  line-height: 1.2;
  font-weight: var(--bh-font-weight-bold);
}

.icons-score-list,
.icons-controls {
  display: grid;
  gap: var(--bh-space-xl-12);
  padding: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6));
}

.icons-score {
  display: grid;
  gap: var(--bh-space-sm-6);
}

.icons-score span {
  display: flex;
  justify-content: space-between;
  gap: var(--bh-space-xl-12);
  color: var(--icons-text);
  font-size: var(--bh-text-body-2xs-regular-font-size);
  font-style: normal;
}

.icons-score em {
  color: var(--icons-muted);
  font-style: normal;
}

.icons-score div {
  height: var(--bh-space-md-8);
  overflow: hidden;
  border-radius: var(--bh-radius-full);
  background: var(--bh-bg-muted);
}

.icons-score i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--icons-brand);
}

.icons-variants {
  padding: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6));
}

.icons-variant {
  min-height: var(--bh-space-6xl-32);
  border: var(--bh-space-xxxs-1) solid var(--icons-border);
  border-radius: var(--bh-radius-full);
  background: var(--bh-bg-raised);
  color: var(--icons-text);
  padding: 0 var(--bh-space-xl-12);
  font-size: var(--bh-text-body-2xs-regular-font-size);
  font-weight: var(--bh-font-weight-bold);
}

.icons-variant.is-active {
  border-color: var(--icons-brand);
  background: var(--icons-brand);
  color: var(--bh-content-on-brand);
}

.icons-sample-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(var(--bh-icon-explorer-grid-column-min), 1fr));
  gap: var(--bh-space-lg-10);
  padding: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6));
}

.icons-sample {
  min-height: calc(var(--bh-space-9xl-64) + var(--bh-space-xl-12));
  border: var(--bh-space-xxxs-1) solid var(--icons-border);
  border-radius: var(--icons-radius);
  background: var(--icons-surface-soft);
  color: var(--icons-text);
  display: grid;
  place-items: center;
  gap: var(--bh-space-md-8);
  padding: var(--bh-space-lg-10) var(--bh-space-sm-6);
}

.icons-sample span {
  max-width: 100%;
  color: var(--icons-muted);
  font-size: var(--bh-text-body-3xs-regular-font-size);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icons-component-grid {
  display: grid;
  grid-template-columns: minmax(var(--bh-icon-explorer-preview-column), 0.9fr) minmax(0, 1.1fr);
  gap: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6));
}

.icons-controls label {
  min-height: var(--bh-space-8xl-48);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bh-space-xl-12);
  border: var(--bh-space-xxxs-1) solid var(--icons-border);
  border-radius: var(--icons-radius);
  background: var(--icons-surface-soft);
  padding: var(--bh-space-lg-10) var(--bh-space-xl-12);
}

.icons-controls span {
  color: var(--icons-text);
  font-size: var(--bh-text-body-xs-regular-font-size);
  font-weight: var(--bh-font-weight-bold);
}

.icons-controls input[type="range"] {
  width: var(--bh-icon-explorer-swatch-width);
  accent-color: var(--icons-brand);
}

.icons-preview {
  display: grid;
  gap: var(--bh-space-2xl-14);
  padding: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6));
}

.preview-button {
  min-height: var(--bh-space-7xl-40);
  border: var(--bh-space-xxxs-1) solid var(--icons-border);
  border-radius: var(--icons-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bh-space-md-8);
  background: var(--bh-bg-raised);
  color: var(--icons-text);
  padding: 0 calc(var(--bh-space-xl-12) + var(--bh-space-xxxs-1));
  font-size: var(--bh-text-body-xs-regular-font-size);
  font-weight: var(--bh-font-weight-bold);
}

.preview-button.is-primary {
  border-color: var(--icons-text);
  background: var(--icons-text);
  color: var(--bh-content-on-brand);
}

.preview-button.is-danger {
  border-color: var(--bh-border-danger-subtle);
  background: var(--bh-bg-danger-subtle);
  color: var(--icons-danger);
}

.preview-button.is-icon-only {
  width: var(--bh-space-7xl-40);
  padding: 0;
}

.icons-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--bh-icon-explorer-drawer-column);
  gap: var(--bh-space-lg-10);
}

.icons-field {
  height: calc(var(--bh-space-7xl-40) + var(--bh-space-xxs-2));
  border: var(--bh-space-xxxs-1) solid var(--icons-border);
  border-radius: var(--icons-radius);
  display: flex;
  align-items: center;
  gap: var(--bh-space-md-8);
  background: var(--bh-bg-raised);
  color: var(--icons-muted);
  padding: 0 var(--bh-space-xl-12);
  font-size: var(--bh-text-body-xs-regular-font-size);
}

.icons-field.is-select {
  justify-content: space-between;
}

.icons-field.is-select span {
  display: inline-flex;
  align-items: center;
  gap: var(--bh-space-md-8);
  min-width: 0;
}

.icons-menu-preview,
.icons-table-preview,
.icons-empty-preview {
  border: var(--bh-space-xxxs-1) solid var(--icons-border);
  border-radius: var(--icons-radius);
  background: var(--bh-bg-raised);
  overflow: hidden;
}

.icons-menu-row,
.icons-table-row {
  display: grid;
  align-items: center;
  gap: var(--bh-space-lg-10);
  min-height: calc(var(--bh-space-7xl-40) + var(--bh-space-xxs-2));
  border-bottom: var(--bh-space-xxxs-1) solid var(--icons-border);
  color: var(--icons-text);
  padding: 0 var(--bh-space-xl-12);
  font-size: var(--bh-text-body-xs-regular-font-size);
}

.icons-menu-row:last-child,
.icons-table-row:last-child {
  border-bottom: 0;
}

.icons-menu-row {
  grid-template-columns: var(--bh-icon-explorer-row-icon-column) minmax(0, 1fr) auto;
}

.icons-menu-row em {
  min-height: calc(var(--bh-space-4xl-20) + var(--bh-space-xxs-2));
  border-radius: var(--bh-radius-full);
  display: inline-flex;
  align-items: center;
  gap: var(--bh-space-xs-4);
  background: var(--bh-bg-success-subtle);
  color: var(--bh-content-success-strong);
  padding: 0 var(--bh-space-md-8);
  font-size: var(--bh-text-body-3xs-regular-font-size);
  font-style: normal;
  font-weight: var(--bh-font-weight-bold);
}

.icons-menu-row small {
  color: var(--icons-muted);
  font-size: var(--bh-text-body-2xs-regular-font-size);
}

.icons-table-row {
  grid-template-columns: var(--bh-icon-explorer-list-column) 1.1fr 0.8fr 0.8fr auto;
}

.icons-empty-preview {
  min-height: var(--bh-icon-explorer-selected-min-height);
  display: grid;
  place-items: center;
  padding: var(--bh-space-5xl-24);
  text-align: center;
}

.icons-empty-preview > div {
  max-width: var(--bh-icon-explorer-request-max-width);
  display: grid;
  place-items: center;
  gap: var(--bh-space-lg-10);
}

.icons-empty-preview span {
  width: calc(var(--bh-space-8xl-48) + var(--bh-space-sm-6));
  height: calc(var(--bh-space-8xl-48) + var(--bh-space-sm-6));
  display: grid;
  place-items: center;
  border-radius: var(--icons-radius);
  background: var(--bh-bg-brand-subtle);
  color: var(--icons-brand-dark);
}

.icons-empty-preview h3 {
  font-size: var(--bh-text-body-md-font-size);
  line-height: 1.2;
}

.icons-empty-preview p {
  color: var(--icons-muted);
  font-size: var(--bh-text-body-xs-regular-font-size);
  line-height: 1.45;
}

.icons-catalog-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--bh-icon-explorer-group-column) auto;
  gap: var(--bh-space-lg-10);
  align-items: center;
  padding: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6));
}

.icons-error {
  border: var(--bh-space-xxxs-1) solid var(--bh-border-danger-subtle);
  border-radius: var(--icons-radius);
  background: var(--bh-bg-danger-subtle);
  color: var(--icons-danger);
  padding: var(--bh-space-2xl-14);
  font-size: var(--bh-text-body-xs-regular-font-size);
}

.icons-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--bh-icon-explorer-grid-card-min), 1fr));
  gap: var(--bh-space-lg-10);
}

.icons-catalog-card {
  min-height: var(--bh-icon-explorer-grid-card-min-height);
  border: var(--bh-space-xxxs-1) solid var(--icons-border);
  border-radius: var(--icons-radius);
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  gap: var(--bh-space-md-8);
  background: var(--bh-bg-raised);
  color: var(--icons-text);
  padding: var(--bh-space-xl-12) var(--bh-space-md-8) var(--bh-space-lg-10);
  text-align: center;
}

.icons-catalog-card span {
  max-width: 100%;
  color: var(--icons-muted);
  font-size: var(--bh-text-body-3xs-regular-font-size);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icons-load-more {
  justify-self: center;
}

.icons-compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--bh-icon-explorer-family-card-min), 1fr));
  gap: var(--bh-space-xl-12);
}

.icons-compare-card {
  display: grid;
  gap: var(--bh-space-xl-12);
  padding: var(--bh-space-2xl-14);
}

.icons-compare-card > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bh-space-lg-10);
}

.icons-compare-card strong {
  font-size: var(--bh-text-body-xs-regular-font-size);
}

.icons-compare-icons {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--bh-space-md-8);
}

.icons-compare-icons span {
  width: calc(var(--bh-space-6xl-32) + var(--bh-space-xs-4));
  height: calc(var(--bh-space-6xl-32) + var(--bh-space-xs-4));
  border: var(--bh-space-xxxs-1) solid var(--icons-border);
  border-radius: var(--bh-radius-md-6);
  display: grid;
  place-items: center;
  background: var(--icons-surface-soft);
  color: var(--icons-text);
}

/* Approved exception: media query breakpoints stay literal because CSS vars are not reliable in query conditions. */
@media (max-width: 980px) {
  .icons-page {
    grid-template-columns: 1fr;
  }

  .icons-sidebar {
    position: relative;
    height: auto;
    border-right: 0;
    border-bottom: var(--bh-space-xxxs-1) solid var(--icons-border);
  }

  .icons-pack-list {
    grid-template-columns: repeat(auto-fill, minmax(var(--bh-icon-explorer-mobile-card-min), 1fr));
  }

  .icons-topbar,
  .icons-summary-grid,
  .icons-component-grid,
  .icons-field-row,
  .icons-catalog-tools {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .icons-topbar,
  .icons-content,
  .icons-sidebar {
    padding-left: var(--bh-space-3xl-16);
    padding-right: var(--bh-space-3xl-16);
  }

  .icons-sample-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .icons-table-row {
    grid-template-columns: var(--bh-icon-explorer-list-column) minmax(0, 1fr) auto;
  }

  .icons-table-row > span {
    display: none;
  }
}
