/* =========================================================================
   License Modal
   ========================================================================= */

.license-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}

.license-modal.hidden {
  display: none;
}

.license-backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-surface-overlay);
  backdrop-filter: blur(10px) saturate(1.15);
}

.license-content {
  position: relative;
  overflow: hidden;
  /* The card every other dialog uses (welcome, confirm, figure export,
     community annotation): square, a strong 2px rule, a flat surface. */
  border-radius: var(--radius-none);
  background: var(--color-surface-elevated);
  border: var(--border-default);
  box-shadow: var(--shadow-lg);
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.license-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.license-body {
  padding: var(--control-dialog-padding);
  overflow-y: auto;
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
}

.license-body p {
  margin: 0 0 var(--space-2-5) 0;
}

.license-body ol {
  margin: 0 0 var(--space-3) 0;
  padding-left: var(--space-5);
}

.license-body li {
  margin-bottom: var(--space-2);
}

.license-copyright {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.license-disclaimer {
  font-size: var(--type-label);
  color: var(--color-text-secondary);
  padding: var(--control-box-padding-y) var(--control-box-padding-x);
  background: var(--color-surface-tertiary);
  border: var(--border-width-1) solid var(--color-border-light);
  margin-top: var(--space-2);
}

@media (max-width: 640px) {
  .license-content {
    max-height: 90vh;
  }
}

/* =========================================================================
   Dialog chrome
   One header band, title and close glyph for every dialog: license,
   confirm, figure export, the analysis windows and the community annotation
   dialogs. The title reads like a sidebar panel title. The welcome card is
   the one exception: its header is the logo.
   ========================================================================= */

.license-header,
.app-dialog-header,
.confirm-dialog-header,
.community-annotation-modal-header,
.analysis-modal-header,
.figure-export-modal-title {
  padding: var(--control-dialog-header-padding-y) var(--control-dialog-header-padding-x);
  background: var(--color-surface-secondary);
  border-bottom: var(--border-width-1) solid var(--color-border-light);
}

.license-header h2,
.app-dialog-header h2,
.confirm-dialog-title,
.community-annotation-modal-title,
.figure-export-modal-title,
.analysis-modal-title {
  margin: 0;
  font-size: var(--type-title);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
}

.license-close,
.app-dialog-close,
.analysis-modal-close {
  position: relative;
  width: max(var(--space-6), var(--control-target-min));
  height: max(var(--space-6), var(--control-target-min));
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: var(--border-width-1) solid transparent;
  border-radius: var(--radius-none);
  font-size: var(--control-glyph-lg);
  line-height: var(--leading-none);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: var(--transition-colors);
}

.license-close:hover,
.app-dialog-close:hover,
.analysis-modal-close:hover {
  background: var(--color-interactive-secondary-hover);
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
}

/* =========================================================================
   Keyboard Shortcuts Section
   ========================================================================= */

.shortcuts-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
}

/* What a shortcut does reads first, flush left, and its keys sit flush right,
   so every description in the panel starts on one edge. With the keys first,
   each description started wherever its own combination happened to end. */
.shortcut-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--control-list-row-height);
  padding: var(--space-0-5) 0;
  font-family: var(--font-sans);
  font-size: var(--type-control);
  color: var(--color-text-secondary);
}

.shortcut-desc {
  flex: 1 1 auto;
  min-width: 0;
}

.shortcut-keys {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
  white-space: nowrap;
  color: var(--color-text-tertiary);
}

.shortcut-item kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(1.6em + var(--space-1));
  height: 1.6em;
  padding: 0 var(--space-1);
  font-variant-numeric: tabular-nums;
  font-size: var(--type-readout);
  font-weight: var(--font-weight-medium);
  background: var(--color-surface-tertiary);
  border: var(--border-default);
  color: var(--color-text-primary);
}

/* =========================================================================
   Analysis Modal / Popup
   ========================================================================= */

.analysis-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--easing-standard);
  pointer-events: none;
}

.analysis-modal.open {
  opacity: 1;
  pointer-events: auto;
}

.analysis-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-surface-overlay);
  backdrop-filter: blur(10px) saturate(1.15);
}

