/* components/_session.css
   The Session panel's own layout: the Dataset box (ui/modules/dataset-card.js),
   the Open… menu (ui/modules/open-data-menu.js), the address bar with its
   connection lines, and the notice next to the dataset dropdown. Controls
   inside keep the shared look of _controls.css and _buttons.css. */

/* ------------------------------------------------------------------------
   Dataset box
   --------------------------------------------------------------------- */

.dataset-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.dataset-card > p {
  margin: 0;
}

/* The name wraps whole: nothing of it is cut. */
.dataset-card-name {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: var(--type-heading);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}

.dataset-card[data-state="empty"] .dataset-card-name {
  font-weight: var(--font-weight-regular);
  color: var(--color-text-tertiary);
}

/* Opening: the shared spinner beside what is being opened. */
.dataset-card-title {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  min-width: 0;
}

.dataset-card-title > .spinner[hidden] {
  display: none;
}

.dataset-card[data-state="loading"] .dataset-card-name {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.dataset-card-summary {
  font-size: var(--type-readout);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

.dataset-card-origin,
.dataset-card-read {
  font-size: var(--type-hint);
  line-height: var(--leading-normal);
  color: var(--color-text-tertiary);
  overflow-wrap: anywhere;
}

.dataset-card-read {
  font-variant-numeric: tabular-nums;
}

.dataset-card-description-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-0-5);
}

.dataset-card-description {
  margin: 0;
  font-size: var(--type-hint);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
}

/* A long description shows two lines until "More". */
.dataset-card-description[data-folded="true"] {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* "More" / "Less": a text button, quieter than a pill. */
.dataset-card-more {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--type-hint);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-link);
  cursor: pointer;
}

.dataset-card-more:hover {
  color: var(--color-text-link-hover);
  text-decoration: underline;
}

/* ------------------------------------------------------------------------
   Open… and its menu
   --------------------------------------------------------------------- */

.open-menu {
  position: relative;
}

.open-menu-button {
  width: 100%;
}

/* The disclosure chevron of the sidebar, pointing at the menu below. */
.open-menu-button::before {
  content: '';
  order: 1;
  width: 5px;
  height: 5px;
  margin-left: var(--space-1);
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-30%) rotate(45deg);
  opacity: var(--opacity-70);
}

.open-menu-list {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  right: 0;
  z-index: var(--z-dropdown);
  display: flex;
  flex-direction: column;
  padding: var(--space-1) 0;
  background: var(--color-surface-elevated);
  border: var(--border-default);
  border-radius: var(--radius-none);
  box-shadow: var(--shadow-md);
}

.open-menu-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: max(var(--control-list-row-height), var(--control-row-min));
  margin: 0;
  padding: var(--space-1-5) var(--space-2-5);
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: var(--transition-colors);
}

.open-menu-item:hover,
.open-menu-item:focus-visible {
  background: var(--color-interactive-secondary-hover);
}

.open-menu-item:focus-visible {
  outline-offset: calc(-1 * var(--border-width-2));
}

.open-menu-item-label {
  font-size: var(--type-control);
}

.open-menu-item-hint {
  /* The formats a choice opens: wrapped onto a second line, right-aligned,
     when they are longer than the sidebar is wide, never cut off. */
  min-width: 0;
  font-size: var(--type-hint);
  color: var(--color-text-tertiary);
  text-align: right;
}

/* ------------------------------------------------------------------------
   Address bar and its connections
   --------------------------------------------------------------------- */

.address-row {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
}

.address-row > .obs-select {
  flex: 1;
  min-width: 0;
}

.address-row > .btn {
  flex: none;
}

/* One open connection: what it is, where to, and Disconnect. */
.connection-line {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  margin-top: var(--control-row-gap);
  min-width: 0;
  font-size: var(--type-hint);
  line-height: var(--leading-normal);
}

.connection-line[hidden] {
  display: none;
}

.connection-kind {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}

.connection-kind::before {
  content: '';
  width: var(--space-1-5);
  height: var(--space-1-5);
  border-radius: var(--radius-full);
  background: var(--color-success);
}

.connection-target {
  flex: 1;
  min-width: 0;
  color: var(--color-text-tertiary);
  overflow-wrap: anywhere;
}

.connection-line > .btn {
  flex: none;
}

/* A connection's address on one line: the host and the last part of its
   path, cut with an ellipsis; the whole address is its title. */
