/* Iconoplasm – gene persona browser
   All colors reference Quartz CSS variables for automatic light/dark theming. */

/* ───────── Root container ───────── */
#iconoplasm-root {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1rem 2rem;
  overflow-anchor: none;
  font-family: "Special Elite", Georgia, serif;
}

#iconoplasm-root,
.icono-request-dialog,
.icono-image-edit-dialog {
  --icono-image-tile-width: 384px;
  --icono-image-tile-gutter: 16px;
  --icono-reject: oklch(56% 0.16 28);
  /* Source: C:\Users\Admin\.codex\skills\frontend-design\SKILL.md
     (Layout & Space, Visual Details, Motion) +
     C:\Users\Admin\.codex\skills\polish\SKILL.md
     (Visual Alignment & Spacing, Icons & Images, Micro-interactions & Transitions) +
     C:\Users\Admin\.codex\skills\optimize\SKILL.md (Smooth 60fps).
     These shared tokens keep Iconoplasm's nested surfaces concentric, portraits legible,
     and transitions interruptible. Reverting them tends to reintroduce pale edges, mismatched
     radii, and sticky-feeling motion. */
  --icono-radius-xl: 10px;
  --icono-radius-lg: 6px;
  --icono-radius-md: 4px;
  --icono-radius-sm: 3px;
  --icono-radius-pill: 999px;
  --icono-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --icono-ring-soft: color-mix(in srgb, var(--dark) 10%, transparent);
  --icono-ring-image: color-mix(in srgb, var(--light) 72%, var(--dark) 12%);
  --icono-action-font: "IBM Plex Mono", monospace;
  --icono-action-height: 2.55rem;
  --icono-action-padding: 0.56rem 0.92rem;
  --icono-action-font-size: 0.82rem;
  --icono-action-border: color-mix(in srgb, var(--ui-border) 78%, var(--dark) 22%);
  --icono-action-border-hover: color-mix(in srgb, var(--accent) 36%, var(--ui-border) 64%);
  --icono-action-secondary-bg: color-mix(in srgb, var(--ui-bg) 82%, var(--light) 18%);
  --icono-action-secondary-bg-hover: color-mix(in srgb, var(--ui-bg) 70%, var(--light) 30%);
  --icono-action-primary-bg: color-mix(in srgb, oklch(24% 0.035 50) 88%, var(--accent) 12%);
  --icono-action-primary-bg-hover: color-mix(in srgb, oklch(31% 0.04 50) 84%, var(--accent) 16%);
  --icono-action-primary-text: oklch(96% 0.015 75);
}

body[data-slug^="apps/iconoplasm"] .page-header,
body[data-slug^="apps/iconoplasm"] .page-footer,
body[data-slug^="apps/iconoplasm"] hr {
  display: none;
}

body[data-slug^="apps/iconoplasm"] .center > article.iconoplasm-page {
  margin-top: 0;
}

/* B-457: the iconoplasm subdomain is the entire product surface, so we reclaim
   the sidebars from Quartz's default 320px allocation while keeping the
   product sidebar usable. The left sidebar stays for cross-site navigation and
   the right sidebar stays wide enough for Iconoplasm status/actions instead of
   collapsing into a 64px sliver. The override starts at 1024px to also catch
   Quartz's tablet grid (800-1200px), which is two columns and was leaving the
   gene browser at the default 320px sidebar + auto column. */
@media (min-width: 1024px) {
  body[data-slug^="apps/iconoplasm"] #quartz-body {
    grid-template-columns: 240px minmax(0, 1fr) minmax(220px, 250px) !important;
    grid-template-rows: auto auto auto !important;
    grid-template-areas:
      "grid-sidebar-left grid-header grid-sidebar-right"
      "grid-sidebar-left grid-center grid-sidebar-right"
      "grid-sidebar-left grid-footer grid-sidebar-right";
  }
  body[data-slug^="apps/iconoplasm"] #quartz-body > .sidebar.right {
    width: auto;
    height: auto;
    flex-direction: column;
    padding: 4rem 2rem 2rem;
  }
}
/* B-457: on phones the Quartz mobile grid's `auto` track was sizing to the
   widest min-content child inside the gene page (typically the lab specimen
   table), which produced a track wider than the viewport and caused horizontal
   scroll. Pin the single-column track to `minmax(0, 1fr)` on iconoplasm pages
   so the column always fits the viewport and the children clip themselves.
   Also hide the Quartz left sidebar on phones — the iconoplasm subdomain is
   self-contained and the sidebar's dark-mode/reader-mode toggles were the last
   source of horizontal overflow. */
@media (max-width: 800px) {
  body[data-slug^="apps/iconoplasm"] #quartz-body {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body[data-slug^="apps/iconoplasm"] #quartz-body > .sidebar.left {
    display: none !important;
  }
}
@media (max-width: 720px) {
  body[data-slug^="apps/iconoplasm"] #iconoplasm-root {
    padding-inline: 0;
  }
  body[data-slug^="apps/iconoplasm"] .icono-gene-lead {
    align-items: center;
  }
}
body[data-slug^="apps/iconoplasm"] #iconoplasm-root {
  max-width: 1180px;
}

/* Hide Quartz article siblings (HR, footer, etc.) until SPA content loads
   to prevent brief flashes of chrome below empty root */
#iconoplasm-root:empty ~ * {
  visibility: hidden;
}

/* ───────── Hero ───────── */
.icono-hero {
  text-align: center;
  padding: 0.35rem 0 1.5rem;
}

.icono-hero-title {
  display: inline-block;
  font-family: "League Spartan", "Bahnschrift", "Arial Narrow", sans-serif;
  font-size: clamp(2.85rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin: 0;
  color: color-mix(in oklch, var(--dark) 88%, var(--accent) 12%);
  text-wrap: balance;
}

.icono-hero .tagline {
  font-family: "Special Elite", Georgia, serif;
  font-size: 1.1rem;
  line-height: 1.28;
  letter-spacing: 0;
  color: var(--secondary, var(--darkgray));
  margin: 0.4rem 0 0;
  text-wrap: pretty;
}

.icono-hero .stat {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0.25rem 0.75rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: var(--darkgray);
  border: 1px solid var(--ui-border);
  border-radius: var(--icono-radius-sm);
  background: var(--ui-bg);
}

.icono-hero .stat[hidden] {
  display: none;
}

.icono-home-auth {
  margin: 0 auto 1rem;
}

.icono-home-auth-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid color-mix(in srgb, var(--ui-border) 86%, var(--dark) 14%);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--light) 94%, #efe6d7 6%) 0%,
    color-mix(in srgb, var(--light) 98%, #e7dccc 2%) 100%
  );
  box-shadow: 0 8px 20px rgba(27, 18, 11, 0.04);
}

.icono-home-auth-copy {
  display: grid;
  gap: 0.16rem;
  min-width: 0;
}

.icono-home-auth-kicker {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--secondary, var(--darkgray));
}

.icono-home-auth-title {
  font-size: 1rem;
  line-height: 1.1;
  color: var(--dark);
}

.icono-home-auth-note {
  font-size: 0.86rem;
  line-height: 1.28;
  color: var(--secondary, var(--darkgray));
  text-wrap: pretty;
}

.icono-home-auth-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.7rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--dark) 18%, var(--ui-border) 82%);
  background: color-mix(in srgb, var(--light) 80%, white 20%);
  color: var(--dark);
  text-decoration: none;
  white-space: nowrap;
}

.icono-home-auth-link:hover {
  background: color-mix(in srgb, var(--light) 68%, white 32%);
}

.icono-card.icono-guest-login-card {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 0.75rem;
  padding: 1.05rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--ui-border) 82%, var(--dark) 18%);
  border-radius: var(--icono-radius-lg);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--light) 95%, #e9dfcf 5%) 0%,
    color-mix(in srgb, var(--light) 98%, #d9cbb8 2%) 100%
  );
  box-shadow:
    0 0 0 1px color-mix(in srgb, white 60%, transparent),
    0 10px 24px rgba(45, 33, 20, 0.08);
}

.icono-grid[data-layout="masonry"] .icono-guest-login-card {
  width: calc(50% - 8px);
  box-sizing: border-box;
}

.icono-grid[data-layout="image-only-masonry"] {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, var(--icono-image-tile-width)), var(--icono-image-tile-width))
  );
  gap: var(--icono-image-tile-gutter);
  justify-content: center;
  align-items: start;
  margin-inline: auto;
}

.icono-grid[data-layout="image-only-masonry"] .icono-card--image-tile,
.icono-grid[data-layout="image-only-masonry"] .icono-guest-login-card {
  width: min(100%, var(--icono-image-tile-width));
  box-sizing: border-box;
}

.icono-grid[data-layout="image-only-masonry"] .icono-grid-sizer,
.icono-grid[data-layout="image-only-masonry"] .icono-gutter-sizer {
  display: none;
}

.icono-grid[data-layout="image-only-masonry"] .icono-card--image-tile {
  margin-bottom: 0;
}

.icono-card--image-tile {
  margin-bottom: var(--icono-image-tile-gutter);
  color: var(--dark);
}

.icono-card--image-tile:hover {
  box-shadow: none;
}

.icono-guest-login-card-button {
  box-sizing: border-box;
  width: fit-content;
  min-width: 10.9rem;
  border-radius: var(--icono-radius-pill);
  min-height: 2.15rem;
  padding: 0.32rem 0.9rem;
  border-color: color-mix(in srgb, var(--dark) 72%, var(--accent) 28%);
  background: color-mix(in srgb, var(--dark) 88%, var(--accent) 12%);
  color: var(--light);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.05;
}

.icono-guest-login-card-title {
  max-width: 24ch;
  font-family: "IBM Plex Mono", monospace;
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: 0;
}

.icono-guest-login-card-button:hover {
  background: color-mix(in srgb, var(--dark) 78%, var(--accent) 22%);
  color: var(--light);
}

.icono-vote-login-overlay {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  color-scheme: light;
  --light: oklch(96% 0.015 75);
  --dark: oklch(20% 0.035 50);
  --secondary: oklch(40% 0.04 55);
  --ui-border: oklch(82% 0.02 70);
  --ui-bg: oklch(92% 0.01 75);
}

.icono-vote-login-overlay,
.icono-vote-login-overlay * {
  box-sizing: border-box;
}

.icono-vote-login-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: color-mix(in srgb, var(--dark) 78%, transparent);
  cursor: default;
}

.icono-vote-login-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1rem;
  width: min(28rem, 100%);
  max-height: calc(100dvh - 3rem);
  overflow-y: auto;
  padding: 1.5rem;
  border: 1px solid var(--ui-border);
  border-radius: 16px;
  background: var(--light);
  color: var(--dark);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
}

.icono-vote-login-copy {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}

.icono-vote-login-title,
.icono-vote-login-note,
.icono-vote-login-link {
  font-family: "IBM Plex Mono", monospace;
}

.icono-vote-login-title {
  max-width: 22ch;
  font-size: 1.1rem;
  font-weight: 650;
  line-height: 1.2;
}

.icono-vote-login-note {
  max-width: 42ch;
  font-size: 0.9rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--dark) 70%, var(--secondary, var(--darkgray)) 30%);
}

.icono-vote-login-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  max-width: 100%;
  min-height: 2.4rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--dark) 20%, var(--ui-border) 80%);
  border-radius: var(--icono-radius-pill);
  background: var(--dark);
  color: var(--light);
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  text-align: center;
  overflow-wrap: anywhere;
}

.icono-vote-login-link:hover {
  background: color-mix(in srgb, var(--dark) 88%, var(--accent) 12%);
}

.icono-vote-login-close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.82rem;
  text-decoration: underline;
  cursor: pointer;
}

.icono-modal-locked {
  overflow: hidden;
}

/* ───────── Search ───────── */
.icono-search {
  max-width: 480px;
  margin: 0 auto 1.5rem;
}

.icono-search--toolbar {
  max-width: none;
  margin: 0;
  flex: 1 1 30rem;
}

.icono-search-input {
  width: 100%;
  min-height: 2.9rem;
  padding: 0.72rem 0.95rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: 1rem;
  color: var(--dark);
  background: var(--light);
  border: 1px solid var(--ui-border);
  border-radius: var(--icono-radius-sm);
  outline: none;
  transition:
    border-color 0.16s var(--icono-ease-out),
    box-shadow 0.18s var(--icono-ease-out),
    background-color 0.16s var(--icono-ease-out);
  box-sizing: border-box;
}

.icono-search-input::placeholder {
  color: var(--gray);
}

.icono-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

/* Live search dropdown */
.icono-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--light);
  border: 1px solid var(--ui-border);
  border-top: none;
  border-radius: 0 0 var(--icono-radius-sm) var(--icono-radius-sm);
  max-height: 320px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.icono-search-results:empty {
  display: none;
}

.icono-search-result {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  text-decoration: none;
  color: var(--dark);
  transition: background 0.12s ease;
}

.icono-search-result:hover,
.icono-search-result.active {
  background: var(--ui-bg);
}

.icono-search-result-media {
  width: 48px;
  height: 64px;
  border-radius: 10px;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: color-mix(in srgb, var(--ui-bg) 86%, white 14%);
}