.analysis-modal-content {
  position: relative;
  width: 66vw;
  max-width: 860px;
  /* The minimums are the content's (set when the view opens: the plot's and
     the options' least widths, the header's, plot's and footer's least
     heights); they never exceed the viewport, so a short or narrow window
     still shows the header and its close button. */
  min-width: min(var(--modal-min-width, 0px), calc(100vw - 16px));
  height: 66vh;
  min-height: min(var(--modal-min-height, 0px), calc(100dvh - 16px));
  /* Same card as every other dialog. */
  border-radius: var(--radius-none);
  background: var(--color-surface-elevated);
  border: var(--border-default);
  box-shadow: var(--shadow-lg);
  /* Flexbox for main layout - more predictable than grid for resizing */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.96);
  transition: transform var(--duration-fast) var(--easing-standard),
    opacity var(--duration-fast) var(--easing-standard);
  opacity: 0;
}

.analysis-modal.open .analysis-modal-content {
  transform: scale(1);
  opacity: 1;
}

.analysis-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: move;
  /* A finger on the header moves the view; nothing behind it scrolls. */
  touch-action: none;
}

.analysis-modal-content.resizing,
.analysis-modal-content.resizing * {
  transition: none;
}


.analysis-modal-body {
  /* Flex container for horizontal layout - plot | resizer | options */
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 200px;
  overflow: hidden;
  background: var(--color-surface-elevated);
  position: relative;
}

.analysis-modal-plot-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 250px;
  padding: var(--space-3);
  background: var(--color-surface-elevated);
  overflow: hidden;
}

.analysis-modal-plot {
  position: relative;
  flex: 1;
  min-height: 200px;
  background: var(--color-surface-elevated);
  overflow: hidden;
}

/* =========================================================================
   Analysis Options Panel (Right Side of Modal) - Matches Website Patterns
   ========================================================================= */

.analysis-modal-options {
  width: 230px;
  min-width: 200px;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  background: var(--color-surface-secondary);
  overflow-y: auto;
  overflow-x: hidden;
  border-left: var(--border-width-1) solid var(--color-border-light);
}

.analysis-options-title {
  padding: var(--control-box-padding-y) var(--control-box-padding-x);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--control-row-gap);
  font-weight: var(--font-weight-medium);
  font-size: var(--type-heading);
  color: var(--color-text-secondary);
  border-bottom: var(--border-width-1) solid var(--color-border-light);
  background: var(--color-surface-tertiary);
}

.analysis-options-title-text {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analysis-options-export-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--control-block-gap);
}

.analysis-options-export-label {
  flex: 0 0 auto;
}

.analysis-options-export-toolbar {
  margin-top: 0;
}

.analysis-options-export-toolbar .btn {
  flex: 0 0 auto;
}

/* The option fields are the shared .control-block fields (label, select,
   slider row, checkbox): spaced by their own top margin. */
.analysis-options-content {
  flex: 1;
  padding: 0 var(--control-box-padding-x) var(--control-box-padding-y);
}

/* =========================================================================
   Analysis Modal - Resizable Grid Layout
   ========================================================================= */

/* Footer area with two panels */
.analysis-modal-footer-area {
  /* Flex container for horizontal layout - stats | resizer | annotations */
  display: flex;
  flex-direction: row;
  height: 200px;
  min-height: 200px;
  max-height: 50%;
  flex-shrink: 0;
  border-top: var(--border-width-1) solid var(--color-border-light);
  background: var(--color-surface-secondary);
  overflow: hidden;
  position: relative;
}

/* Stats panel (left side of footer) */
.analysis-modal-stats-panel {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Annotations panel (right side of footer) */
.analysis-modal-annotations-panel {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-left: var(--border-width-1) solid var(--color-border-light);
}

/* Panel titles */
.analysis-panel-title {
  padding: var(--control-box-padding-y) var(--control-box-padding-x);
  font-weight: var(--font-weight-medium);
  font-size: var(--type-heading);
  color: var(--color-text-secondary);
  background: var(--color-surface-tertiary);
  border-bottom: var(--border-width-1) solid var(--color-border-light);
  flex-shrink: 0;
}

/* Stats content area */
.analysis-stats-content {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

/* Annotations content area */
.analysis-annotations-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--control-box-padding-y) var(--control-box-padding-x);
}

