/* "Join the Pool" panel redesign (Human request, 2026-07-26): a single
   full-width horizontal row -- Host / Port / URL / Copy button --
   using the standard Card container (card.css), reduced vertical
   padding, and thin vertical dividers between sections instead of the
   original multi-row layout. */

.join-panel {
  padding-block: var(--space-3);
}

.join-panel__eyebrow {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  margin-bottom: var(--space-3);
}

.join-panel__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.join-panel__field {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1 1 200px;
  min-width: 0;
}

/* The URL field's value is the longest of the three and the one a
   visitor is most likely to want to read in full -- given more room
   to grow before wrapping, rather than sharing the same 200px basis
   as the short Host/Port fields. */
.join-panel__field--url {
  flex: 2 1 260px;
}

.join-panel__field-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  flex-shrink: 0;
  color: var(--color-accent-text);
}

.join-panel__field-icon svg {
  width: 100%;
  height: 100%;
}

.join-panel__field-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.join-panel__field-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  white-space: nowrap;
}

/* Host/Port values are short and never wrap; the URL value is longer
   and is the one string a visitor most wants to read in full, so it
   wraps onto a second line rather than truncating with an ellipsis --
   an ellipsis would silently hide part of a value meant to be read and
   copied verbatim (overridden below for .join-panel__field--url). */
.join-panel__field-value {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  white-space: nowrap;
}

.join-panel__field--url .join-panel__field-value {
  white-space: normal;
  word-break: break-all;
}

.join-panel__divider {
  align-self: stretch;
  width: var(--border-width);
  flex-shrink: 0;
  /* Neither --color-border-subtle nor the plain --color-border read
     as visible at 1px width for a short, isolated vertical rule
     surrounded by generous gaps (confirmed in-browser, Stage 1 of
     this redesign's own verification -- both were effectively
     invisible against --color-surface in dark theme, even though
     --color-border reads fine as a full-width card outline elsewhere
     on the same page). --color-text-secondary at reduced opacity
     lands the divider between those two and the fully-opaque label
     text: genuinely visible, without the weight of a full label. */
  background: var(--color-text-secondary);
  opacity: 0.35;
}

.join-panel__copy-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  margin-inline-start: auto;
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-accent-text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.join-panel__copy-button:hover {
  background: var(--color-surface-raised);
  border-color: var(--color-accent-text);
}

.join-panel__copy-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.join-panel__copy-button-icon svg {
  width: 100%;
  height: 100%;
}

/* Excellent spacing on large displays (brief's own wording) -- a
   progressive enhancement, not a functional change: more breathing
   room between fields once there's room to spend it. */
@media (min-width: 1280px) {
  .join-panel {
    padding-inline: var(--space-6);
  }

  .join-panel__row {
    gap: var(--space-6);
  }
}

/* Below tablet width, dividers between wrapped groups stop reading as
   a single row's separators and start reading as broken/floating
   lines, so they're dropped here; each field keeps its own icon+label
   +value together (never split across lines) and wraps naturally
   instead of being forced one-per-row -- "keep each group intact,
   don't simply stack everything vertically" (brief's own wording). */
@media (max-width: 767px) {
  .join-panel__divider {
    display: none;
  }

  .join-panel__copy-button {
    flex: 1 1 100%;
    justify-content: center;
    margin-inline-start: 0;
  }
}