.icono-search-result-media--portrait {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.icono-search-result-media--fallback {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  align-self: center;
}

.icono-search-result-portrait {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  object-position: center center;
}

.icono-search-result-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.icono-search-result-symbol {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  font-size: 0.9rem;
}

.icono-search-result-name {
  display: block;
  font-size: 0.85rem;
  color: var(--secondary, var(--darkgray));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icono-search-wrapper {
  position: relative;
}

.icono-gene-request-surface {
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.icono-canonical-toolbar-shell {
  display: block;
}

/* Canonical is the candidate toolbar's expanded sibling: same compact action
   grammar, with the larger request picker moved into a dialog behind New candidate. */
.icono-gene-toolbar-rail {
  display: grid;
  grid-template-columns: max-content minmax(11rem, 1fr);
  align-items: center;
  gap: 0.55rem;
  padding: 0.52rem 0.62rem;
  margin-top: 0.75rem;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  border: 1px solid color-mix(in srgb, var(--ui-border) 84%, var(--dark) 16%);
  border-radius: var(--icono-radius-lg);
  background: color-mix(in srgb, var(--light) 96%, white 4%);
  box-shadow: 0 6px 18px rgba(27, 18, 11, 0.04);
}

.icono-gene-toolbar-rail::-webkit-scrollbar {
  display: none;
}

.icono-gene-toolbar-rail > .icono-gene-request-surface {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.icono-gene-toolbar-rail > .icono-gene-edit-panel {
  width: max-content;
}

.icono-gene-toolbar-rail > .icono-gene-request-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  min-width: 11rem;
  justify-self: stretch;
}

.icono-canonical-edit-btn {
  flex-basis: 2.35rem;
  width: 2.35rem;
  min-width: 2.35rem;
  height: 2.35rem;
  min-height: 2.35rem;
}

.icono-canonical-toolbar-meta {
  justify-self: start;
  flex: 1 1 auto;
}

.icono-canonical-toolbar-pair {
  max-width: none;
}

.icono-canonical-new-candidate-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  min-height: var(--icono-action-height);
  padding: var(--icono-action-padding);
  border: 1px solid var(--icono-action-border);
  border-radius: var(--icono-radius-pill);
  background: var(--icono-action-primary-bg);
  color: var(--icono-action-primary-text);
  cursor: pointer;
  font-family: var(--icono-action-font) !important;
  font-size: var(--icono-action-font-size);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition:
    transform 0.16s var(--icono-ease-out),
    border-color 0.16s var(--icono-ease-out),
    background-color 0.16s var(--icono-ease-out),
    color 0.16s var(--icono-ease-out);
}

.icono-canonical-new-candidate-btn svg {
  width: 1.02rem;
  height: 1.02rem;
  display: block;
}

.icono-canonical-new-candidate-btn:hover,
.icono-canonical-new-candidate-btn:focus-visible {
  border-color: var(--icono-action-border-hover);
  background: var(--icono-action-primary-bg-hover);
  transform: translateY(-1px);
}

.icono-request-shell {
  display: grid;
  gap: 1rem;
  width: 100%;
}

.icono-request-dialog {
  --width: min(68rem, calc(100vw - 2rem));
  --sl-font-sans: "IBM Plex Mono", monospace;
  --sl-focus-ring-color: color-mix(in srgb, var(--secondary) 42%, transparent);
  --sl-input-height-small: 2.5rem;
  --sl-input-border-radius-small: var(--icono-radius-sm);
  --sl-input-background-color: color-mix(in srgb, var(--light) 94%, var(--dark) 6%);
  --sl-input-background-color-hover: color-mix(in srgb, var(--light) 90%, var(--secondary) 10%);
  --sl-input-background-color-focus: color-mix(in srgb, var(--light) 92%, var(--secondary) 8%);
  --sl-input-border-color: color-mix(in srgb, var(--ui-border) 80%, var(--dark) 20%);
  --sl-input-border-color-hover: color-mix(in srgb, var(--secondary) 44%, var(--ui-border) 56%);
  --sl-input-border-color-focus: color-mix(in srgb, var(--secondary) 58%, var(--ui-border) 42%);
  --sl-input-color: var(--dark);
  --sl-input-placeholder-color: color-mix(in srgb, var(--dark) 46%, var(--light) 54%);
  --sl-input-label-color: color-mix(in srgb, var(--dark) 82%, var(--secondary) 18%);
  --sl-panel-background-color: var(--light);
  --sl-color-neutral-0: var(--light);
  --sl-color-neutral-50: color-mix(in srgb, var(--light) 94%, var(--dark) 6%);
  --sl-color-neutral-100: color-mix(in srgb, var(--light) 88%, var(--dark) 12%);
  --sl-color-neutral-200: color-mix(in srgb, var(--ui-border) 88%, var(--dark) 12%);
  --sl-color-neutral-700: color-mix(in srgb, var(--dark) 72%, var(--light) 28%);
  --sl-color-neutral-900: var(--dark);
  color: var(--dark);
}

.icono-request-dialog::part(overlay) {
  background: color-mix(in srgb, rgba(27, 18, 11, 0.5) 88%, transparent 12%);
  backdrop-filter: blur(8px);
}

.icono-request-dialog::part(panel) {
  max-height: min(48rem, calc(100vh - 2rem));
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--ui-border) 82%, var(--dark) 18%);
  border-radius: var(--icono-radius-lg);
  background: color-mix(in srgb, var(--light) 98%, white 2%);
  box-shadow: 0 24px 48px rgba(27, 18, 11, 0.18);
}

.icono-request-dialog::part(header) {
  border-bottom: 1px solid color-mix(in srgb, var(--ui-border) 74%, transparent);
}

.icono-request-dialog::part(title) {
  font-family: "Special Elite", Georgia, serif;
  font-size: 1.15rem;
  color: var(--dark);
}

.icono-request-dialog::part(body) {
  overflow: auto;
  padding: 1rem 1.2rem 1.2rem;
}

.icono-request-provider-field {
  display: grid;
  gap: 0.34rem;
  min-width: 0;
}

.icono-request-provider-field span {
  color: var(--dark);
  font-family: "Special Elite", Georgia, serif;
  font-size: 0.92rem;
  line-height: 1.1;
}

.icono-request-provider-select {
  width: min(24rem, 100%);
  min-height: 2.5rem;
  min-width: 0;
  padding: 0 2.2rem 0 0.7rem;
  border: 1px solid color-mix(in srgb, var(--ui-border) 80%, var(--dark) 20%);
  border-radius: var(--icono-radius-sm);
  background-color: color-mix(in srgb, var(--light) 94%, var(--dark) 6%);
  color: var(--dark);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.84rem;
  line-height: 1.2;
}

.icono-request-dialog-shell {
  display: grid;
  gap: 0.85rem;
}

.icono-image-edit-dialog {
  --width: min(68rem, calc(100vw - 2rem));
  --sl-font-sans: "IBM Plex Mono", monospace;
  --sl-focus-ring-color: color-mix(in srgb, var(--secondary) 42%, transparent);
  --sl-input-height-medium: 2.55rem;
  --sl-input-height-small: 2.25rem;
  --sl-input-border-radius-medium: 7px;
  --sl-input-border-radius-small: 7px;
  --sl-input-background-color: color-mix(in srgb, var(--light) 92%, var(--dark) 8%);
  --sl-input-background-color-hover: color-mix(in srgb, var(--light) 88%, var(--secondary) 12%);
  --sl-input-background-color-focus: color-mix(in srgb, var(--light) 90%, var(--secondary) 10%);
  --sl-input-border-color: color-mix(in srgb, var(--ui-border) 80%, var(--dark) 20%);
  --sl-input-border-color-hover: color-mix(in srgb, var(--secondary) 46%, var(--ui-border) 54%);
  --sl-input-border-color-focus: color-mix(in srgb, var(--secondary) 60%, var(--ui-border) 40%);
  --sl-input-color: var(--dark);
  --sl-input-placeholder-color: color-mix(in srgb, var(--dark) 46%, var(--light) 54%);
  --sl-input-label-color: color-mix(in srgb, var(--dark) 82%, var(--secondary) 18%);
  --sl-panel-background-color: var(--light);
  --sl-color-primary-600: color-mix(in srgb, var(--secondary) 84%, var(--dark) 16%);
  --sl-color-primary-700: color-mix(in srgb, var(--secondary) 70%, var(--dark) 30%);
  --sl-color-neutral-0: var(--light);
  --sl-color-neutral-50: color-mix(in srgb, var(--light) 94%, var(--dark) 6%);
  --sl-color-neutral-100: color-mix(in srgb, var(--light) 88%, var(--dark) 12%);
  --sl-color-neutral-200: color-mix(in srgb, var(--ui-border) 88%, var(--dark) 12%);
  --sl-color-neutral-700: color-mix(in srgb, var(--dark) 72%, var(--light) 28%);
  --sl-color-neutral-900: var(--dark);
  color: var(--dark);
}

.icono-image-edit-dialog::part(overlay) {
  background: color-mix(in srgb, rgba(27, 18, 11, 0.62) 88%, transparent 12%);
  backdrop-filter: blur(10px);
}

.icono-image-edit-dialog::part(panel) {
  max-height: min(48rem, calc(100vh - 2rem));
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ui-border) 72%, var(--dark) 28%);
  border-radius: var(--icono-radius-lg);
  background: var(--light);
  box-shadow: 0 24px 72px rgba(27, 18, 11, 0.3);
}

.icono-image-edit-dialog::part(header) {
  align-items: center;
  padding: 1rem 1.1rem 0.7rem;
  border-bottom: 1px solid color-mix(in srgb, var(--ui-border) 72%, transparent 28%);
}

.icono-image-edit-dialog::part(title) {
  font-family: "League Spartan", "Bahnschrift", "Arial Narrow", sans-serif;
  font-size: clamp(1.18rem, 2vw, 1.55rem);
  line-height: 1.1;
  color: var(--dark);
}

.icono-image-edit-dialog::part(close-button) {
  color: color-mix(in srgb, var(--dark) 74%, var(--secondary) 26%);
}

.icono-image-edit-dialog::part(body) {
  padding: 0;
  overflow: auto;
}

.icono-image-edit-dialog::part(footer) {
  padding: 0.8rem 1.1rem 1rem;
  border-top: 1px solid color-mix(in srgb, var(--ui-border) 72%, transparent 28%);
  background: color-mix(in srgb, var(--light) 94%, var(--dark) 6%);
}

.icono-image-edit-shell {
  display: grid;
  gap: 0.85rem;
  padding: 0.95rem 1.1rem 1.1rem;
}

.icono-image-edit-status {
  width: auto;
  margin: -0.25rem 0 -0.1rem;
  padding: 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.82rem;
  line-height: 1.25;
  color: color-mix(in srgb, var(--dark) 64%, var(--secondary) 36%);
}

.icono-image-edit-status[hidden] {
  display: none;
}

.icono-image-edit-status[data-tone="error"] {
  margin: 0;
  padding: 0.48rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--icono-reject) 42%, var(--ui-border) 58%);
  border-radius: var(--icono-radius-sm);
  background: color-mix(in srgb, var(--icono-reject) 8%, var(--light) 92%);
  color: color-mix(in srgb, var(--icono-reject) 72%, var(--dark) 28%);
}

.icono-image-edit-body {
  display: grid;
  grid-template-columns: minmax(18rem, 0.95fr) minmax(22rem, 1.05fr);
  gap: 1rem;
  align-items: start;
}

.icono-image-edit-preview,
.icono-image-edit-controls {
  min-width: 0;
}

.icono-image-edit-artboard {
  display: block;
  width: min(var(--icono-image-tile-width), 100%);
  aspect-ratio: var(--icono-image-edit-aspect-ratio, 4 / 5);
  overflow: hidden;
}

.icono-image-edit-artboard > img,
.icono-image-edit-before-after img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--icono-radius-sm);
}

.icono-image-edit-artboard[hidden],
.icono-image-edit-before-after[hidden] {
  display: none;
}

.icono-image-edit-before-after {
  display: block;
  width: min(var(--icono-image-tile-width), 100%);
  aspect-ratio: var(--icono-image-edit-aspect-ratio, 4 / 5);
  margin-top: 0.75rem;
}

img-comparison-slider {
  visibility: hidden;
}

img-comparison-slider [slot="second"] {
  display: none;
}

img-comparison-slider.rendered {
  visibility: inherit;
}

img-comparison-slider.rendered [slot="second"] {
  display: unset;
}

.icono-image-edit-comparison-labels {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--dark) 62%, var(--secondary) 38%);
}

.icono-image-edit-comparison {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: inherit;
  border: 1px solid color-mix(in srgb, var(--ui-border) 82%, var(--dark) 18%);
  border-radius: var(--icono-radius-sm);
  background: color-mix(in srgb, var(--dark) 8%, var(--light) 92%);
  overflow: hidden;
  --divider-color: color-mix(in srgb, var(--light) 70%, white 30%);
  --divider-width: 2px;
  --divider-shadow: 0 0 10px rgba(27, 18, 11, 0.35);
  --default-handle-color: color-mix(in srgb, var(--light) 82%, white 18%);
  --default-handle-shadow: 0 2px 8px rgba(27, 18, 11, 0.32);
}

.icono-image-edit-comparison img {
  border: 0;
  border-radius: 0;
}

.icono-image-edit-controls {
  display: grid;
  gap: 0.85rem;
}

.icono-image-edit-dialog sl-select,
.icono-image-edit-dialog sl-button,
.icono-image-edit-dialog sl-checkbox {
  font-family: var(--icono-action-font) !important;
}

.icono-image-edit-dialog sl-select::part(form-control-label),
.icono-image-edit-dialog sl-button::part(base),
.icono-image-edit-dialog sl-checkbox::part(label) {
  font-family: var(--icono-action-font) !important;
}

.icono-image-edit-dialog sl-select::part(combobox),
.icono-image-edit-dialog sl-select::part(display-input),
.icono-image-edit-dialog sl-option::part(label) {
  font-family: "Special Elite", Georgia, serif;
}

.icono-image-edit-adjustments {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--ui-border) 78%, var(--dark) 22%);
  border-radius: var(--icono-radius-md);
  background: color-mix(in srgb, var(--light) 98%, white 2%);
  overflow: hidden;
}

.icono-image-edit-adjustment-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  min-height: 2.35rem;
  padding: 0.48rem 0.6rem;
  border-bottom: 1px solid color-mix(in srgb, var(--ui-border) 66%, transparent 34%);
  background: transparent;
}

.icono-image-edit-adjustment-row:last-child {
  border-bottom: 0;
}

.icono-image-edit-adjustment-row sl-checkbox {
  max-width: none;
  min-width: max-content;
  overflow: visible;
}