/* Internal panel resizer elements */
.analysis-modal-resizer {
  background: transparent;
  flex-shrink: 0;
  transition: background-color var(--duration-fast) var(--easing-standard);
  position: relative;
  z-index: 5;
}

.analysis-modal-resizer:hover {
  background: color-mix(in srgb, var(--color-info) 10%, transparent);
}

.analysis-modal-resizer:active,
.analysis-modal-resizer.resizing {
  background: color-mix(in srgb, var(--color-info) 20%, transparent);
}

.analysis-modal-resizer-vertical {
  width: 8px;
  cursor: col-resize;
}

/* Vertical resizer grip dots */
.analysis-modal-resizer-vertical::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 24px;
  background-image: radial-gradient(circle, var(--color-text-tertiary) 1px, transparent 1px);
  background-size: 4px 4px;
  background-position: center;
  opacity: var(--opacity-60);
}

.analysis-modal-resizer-vertical:hover::before {
  opacity: 1;
  background-image: radial-gradient(circle, var(--color-text-secondary) 1px, transparent 1px);
}

/* Horizontal resizer - full width bar between body and footer */
.analysis-modal-resizer-horizontal {
  height: 8px;
  cursor: row-resize;
  flex-shrink: 0;
  position: relative;
  z-index: 5;
}

/* Horizontal resizer grip dots */
.analysis-modal-resizer-horizontal::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 4px;
  background-image: radial-gradient(circle, var(--color-text-tertiary) 1px, transparent 1px);
  background-size: 4px 4px;
  background-position: center;
  opacity: var(--opacity-60);
}

.analysis-modal-resizer-horizontal:hover::before {
  opacity: 1;
  background-image: radial-gradient(circle, var(--color-text-secondary) 1px, transparent 1px);
}

/* Intersection/corner resizer - at the crossing of horizontal and vertical resizers */
.analysis-modal-resizer-intersection {
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--color-surface-tertiary);
  border: var(--border-width-1) solid var(--color-border-light);
  cursor: nwse-resize;
  z-index: 10;
  transition: background-color var(--duration-fast) var(--easing-standard),
    border-color var(--duration-fast) var(--easing-standard);
}

.analysis-modal-resizer-intersection:hover {
  background: color-mix(in srgb, var(--color-info) 15%, transparent);
  border-color: color-mix(in srgb, var(--color-info) 30%, transparent);
}

.analysis-modal-resizer-intersection:active,
.analysis-modal-resizer-intersection.resizing {
  background: color-mix(in srgb, var(--color-info) 25%, transparent);
  border-color: color-mix(in srgb, var(--color-info) 40%, transparent);
}

/* Intersection resizer grip pattern */
.analysis-modal-resizer-intersection::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background-image: radial-gradient(circle, var(--color-text-tertiary) 1.5px, transparent 1.5px);
  background-size: 4px 4px;
  background-position: center;
  opacity: var(--opacity-70);
}

.analysis-modal-resizer-intersection:hover::before {
  opacity: 1;
  background-image: radial-gradient(circle, var(--color-text-secondary) 1.5px, transparent 1.5px);
}

/* Resize handles on every edge and corner of the expanded view. The card
   clips what overhangs it, so they lie just inside its border: 6 px edges and
   14 px corners, 16 px and 24 px for a finger. A handle shows a 2 px accent
   line on hover, focus or drag; the bottom-right corner always shows a
   faint grip. */
.analysis-modal-edge-resize {
  --modal-edge: 6px;
  --modal-corner: 14px;
  position: absolute;
  z-index: 10;
  touch-action: none;
}

@media (pointer: coarse) {
  .analysis-modal-edge-resize {
    --modal-edge: 16px;
    --modal-corner: 24px;
  }
}

.analysis-modal-edge-resize-n,
.analysis-modal-edge-resize-s {
  left: var(--modal-corner);
  right: var(--modal-corner);
  height: var(--modal-edge);
  cursor: ns-resize;
}

.analysis-modal-edge-resize-n { top: 0; }
.analysis-modal-edge-resize-s { bottom: 0; }

.analysis-modal-edge-resize-e,
.analysis-modal-edge-resize-w {
  top: var(--modal-corner);
  bottom: var(--modal-corner);
  width: var(--modal-edge);
  cursor: ew-resize;
}

.analysis-modal-edge-resize-e { right: 0; }
.analysis-modal-edge-resize-w { left: 0; }

