:root {
    --bg:#ffffff;--card:rgba(255,255,255,0.96);--text:#0f172a;--muted:#475569;--border:#e5e7eb;
    --accent:#1e40af;--accent-weak:#dbeafe;--radius:16px;--shadow:0 6px 20px rgba(2,6,23,.06);--maxw:1100px;
  }
  html,body{height:100%}
  body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";color:var(--text);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  .container{max-width:var(--maxw);margin:clamp(12px,2vw,28px) auto;padding:0 clamp(12px,4vw,28px)}
  header.site-header{display:flex;justify-content:space-between;align-items:center;padding:12px 0 10px}
  .header-logo img{max-height:50px;width:auto}
  .badge{font-size:12px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
  h1{margin:0;font-size:clamp(22px,3.2vw,34px)}
  .subtitle{color:var(--muted);font-size:clamp(14px,2.1vw,16px)}
  .card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:clip}
  .tabbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px;border-bottom:1px solid var(--border);background:transparent}
  .tabbar [role="tab"]{appearance:none;border:1px solid var(--border);background:#fff0;color:var(--muted);padding:9px 14px;border-radius:999px;font-weight:600;font-size:14px;letter-spacing:.01em;cursor:pointer;transition:transform .08s ease,box-shadow .12s ease,border-color .12s ease}
  .tabbar [role="tab"][aria-selected="true"]{color:var(--text);border-color:color-mix(in srgb,var(--accent) 60%,var(--border));box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent);outline:none}
  .tabbar [role="tab"]:hover{transform:translateY(-1px)}
  .tabbar [role="tab"]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .panels{padding:clamp(14px,3vw,22px)}
  [role="tabpanel"]{display:block}
  [role="tabpanel"][hidden]{display:none}
  .lead{font-size:clamp(16px,2.2vw,18px);color:var(--muted)}
  .grid{display:grid;gap:clamp(12px,2.2vw,18px);grid-template-columns:1fr}
  @media(min-width:760px){.grid.two{grid-template-columns:1fr 1fr}}
  .section{border:1px solid var(--border);border-radius:12px;padding:clamp(12px,2.2vw,18px);background:var(--card)}
  .section h3{margin:0 0 6px;font-size:clamp(16px,2.4vw,18px)}
  .hero-img{width:100%;max-width:900px;display:block;margin:10px auto 18px;border-radius:10px;border:1px solid var(--border)}
  footer{color:var(--muted);font-size:13px;padding:16px 0 6px}

  /* a11y helpers */
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

  /* gene search UI */
  .gene-row{display:flex;gap:10px;align-items:stretch}
  .gene-input-wrap{position:relative;flex:1}
  input[type="text"].gene-input{width:100%;box-sizing:border-box;padding:10px 36px 10px 12px;border-radius:10px;border:1px solid var(--border);font-size:16px}
  input[type="text"].gene-input:focus{outline:2px solid var(--accent);outline-offset:2px}
  .clear-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;font-size:18px;line-height:1;cursor:pointer;color:var(--muted);padding:4px 6px}
  .clear-btn:hover{opacity:.8}
  ul.suggest{position:absolute;z-index:10;left:0;right:0;margin:6px 0 0;list-style:none;padding:6px 0;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);max-height:280px;overflow:auto;display:none}
  ul.suggest[data-open="true"]{display:block}
  ul.suggest li{padding:8px 12px;cursor:pointer}
  ul.suggest li[aria-selected="true"],ul.suggest li:hover{background:var(--accent-weak)}
  ul.suggest li em{font-style:normal;font-weight:700}
  button.go{padding:10px 16px;border-radius:10px;border:1px solid var(--border);background:var(--card);cursor:pointer;font-weight:700}
  button.go:hover{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent)}
  .status{color:var(--muted);font-size:14px;margin-top:6px}
  .link-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:10px}
  .ext-link{font-weight:700;text-decoration:none;border:1px solid var(--border);padding:6px 10px;border-radius:999px}
  .ext-link:hover{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent)}
  .ext-link.btn-green{display:inline-block;background-color:#28a745;color:#fff;padding:8px 14px;border-radius:6px;font-weight:700;text-decoration:none;border:none;transition:background-color .15s ease,transform .08s ease}
  .ext-link.btn-green:hover{background-color:#218838;transform:translateY(-1px)}

  /* image cards + grid */
  .img-grid{display:grid;gap:12px;grid-template-columns:1fr}
  @media(min-width:860px){.img-grid{grid-template-columns:1fr 1fr}}
  .img-card{border:1px solid var(--border);border-radius:12px;padding:10px;background:var(--card);position:relative}
  .img-card h4{margin:0 0 8px;font-size:14px;color:var(--muted)}
  .img-card img{width:100%;height:auto;display:block;border-radius:8px}
  .img-actions{position:absolute;inset:8px;display:flex;justify-content:flex-end;align-items:flex-start;gap:8px;opacity:0;pointer-events:none;transition:opacity .15s ease}
  .img-card:hover .img-actions,.img-card:focus-within .img-actions{opacity:1;pointer-events:auto}
  .img-actions .btn{padding:6px 10px;border-radius:8px;border:1px solid var(--border);background:rgba(255,255,255,.9);font-size:12px;font-weight:700;cursor:pointer;text-decoration:none;color:inherit}
  .img-actions .btn:hover{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent)}

  /* lightbox */
  .lightbox{position:fixed;inset:0;background:rgba(15,23,42,.7);display:none;align-items:center;justify-content:center;padding:24px;z-index:9999}
  .lightbox[open]{display:flex}
  .lightbox .wrap{position:relative;max-width:min(96vw,1400px);max-height:90vh}
  .lightbox img{max-width:100%;max-height:90vh;display:block;background:#fff;border-radius:10px}
  .lightbox .close{position:absolute;top:-12px;right:-12px;border:0;background:#fff;border-radius:999px;width:36px;height:36px;cursor:pointer;font-size:18px;box-shadow:var(--shadow)}


  /* cell-type toolbar — CONSOLIDATED */
    .ct-toolbar {
      display:flex; flex-wrap:wrap; gap:8px; margin-top:12px;
    }
    .ct-btn {
      appearance:none;
      border:1px solid var(--border);
      background:#ccc;           /* idle: solid gray (match your later intention) */
      color:#000;
      padding:7px 12px;
      border-radius:999px;
      font-weight:700;
      cursor:pointer;
      transition:box-shadow .12s ease, border-color .12s ease, transform .08s ease, background-color .12s ease, color .12s ease;
    }
    .ct-btn:hover { transform:translateY(-1px); }
    .ct-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

    /* active/pressed state (solid navy) */
    .ct-btn[aria-pressed="true"] {
      background:#1e40af;
      color:#fff;
      border-color:#1e40af;
      box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
    }
  

/* --- NEW: full-width control plot --- */
#panel-control #control-result {
  /* keep section style but allow full width */
}

#panel-control .hero-img.control-plot {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 6px 0 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
}

#panel-control .control-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ===================== UMAP Palette Menu ===================== */

/* UMAP palette menu */
.umap-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Compact UMAP palette menu */
.umap-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;                          /* smaller gap */
  padding: 6px 10px;                 /* tighter vertical + horizontal padding */
  border: 1px solid var(--border);
  border-radius: 8px;                /* slightly smaller corner */
  background: var(--card);
  margin-bottom: 4px;                /* reduced spacing between rows */
}