.icono-image-edit-adjustment-row sl-checkbox::part(base) {
  min-width: max-content;
}

.icono-image-edit-adjustment-row sl-checkbox::part(label) {
  overflow: visible;
  color: color-mix(in srgb, var(--dark) 82%, var(--secondary) 18%);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.9rem;
  line-height: 1.1;
  text-overflow: clip;
  white-space: nowrap;
}

.icono-image-edit-adjustment-row--unavailable sl-checkbox::part(label),
.icono-image-edit-adjustment-row--unavailable .icono-image-edit-adjustment-value {
  color: color-mix(in srgb, var(--dark) 42%, var(--light) 58%);
}

.icono-image-edit-adjustment-value {
  justify-self: end;
  min-width: 0;
  max-width: 100%;
  color: color-mix(in srgb, var(--dark) 70%, var(--secondary) 30%);
  font-family: "Special Elite", Georgia, serif;
  font-size: 0.82rem;
  line-height: 1.1;
  overflow: hidden;
  overflow-wrap: normal;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icono-image-edit-adjustment-value--tone {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
}

.icono-image-edit-adjustment-value--tone::before {
  content: "";
  flex: 0 0 auto;
  width: 0.82rem;
  height: 0.82rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ui-border) 70%, var(--dark) 30%);
  background: var(--icono-context-color, transparent);
}

.icono-image-edit-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  width: 100%;
}

.icono-image-edit-action-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(11rem, 100%);
  min-height: var(--icono-action-height);
  padding: var(--icono-action-padding);
  border: 1px solid var(--icono-action-border);
  border-radius: var(--icono-radius-pill);
  background: var(--icono-action-secondary-bg);
  color: var(--dark);
  font-family: var(--icono-action-font) !important;
  font-size: var(--icono-action-font-size);
  font-weight: 600;
  line-height: 1;
  transition:
    transform 0.16s var(--icono-ease-out),
    border-color 0.16s var(--icono-ease-out),
    background-color 0.16s var(--icono-ease-out),
    color 0.16s var(--icono-ease-out),
    opacity 0.16s var(--icono-ease-out);
}

.icono-image-edit-action-button--primary {
  background: var(--icono-action-primary-bg);
  color: var(--icono-action-primary-text);
}

.icono-image-edit-action-button:not(:disabled):hover,
.icono-image-edit-action-button:not(:disabled):focus-visible {
  border-color: var(--icono-action-border-hover);
  background: var(--icono-action-secondary-bg-hover);
  transform: translateY(-1px);
}

.icono-image-edit-action-button--primary:not(:disabled):hover,
.icono-image-edit-action-button--primary:not(:disabled):focus-visible {
  background: var(--icono-action-primary-bg-hover);
}

.icono-image-edit-action-button:disabled {
  border-color: var(--icono-action-border);
  background: color-mix(in srgb, var(--ui-bg) 88%, var(--light) 12%);
  color: color-mix(in srgb, var(--dark) 42%, var(--light) 58%);
  cursor: not-allowed;
  opacity: 1;
}

.icono-image-edit-action-button[hidden] {
  display: none;
}

@media (max-width: 760px) {
  .icono-image-edit-dialog {
    width: calc(100vw - 1rem);
    --width: calc(100vw - 1rem);
  }

  .icono-image-edit-dialog::part(panel) {
    max-height: calc(100vh - 1rem);
  }

  .icono-image-edit-body,
  .icono-image-edit-before-after {
    grid-template-columns: 1fr;
  }

  .icono-image-edit-adjustment-row {
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.55rem;
    padding-inline: 0.52rem;
  }
}

.icono-request-actions {
  display: grid;
  gap: 0.75rem;
}

.icono-request-lanes {
  display: grid;
  gap: 0.75rem;
}

.icono-request-lane {
  display: grid;
  gap: 0.62rem;
  min-width: 0;
  padding: 0.72rem;
  border: 1px solid color-mix(in srgb, var(--ui-border) 82%, var(--dark) 18%);
  border-radius: var(--icono-radius-lg);
  background: color-mix(in srgb, var(--light) 96%, white 4%);
}

.icono-request-lane-title {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.74rem;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--dark) 66%, var(--secondary) 34%);
}

.icono-request-form {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 0.9rem;
  width: 100%;
}

/* Honor the HTML [hidden] attribute. Without this, `display: grid` above
   overrides the browser-default `[hidden] { display: none }` and the
   collapsed edit form leaves ~290px of dead air below the gene dossier
   on every gene page (B-457 audit #7). */
.icono-request-form[hidden] {
  display: none;
}

.icono-request-direct-panel {
  display: grid;
  gap: 0.85rem;
  width: 100%;
  padding-top: 0.05rem;
}

.icono-request-direct-panel[hidden] {
  display: none;
}

.icono-request-direct-controls {
  display: grid;
  gap: 0.65rem;
  min-width: 0;
  align-content: start;
}

.icono-request-direct-provider-row {
  display: grid;
  align-items: end;
}

.icono-request-direct-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}

.icono-request-direct-emulsion-picker {
  width: 100%;
}

.icono-request-direct-publish[hidden] {
  display: none;
}

.icono-request-direct-preview {
  display: grid;
  gap: 0.5rem;
  padding: 0.62rem;
  border: 1px solid color-mix(in srgb, var(--ui-border) 76%, transparent);
  border-radius: var(--icono-radius-lg);
  background: color-mix(in srgb, var(--ui-bg) 74%, var(--light) 26%);
}

.icono-request-direct-preview-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.75rem;
  align-items: baseline;
  font-size: 0.82rem;
  line-height: 1.35;
}

.icono-request-direct-preview-row span {
  color: var(--secondary, var(--darkgray));
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.icono-request-direct-preview-row strong {
  min-width: 0;
  color: var(--dark);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.icono-request-mode-field {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  margin: 0.1rem 0 0;
  padding: 0;
  border: 0;
}

.icono-request-mode-field legend {
  display: contents;
  color: var(--secondary, var(--darkgray));
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.icono-request-segmented {
  display: flex;
  width: min(14rem, 100%);
  min-width: 0;
  padding: 3px;
  border-radius: var(--icono-radius-lg);
  background: color-mix(in srgb, var(--ui-border) 34%, var(--light));
}

.icono-request-segment {
  position: relative;
  display: inline-flex;
  flex: 1 1 0;
  min-width: 0;
}

.icono-request-segment input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.icono-request-segment span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2rem;
  min-width: 0;
  padding: 0.45rem 0.5rem;
  border: 1px solid transparent;
  border-radius: calc(var(--icono-radius-lg) - 3px);
  background: transparent;
  color: color-mix(in srgb, var(--secondary) 64%, transparent);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}

.icono-request-segment input:checked + span {
  border-color: color-mix(in srgb, var(--ui-border) 58%, transparent);
  background: color-mix(in srgb, var(--light) 92%, white 8%);
  color: var(--dark);
  box-shadow: none;
}

.icono-request-segment input:focus-visible + span {
  outline: 2px solid color-mix(in srgb, var(--accent) 58%, transparent);
  outline-offset: 2px;
}

.icono-request-direct-status {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--secondary, var(--darkgray));
  font-family: "IBM Plex Mono", monospace;
}

.icono-request-direct-status[hidden] {
  display: none;
}

.icono-request-direct-status[data-tone="warn"] {
  color: color-mix(in srgb, var(--dark) 72%, var(--accent) 28%);
}

.icono-request-direct-generate,
.icono-request-direct-publish {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--icono-action-height);
  padding: var(--icono-action-padding);
  border: 1px solid var(--icono-action-border);
  border-radius: var(--icono-radius-pill);
  background: var(--icono-action-secondary-bg);
  color: var(--dark);
  font-family: var(--icono-action-font) !important;
  font-size: var(--icono-action-font-size);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform 0.16s var(--icono-ease-out),
    border-color 0.16s var(--icono-ease-out),
    background-color 0.16s var(--icono-ease-out),
    color 0.16s var(--icono-ease-out),
    opacity 0.16s var(--icono-ease-out);
}

.icono-request-direct-generate {
  background: var(--icono-action-primary-bg);
  color: var(--icono-action-primary-text);
}

.icono-request-direct-publish:hover,
.icono-request-direct-publish:focus-visible {
  border-color: var(--icono-action-border-hover);
  background: var(--icono-action-secondary-bg-hover);
  transform: translateY(-1px);
}

.icono-request-direct-generate:hover,
.icono-request-direct-generate:focus-visible {
  border-color: var(--icono-action-border-hover);
  background: var(--icono-action-primary-bg-hover);
  transform: translateY(-1px);
}

.icono-request-direct-generate:disabled,
.icono-request-direct-publish:disabled {
  border-color: var(--icono-action-border);
  background: transparent;
  color: color-mix(in srgb, var(--dark) 42%, var(--light) 58%);
  cursor: default;
  opacity: 1;
  transform: none;
}

.icono-request-direct-result {
  width: min(var(--icono-image-tile-width), 100%);
  min-height: 0;
  justify-self: center;
}

.icono-request-direct-result[hidden] {
  display: none;
}

.icono-request-direct-result img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--icono-radius-sm);
}

@media (min-width: 760px) {
  .icono-request-direct-controls {
    grid-template-columns:
      minmax(18rem, 1fr)
      max-content;
    grid-template-areas:
      "provider actions"
      "picker picker"
      "preview preview"
      "status status";
    align-items: start;
    column-gap: 1rem;
  }

  .icono-request-direct-provider-row {
    grid-area: provider;
  }

  .icono-request-direct-action-row {
    grid-area: actions;
    align-self: start;
    justify-self: start;
  }

  .icono-request-direct-emulsion-picker {
    grid-area: picker;
  }

  .icono-request-direct-preview {
    grid-area: preview;
  }

  .icono-request-direct-status {
    grid-area: status;
  }

  .icono-request-direct-panel:has(.icono-request-direct-result:not([hidden])) {
    grid-template-columns: minmax(18rem, var(--icono-image-tile-width)) minmax(22rem, 1fr);
    grid-template-areas: "viewer controls";
    align-self: start;
    align-items: start;
    column-gap: 1rem;
  }

  .icono-request-direct-panel:has(.icono-request-direct-result:not([hidden]))
    .icono-request-direct-result {
    grid-area: viewer;
  }

  .icono-request-direct-panel:has(.icono-request-direct-result:not([hidden]))
    .icono-request-direct-controls {
    grid-area: controls;
    grid-template-columns: 1fr;
    grid-template-areas:
      "provider"
      "actions"
      "picker"
      "preview"
      "status";
    column-gap: 0;
  }
}

@media (max-width: 680px) {
  .icono-request-direct-provider-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .icono-request-direct-preview-row {
    grid-template-columns: 1fr;
    gap: 0.12rem;
  }

  .icono-request-mode-field {
    grid-template-columns: 1fr;
    gap: 0.38rem;
  }

  .icono-request-direct-generate,
  .icono-request-direct-publish {
    width: 100%;
    white-space: normal;
  }
}

/* Same problem for the per-candidate copy popover, which lives inside a
   <details>. UA stylesheet would normally hide non-summary children of a
   closed <details>, but `.icono-request-form { display: grid }` above
   wins on specificity. Each closed popover was contributing ~144px of
   invisible height to its candidate row. */
.icono-candidate-copy-panel:not([open]) > form.icono-candidate-copy-popover {
  display: none;
}

.icono-request-picker {
  display: grid;
  gap: 0.75rem;
}

.icono-request-picker-search {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--ui-border) 84%, var(--dark) 16%);
  border-radius: var(--icono-radius-lg);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--light) 96%, #efe6d7 4%) 0%,
    color-mix(in srgb, var(--light) 99%, white 1%) 100%
  );
  box-shadow: 0 10px 24px rgba(27, 18, 11, 0.04);
  overflow: visible;
}

.icono-request-picker-search:focus-within {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--ui-border) 66%);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent),
    0 12px 26px rgba(27, 18, 11, 0.08);
}

.icono-request-search {
  width: 100%;
}

.icono-request-picker-input {
  width: 100%;
  min-height: 3.15rem;
  padding-right: 9.6rem;
  border-color: transparent;
  background: transparent;
}

.icono-request-picker-input:focus {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.icono-request-results {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  z-index: 120;
  display: grid;
  gap: 0;
  max-height: 320px;
  padding: 0;
  overflow-y: auto;
  border-radius: var(--icono-radius-lg);
  border: 1px solid color-mix(in srgb, var(--ui-border) 84%, var(--dark) 16%);
  background: color-mix(in srgb, var(--light) 98%, white 2%);
  box-shadow: 0 18px 34px rgba(27, 18, 11, 0.1);
}

.icono-request-results[hidden] {
  display: none;
}

.icono-request-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.45rem;
  width: 100%;
  padding: 0.7rem 0.85rem 0.8rem;
  border: none;
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}

.icono-request-option + .icono-request-option {
  border-top: 1px solid color-mix(in srgb, var(--ui-border) 78%, transparent);
}

.icono-request-option:hover,
.icono-request-option.active,
.icono-request-option.is-selected {
  background: var(--ui-bg);
}

.icono-request-option-copy {
  min-width: 0;
  display: grid;
  gap: 0.12rem;
}

.icono-request-option-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
}

.icono-request-option-title {
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 600;
  color: var(--dark);
  font-family: "IBM Plex Mono", monospace;
}

.icono-request-results-empty,
.icono-request-option-empty {
  font-size: 0.76rem;
  line-height: 1.25;
  color: var(--secondary, var(--darkgray));
  font-family: "IBM Plex Mono", monospace;
}

.icono-request-option-strip {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
  width: 100%;
  overflow: hidden;
  min-height: 7rem;
}

.icono-request-option-strip--empty {
  justify-content: flex-start;
}

