/* speed-networking (EN + AR): page-specific parts only. Shared components come from system.css, home.css,
   p-product.css and pg-common.css (registry: team/COMPONENTS.md). */

@media (max-width: 1020px) { .hero-mob + .kf { margin-top: 28px; } }

/* A whole room: the match machine, wide and centred on the dark band */
.sn-center { text-align: center; justify-items: center; margin-inline: auto; max-width: 760px; }
.sn-center .lede { margin-inline: auto; }
.sn-mm { max-width: 1000px; margin-inline: auto; display: grid; gap: 18px; }
.sn-flow { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sn-flow li { position: relative; display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(0, 255, 198, .3); background: rgba(0, 255, 198, .08); color: var(--stage-ink); font-size: .86rem; font-weight: 600; }
.sn-flow li.is-opt { border-style: dashed; border-color: var(--stage-line); background: transparent; color: var(--stage-ink-2); }

/* The lobby: pins sit on the image; on phones the window crops to the participants and the button */
.sn-lob__win { position: relative; overflow: hidden; }
.sn-lob__in { position: relative; }
.sn-lob__in img { display: block; width: 100%; height: auto; }
/* Phones get the real mobile lobby instead: participants, then the button */
.sn-lob-m { display: none; }
@media (max-width: 700px) {
  .sn-lob { display: none; }
  .sn-lob-m { display: grid; gap: 0; margin: 0 auto; width: 100%; max-width: 330px; overflow: hidden; }
  .sn-lob-m .crop + .crop { border-top: 1px dashed var(--stage-line); }
  .anat .snap-m { margin-top: 4px; }
  .anat .snap-m li { padding: 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
}

/* After the room: the real summary in front of the real connections list */
.sn-after { position: relative; margin: 0; padding-bottom: 12%; min-width: 0; }
.sn-after__back { width: 86%; }
.sn-after__front { position: absolute; inset-inline-end: 0; bottom: 6%; width: 44%; box-shadow: var(--shadow-lg); border-radius: 18px; overflow: hidden; }
.sn-after .crop-cap { position: absolute; inset-inline-start: 0; bottom: -4px; max-width: 52%; }
@media (max-width: 560px) {
  .sn-after { padding-bottom: 0; display: grid; gap: 12px; }
  .sn-after__back { width: 100%; }
  .sn-after__front { position: relative; inset: auto; width: 74%; justify-self: end; margin-top: -26%; }
  .sn-after .crop-cap { position: static; max-width: none; }
}

/* Room math: the formula wraps instead of running off the edge */
.sn-formula { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 480px) { .sn-formula { font-size: .8rem; } }

/* Roles on phones: each pair stacks, so full names fit */
@media (max-width: 480px) {
  .sn-pairs .pair { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sn-pairs .pair .who:last-child { flex-direction: row; text-align: start; }
  .sn-pairs .pair .who:last-child .role { justify-self: start; }
  .sn-pairs .pair__link { height: 2px; width: 60%; margin-inline-start: 52px; }
  .sn-pairs .who b, .sn-pairs .who small { white-space: normal; overflow: visible; }
  .sn-pairs .who small { display: block; }
}

/* Details: three tabs of four */
.sn-spec .tabs__panel { margin-top: 20px; }
.sn-spec .spec { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .sn-spec .spec { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .sn-spec .spec { grid-template-columns: minmax(0, 1fr); } }
.sn-spec .tabs__btn svg { width: 16px; height: 16px; }

/* Lobby, Arabic: the real RTL lobby, so phones crop to its right side */

/* Real room-form crops under the calculator and the role tabs */
.sn-form { margin: 22px 0 0; max-width: 620px; }
.calc__out .sn-form { margin-top: 4px; max-width: none; }
.sn-form .frame { border-radius: 14px; overflow: hidden; }
.calc__out:has(.sn-form) .uiquote { display: none; }
/* Phones: the EN page swaps the form crop for its uiquote; pages without a uiquote (AR) keep the one-line crop */
@media (max-width: 600px) { .calc__out:has(.uiquote) .sn-form { display: none; } .calc__out:has(.sn-form) .uiquote { display: block; } }

/* Room math: the room-wide total sits under the controls, so the left column has no empty space */
.calc__ctl .calc__room { margin-top: 6px; }


/* Results band (host half): the shared .results--3 / .result--stage cards (system.css); only the band placement is here */
.sn-res .results { margin: clamp(28px, 4vw, 44px) auto 0; }
@media (min-width: 861px) { .sn-res .results { max-width: 1080px; } }
.sn-res .nums-note { text-align: center; margin-top: 16px; }
.sn-center > .role-chip { justify-self: center; align-self: center; }
/* Native helper-box capture (AR room form): shown whole, no crop */
.sn-helper { background: #1b1d2b; padding: 0; }
.sn-helper img { display: block; width: 100%; height: auto; }
.sn-helper { overflow: hidden; }
/* Phones: drop the empty margins of the helper box so its Arabic line reads larger */
@media (max-width: 600px) { .sn-helper { direction: ltr; } .sn-helper img { width: 135%; max-width: none; margin-left: -28%; } }