.umap-label {
  font-weight: 500;                  /* slightly lighter weight */
  font-size: 14px;                   /* smaller text */
}

.swatch-btn {
  width: 28px;                       /* smaller button size */
  height: 28px;
  border-radius: 6px;                /* more compact shape */
  border: 1px solid var(--border);
  background: #eef1f5;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}

.swatch-btn svg {
  width: 14px; height: 16px;         /* scale down the icon */
}
.swatch-btn svg path { fill: #6b7280; }

.swatch-btn[aria-pressed="true"] {
  background: #1f3b73;
  border-color: #1f3b73;
}
.swatch-btn[aria-pressed="true"] svg path { fill: #fff; }

.swatch-btn:focus-visible {
  outline: 2px solid #1f3b73;
  outline-offset: 1px;
}

/* Optional: add chevron after labels */
.umap-label::after { 
  content: " ›"; 
  color:#6b7280; 
  font-weight:700; 
}

/* Two-column layout for UMAP palette */
.umap-menu {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 2 columns */
  gap: 6px 12px;                    /* row gap, column gap */
  list-style: none;
  margin: 0;
  padding: 0;
}

.umap-row {
  margin: 0;                        /* remove bottom margin (grid handles spacing) */
}

/* Optional: stretch both columns to equal height */
.umap-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
}