.icono-request-option-thumb {
  flex: 0 0 auto;
  /* Keep picker examples as a straight 2x reuse of the main search portrait tile. */
  width: 96px;
  height: 128px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--icono-ring-image) 74%, transparent);
  background: color-mix(in srgb, var(--ui-bg) 84%, white 16%);
  box-shadow:
    0 2px 5px rgba(43, 29, 16, 0.07),
    inset 0 0 0 1px color-mix(in srgb, var(--icono-ring-image) 62%, transparent);
}

.icono-request-option-thumb.is-current {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--ui-border) 62%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}

.icono-thumbnail-viewport-image {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  object-position: center center;
}

.icono-request-option-thumb img {
  display: block;
}

.icono-request-inline-submit {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  right: 0.4rem;
  transform: translateY(-50%);
  z-index: 2;
  min-height: calc(100% - 0.8rem);
  padding: var(--icono-action-padding);
  border: 1px solid var(--icono-action-border);
  border-radius: var(--icono-radius-pill);
  background: var(--icono-action-secondary-bg);
  color: var(--dark);
  font-family: var(--icono-action-font) !important;
  font-size: var(--icono-action-font-size);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition:
    border-color 0.16s var(--icono-ease-out),
    background-color 0.16s var(--icono-ease-out),
    color 0.16s var(--icono-ease-out);
}

.icono-request-inline-submit:hover,
.icono-request-inline-submit:focus-visible {
  border-color: var(--icono-action-border-hover);
  background: var(--icono-action-secondary-bg-hover);
}

.icono-request-inline-submit:disabled {
  cursor: wait;
  opacity: 0.72;
}

.icono-candidate-copy-panel .icono-request-inline-submit {
  position: static;
  transform: none;
  min-height: 2.65rem;
  justify-self: start;
}

.icono-gene-edit-panel textarea.icono-request-picker-input {
  min-height: 7rem;
  padding: 0.85rem 1rem;
  resize: vertical;
  border: 1px solid color-mix(in srgb, var(--ui-border) 84%, var(--dark) 16%);
  border-radius: var(--icono-radius-lg);
  background: color-mix(in srgb, var(--light) 98%, white 2%);
}

.icono-candidate-copy-panel {
  display: block;
  color: var(--dark);
  position: relative;
}

/* Source: B-467 — the copy summary is now a circular icon button (see
   .icono-candidate-action-btn). Keep the legacy selector so existing tests and any external
   theming keep finding it, but defer all visual styling to the action-btn rules. */
.icono-candidate-copy-panel summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  cursor: pointer;
}

.icono-candidate-copy-panel summary::-webkit-details-marker {
  display: none;
}

.icono-candidate-copy-panel[open] {
  /* The popover form floats out of flow, so the open state should not stretch the footer
     row. Keep the summary in place and let the absolutely positioned form do the rest. */
  position: relative;
}

.icono-candidate-copy-panel[open] form.icono-candidate-copy-popover {
  display: grid;
  gap: 0.55rem;
  position: absolute;
  z-index: 5;
  top: calc(100% + 0.55rem);
  right: 0;
  width: min(280px, calc(100vw - 2rem));
  margin-top: 0;
  padding: 0.78rem;
  border: 1px solid color-mix(in srgb, var(--ui-border) 78%, var(--dark) 22%);
  border-radius: var(--icono-radius-lg);
  background: color-mix(in srgb, var(--light) 96%, white 4%);
  box-shadow: 0 18px 32px rgba(28, 22, 14, 0.16);
}

.icono-candidate-copy-popover-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--dark) 64%, var(--secondary) 36%);
}

.icono-candidate-copy-panel .icono-request-picker-input {
  padding: 0.6rem 0.78rem;
  border: 1px solid color-mix(in srgb, var(--ui-border) 84%, var(--dark) 16%);
  border-radius: var(--icono-radius-lg);
  background: color-mix(in srgb, var(--light) 98%, white 2%);
}

.icono-candidate-copy-panel .icono-request-results {
  position: static;
  max-height: 220px;
}

/* The submit control mirrors the icon rail visually — small inline icon, label kept compact. */
.icono-candidate-copy-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 0.85rem;
  min-height: 2.4rem;
}

.icono-candidate-copy-submit svg {
  width: 1rem;
  height: 1rem;
}

.icono-candidate-copy-submit-label {
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
}

.icono-request-diagnostics {
  margin-top: 0.4rem;
  border: 1px dashed color-mix(in srgb, var(--ui-border) 60%, var(--dark) 40%);
  border-radius: 16px;
  background: color-mix(in srgb, var(--light) 92%, #f5eee2 8%);
}

.icono-request-diagnostics summary {
  cursor: pointer;
  list-style: none;
  padding: 0.7rem 0.85rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--secondary, var(--darkgray));
}

.icono-request-diagnostics summary::-webkit-details-marker {
  display: none;
}

.icono-request-diagnostics-body {
  display: grid;
  gap: 0.75rem;
  padding: 0 0.85rem 0.85rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--secondary, var(--darkgray));
}

.icono-request-diagnostics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 0.9rem;
}

.icono-request-diagnostics-grid div {
  display: grid;
  gap: 0.14rem;
}

.icono-request-diagnostics-grid strong,
.icono-request-diagnostics-sample strong {
  color: var(--dark);
  font-weight: 600;
}

.icono-request-diagnostics-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--secondary, var(--darkgray));
}

.icono-request-diagnostics-sample {
  display: grid;
  gap: 0.35rem;
}

.icono-request-diagnostics-sample ul {
  margin: 0;
  padding-left: 1rem;
  display: grid;
  gap: 0.32rem;
}

/* ───────── Gallery toolbar ───────── */
.icono-gallery-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 auto 1.2rem;
}

/* B-457 #1: home toolbar actions used to be disjointed pills (Sort
   select and Installed v0.4.x toggle) sitting at slightly
   different heights with arbitrary 0.75rem gaps between them. Same failure
   mode as the gene-page Edit-image / New-candidate split that B-472 fixed.
   Consolidate into one bordered rail with hairline-separated segments — the
   inner controls keep their semantics but lose redundant outer pill borders
   so the eye reads ONE toolbar instead of three orphan widgets.

   Mobile (<=600px) breakpoint already stacks these full-width, so we scope
   the rail framing to wider viewports where horizontal alignment matters. */
.icono-gallery-actions {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 0;
  flex-wrap: wrap;
  padding: 0.25rem;
  border: 1px solid color-mix(in srgb, var(--dark) 12%, var(--ui-border) 88%);
  border-radius: var(--icono-radius-pill);
  background: color-mix(in srgb, var(--light) 92%, white 8%);
}

.icono-gallery-install {
  display: inline-flex;
  align-items: center;
}

/* Segment dividers: thin vertical hairline between rail children. Skipped
   on the first visible child so we never render a leading divider. */
.icono-gallery-actions > .icono-gallery-order {
  padding-left: 0.65rem;
  padding-right: 0.65rem;
}
.icono-gallery-actions > * + *:not([hidden]) {
  border-left: 1px solid color-mix(in srgb, var(--dark) 10%, var(--ui-border) 90%);
  margin-left: 0;
  padding-left: 0.65rem;
}

/* Inside the rail, controls drop their own pill border + background so the
   rail is the only frame. Focus/hover still reads via background tint. */
.icono-gallery-actions .icono-gallery-order select {
  border-color: transparent;
  background: transparent;
  min-height: 2.4rem;
}
.icono-gallery-actions .icono-gallery-order select:hover {
  background: color-mix(in srgb, var(--light) 60%, white 40%);
}
.icono-gallery-actions .icono-install-toggle {
  border-color: transparent;
  background: transparent;
  min-height: 2.4rem;
}
.icono-gallery-actions .icono-install-toggle:hover,
.icono-gallery-actions .icono-install-toggle:focus-visible {
  background: color-mix(in srgb, var(--light) 60%, white 40%);
}
.icono-install-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.7rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--dark) 18%, var(--ui-border) 82%);
  border-radius: var(--icono-radius-pill);
  background: color-mix(in srgb, var(--light) 80%, white 20%);
  color: var(--dark);
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color 0.16s var(--icono-ease-out),
    background-color 0.16s var(--icono-ease-out),
    color 0.16s var(--icono-ease-out);
}

.icono-install-toggle:hover,
.icono-install-toggle:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--ui-border) 68%);
  background: color-mix(in srgb, var(--light) 70%, white 30%);
}

.icono-install-toggle-label {
  font-size: 0.92rem;
  line-height: 1;
  font-weight: 500;
  color: var(--dark);
}

.icono-install-toggle-meta,
.icono-install-toggle-caret {
  font-size: 0.78rem;
  line-height: 1;
  color: var(--secondary, var(--darkgray));
}

.icono-install-toggle-meta {
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: 0.01em;
}

.icono-install-toggle-caret {
  white-space: nowrap;
}

.icono-install-toggle--installed {
  border-color: color-mix(in srgb, #4a7a5b 30%, var(--ui-border) 70%);
  background: color-mix(in srgb, #eef5ef 70%, white 30%);
}

.icono-install-toggle--pending {
  border-color: color-mix(in srgb, #8b6846 28%, var(--ui-border) 72%);
  background: color-mix(in srgb, #f5eee5 72%, white 28%);
}

.icono-install-panel-host[hidden] {
  display: none !important;
}

.icono-install-panel {
  margin: 0 0 1rem;
  width: 100%;
  box-sizing: border-box;
}

.icono-install-panel--installed {
  border-color: color-mix(in srgb, #4a7a5b 26%, var(--ui-border) 74%);
  background: color-mix(in srgb, #f2f6f2 76%, white 24%);
}

.icono-install-panel--pending {
  border-color: color-mix(in srgb, #8b6846 24%, var(--ui-border) 76%);
  background: color-mix(in srgb, #f7f1e8 78%, white 22%);
}

.icono-install-panel--mobile {
  border-color: color-mix(in srgb, var(--ui-border) 82%, var(--dark) 18%);
}

.icono-install-tablist {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.icono-install-tab {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 1.5rem;
  padding: 0 0 0.12rem;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--secondary, var(--darkgray));
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.05;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 0.16s var(--icono-ease-out),
    background-color 0.16s var(--icono-ease-out),
    border-color 0.16s var(--icono-ease-out);
}

.icono-install-tab:hover,
.icono-install-tab:focus-visible {
  color: var(--dark);
}

.icono-install-tab[aria-selected="true"] {
  color: var(--dark);
  border-bottom-color: color-mix(in srgb, var(--dark) 70%, var(--accent) 30%);
}

.icono-install-panel-body {
  display: grid;
  gap: 0.75rem;
  padding: 0;
}

.icono-install-header {
  display: grid;
  gap: 0.22rem;
}

#iconoplasm-root .icono-install-panel .icono-install-header h2 {
  margin: 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 1rem;
  line-height: 1.18;
  font-weight: 600;
  color: var(--dark);
  text-wrap: balance;
}

.icono-install-note,
.icono-install-tab-note,
.icono-install-footnote {
  margin: 0;
  max-width: 56rem;
  font-size: 0.9rem;
  line-height: 1.36;
  color: var(--secondary, var(--darkgray));
  text-wrap: pretty;
}

.icono-install-tab-note {
  max-width: 48rem;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.36;
}

.icono-install-card-copy {
  display: grid;
  gap: 0.22rem;
}

.icono-install-card-title {
  max-width: 38ch;
  font-family: "IBM Plex Mono", monospace;
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.22;
  color: var(--dark);
}

.icono-install-primary-action {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.icono-install-steps {
  margin: 0;
  padding-left: 1.35rem;
  display: grid;
  gap: 0.36rem;
  color: var(--dark);
}

.icono-install-steps li {
  line-height: 1.36;
}

.icono-install-step-copy {
  min-width: 0;
}

.icono-install-step-action {
  display: inline-flex;
  max-width: 100%;
  margin-left: 0.35rem;
  vertical-align: middle;
}

.icono-install-step-action .icono-install-link {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
  min-height: 1.9rem;
  padding: 0.32rem 0.9rem;
  white-space: nowrap;
  text-align: center;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.88rem;
}

.icono-install-code {
  padding: 0 0.24rem;
  border-radius: 4px;
  background: color-mix(in srgb, var(--ui-bg) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--ui-border) 64%, transparent);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.84rem;
  color: var(--dark);
}

.icono-install-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  padding-top: 0.08rem;
}

.icono-install-link {
  text-decoration: none;
}

.icono-install-link--subtle {
  padding: 0;
  min-height: 0;
  border: none;
  background: transparent;
}

.icono-gallery-intro {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.icono-gallery-kicker {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--secondary, var(--darkgray));
}

.icono-gallery-count {
  font-size: 0.92rem;
  color: var(--dark);
}

.icono-gallery-order {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--secondary, var(--darkgray));
  font-size: 0.92rem;
  white-space: nowrap;
}

.icono-gallery-order select {
  min-height: 2.8rem;
  padding: 0.45rem 2rem 0.45rem 0.8rem;
  font: inherit;
  color: var(--dark);
  background: var(--light);
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  outline: none;
}

.icono-gallery-order select:focus {
  border-color: var(--accent);
}

.icono-toolbar-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--accent);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.icono-toolbar-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* ───────── Gene grid ───────── */
.icono-grid {
  position: relative;
  overflow: visible;
}

.icono-grid-sizer,
.icono-gutter-sizer {
  visibility: hidden;
  height: 0;
  margin: 0;
  padding: 0;
}

.icono-grid-sizer,
.icono-card--masonry {
  width: calc(50% - 8px);
}

.icono-gutter-sizer {
  width: 16px;
}

.icono-card {
  display: block;
  position: relative;
  text-decoration: none;
  /* Lock card ink through link/visited/active states. Browser link colors made cards turn
     noticeably paler after click-through/back on the live gallery. */
  color: var(--icono-card-ink, var(--dark));
  /* Source: C:\Users\Admin\.codex\skills\frontend-design\SKILL.md (Motion) +
     C:\Users\Admin\.codex\skills\optimize\SKILL.md (Smooth 60fps).
     Keep gallery interactions interruptible and low-drama; swapping this back to generic easing
     or one-off keyframes is what makes the cards feel sticky after repeated navigation. */
  transition:
    transform 0.18s var(--icono-ease-out),
    box-shadow 0.18s var(--icono-ease-out),
    color 0.16s var(--icono-ease-out);
}

.icono-card:link,
.icono-card:visited,
.icono-card:active {
  color: var(--icono-card-ink, var(--dark));
}

.icono-card--masonry {
  margin-bottom: 16px;
}

.icono-card--masonry:hover {
  box-shadow: none;
}

.icono-card--masonry:hover .icono-card-media {
  box-shadow: 0 16px 32px rgba(45, 33, 20, 0.12);
}

.icono-card-media {
  position: relative;
  width: 100%;
  display: block;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid
    color-mix(in srgb, var(--icono-card-accent, var(--ui-border)) 28%, var(--ui-border));
  /* Source: C:\Users\Admin\.codex\skills\frontend-design\SKILL.md (Layout & Space) +
     C:\Users\Admin\.codex\skills\polish\SKILL.md (Concentric radii).
     This radius is intentionally tied to the shared token set so masonry cards, gene cards,
     candidate cards, and lightbox images read like the same system. */
  border-radius: var(--icono-radius-xl);
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.18), transparent 48%),
    color-mix(in srgb, var(--icono-card-accent, var(--ui-bg)) 12%, white);
  box-shadow: 0 8px 18px rgba(45, 33, 20, 0.06);
  transition:
    box-shadow 0.18s var(--icono-ease-out),
    transform 0.18s var(--icono-ease-out);
}

.icono-card-media img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--icono-ring-image);
}