.analysis-modal-edge-resize-ne,
.analysis-modal-edge-resize-se,
.analysis-modal-edge-resize-sw,
.analysis-modal-edge-resize-nw {
  width: var(--modal-corner);
  height: var(--modal-corner);
}

.analysis-modal-edge-resize-ne { top: 0; right: 0; cursor: nesw-resize; }
.analysis-modal-edge-resize-se { bottom: 0; right: 0; cursor: nwse-resize; }
.analysis-modal-edge-resize-sw { bottom: 0; left: 0; cursor: nesw-resize; }
.analysis-modal-edge-resize-nw { top: 0; left: 0; cursor: nwse-resize; }

/* The header's close button stays above the top edge and corners. */
.analysis-modal-edge-resize-n,
.analysis-modal-edge-resize-ne,
.analysis-modal-edge-resize-nw {
  z-index: 1;
}

.analysis-modal-close {
  z-index: 2;
}

.analysis-modal-edge-resize::after {
  content: '';
  position: absolute;
  border: 0 solid var(--color-border-focus);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--easing-standard);
}

.analysis-modal-edge-resize-n::after { inset: 0 0 auto; border-top-width: 2px; }
.analysis-modal-edge-resize-s::after { inset: auto 0 0; border-bottom-width: 2px; }
.analysis-modal-edge-resize-e::after { inset: 0 0 0 auto; border-right-width: 2px; }
.analysis-modal-edge-resize-w::after { inset: 0 auto 0 0; border-left-width: 2px; }
.analysis-modal-edge-resize-ne::after { inset: 0; border-top-width: 2px; border-right-width: 2px; }
.analysis-modal-edge-resize-se::after { inset: 0; border-bottom-width: 2px; border-right-width: 2px; }
.analysis-modal-edge-resize-sw::after { inset: 0; border-bottom-width: 2px; border-left-width: 2px; }
.analysis-modal-edge-resize-nw::after { inset: 0; border-top-width: 2px; border-left-width: 2px; }

@media (hover: hover) {
  .analysis-modal-edge-resize:hover::after {
    opacity: 1;
  }
}

.analysis-modal-edge-resize:focus-visible::after,
.analysis-modal-content.resizing > .analysis-modal-edge-resize:active::after {
  opacity: 1;
}

.analysis-modal-edge-resize-se::before {
  content: '';
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 9px;
  height: 9px;
  background: linear-gradient(
    135deg,
    transparent 0 45%, var(--color-text-tertiary) 45% 52%,
    transparent 52% 64%, var(--color-text-tertiary) 64% 71%,
    transparent 71% 83%, var(--color-text-tertiary) 83% 90%,
    transparent 90%
  );
  opacity: var(--opacity-50);
  pointer-events: none;
}

.analysis-modal-resizer:focus-visible,
.analysis-modal-resizer-intersection:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .analysis-modal-content,
  .analysis-modal-edge-resize::after {
    transition: none;
  }
}

/* A narrow screen gives the expanded view the whole screen. Plot, options,
   statistics and analysis stack in one column; the one split left is the
   plot's against the statistics, on a 24 px grip a finger can hold. The
   remembered and dragged sizes of a wider screen are overridden, not lost,
   hence !important over their inline values. */
@media (max-width: 768px) {
  .analysis-modal-content {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    border: none;
  }

  .analysis-modal-header {
    cursor: default;
  }

  .analysis-modal-edge-resize {
    display: none;
  }

  .analysis-modal-body {
    flex-direction: column;
    min-height: 0;
  }

  .analysis-modal-plot-section {
    flex: 1;
    min-width: unset;
    min-height: 200px;
    border-bottom: var(--border-width-1) solid var(--color-border-light);
  }

  .analysis-modal-options {
    width: 100% !important;
    min-width: unset;
    max-width: unset;
    max-height: 200px;
    border-left: none;
    border-top: var(--border-width-1) solid var(--color-border-light);
  }

  .analysis-modal-footer-area {
    flex-direction: column;
    min-height: 0;
    max-height: 70%;
    overflow-y: auto;
  }

  .analysis-modal-stats-panel,
  .analysis-modal-annotations-panel {
    width: auto !important;
    flex: 0 0 auto !important;
    min-width: unset;
    min-height: 100px;
  }

  .analysis-modal-annotations-panel {
    border-left: none;
    border-top: var(--border-width-1) solid var(--color-border-light);
  }

  .analysis-modal-resizer-vertical,
  .analysis-modal-resizer-intersection {
    display: none;
  }

  /* The touch grip on the split. */
  .analysis-modal-resizer-horizontal {
    height: 24px;
    touch-action: none;
    background: var(--color-surface-secondary);
    border-top: var(--border-width-1) solid var(--color-border-light);
  }

  .analysis-modal-resizer-horizontal::before {
    width: var(--space-9);
    height: var(--space-1);
    border-radius: var(--radius-full);
    background: var(--color-border-strong);
    background-image: none;
    opacity: var(--opacity-50);
  }
}