.connection-address {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* What is kept in this browser (ui/modules/kept-stores-line.js): its
   summary on one line beside Manage… (short by construction,
   `summarizeKeptStores`; the whole of it in its title and in Manage…). */
.kept-stores-row {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  min-width: 0;
}

.kept-stores-summary {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  font-size: var(--type-hint);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

.kept-stores-row > .btn {
  flex: none;
}

/* ------------------------------------------------------------------------
   Cells to open (ui/modules/subsample-control.js)
   --------------------------------------------------------------------- */

/* Apply, Open all cells and Copy link on one row at the narrowest panel,
   under the settings they apply. */
.subsample-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-1-5);
  min-width: 0;
  margin-top: var(--control-block-gap);
}

/* The line on the cells open, a row below the buttons or the settings. */
.subsample-status:not(:empty) {
  margin-top: var(--control-row-gap);
}

.subsample-actions[hidden] {
  display: none;
}

.subsample-actions > .btn {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
}

/* Genes read for (ui/modules/gene-read-control.js): its one status line
   (the chosen step's cells and cost, or how far a read is) never wraps. */
.gene-read-status {
  white-space: nowrap;
}

/* What to do about a sign-in that did not finish (an administrator's approval). */
.connection-help {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--color-text-link);
  text-decoration: underline;
}

/* A line that links to help carries a long reason beside the link and a
   button ("Use another account"): kept on one row, the reason was squeezed to
   a column one letter wide. The reason takes the first row whole; the link,
   the button and the (i) follow on the next. */
.connection-line:has(> .connection-help:not([hidden])) {
  flex-wrap: wrap;
}

.connection-line:has(> .connection-help:not([hidden])) > .connection-target {
  flex-basis: 100%;
}

/* ------------------------------------------------------------------------
   Notices
   --------------------------------------------------------------------- */

/* What failed with the dataset list or the last dataset chosen, with the
   retry that repeats it. */
.dataset-notice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  margin-top: var(--control-row-gap);
}

.dataset-notice[hidden] {
  display: none;
}

.dataset-notice-message {
  margin: 0;
  font-size: var(--type-hint);
  line-height: var(--leading-normal);
  color: var(--color-danger-text);
}

/* The startup line in Open data, and the failure that replaces it when the
   app's code could not load (ui/core/code-load-watch.js). */
#data-source-status.error {
  color: var(--color-danger-text);
}

/* ------------------------------------------------------------------------
   The Session panel's collapsible sections (ui/modules/session-sections.js):
   Subsampling and Data mapping. A section heading whose button opens its
   content (the sidebar's inline disclosure), with its (i) beside it; while
   collapsed the header says what it holds in one line (`.disclosure-desc`),
   which the open content says instead.
   --------------------------------------------------------------------- */

.session-disclosure-heading {
  flex: 1;
  min-width: 0;
}

.session-disclosure > .disclosure-header-row {
  gap: var(--space-1);
}

/* The header is the heading's own text: no row padding, the heading's type,
   and as tall as an option row (--control-row-min: compact with a mouse, a
   fingertip's row on a coarse pointer, as every disclosure header is).
   Collapsed, the summary takes a line of its own under the title, whole
   (however narrow the panel: never cut, never hidden). */
.session-disclosure .disclosure-header {
  min-height: var(--control-row-min);
  padding: 0;
  column-gap: var(--space-1-5);
  row-gap: 0;
  flex-wrap: wrap;
  font: inherit;
}

.session-disclosure .disclosure-header[aria-expanded="false"] > .disclosure-desc {
  display: block;
  order: 1;
  flex-basis: 100%;
  overflow: visible;
  white-space: normal;
  font-size: var(--type-hint);
  line-height: var(--leading-normal);
  color: var(--color-text-tertiary);
}

.session-disclosure .disclosure-header[aria-expanded="false"] > .disclosure-desc:empty {
  display: none;
}

.session-disclosure .disclosure-title,
.session-disclosure .disclosure-header[aria-expanded="true"] > .disclosure-title {
  flex: none;
  font-size: var(--type-heading);
  font-weight: var(--font-weight-semibold);
}


.session-disclosure .disclosure-header[aria-expanded="true"] > .disclosure-desc {
  display: none;
}

.session-disclosure .disclosure-desc {
  font-weight: var(--font-weight-regular);
}

.session-disclosure .disclosure-header:hover,
.session-disclosure > .disclosure-header-row:hover {
  background: transparent;
}

/* The content's blocks start a row below the heading, as a block's do. */
.session-disclosure > .disclosure-content {
  padding: var(--control-row-gap) 0 0;
}

.session-disclosure > .disclosure-content > :first-child {
  margin-top: 0;
}