.icono-card-fallback-symbol {
  display: inline-block;
  padding: 1.1rem;
}

.icono-card-media--fallback {
  aspect-ratio: var(--width, 1) / var(--height, 1);
  display: grid;
  place-items: center;
  padding: 1.2rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.icono-card-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.42rem;
  padding: 0.7rem 0.15rem 0.1rem;
}

.icono-card-badge {
  position: absolute;
  left: 0.85rem;
  bottom: 0.85rem;
  padding: 0.18rem 0.58rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--icono-radius-pill);
  background: rgba(14, 12, 10, 0.54);
  backdrop-filter: blur(10px);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.icono-card-name {
  font-size: 0.82rem;
  color: var(--dark);
  font-weight: 520;
  line-height: 1.3;
  text-wrap: balance;
}

.icono-hero .stat {
  min-width: 24ch;
  text-align: center;
  /* Source: C:\Users\Admin\.codex\skills\frontend-design\SKILL.md (Typography) +
     C:\Users\Admin\.codex\skills\harden\SKILL.md (Dynamic Numeric Data).
     Keep numerals tabular across stats, votes, and sidebar counters to prevent jitter when
     values change or align side-by-side. */
  font-variant-numeric: tabular-nums;
}

body[data-slug^="apps/iconoplasm"] .brd-sidebar-row-value,
.icono-vote-stats,
.pswp__counter,
.iconoplasm-tooltip-meta-value,
.iconoplasm-tooltip-meta-value--compact {
  font-variant-numeric: tabular-nums;
}

.icono-card--skeleton {
  pointer-events: none;
}

.icono-card-skeleton-media,
.icono-card-skeleton-line {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  width: 100%;
  height: 0.82rem;
  background: color-mix(in srgb, var(--ui-border) 82%, white 18%);
}

.icono-card-skeleton-line--medium {
  width: 68%;
}

.icono-card-skeleton-line--short {
  width: 42%;
}

.icono-card-skeleton-media {
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--ui-border) 22%, var(--light)) 0%,
    color-mix(in srgb, var(--ui-bg) 84%, white 16%) 100%
  );
}

.icono-card--brick.icono-card--skeleton {
  background: var(--icono-brick-shell);
}

.icono-card--brick.icono-card--skeleton .iconoplasm-tooltip-portrait,
.icono-card--brick.icono-card--skeleton .iconoplasm-tooltip-body {
  min-height: 274px;
}

.icono-card--brick.icono-card--skeleton .iconoplasm-tooltip-portrait {
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--icono-card-accent, #6b6b78) 14%, var(--icono-brick-surface)) 0%,
    color-mix(in srgb, var(--icono-brick-surface) 94%, white 6%) 100%
  );
}

.icono-card--brick.icono-card--skeleton .icono-card-skeleton-portrait-wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at top left,
      color-mix(in srgb, var(--icono-brick-ink) 8%, transparent),
      transparent 58%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--icono-brick-surface) 16%, transparent),
      transparent 36%
    );
}

.icono-card--brick.icono-card--skeleton .iconoplasm-tooltip-body--skeleton {
  padding: 1.25rem 1.25rem 0.9rem 1.1rem;
}

.icono-card--brick.icono-card--skeleton .iconoplasm-tooltip-header--skeleton {
  min-height: 62px;
  padding-bottom: 0.85rem;
  margin-bottom: 0.1rem;
  border-bottom: 1px solid var(--icono-brick-line-strong);
}

.icono-card--brick.icono-card--skeleton .iconoplasm-tooltip-meta--skeleton {
  min-height: 128px;
}

.icono-card--brick.icono-card--skeleton .iconoplasm-tooltip-meta-skeleton-row {
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  border-bottom: 1px solid var(--icono-brick-line);
}

.icono-card--brick.icono-card--skeleton .iconoplasm-tooltip-meta-skeleton-cell {
  padding: 0.45rem 0.4rem;
}

.icono-card--brick.icono-card--skeleton .iconoplasm-tooltip-meta-skeleton-cell--origin {
  padding-left: 0.65rem;
}

.icono-card--brick.icono-card--skeleton .iconoplasm-tooltip-skeleton-line {
  opacity: 0.74;
}

.iconoplasm-tooltip-skeleton-line--symbol {
  width: min(8rem, 42%);
  height: 1.9rem;
}

.iconoplasm-tooltip-skeleton-line--name {
  width: min(12rem, 58%);
  height: 0.95rem;
}

.icono-card--masonry.icono-card--skeleton .icono-card-skeleton-media {
  aspect-ratio: var(--icono-skeleton-aspect, 4 / 5);
  border: 1px solid color-mix(in srgb, var(--ui-border) 85%, transparent);
  border-radius: 20px;
}

.icono-card--masonry.icono-card--skeleton .icono-card-skeleton-body {
  gap: 0.55rem;
}

.icono-card--image-tile.icono-card--skeleton {
  position: relative;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--dark) 10%, var(--ui-border) 90%);
  border-radius: 0;
  overflow: hidden;
  background: var(--light);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--light) 70%, transparent),
    0 10px 24px color-mix(in srgb, var(--dark) 8%, transparent);
}

.icono-image-only-placeholder {
  pointer-events: none;
}

.icono-grid[data-layout="bricks"] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.icono-grid[data-layout="bricks"] .icono-grid-sizer,
.icono-grid[data-layout="bricks"] .icono-gutter-sizer {
  display: none;
}

.icono-card--brick {
  --icono-brick-shell: color-mix(in srgb, var(--light) 93%, var(--ui-bg) 7%);
  --icono-brick-surface: color-mix(in srgb, var(--light) 97%, var(--ui-bg) 3%);
  --icono-brick-ink: color-mix(in srgb, var(--dark) 92%, var(--secondary, var(--dark)) 8%);
  --icono-card-ink: var(--icono-brick-ink);
  --icono-brick-muted: color-mix(in srgb, var(--secondary, var(--darkgray)) 82%, transparent);
  --icono-brick-line-strong: color-mix(in srgb, var(--dark) 16%, transparent);
  --icono-brick-line: color-mix(in srgb, var(--dark) 8%, transparent);
  --icono-brick-shadow-1: rgba(45, 33, 20, 0.08);
  --icono-brick-shadow-2: rgba(45, 33, 20, 0.1);
  --icono-brick-shadow-3: rgba(45, 33, 20, 0.14);
  --icono-brick-shadow-4: rgba(45, 33, 20, 0.12);
  --icono-brick-portrait-base: color-mix(
    in srgb,
    var(--icono-card-accent, #6b6b78) 18%,
    var(--ui-bg)
  );
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  width: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: var(--icono-radius-lg);
  background: var(--icono-brick-shell);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--icono-brick-line-strong) 74%, transparent),
    0 8px 20px var(--icono-brick-shadow-2),
    0 16px 36px var(--icono-brick-shadow-3);
  color: var(--icono-brick-ink);
}

.icono-card--brick:link,
.icono-card--brick:visited,
.icono-card--brick:active {
  color: var(--icono-brick-ink);
}

.icono-card--brick:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--icono-brick-line-strong) 76%, transparent),
    0 10px 24px var(--icono-brick-shadow-2),
    0 18px 42px var(--icono-brick-shadow-3);
}

.icono-card--brick:active {
  transform: translateY(0);
}

.icono-card--brick .iconoplasm-tooltip-portrait {
  /* Source: C:\Users\Admin\.codex\skills\normalize\SKILL.md (Spacing & Layout)
     The portrait rail must fully occupy its grid track. If it shrink-wraps inside the
     reserved column, a dead strip opens beside the divider and the card reads like two
     disconnected panels. */
  width: 100%;
  min-width: 0;
  min-height: 240px;
  background-color: var(--icono-brick-portrait-base);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  position: relative;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--icono-ring-image) 82%, transparent);
}

.icono-card--brick .icono-brick-media-link,
.icono-card--brick .icono-brick-header-link,
.icono-card--brick .icono-brick-meta-link,
.icono-card--brick .icono-brick-mobile-link {
  color: inherit;
  text-decoration: none;
  display: block;
  min-width: 0;
}

.icono-card--brick .icono-brick-mobile-link {
  grid-column: 1 / -1;
}

.icono-card--brick .icono-brick-media-link:focus-visible,
.icono-card--brick .icono-brick-header-link:focus-visible,
.icono-card--brick .icono-brick-meta-link:focus-visible,
.icono-card--brick .icono-brick-mobile-link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 38%, white 8%);
  outline-offset: -2px;
}

.icono-card--brick .iconoplasm-tooltip-portrait-img {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  margin: 0 !important;
  max-width: none !important;
  border: 0 !important;
  vertical-align: top !important;
  object-fit: cover;
  object-position: center top;
  display: none;
}

.icono-card--brick .iconoplasm-tooltip-portrait--ready .iconoplasm-tooltip-portrait-img {
  display: block;
}

.icono-card--brick .iconoplasm-tooltip-portrait-fallback {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 16px;
  background:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--icono-card-accent, #6b6b78) 18%, var(--icono-brick-surface)),
      color-mix(in srgb, var(--icono-brick-surface) 92%, transparent)
    ),
    radial-gradient(
      circle at top left,
      color-mix(in srgb, var(--icono-brick-ink) 12%, transparent),
      transparent 60%
    );
}

.icono-card--brick .iconoplasm-tooltip-portrait-missing .iconoplasm-tooltip-portrait-fallback {
  display: flex;
}

.icono-card--brick .iconoplasm-tooltip-portrait-fade {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  opacity: 0.9;
  background: var(--icono-brick-line-strong);
}

.icono-card--brick .iconoplasm-tooltip-portrait-missing .iconoplasm-tooltip-portrait-fade {
  display: none;
}

.icono-card--brick .iconoplasm-tooltip-portrait-status {
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  opacity: 0.9;
}

.icono-card--brick .iconoplasm-tooltip-portrait-symbol,
.icono-card--brick .iconoplasm-tooltip-symbol {
  font-family: "League Spartan", "Bahnschrift", "Arial Narrow", sans-serif;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.9;
}

.icono-card--brick .iconoplasm-tooltip-portrait-symbol {
  font-size: 1.7rem;
}

.icono-card--brick .iconoplasm-tooltip-body {
  /* Source: C:\Users\Admin\.codex\skills\polish\SKILL.md (Visual Alignment & Spacing)
     + C:\Users\Admin\.codex\skills\normalize\SKILL.md (Spacing & Layout).
     Keep one shared text spine for title, rows, and sub-rows. When header and row
     cells drift onto different left insets, the whole shared card starts reading
     like stitched-together fragments instead of one composed panel. Also keep the
     portrait/text seam tight enough that the divider feels like a hinge, not an empty
     moat. */
  --icono-card-cell-pad-x: 0.4rem;
  --icono-card-origin-pad-x: 0.65rem;
  --icono-card-subrow-pad-y: 0.12rem;
  --icono-card-subrow-group-pad-top: 0.14rem;
  --icono-card-subrow-group-pad-bottom: 0.18rem;
  --icono-card-subrow-gap: 0.04rem;
  padding: 1.25rem 1.25rem 0.9rem 0.85rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
  min-height: 240px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"),
    var(--icono-brick-surface);
  color: var(--icono-brick-ink);
}

.icono-lit-archival-host {
  display: contents;
}

.icono-card--brick .iconoplasm-tooltip-header {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-height: 62px;
  padding: 0 var(--icono-card-cell-pad-x) 0.55rem;
  margin-bottom: 0;
  border-bottom: 0;
}

.icono-card--brick .icono-brick-header-row {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  min-width: 0;
}

.icono-card--brick .icono-brick-header-link {
  flex: 1 1 auto;
}

.icono-card--brick .iconoplasm-tooltip-symbol {
  font-size: clamp(1.75rem, 3vw, 2.1rem);
  color: var(--icono-brick-ink);
}

.icono-card--brick .iconoplasm-tooltip-name {
  font-size: 0.96rem;
  line-height: 1.22;
  color: color-mix(in srgb, var(--icono-brick-ink) 92%, white 8%);
  font-family: "Special Elite", Georgia, serif;
  font-weight: 400;
  letter-spacing: 0;
  max-inline-size: 20ch;
  text-wrap: pretty;
}

.icono-card--brick .iconoplasm-tooltip-meta {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 128px;
  padding-top: 0.4rem;
  color: var(--icono-brick-ink);
}

.icono-card--brick .iconoplasm-tooltip-meta:empty {
  display: none;
}