/* =========================================================================
   App dialogs: native <dialog> opened with showModal(), which owns the
   backdrop, the focus trap, Escape and the return of focus. Cite Cellucid and
   Share this dataset use it. The header band and close glyph are the shared
   dialog chrome above.
   ========================================================================= */

.app-dialog {
  width: min(480px, calc(100vw - 2 * var(--space-4)));
  max-height: calc(100dvh - 2 * var(--space-4));
  padding: 0;
  overflow: auto;
  border: var(--border-default);
  border-radius: var(--radius-none);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-lg);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
}

.app-dialog::backdrop {
  background: var(--color-surface-overlay);
}

.app-dialog-header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.app-dialog-body {
  display: flex;
  flex-direction: column;
  gap: var(--control-block-gap);
  padding: var(--control-dialog-padding);
  font-size: var(--type-body);
  line-height: var(--leading-normal);
}

.app-dialog-body p {
  margin: 0;
}

.app-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--control-row-gap);
}

.app-dialog-body a {
  color: var(--color-text-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Cite Cellucid */
.cite-placeholder {
  padding: var(--control-box-padding-y) var(--control-box-padding-x);
  border: var(--border-width-1) solid color-mix(in srgb, var(--color-warning) 35%, var(--color-border-default));
  background: var(--color-warning-soft);
  font-size: var(--type-label);
}

.cite-reference {
  padding: var(--control-box-padding-y) var(--control-box-padding-x);
  background: var(--color-surface-secondary);
  border: var(--border-light);
  -webkit-user-select: text;
  user-select: text;
}

.cite-bibtex {
  margin: 0;
  max-height: 160px;
  overflow: auto;
  padding: var(--control-box-padding-y) var(--control-box-padding-x);
  background: var(--color-surface-secondary);
  border: var(--border-light);
  font-size: var(--type-readout);
  line-height: var(--leading-normal);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  -webkit-user-select: text;
  user-select: text;
}

/* Stored in this browser (ui/modules/kept-stores-dialog.js): one section per
   dataset (its name, host and size, with Remove), its kept kinds as rows. */
.kept-stores-list {
  max-height: min(60dvh, 480px);
  overflow-y: auto;
}

.kept-dataset {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.kept-dataset + .kept-dataset {
  margin-top: var(--space-1-5);
  padding-top: var(--space-1-5);
  border-top: var(--border-width-1) solid var(--color-border-light);
}

.kept-dataset-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.kept-dataset-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.kept-dataset-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--type-control);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.kept-dataset-facts {
  font-size: var(--type-hint);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-tertiary);
  overflow-wrap: anywhere;
}

.kept-dataset-head > .btn {
  flex: none;
}

/* Where it's kept: the dialog's foot, ruled off from the list. */
.kept-stores-where {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--control-row-gap);
  padding-top: var(--control-block-gap);
  border-top: var(--border-width-1) solid var(--color-border-light);
}

.kept-stores-where > .fact-list {
  align-self: stretch;
}

/* Share this dataset */
.share-item {
  display: flex;
  flex-direction: column;
  gap: var(--control-row-gap);
}

.app-dialog-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.share-item .share-badge-preview {
  margin-left: auto;
}

.share-row {
  display: flex;
  align-items: flex-start;
  gap: var(--control-row-gap);
}

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

.share-row > textarea.obs-select {
  resize: none;
  font-size: var(--type-readout);
  line-height: var(--leading-normal);
}

.share-badge-preview {
  display: block;
}