/* ═══════════════════════════════════════════════════════════════
   Quably Beam — feature styles. Reuses global design tokens.
   Mobile-first. "One link. Done."
   ═══════════════════════════════════════════════════════════════ */

/* ── Landing ─────────────────────────────────────────────────── */
.beam-landing { max-width: 860px; margin: 0 auto; padding: 0 var(--container-padding); }

.beam-hero { text-align: center; padding: var(--space-16) 0 var(--space-12); }
.beam-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--color-purple-light);
  background: var(--color-purple-dim);
  border: 1px solid var(--color-purple-border);
  padding: 5px 12px; border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: var(--space-6);
}
.beam-hero__title {
  font-family: var(--font-brand);
  font-size: clamp(2.6rem, 10vw, var(--text-hero));
  line-height: 1.02; letter-spacing: -0.03em; font-weight: 800;
  margin: 0 0 var(--space-5);
}
.beam-hero__accent { color: var(--color-purple-light); }
.beam-hero__sub {
  color: var(--color-text-secondary); font-size: var(--text-md);
  max-width: 40ch; margin: 0 auto var(--space-8); line-height: 1.6;
}
.beam-hero__note { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }
.beam-hero__error { margin-top: var(--space-3); color: var(--color-error); font-size: var(--text-sm); }

.beam-steps {
  display: grid; grid-template-columns: 1fr; gap: var(--space-4);
  margin: var(--space-8) 0 var(--space-16);
}
.beam-step {
  background: var(--color-surface); border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-6);
}
.beam-step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius-full);
  background: var(--color-purple-dim); color: var(--color-purple-light);
  font-weight: 700; margin-bottom: var(--space-3);
}
.beam-step__title { font-size: var(--text-md); margin: 0 0 var(--space-2); }
.beam-step__text { color: var(--color-text-secondary); font-size: var(--text-sm); margin: 0; line-height: 1.6; }

@media (min-width: 640px) { .beam-steps { grid-template-columns: repeat(3, 1fr); } }

/* ── Room ────────────────────────────────────────────────────── */
.beam-page { max-width: 760px; margin: 0 auto; padding: var(--space-8) var(--container-padding) var(--space-16); }

.beam-share {
  display: flex; gap: var(--space-6); flex-wrap: wrap; align-items: flex-start;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-6); margin-bottom: var(--space-6);
}
.beam-share__left { flex: 1; min-width: 240px; }
.beam-share__label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); }
.beam-share__code {
  display: flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: 700;
  letter-spacing: 0.14em; color: var(--color-text-primary); margin: var(--space-1) 0 var(--space-2);
}
.beam-share__copy {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius-md);
  border: 1px solid var(--color-border); background: var(--color-surface-raised);
  color: var(--color-text-secondary); cursor: pointer; transition: var(--transition-fast);
}
.beam-share__copy:hover { color: var(--color-text-primary); border-color: var(--color-purple-border); }
.beam-share__url {
  font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-text-muted);
  word-break: break-all; margin-bottom: var(--space-3);
}
.beam-share__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.beam-share__expiry { font-size: var(--text-xs); color: var(--color-text-muted); margin: var(--space-3) 0 0; }
.beam-share__qr { flex-shrink: 0; }
.beam-qr__frame { padding: 8px; background: #fff; border-radius: var(--radius-md); line-height: 0; box-shadow: var(--shadow-sm); }
.beam-qr__frame canvas { display: block; }

/* Feed */
.beam-feed { display: flex; flex-direction: column; gap: var(--space-3); min-height: 120px; margin-bottom: var(--space-6); }
.beam-empty { text-align: center; color: var(--color-text-muted); padding: var(--space-10) var(--space-4); }
.beam-empty svg { color: var(--color-text-muted); opacity: 0.5; margin-bottom: var(--space-3); }
.beam-empty p { margin: 0; font-size: var(--text-sm); max-width: 36ch; margin-inline: auto; }

.beam-item {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--color-surface); border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md); padding: var(--space-4);
  animation: beam-in 0.25s ease;
}
@keyframes beam-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.beam-item__icon {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-purple-dim); color: var(--color-purple-light);
}
.beam-item__body { flex: 1; min-width: 0; }
.beam-item__text { white-space: pre-wrap; word-break: break-word; font-size: var(--text-base); color: var(--color-text-primary); }
.beam-item__link { color: var(--color-purple-light); word-break: break-all; font-size: var(--text-base); }
.beam-item__name { font-weight: 600; word-break: break-word; }
.beam-item__meta { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }

/* Composer */
.beam-composer {
  display: flex; gap: var(--space-3); align-items: flex-end;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-4);
}
.beam-composer__input {
  flex: 1; resize: none; border: none; background: transparent;
  color: var(--color-text-primary); font-size: var(--text-base); font-family: var(--font-sans);
  line-height: 1.5; outline: none; max-height: 160px;
}
.beam-composer__actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.beam-composer__file {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 8px 12px; border-radius: var(--radius-md);
  border: 1px solid var(--color-border); color: var(--color-text-secondary);
  font-size: var(--text-sm); font-weight: 600; transition: var(--transition-fast);
}
.beam-composer__file:hover { color: var(--color-text-primary); border-color: var(--color-purple-border); }

/* Upload progress */
.beam-progress { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-text-secondary); }
.beam-progress__bar { flex: 1; height: 6px; border-radius: var(--radius-full); background: var(--color-surface-raised); overflow: hidden; }
.beam-progress__fill { height: 100%; width: 0; background: var(--color-purple); transition: width 0.2s ease; }

@media (max-width: 560px) {
  .beam-share { flex-direction: column-reverse; align-items: center; text-align: center; }
  .beam-share__left { text-align: center; }
  .beam-share__code, .beam-share__actions { justify-content: center; }
}