.icono-card--brick .iconoplasm-tooltip-meta-row {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  border-bottom: 1px solid var(--icono-brick-line);
}

.icono-card--brick .iconoplasm-tooltip-meta-cell {
  display: flex;
  flex-direction: column;
  padding: 0.45rem var(--icono-card-cell-pad-x);
  min-width: 0;
}

.icono-card--brick .iconoplasm-tooltip-meta-cell--origin {
  padding-left: var(--icono-card-origin-pad-x);
}

.icono-card--brick .iconoplasm-tooltip-meta-value {
  font-size: 0.95rem;
  font-weight: 580;
  line-height: 1.42;
  opacity: 0.88;
  overflow-wrap: anywhere;
}

.icono-card--brick .iconoplasm-tooltip-meta-cell--origin .iconoplasm-tooltip-meta-value {
  font-style: italic;
  font-weight: 420;
  opacity: 0.72;
}

.icono-card--brick .iconoplasm-tooltip-meta-value--compact {
  font-size: 0.9rem;
  line-height: 1.14;
  overflow-wrap: break-word;
}

.icono-card--brick .iconoplasm-tooltip-meta-pairs {
  display: flex;
  flex-direction: column;
  gap: var(--icono-card-subrow-gap);
  border-bottom: 1px solid var(--icono-brick-line);
  padding: var(--icono-card-subrow-group-pad-top) 0 var(--icono-card-subrow-group-pad-bottom);
}

.icono-card--brick .iconoplasm-tooltip-meta-pair-row {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
}

.icono-card--brick .iconoplasm-tooltip-meta-pair-cell {
  min-width: 0;
  padding: var(--icono-card-subrow-pad-y) var(--icono-card-cell-pad-x);
}

.icono-card--brick .iconoplasm-tooltip-meta-pair-cell--origin {
  padding-left: var(--icono-card-origin-pad-x);
}

.icono-card--brick .iconoplasm-tooltip-meta-pair-cell .iconoplasm-tooltip-meta-value--compact {
  /* Source-of-truth note:
     C:\Users\Admin\.codex\skills\polish\SKILL.md (Typography Refinement / hierarchy)
     C:\Users\Admin\.codex\skills\normalize\SKILL.md (shared pattern consistency)
     Pair rows are subordinate sub-rows, not peer rows. Keep the same type size and ink
     strength as full rows, but tighten only the leading so multi-aesthetic blocks read
     as nested structure without adding indent or dimming the text. */
  font-size: 0.95rem;
  line-height: 0.98;
  font-style: normal;
  font-weight: 580;
  opacity: 0.88;
}

.icono-card--brick
  .iconoplasm-tooltip-meta-pair-cell--origin
  .iconoplasm-tooltip-meta-value--compact {
  font-style: italic;
  font-weight: 420;
  opacity: 0.72;
}

.icono-card--brick .iconoplasm-tooltip-meta-skeleton-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.icono-card--brick .iconoplasm-tooltip-meta-skeleton-cell {
  padding: 0.45rem 0.25rem;
}

.icono-card--brick .iconoplasm-tooltip-meta-skeleton-cell--origin {
  padding-left: 0.65rem;
}

.icono-card--brick .iconoplasm-tooltip-skeleton-line {
  display: block;
  width: 100%;
  height: 13px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--icono-brick-ink) 8%, transparent) 0%,
    color-mix(in srgb, var(--icono-brick-ink) 16%, transparent) 50%,
    color-mix(in srgb, var(--icono-brick-ink) 8%, transparent) 100%
  );
  opacity: 0.9;
}

.icono-card--brick .iconoplasm-tooltip-skeleton-line--short {
  width: 66%;
}

.icono-card--brick .iconoplasm-tooltip-skin-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
  position: relative;
  top: -1px;
  border: 0.5px solid var(--icono-brick-line-strong);
}

/* ───────── Loading / empty states ───────── */
.icono-collection-shell {
  display: grid;
  gap: 1rem;
  margin: 0 0 1rem;
}

.icono-home-auxiliary {
  display: grid;
  gap: 1rem;
  width: min(100%, var(--icono-image-tile-width));
  margin: 1rem auto 0;
}

.icono-home-auxiliary[hidden] {
  display: none !important;
}

.icono-collection-summary-host[hidden],
.icono-empty[hidden] {
  display: none !important;
}

.icono-collection-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) repeat(2, minmax(0, 0.8fr));
  gap: 0.85rem;
}

.icono-collection-summary--single {
  grid-template-columns: minmax(0, 1fr);
}

.icono-collection-card {
  display: grid;
  gap: 0.45rem;
  padding: 1rem 1rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--ui-border) 82%, var(--dark) 18%);
  border-radius: var(--icono-radius-lg);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--light) 97%, #efe6d7 3%) 0%,
    color-mix(in srgb, var(--light) 99%, #f5ede0 1%) 100%
  );
  box-shadow: 0 10px 24px rgba(27, 18, 11, 0.04);
}

.icono-collection-card--progress {
  gap: 0.6rem;
}

.icono-collection-card--archive {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 0.58rem;
  max-inline-size: 100%;
  min-inline-size: 0;
  padding-top: 0.82rem;
  padding-bottom: 0.82rem;
  overflow: hidden;
}

.icono-collection-summary--skeleton {
  min-height: 65px;
  pointer-events: none;
}

.icono-collection-card--skeleton {
  min-height: 0;
}

.icono-collection-copy {
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(0.78rem, 2.8vw, 0.95rem);
  line-height: 1.24;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--secondary, var(--darkgray));
  text-wrap: balance;
}

.icono-collection-summary-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.icono-collection-shared-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.42rem;
  min-width: max-content;
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(0.72rem, 2.5vw, 0.84rem);
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--secondary, var(--darkgray)) 86%, var(--dark) 14%);
  cursor: pointer;
  user-select: none;
}

.icono-collection-shared-toggle input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--accent);
}

.icono-collection-shared-toggle:has(input:disabled) {
  cursor: default;
  opacity: 0.55;
}

.icono-collection-progress-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  width: 100%;
  min-width: 0;
  margin-top: 0;
}

.icono-collection-progress-inline .icono-collection-progress-track {
  width: 100%;
}

@media (max-width: 680px) {
  .icono-collection-summary-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .icono-collection-shared-toggle {
    justify-content: flex-start;
    min-width: 0;
  }
}

.icono-collection-label,
.icono-empty-kicker {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--secondary, var(--darkgray));
}

.icono-collection-value {
  font-size: clamp(1.45rem, 3vw, 2rem);
  line-height: 1;
  font-weight: 460;
  letter-spacing: -0.05em;
  color: color-mix(in oklch, var(--dark) 94%, var(--accent) 6%);
}

.icono-collection-stat {
  font-size: 1.55rem;
  line-height: 1;
  font-weight: 520;
  letter-spacing: -0.04em;
  color: var(--dark);
}

.icono-collection-note,
.icono-collection-progress-caption,
.icono-empty-support {
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--secondary, var(--darkgray));
  text-wrap: pretty;
}

.icono-collection-progress-track {
  position: relative;
  overflow: hidden;
  height: 9px;
  border-radius: var(--icono-radius-pill);
  background: color-mix(in srgb, var(--ui-border) 76%, white 24%);
}

.icono-collection-progress-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent) 58%, #c9a16a 42%) 0%,
    color-mix(in srgb, var(--accent) 74%, #f0dcc0 26%) 100%
  );
}

.icono-loading[hidden] {
  display: none !important;
}

.icono-loading {
  text-align: center;
  padding: 3rem 0;
  color: var(--gray);
  font-size: 0.95rem;
}

.icono-mobile-data-failure-card {
  display: grid;
  gap: 0.55rem;
  width: min(100%, 360px);
  min-height: 220px;
  margin: 0 auto 1rem;
  padding: 1.2rem 1.1rem;
  border: 1px solid color-mix(in srgb, #8f1d2c 42%, var(--ui-border) 58%);
  border-radius: var(--icono-radius-lg);
  background:
    linear-gradient(180deg, rgba(143, 29, 44, 0.07), rgba(143, 29, 44, 0.02)),
    color-mix(in srgb, var(--light) 96%, #fff1f1 4%);
  color: var(--dark);
  box-shadow: 0 14px 32px rgba(56, 28, 24, 0.12);
}

.icono-mobile-data-failure-kicker {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.68rem;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, #8f1d2c 72%, var(--dark) 28%);
}

.icono-mobile-data-failure-symbol {
  font-family: "League Spartan", "Bahnschrift", "Arial Narrow", sans-serif;
  font-size: 1.65rem;
  line-height: 1;
  font-weight: 760;
}

.icono-mobile-data-failure-copy {
  max-width: 28ch;
  font-size: 0.95rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--dark) 78%, var(--gray) 22%);
}

.icono-empty {
  text-align: center;
  padding: 3rem 1rem;
}

.icono-empty--collection {
  display: grid;
  gap: 0.55rem;
  padding: 1.15rem 1.1rem 1rem;
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--ui-border) 82%, var(--dark) 18%);
  border-radius: var(--icono-radius-lg);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--light) 97%, #efe6d7 3%) 0%,
    color-mix(in srgb, var(--light) 99%, #f5ede0 1%) 100%
  );
  box-shadow: 0 10px 24px rgba(27, 18, 11, 0.04);
}

.icono-empty h2 {
  margin: 0 0 0.5rem;
  color: var(--dark);
}

.icono-empty--collection h2 {
  margin: 0;
}

.icono-empty p {
  color: var(--secondary, var(--darkgray));
}

.icono-empty--collection p {
  margin: 0;
}

.icono-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: 0.2rem;
}

.icono-empty-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6rem;
  padding: 0.5rem 0.9rem;
  border-radius: var(--icono-radius-pill);
  text-decoration: none;
}

.icono-empty-link--subtle {
  padding-left: 0;
  padding-right: 0;
  min-height: auto;
  border-radius: 0;
  color: var(--accent);
}

.icono-empty-link--subtle:hover {
  text-decoration: underline;
}

.icono-empty a {
  color: var(--accent);
}

@media (max-width: 760px) {
  .icono-collection-summary {
    grid-template-columns: 1fr;
  }
}

/* ───────── Gene detail page ───────── */
.icono-gene-lead {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  width: min(100%, 800px);
  margin: 0 auto 1.75rem;
}

.icono-card--brick-static {
  text-decoration: none;
}

.icono-card--brick-static:hover {
  box-shadow:
    0 0 0 0.5px color-mix(in srgb, var(--icono-brick-line-strong) 72%, transparent),
    0 1px 2px var(--icono-brick-shadow-1),
    0 3px 8px var(--icono-brick-shadow-2),
    0 8px 24px var(--icono-brick-shadow-3),
    0 20px 60px var(--icono-brick-shadow-4);
}

.icono-gene-lead-card .iconoplasm-tooltip-portrait,
.icono-gene-lead-card .iconoplasm-tooltip-body {
  min-height: 280px;
}

/* B-457 #3: on mobile (390x844 reference) the gene-page hero portrait
   was rendering ~310px tall, eating ~46% of the viewport and pushing the
   toolbar rail (Edit blot / New candidate from B-472) below the fold.
   The hero IS the page on mobile, but the portrait alone shouldn't be —
   cap it so the first viewport shows the portrait + the start of the
   dossier rows + at least the top of the toolbar rail. The cap only
   applies when the hero is in mobile-review layout (peek tab present),
   so desktop side-by-side portraits are untouched. */
@media (max-width: 600px) {
  .icono-gene-lead-card .icono-label-dossier-shell .iconoplasm-tooltip-portrait {
    min-height: 0;
    max-height: 240px;
  }
}

.icono-gene-lead-card .iconoplasm-tooltip-header .icono-shared-card-header-row {
  width: 100%;
}

.icono-gene-lead-card .iconoplasm-tooltip-vote-slot {
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex: 0 0 auto;
}

.iconoplasm-tooltip-mobile-rowgrid {
  display: none;
}

/* Keep the mobile skeleton using the same row-grid structure as the hydrated card. That way the
   portrait rail and the metadata rail reserve stable space before gene detail text arrives. */
.iconoplasm-tooltip-mobile-rowgrid--skeleton .iconoplasm-tooltip-mobile-cell {
  display: flex;
  align-items: center;
}

.iconoplasm-tooltip-mobile-rowgrid--skeleton .iconoplasm-tooltip-skeleton-line {
  width: 100%;
  height: 12px;
  border-radius: 999px;
}

.iconoplasm-tooltip-portrait-media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  color: inherit;
  transition:
    transform 0.18s var(--icono-ease-out),
    opacity 0.16s var(--icono-ease-out);
}

.icono-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.icono-nav a {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.9rem;
  transition:
    color 0.16s var(--icono-ease-out),
    opacity 0.16s var(--icono-ease-out);
}

.icono-nav a:hover {
  text-decoration: underline;
}

.icono-gene-header {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

.icono-gene-portrait-shell {
  width: min(320px, 100%);
  flex-shrink: 0;
}

.icono-gene-media-wrap {
  position: relative;
}

.icono-gene-swatch {
  width: 200px;
  min-height: 200px;
  border-radius: var(--icono-radius-xl);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  font-size: 1.6rem;
  border: 1px solid var(--ui-border);
  overflow: hidden;
  background: var(--ui-bg);
  box-shadow:
    0 10px 24px rgba(45, 33, 20, 0.08),
    inset 0 0 0 1px color-mix(in srgb, var(--icono-ring-image) 82%, transparent);
}

.icono-gene-swatch--portrait {
  width: 100%;
  min-height: 0;
  padding: 0;
  display: block;
  align-items: stretch;
  justify-content: stretch;
  background: color-mix(in srgb, var(--accent) 7%, white);
  cursor: zoom-in;
  appearance: none;
}

.icono-gene-media-link {
  position: relative;
  display: block;
}

.icono-gene-swatch img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
}

