/* Space Settings — the tabs inside the glass card.

   The card, the tablist and the phone sheet are `aly-settings-modal.css`,
   shared with ALY Settings so the two dialogs are the same object. Only what
   is specific to a Space's sections lives here: the fields, the About box and
   the memory list. Nothing below invents a colour, a radius or a shadow. */

.space-settings-input {
  width: 100%; padding: 9px 11px; min-height: 38px;
  border: 1px solid var(--hair-2); border-radius: 6px;
  background: var(--glass); color: var(--text);
  font: inherit; font-size: 13px;
}
.space-settings-input:focus-visible { outline: none; border-color: var(--text); }
.space-settings-input:disabled, .space-settings-input[readonly] { opacity: .75; cursor: default; }

.space-settings-about { min-height: 150px; resize: vertical; line-height: 1.5; }
.space-settings-counter { margin: 0; font-size: 11px; text-align: right; }

.aly-settings-dialog-field .space-settings-save { justify-self: start; margin-top: 8px; }
.space-settings-save { letter-spacing: .06em; font-size: 12px; font-weight: 600; }

/* Named, not absent: a tab that appears later is a surprise, and a tab that
   says "coming soon" is a promise. */
.space-settings-soon {
  margin: 0; padding: 18px; text-align: center;
  border: 1px dashed var(--surface-line); border-radius: 6px;
  color: var(--muted); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
}

/* --- Memory --------------------------------------------------------------- */

.space-memory-toggle {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 11px 13px; border: 1px solid var(--hair-2); border-radius: 6px; background: var(--glass);
  font-size: 13px; color: var(--text);
}
.space-memory-toggle input { accent-color: var(--text); width: 16px; height: 16px; }
.space-memory-toggle:has(input:disabled) { cursor: default; opacity: .75; }

.space-memory-warning {
  margin: 0; padding: 10px 12px; font-size: 12px; line-height: 1.45;
  border: 1px solid var(--hair-2); border-radius: 6px; background: var(--glass-2); color: var(--text);
}

.space-memory-controls { display: flex; gap: 8px; align-items: center; }
.space-memory-search { flex: 1 1 auto; min-width: 0; }

.space-memory-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.space-memory-item {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 11px 13px; border: 1px solid var(--hair-2); border-radius: 6px; background: var(--glass);
}
.space-memory-text { min-width: 0; display: grid; gap: 3px; }
.space-memory-key {
  margin: 0; font-size: 10px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.space-memory-value { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; }
.space-memory-source { font-size: 11px; color: var(--muted); }
.space-memory-actions { flex: none; display: flex; gap: 6px; }
.space-memory-actions .btn { font-size: 11px; padding: 5px 9px; min-height: 30px; }

/* On a phone the actions drop under the text rather than squeezing it. */
@media (max-width: 560px) {
  .space-memory-item { flex-direction: column; align-items: stretch; }
  .space-memory-actions { justify-content: flex-end; }
  .space-memory-controls { flex-wrap: wrap; }
}

/* --- five tabs on a phone ---------------------------------------------------

   ALY Settings has three sections, so the shared stylesheet lays its nav out as
   one row of equal columns under 640px and that fits. Space settings has five,
   and five in one row on a 375px screen clips the last label off the edge of
   the card — the nav scrolls inside the dialog, so the page-level overflow
   check does not even notice.

   Two rows of three is the honest fix: every label readable at full size,
   nothing cut off, and the row order unchanged. */

@media (max-width: 640px) {
  .aly-space-settings-dialog .aly-settings-dialog-nav {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-columns: auto;
    gap: 6px;
  }
  .aly-space-settings-dialog .aly-settings-dialog-tab {
    padding: 9px 4px; min-height: 36px; font-size: 10px; letter-spacing: .08em;
  }
}

/* --- Team ------------------------------------------------------------------ */

.space-team-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.space-team-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 11px 13px; border: 1px solid var(--hair-2); border-radius: 6px; background: var(--glass);
}
/* An invitation is not access. It reads as a lighter thing than a membership,
   because that is exactly what it is until the person answers. */
.space-team-row.is-pending { background: none; border-style: dashed; }
.space-team-text { min-width: 0; display: grid; gap: 3px; }
.space-team-name { margin: 0; font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
.space-team-meta { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.space-team-actions { flex: none; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.space-team-actions .btn { font-size: 11px; padding: 5px 9px; min-height: 30px; }

@media (max-width: 560px) {
  .space-team-row { flex-direction: column; align-items: stretch; }
  .space-team-actions { justify-content: flex-start; }
}

/* --- Transfer --------------------------------------------------------------

   The warning is not a note under a button. A transfer moves the BILL and
   nothing else, so the sentence that says so is the loudest thing on the tab
   and is repeated verbatim on the confirm screen. */

.space-transfer-warning {
  margin: 0; padding: 12px 14px; font-size: 13px; line-height: 1.5;
  border: 1px solid var(--hair-2); border-radius: 6px; background: var(--glass-2); color: var(--text);
}
.space-transfer-pending {
  display: grid; gap: 8px; justify-items: start;
  padding: 12px 14px; border: 1px dashed var(--surface-line); border-radius: 6px;
}
.space-transfer-pending .space-team-meta { max-width: 46ch; }