/* BioStudio AI — Group Lab.
   App-specific UI on top of the shared Studio design system (.studio vars).
   Scoped under .gl-* and only used inside the Group Lab window. */

/* ---- Separator chooser ---- */
.gl-seps { display: flex; flex-wrap: wrap; gap: 8px; }
.gl-sep {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--st-line); border-radius: 8px; padding: 7px 12px;
  background: var(--st-bg); cursor: pointer; font-size: 13px; user-select: none;
}
.gl-sep input { accent-color: var(--st-accent); }
.gl-sep.on { border-color: var(--st-accent); background: color-mix(in srgb, var(--st-accent) 10%, transparent); }

/* ---- Section editor (deliberately large + friendly) ---- */
.gl-sections {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px;
}
.gl-section-card {
  border: 1px solid var(--st-line); border-radius: 12px; padding: 14px;
  background: var(--st-bg); display: flex; flex-direction: column; gap: 10px;
}
.gl-section-head { display: flex; align-items: center; gap: 10px; }
.gl-section-no {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; color: #fff;
  font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center;
}
.gl-section-name {
  flex: 1; min-width: 0; border: none; border-bottom: 2px solid var(--st-line);
  background: transparent; color: var(--st-ink);
  font-size: 19px; font-weight: 700; padding: 4px 2px;
}
.gl-section-name:focus { outline: none; border-bottom-color: var(--st-accent); }
.gl-section-meta { font-size: 11.5px; }

.gl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gl-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--st-line); border-radius: 999px;
  padding: 4px 10px; font-size: 13px; font-weight: 600; background: var(--st-panel);
}
.gl-chip.muted { color: var(--st-ink-soft); border-color: var(--st-line); font-weight: 500; }
.gl-chip-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.gl-section-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }

/* ---- Flagged samples ---- */
.gl-flags { display: flex; flex-direction: column; gap: 8px; }
.gl-flag {
  display: flex; align-items: flex-start; gap: 10px;
  border: 1px solid color-mix(in srgb, var(--st-bad) 35%, var(--st-line));
  border-left: 4px solid var(--st-bad);
  border-radius: 8px; padding: 9px 11px;
  background: color-mix(in srgb, var(--st-bad) 7%, transparent);
}
.gl-flag-main { flex: 1; min-width: 0; }
.gl-flag-code { font-weight: 700; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ---- Separated table extras ---- */
.gl-table th.gl-th-sec { color: var(--st-accent); }
.gl-table td.gl-cell-sec { white-space: nowrap; }
.gl-table td.gl-cell-sec .gl-chip-dot { margin-right: 6px; vertical-align: middle; }
.gl-row-flag td { background: color-mix(in srgb, var(--st-bad) 9%, transparent) !important; }
.gl-status { font-size: 11.5px; font-weight: 600; }
.gl-status.ok { color: var(--st-ok); }
.gl-status.bad { color: var(--st-bad); }

/* ---- Group pickers ---- */
.gl-group-pick, .gl-pick-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.gl-pick {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--st-line); border-radius: 999px; padding: 6px 12px;
  background: var(--st-bg); cursor: pointer; font-size: 13px; font-weight: 600; user-select: none;
}
.gl-pick input { accent-color: var(--st-accent); }
.gl-pick.on { border-color: var(--st-accent); background: color-mix(in srgb, var(--st-accent) 12%, transparent); color: var(--st-accent); }

/* ---- Demo dataset picker ---- */
.gl-demos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px;
}
.gl-demo {
  border: 1px solid var(--st-line); border-radius: 12px; padding: 14px;
  background: var(--st-bg); cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
  display: flex; flex-direction: column; gap: 8px;
}
.gl-demo:hover { border-color: var(--st-accent); box-shadow: 0 4px 16px color-mix(in srgb, var(--st-accent) 18%, transparent); transform: translateY(-1px); }
.gl-demo:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 2px; }
.gl-demo.on { border-color: var(--st-accent); background: color-mix(in srgb, var(--st-accent) 10%, transparent); }
.gl-demo-name { font-weight: 700; font-size: 14px; }
.gl-demo-blurb { font-size: 12px; color: var(--st-ink-soft); line-height: 1.45; flex: 1; }
.gl-demo-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.gl-demo-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 700;
  color: var(--st-accent); background: color-mix(in srgb, var(--st-accent) 10%, transparent);
  padding: 2px 8px; border-radius: 6px;
}
.gl-demo-tag { font-size: 10.5px; color: var(--st-ink-soft); text-transform: uppercase; letter-spacing: .3px; }

/* ---- Annotated raw-data preview ---- */
.gl-raw td, .gl-raw th { white-space: nowrap; }
.gl-raw-codehead { color: var(--st-accent); }
.gl-raw-codecell { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.gl-code { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0; }
.gl-code.bad { opacity: .95; }
.gl-tok {
  display: inline-block; padding: 1px 6px; border-radius: 6px;
  border: 1.5px solid var(--st-line); font-weight: 700; font-size: 12px; line-height: 1.5;
}
.gl-tok.extra {
  color: var(--st-bad); border-style: dashed;
  border-color: color-mix(in srgb, var(--st-bad) 55%, var(--st-line));
  background: color-mix(in srgb, var(--st-bad) 8%, transparent);
}
.gl-code-sep { padding: 0 3px; color: var(--st-ink-soft); font-weight: 700; }
.gl-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.gl-legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--st-ink-soft); font-weight: 600; }

/* ---- Figures ---- */
.gl-fig { display: flex; justify-content: center; overflow: auto; }