.icono-gene-symbol-pill {
  position: absolute;
  left: 0.85rem;
  bottom: 0.85rem;
  display: inline-flex;
  align-items: center;
  padding: 0.26rem 0.66rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--icono-radius-pill);
  background: rgba(14, 12, 10, 0.58);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  color: rgba(255, 255, 255, 0.96);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  pointer-events: none;
}

.icono-gene-meta {
  flex: 1;
  min-width: 0;
}

.icono-gene-meta h1 {
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
  color: var(--dark);
  letter-spacing: 0;
  text-wrap: balance;
}

.icono-gene-meta .full-name {
  font-size: 1.1rem;
  color: color-mix(in srgb, var(--dark) 90%, var(--secondary, var(--darkgray)) 10%);
  font-weight: 500;
  margin: 0 0 0.75rem;
  text-wrap: pretty;
}

/* Source: C:\Users\Admin\.codex\skills\normalize\SKILL.md (Components) +
   C:\Users\Admin\.codex\skills\extract\SKILL.md (single source of truth).
   Vote visuals intentionally live in iconoplasm/generated/shared-card-vote.css. Keep any
   site-local rules limited to placement and sizing so the extension and website stay matched. */

.icono-candidate-gallery {
  margin-top: 1.9rem;
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

.icono-candidate-gallery-heading {
  margin-bottom: 0.55rem;
}

.icono-candidate-gallery-heading h2 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--dark);
  text-wrap: balance;
}

.icono-candidate-grid {
  position: relative;
  overflow: visible;
  padding: 0.15rem 0 0.2rem;
}

.icono-candidate-grid-sizer,
.icono-candidate-gutter-sizer {
  visibility: hidden;
  height: 0;
  margin: 0;
  padding: 0;
}

.icono-candidate-grid-sizer,
.icono-candidate-card {
  width: calc(50% - 0.425rem);
}

.icono-candidate-gutter-sizer {
  width: 0.85rem;
}

.icono-candidate-grid--single .icono-candidate-grid-sizer,
.icono-candidate-grid--single .icono-candidate-card {
  width: min(320px, 100%);
}

.icono-candidate-grid--single .icono-candidate-gutter-sizer {
  width: 0;
}

.icono-candidate-card {
  display: block;
  background: transparent;
  padding: 0;
  margin: 0 0 0.95rem;
  text-align: left;
  color: inherit;
  text-decoration: none;
  min-width: 0;
  border: 0;
}

.icono-candidate-media-button {
  width: 100%;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: inherit;
  cursor: zoom-in;
}

.icono-candidate-media {
  display: block;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: var(--icono-radius-lg);
  border: 1px solid color-mix(in srgb, var(--ui-border) 82%, var(--accent) 10%);
  box-shadow: 0 10px 24px rgba(45, 33, 20, 0.08);
  background: var(--ui-bg);
  transition:
    box-shadow 0.18s var(--icono-ease-out),
    transform 0.18s var(--icono-ease-out);
}

.icono-candidate-media img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  box-shadow: inset 0 0 0 1px var(--icono-ring-image);
}

.icono-candidate-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 0.44rem;
  margin-top: 0.45rem;
  min-width: 0;
  width: 100%;
}

.icono-candidate-footer .icono-vote-box {
  flex: 0 0 4.9rem;
  width: 4.9rem;
  min-width: 4.9rem;
  grid-template-columns: repeat(2, 2.45rem);
}

.icono-candidate-footer .icono-vote-btn {
  width: 2.45rem;
  min-width: 2.45rem;
  padding-inline: 0;
}

.icono-candidate-toolbar-meta {
  display: inline-flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: 0.5rem;
}

.icono-candidate-toolbar-pair {
  display: inline-grid;
  gap: 0.04rem;
  min-width: 0;
  max-width: 8.8rem;
  line-height: 1;
}

.icono-candidate-toolbar-pair span {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.56rem;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--secondary, var(--darkgray));
}

.icono-candidate-toolbar-pair strong {
  overflow: hidden;
  color: var(--dark);
  font-family: "Special Elite", Georgia, serif;
  font-size: 0.83rem;
  font-weight: 400;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icono-candidate-secondary-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 0.4rem;
  min-width: 0;
  position: relative;
}

.icono-candidate-admin-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

/* Source: B-467 — compact action rail for candidate blots.
   The remove and copy controls used to be wide pill buttons with text labels. They now share
   a circular icon button shape so they read as a single rail next to the approve/reject vote
   buttons. The accessible label stays as visually-hidden text inside each button so the
   public-candidate-actions test and screen readers keep finding "Remove" and "Copy to gene".
   Do not collapse this back to text-only buttons without updating both the test and the
   shared vote box visuals — the three controls are intentionally the same diameter. */
.icono-candidate-action-btn {
  appearance: none;
  display: inline-flex;
  flex: 0 0 2.25rem;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  min-width: 2.25rem;
  height: 2.25rem;
  min-height: 2.25rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ui-border) 78%, var(--dark) 22%);
  background: color-mix(in srgb, var(--light) 86%, white 14%);
  color: color-mix(in srgb, var(--dark) 70%, var(--secondary) 30%);
  cursor: pointer;
  font-family: var(--icono-action-font) !important;
  font-size: var(--icono-action-font-size);
  list-style: none;
  transition:
    transform 0.16s var(--icono-ease-out),
    border-color 0.16s var(--icono-ease-out),
    background-color 0.16s var(--icono-ease-out),
    color 0.16s var(--icono-ease-out),
    opacity 0.16s var(--icono-ease-out);
}

.icono-candidate-action-btn::-webkit-details-marker {
  display: none;
}

.icono-candidate-action-btn svg {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
}

.icono-candidate-action-btn:hover:not(:disabled),
.icono-candidate-action-btn:focus-visible:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 36%, var(--ui-border) 64%);
  background: color-mix(in srgb, var(--light) 76%, white 24%);
  color: var(--dark);
  transform: translateY(-1px);
}

.icono-candidate-action-btn--remove {
  border-color: color-mix(in srgb, #8f2b24 38%, var(--ui-border) 62%);
  background: color-mix(in srgb, #fff4f2 86%, white 14%);
  color: #7c221d;
}

.icono-candidate-action-btn--remove:hover:not(:disabled),
.icono-candidate-action-btn--remove:focus-visible:not(:disabled) {
  background: color-mix(in srgb, #ffe6e1 88%, white 12%);
  border-color: color-mix(in srgb, #8f2b24 56%, var(--ui-border) 44%);
  color: #7c221d;
}

/* Compatibility shim: legacy .icono-candidate-remove-button rules read by older snapshots/tests
   are folded into .icono-candidate-action-btn. The class still ships on the element so external
   selectors keep working. */
.icono-candidate-remove-button {
  font-size: 0.82rem;
  line-height: 1.1;
}

.icono-candidate-remove-button:disabled {
  opacity: 0.72;
  cursor: wait;
  transform: none;
}

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

.icono-load-sentinel {
  height: 1px;
}

.pswp {
  --pswp-bg: rgba(15, 11, 8, 0.94);
}

.pswp__bg {
  background: var(--pswp-bg) !important;
}

.pswp__img {
  border-radius: var(--icono-radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px color-mix(in srgb, var(--icono-ring-image) 72%, transparent);
}

/* Source: C:\Users\Admin\.codex\skills\frontend-design\SKILL.md (Visual Details) +
   C:\Users\Admin\.codex\skills\polish\SKILL.md (Icons & Images).
   Portrait-bearing surfaces intentionally keep a faint edge definition so artwork does not melt
   into similarly toned shells or backgrounds during dark/light theme changes. */
.icono-card-media img,
.icono-card--brick .iconoplasm-tooltip-portrait,
.icono-gene-swatch,
.icono-candidate-media,
.pswp__img {
  outline: 1px solid color-mix(in srgb, var(--icono-ring-image) 68%, transparent);
  outline-offset: -1px;
}

@media (prefers-reduced-motion: reduce) {
  .icono-card,
  .icono-card-media,
  .icono-card--brick,
  .iconoplasm-tooltip-portrait-media,
  .icono-vote-btn,
  .icono-links a,
  .icono-candidate-media,
  .icono-search-input {
    transition-duration: 0.01ms !important;
  }

  .icono-card--brick:hover,
  .icono-card--brick:active,
  .icono-vote-btn:hover:not(:disabled) {
    transform: none;
  }
}

.pswp__counter {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8rem;
}

.pswp__button {
  opacity: 0.9;
}

.pswp__button--close {
  border-radius: 999px;
  background: rgba(33, 27, 22, 0.68);
}

html:has(.pswp--open) body {
  overflow: hidden;
}

html[saved-theme="dark"] .icono-card-badge,
html[data-theme="dark"] .icono-card-badge,
html[saved-theme="dark"] .icono-gene-symbol-pill,
html[data-theme="dark"] .icono-gene-symbol-pill {
  background: rgba(10, 9, 8, 0.72);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.98);
}

html[saved-theme="dark"] .icono-card--brick,
html[data-theme="dark"] .icono-card--brick {
  --icono-brick-shadow-1: rgba(0, 0, 0, 0.18);
  --icono-brick-shadow-2: rgba(0, 0, 0, 0.22);
  --icono-brick-shadow-3: rgba(0, 0, 0, 0.28);
  --icono-brick-shadow-4: rgba(0, 0, 0, 0.34);
}

/* ───────── Gene detail: metadata sections (2-column paired layout) ───────── */
.icono-gene-manifestation {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--secondary, var(--darkgray));
  margin: 0;
  font-style: italic;
  max-width: 68ch;
}

.icono-gene-sections {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.icono-section-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid var(--ui-border);
}

.icono-section-row:first-child {
  border-top: 1px solid var(--ui-border);
}

.icono-section-cell {
  padding: 0.65rem 0.8rem;
}

.icono-section-cell--origin {
  border-left: 1px solid var(--ui-border);
}

.icono-section-label {
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--secondary, var(--darkgray));
  margin-bottom: 0.2rem;
}

.icono-section-value {
  font-size: 0.9rem;
  color: var(--dark);
  line-height: 1.4;
}

/* ───────── Separator ───────── */
.icono-separator {
  border: none;
  border-top: 1px solid var(--ui-border);
  margin: 1.5rem 0;
}

/* ───────── Skeleton loading ───────── */
.icono-gene-skeleton .icono-skel-block {
  background: var(--ui-bg);
  border-radius: 20px;
  border: 1px solid var(--ui-border);
  flex-shrink: 0;
}

.icono-gene-skeleton .icono-skel-line {
  background: var(--ui-bg);
  border-radius: 4px;
}

/* ───────── Responsive ───────── */
@media (max-width: 1180px) {
  .icono-gallery-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .icono-gallery-actions {
    justify-content: flex-start;
  }

  .icono-search--toolbar {
    flex-basis: auto;
  }
}

@media (max-width: 600px) {
  .icono-grid-sizer,
  .icono-card--masonry {
    width: calc(50% - 6px);
  }

  .icono-gutter-sizer {
    width: 12px;
  }

  .icono-grid[data-layout="image-only-masonry"] .icono-card--image-tile,
  .icono-grid[data-layout="image-only-masonry"] .icono-guest-login-card {
    width: min(100%, var(--icono-image-tile-width));
  }

  .icono-grid[data-layout="image-only-masonry"] {
    gap: 0;
  }

  .icono-grid[data-layout="image-only-masonry"] .icono-grid-sizer,
  .icono-grid[data-layout="image-only-masonry"] .icono-gutter-sizer {
    display: none;
  }

  .icono-gallery-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .icono-home-auth-card {
    align-items: stretch;
    flex-direction: column;
    padding: 0.85rem 0.9rem;
  }

  .icono-guest-login-card {
    align-items: stretch;
    flex-direction: column;
    padding: 0.9rem;
  }

  .icono-grid[data-layout="masonry"] .icono-guest-login-card {
    width: calc(50% - 6px);
  }

  .icono-guest-login-card .icono-guest-login-card-button {
    width: fit-content;
  }

  .icono-gene-request-surface {
    padding: 0;
  }

  .icono-gene-toolbar-rail {
    grid-template-columns: max-content minmax(11rem, 1fr);
  }

  .icono-gene-toolbar-rail > .icono-gene-request-panel {
    grid-column: auto;
    justify-self: stretch;
  }

  .icono-canonical-new-candidate-btn {
    width: auto;
  }

  .icono-request-option {
    grid-template-columns: 1fr;
  }

  .icono-request-option-strip {
    justify-content: flex-start;
  }

  .icono-request-option-thumb {
    width: 72px;
    height: 96px;
  }

  .icono-request-submit {
    width: 100%;
    justify-self: stretch;
  }

  .icono-request-diagnostics-grid {
    grid-template-columns: 1fr;
  }

  .icono-home-auth-link {
    width: 100%;
  }

  .icono-gallery-actions {
    justify-content: space-between;
    /* Below 600px the rail dissolves: items stretch full-width and stack,
       so the bordered container + vertical hairlines from the desktop rail
       (B-457 #1) would render as crooked frames around stacked rows. Drop
       the framing here and let the original full-width pills come back. */
    border: 0;
    background: transparent;
    padding: 0;
    gap: 0.5rem;
  }

  .icono-gallery-actions > * + *:not([hidden]) {
    border-left: 0;
    padding-left: 0;
  }

  .icono-gallery-actions .icono-gallery-order select,
  .icono-gallery-actions .icono-install-toggle {
    border-color: var(--ui-border);
    background: var(--light);
  }

  .icono-gallery-install {
    flex: 1 1 100%;
    min-width: 0;
  }

  .icono-install-toggle {
    width: 100%;
    justify-content: space-between;
  }

  .icono-install-tablist {
    gap: 0.45rem;
  }

  .icono-install-tab {
    min-width: 0;
  }

  .icono-install-steps li {
    line-height: 1.34;
  }

  .icono-install-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .icono-install-link {
    width: 100%;
    justify-content: center;
  }

  .icono-install-link--subtle {
    width: auto;
    text-align: left;
  }

  .icono-search--toolbar {
    flex-basis: auto;
  }

  .icono-gallery-order {
    justify-content: space-between;
  }

  .icono-gallery-order select {
    min-width: 9rem;
  }

  .icono-card--brick {
    grid-template-columns: 132px minmax(0, 1fr);
    align-items: start;
  }

  .icono-card--brick .iconoplasm-tooltip-portrait {
    min-height: 0;
    aspect-ratio: 0.88;
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .icono-card--brick .iconoplasm-tooltip-body {
    min-height: auto;
    padding: 0.95rem 0.95rem 0.8rem 0.9rem;
  }

  .icono-card--brick .iconoplasm-tooltip-header {
    min-height: 0;
    padding-bottom: 0.7rem;
  }

  .icono-card--brick .iconoplasm-tooltip-symbol {
    font-size: clamp(1.55rem, 7vw, 1.95rem);
  }

  .icono-card--brick .iconoplasm-tooltip-name {
    font-size: 0.92rem;
    line-height: 1.34;
  }

  .icono-card--brick .iconoplasm-tooltip-meta {
    display: none;
  }

  .iconoplasm-tooltip-mobile-rowgrid {
    display: flex;
    flex-direction: column;
    grid-column: 1 / -1;
    border-top: 1px solid var(--icono-brick-line-strong);
    background: var(--icono-brick-surface);
  }

  .iconoplasm-tooltip-mobile-row {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
  }

  .iconoplasm-tooltip-mobile-cell {
    min-width: 0;
    padding: 0.34rem 0.45rem;
    border-bottom: 1px solid var(--icono-brick-line);
  }

  /* The shared mobile card intentionally splits "character" and "molecular" columns visually.
     Keep these colors explicit so revisits do not inherit stray anchor/link styling. */
  .iconoplasm-tooltip-mobile-cell--character {
    color: var(--icono-brick-ink);
  }

  .iconoplasm-tooltip-mobile-cell--molecular {
    color: color-mix(in srgb, var(--icono-brick-ink) 78%, white 22%);
  }

  .iconoplasm-tooltip-mobile-cell--character .iconoplasm-tooltip-meta-value,
  .iconoplasm-tooltip-mobile-cell--character .iconoplasm-tooltip-meta-value--compact {
    font-size: 0.88rem;
    line-height: 1.28;
    font-style: normal;
    font-weight: 580;
    opacity: 0.88;
  }

  .iconoplasm-tooltip-mobile-cell--molecular .iconoplasm-tooltip-meta-value,
  .iconoplasm-tooltip-mobile-cell--molecular .iconoplasm-tooltip-meta-value--compact {
    font-size: 0.88rem;
    line-height: 1.28;
    font-style: italic;
    font-weight: 420;
    opacity: 0.74;
  }

  .iconoplasm-tooltip-mobile-rowgrid--skeleton .iconoplasm-tooltip-mobile-cell--character,
  .iconoplasm-tooltip-mobile-rowgrid--skeleton .iconoplasm-tooltip-mobile-cell--molecular {
    color: inherit;
  }

  .icono-vote-box {
    /* Was `width: 100%`, which forced the secondary action rail (remove +
       copy-to-gene) to wrap onto a second row on mobile. B-469 wants a
       single rail. `flex: 1` makes the approve/reject pair stretch to
       fill the leftover width while keeping the small icon trio inline. */
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }

  .icono-vote-box--brick {
    width: 2.45rem;
  }

  .icono-gene-header {
    flex-direction: column;
    align-items: stretch;
  }

  .icono-gene-swatch {
    width: 100%;
    min-height: 180px;
  }

  .icono-gene-portrait-shell {
    width: min(100%, 320px);
    align-self: flex-start;
  }

  .icono-gene-swatch--portrait {
    width: 100%;
    min-height: 0;
  }

  .icono-candidate-grid-sizer,
  .icono-candidate-card {
    width: 100%;
  }

  .icono-candidate-gutter-sizer {
    width: 0;
  }

  .icono-candidate-footer {
    align-items: center;
  }

  .icono-toolbar-link {
    width: auto;
    justify-content: flex-start;
  }

  .icono-section-row {
    grid-template-columns: 1fr;
  }

  .icono-section-cell--origin {
    border-left: none;
    border-top: 1px dashed var(--ui-border);
    padding-top: 0.35rem;
  }

  .icono-hero-title {
    font-size: 2.15rem;
  }

  .icono-card-info {
    padding: 0.75rem 0.8rem 0.85rem;
  }

  .icono-card-name {
    font-size: 0.78rem;
  }
}

/* ───────── Page tabs (mobile) — horizontal underline tabs above the content ───────── */
.icono-mobile-switcher {
  display: none;
}
@media (max-width: 800px) {
  .icono-mobile-switcher {
    display: flex;
    max-width: 960px;
    margin: 0 auto 0.4rem;
    border-bottom: 1px solid var(--ui-border);
  }
  .icono-mobile-switcher .icono-page-tab {
    flex: 1;
    text-align: center;
    padding: 0.6rem 0.4rem;
    border-bottom: 2px solid transparent;
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.85rem;
    color: var(--secondary, var(--darkgray));
    text-decoration: none;
    transition:
      color 0.15s ease,
      border-color 0.15s ease;
  }
  .icono-mobile-switcher .icono-page-tab.is-active,
  .icono-mobile-switcher .icono-page-tab[aria-current="page"] {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600;
  }
}

/* ───────── Clans page ───────── */
.icono-clans {
  padding-bottom: 2rem;
}

.icono-clans-head {
  margin-bottom: 1.4rem;
  padding: 18px 20px;
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--ui-bg) 80%, var(--light));
  box-shadow: 0 10px 24px rgba(33, 21, 12, 0.05);
}
.icono-clans-kicker,
.icono-clans-sec {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--secondary, var(--darkgray)) 70%, transparent);
}
.icono-clans-sec {
  margin: 1.5rem 2px 0.7rem;
}
.icono-clans-count {
  font-family: "League Spartan", "Bahnschrift", sans-serif;
  font-weight: 800;
  font-size: 40px;
  line-height: 1;
  margin: 6px 0 2px;
  color: color-mix(in oklch, var(--dark) 88%, var(--accent) 12%);
}
.icono-clans-sub {
  font-family: "Special Elite", Georgia, serif;
  font-size: 14px;
  color: color-mix(in srgb, var(--dark) 70%, transparent);
}
.icono-clans-bar {
  margin-top: 14px;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--dark) 10%, transparent);
  overflow: hidden;
}
.icono-clans-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.5s var(--icono-ease-out);
}
.icono-clans-note {
  font-family: "Special Elite", Georgia, serif;
  font-size: 0.92rem;
  color: var(--darkgray);
  margin: 0.6rem 2px;
}

/* Clan specimen card — one row per clan */
.icono-clans-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.icono-clan {
  min-width: 0;
  padding: 15px 17px 13px;
  border: 1px solid color-mix(in srgb, var(--ui-border) 90%, var(--dark));
  background: var(--ui-bg);
  box-shadow: 0 10px 24px rgba(53, 38, 27, 0.1);
}
.icono-clan-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.icono-clan-head-l {
  min-width: 0;
}
.icono-clan-k {
  display: inline-block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--secondary, var(--darkgray));
  text-decoration: none;
}
a.icono-clan-k:hover {
  color: var(--accent);
}
.icono-clan-nm {
  margin-top: 1px;
  font-family: "Special Elite", Georgia, serif;
  font-size: 20px;
  line-height: 1.1;
  color: var(--dark);
}
.icono-clan-ae {
  display: inline-block;
  flex: 0 0 auto;
  font-family: "Caveat", "Segoe Script", cursive;
  font-size: 29px;
  line-height: 1;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  transform: rotate(-3deg);
  transform-origin: right center;
}
a.icono-clan-ae:hover {
  text-decoration: underline;
}
/* Reel: prev arrow, a single page of blots, next arrow */
.icono-clan-reel {
  display: flex;
  align-items: stretch;
  gap: 9px;
  margin-top: 12px;
}
/* A page is a 2x2 grid of four large portrait tiles; arrows flip to the next /
   previous four and stretch the full two-row height of the grid. */
.icono-clan-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-content: start;
  align-items: start;
  flex: 1;
  min-width: 0;
  gap: 10px;
}
.icono-clan-nav {
  flex: 0 0 auto;
  width: 34px;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--secondary, var(--darkgray)) 30%, var(--ui-border));
  border-radius: 6px;
  background: color-mix(in srgb, var(--secondary, var(--darkgray)) 7%, var(--ui-bg));
  /* Default = the brand UI brown (--secondary). Teal is reserved for hover only. */
  color: var(--secondary, var(--darkgray));
  font-family: "IBM Plex Mono", monospace;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition:
    color 0.15s var(--icono-ease-out),
    border-color 0.15s var(--icono-ease-out),
    background 0.15s var(--icono-ease-out);
}
.icono-clan-nav:hover:not(:disabled) {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--ui-bg));
}
/* Disabled = already on the first / last page. Muted, not removed, so both
   arrows are always visible and the layout never shifts. */
.icono-clan-nav:disabled {
  color: color-mix(in srgb, var(--secondary, var(--darkgray)) 36%, transparent);
  border-color: color-mix(in srgb, var(--ui-border) 55%, transparent);
  background: transparent;
  cursor: default;
}
.icono-clan-foot {
  margin-top: 10px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--secondary, var(--darkgray)) 70%, transparent);
}

/* Clan member tiles reuse the shared design-system blot-only card
   (.icono-card--variant-image-only / .icono-image-only-*) verbatim -- portrait
   fitting, the name + symbol caption, and container-query scaling all come from
   shared-card-label.css. The only grid-specific rule: fill the 2x2 cell. */
.icono-clan-tile {
  inline-size: 100%;
  max-inline-size: 100%;
}

/* Unfiled (sealed) clans — uniform rust-stamp specimen chips, never ragged */
.icono-clan-unfiled-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 9px;
}
.icono-clan-unfiled {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 384 / 512;
  border: 1px solid color-mix(in srgb, var(--ui-border) 70%, transparent);
  background: color-mix(in srgb, var(--ui-bg) 55%, transparent);
}
.icono-clan-unfiled span {
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--icono-reject) 62%, transparent);
  border: 1px solid color-mix(in srgb, var(--icono-reject) 38%, transparent);
  border-radius: 3px;
  padding: 2px 6px;
  transform: rotate(-7deg);
}

.icono-clan--skeleton {
  min-height: 150px;
  border: 1px solid color-mix(in srgb, var(--ui-border) 60%, transparent);
  background: linear-gradient(
    100deg,
    var(--ui-bg) 30%,
    color-mix(in srgb, var(--ui-border) 30%, var(--ui-bg)) 50%,
    var(--ui-bg) 70%
  );
  background-size: 200% 100%;
  animation: icono-clan-shimmer 1.4s ease-in-out infinite;
}
@keyframes icono-clan-shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

/* ───────── Gene page: resampling suggestions ───────── */
.icono-suggest {
  margin: 1.6rem 0 0.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--ui-border);
}
.icono-suggest-lab {
  margin-bottom: 9px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--secondary, var(--darkgray)) 70%, transparent);
}
.icono-suggest-form {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.icono-suggest-input {
  flex: 1;
  box-sizing: border-box;
  resize: vertical;
  min-height: 2.6rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--ui-bg) 70%, var(--light));
  font-family: "Special Elite", Georgia, serif;
  font-size: 14px;
  color: var(--dark);
}
.icono-suggest-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
.icono-suggest-btn {
  padding: 0.5rem 0.86rem;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 46%, var(--ui-border));
  background: color-mix(in srgb, var(--accent) 12%, var(--light));
  color: color-mix(in srgb, var(--dark) 85%, var(--accent) 15%);
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s var(--icono-ease-out);
}
.icono-suggest-btn:hover {
  background: color-mix(in srgb, var(--accent) 18%, var(--light));
}
.icono-suggest-btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.icono-suggest-err {
  margin: 0.4rem 0 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  color: var(--icono-reject);
}
.icono-suggest-signin {
  margin: 0;
  font-family: "Special Elite", Georgia, serif;
  font-size: 0.9rem;
  color: var(--darkgray);
}
.icono-suggest-list {
  margin-top: 12px;
}
.icono-suggest-item {
  display: flex;
  gap: 10px;
  padding: 0.7rem 0;
  border-top: 1px solid color-mix(in srgb, var(--ui-border) 42%, transparent);
}
.icono-suggest-av {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--ui-border);
  background: color-mix(in srgb, var(--accent) 16%, var(--ui-bg));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--accent);
}
.icono-suggest-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.icono-suggest-main {
  flex: 1;
  min-width: 0;
}
.icono-suggest-meta {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--secondary, var(--darkgray)) 70%, transparent);
}
.icono-suggest-who {
  color: var(--secondary, var(--darkgray));
}
.icono-suggest-body {
  margin-top: 3px;
  font-family: "Special Elite", Georgia, serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--darkgray);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.icono-suggest-acts {
  display: flex;
  gap: 12px;
  margin-top: 5px;
}
.icono-suggest-acts button {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--secondary, var(--darkgray)) 70%, transparent);
}
.icono-suggest-acts button:hover {
  color: var(--accent);
}
.icono-suggest-editbox {
  margin-top: 6px;
}
.icono-suggest-editbox .icono-suggest-input {
  width: 100%;
}
.icono-suggest-editrow {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}
.icono-suggest-cancel {
  border: 0;
  background: none;
  padding: 0.5rem 0.4rem;
  cursor: pointer;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--secondary, var(--darkgray));
}
.icono-suggest-cancel:hover {
  color: var(--dark);
}
.icono-suggest-empty {
  margin: 0.4rem 0 0;
  font-family: "Special Elite", Georgia, serif;
  font-size: 0.88rem;
  color: color-mix(in srgb, var(--secondary, var(--darkgray)) 70%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .icono-clan--skeleton {
    animation: none;
  }
  .icono-clans-bar-fill {
    transition: none;
  }
}