/*
 * Matching-specific parts on top of the Cluster theme (style.css):
 * group colours, profile chips, teammate cards, group cards for the big screen.
 */

/* Names and units can be Hebrew inside the English layout: each one takes its own direction. */
/* The page is right-to-left; names, units and English technology names are isolated so mixed text stays in order. */
.u, .unit, .nm, .gcard li .n, .person .t span, .ptable .who, #lobbyName, #lobbyUnit, #metaName, .mini-tag, .toggle-chip, .bars .t {
  unicode-bidi: isolate;
}
input[dir="auto"] { text-align: start; }

/* ---------- profile questions (phones) ---------- */
.steps { display: flex; gap: 6px; }
.steps i { flex: 1; height: 5px; border-radius: 5px; background: var(--surface-3); transition: background 0.3s; }
.steps i.done { background: var(--accent); }
.steps i.now { background: var(--accent); opacity: 0.55; }
.pick { display: flex; flex-wrap: wrap; gap: 8px; }
.pick .toggle-chip { height: 44px; padding: 0 16px 0 12px; font-size: 15px; background: var(--surface); }
.pick .toggle-chip.custom { border-style: dashed; }
.pick.full .toggle-chip:not(:has(input:checked)) { opacity: 0.4; pointer-events: none; }
.add-own { display: flex; gap: 8px; }
.add-own input { flex: 1; }
.add-own .btn { flex: none; min-width: 64px; }
.step-nav { display: flex; gap: 10px; position: sticky; bottom: 0; padding: 14px 0 calc(6px + env(safe-area-inset-bottom)); background: linear-gradient(rgba(10, 33, 43, 0), var(--bg) 30%); }
.step-nav .btn { flex: 1; }
.step-nav .btn.secondary { flex: 0 0 auto; }
.count-note { font-size: 13px; color: var(--text-3); }
.tagline { display: flex; flex-wrap: wrap; gap: 6px; }
.mini-tag {
  display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 500;
  color: var(--text-2); background: var(--surface-2); border: 1px solid var(--line);
}
.summary { display: grid; gap: 14px; text-align: start; }
.summary .k { font-size: 13px; color: var(--text-3); margin-bottom: 6px; }

/* ---------- group card on the phone ---------- */
.group-hero {
  display: grid; justify-items: center; gap: 4px; padding: 22px 20px 20px; text-align: center;
  background: var(--surface); border: 1px solid rgba(var(--accent-rgb), 0.35); border-radius: var(--r-lg); box-shadow: var(--shadow);
  animation: pop 0.45s var(--ease) both;
}
.group-hero .gnum { font-family: var(--num); font-size: 128px; font-weight: 700; line-height: 0.9; color: var(--accent); }
.group-hero p { margin-top: 6px; font-size: 15px; color: var(--text-2); }
.group-hero.dim .gnum { color: var(--text-2); }
.round-clock {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line); font-size: 15px; color: var(--text-2);
}
.round-clock .v { font-family: var(--num); font-size: 30px; font-weight: 700; color: var(--text); line-height: 1; }
.round-clock.low .v { color: var(--bad); }
.mates { display: grid; gap: 10px; }
.mate { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 16px; text-align: start; }
.mate .avatar { width: 46px; height: 46px; }
.mate .nm { font-size: 18px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.mate .unit { font-size: 14px; color: var(--text-2); margin-top: 2px; }
.mate .meta { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.why { display: grid; gap: 3px; margin-top: 8px; font-size: 14px; color: var(--text-2); line-height: 1.4; }
.why b { font-weight: 600; color: var(--text); unicode-bidi: isolate; }
.common { font-size: 15px; color: var(--text-2); line-height: 1.5; }
.common b { color: var(--text); font-weight: 600; }

/* Matching countdown */
.deploy { display: grid; justify-items: center; gap: 14px; text-align: center; }
.deploy .big-count { font-family: var(--num); font-size: 132px; font-weight: 700; line-height: 0.9; color: var(--accent); }
.deploy .timebar { width: 100%; max-width: 320px; }

/* ---------- people list (lobby on the big screen and console) ---------- */
.people { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 10px; }
.person {
  display: inline-flex; align-items: center; gap: 10px; height: 52px; padding-inline: 6px 18px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line); font: 500 18px var(--font); color: var(--text); max-width: 100%;
}
.person .avatar { width: 40px; height: 40px; }
.person .u { font-size: 14px; color: var(--text-3); white-space: nowrap; }
.person .t { display: grid; line-height: 1.1; min-width: 0; }
.person .t span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person.enter { animation: pop 0.4s var(--ease) both; }
.person.leaving { opacity: 0; transform: scale(0.8); transition: opacity 0.18s, transform 0.18s; }

/* ---------- group cards (big screen and console) ---------- */
.gcard {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow);
  animation: rise 0.4s var(--ease) both;
}
.gcard-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.gcard-num {
  flex: none; display: grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 0.25em; border-radius: 10px;
  font-family: var(--num); font-size: 1.6em; font-weight: 700; line-height: 1; color: var(--accent-ink); background: var(--accent);
}
.gcard-size { margin-inline-start: auto; font-size: 0.85em; color: var(--text-3); }
.gcard ul { list-style: none; margin: 0; padding: 8px 14px 10px; display: grid; gap: 4px; }
.gcard li { display: flex; align-items: baseline; gap: 8px; min-width: 0; line-height: 1.3; }
.gcard li .n { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcard li .u { flex: none; margin-inline-start: auto; font-size: 0.85em; color: var(--text-3); white-space: nowrap; max-width: 45%; overflow: hidden; text-overflow: ellipsis; }
.gcard .common { padding: 0 14px 12px; font-size: 0.8em; color: var(--text-3); }
.gcard .common b { color: var(--text-2); }
.gcard.hit { border-color: var(--accent); }
.gcard li.hit .n { color: var(--accent); }

/* ---------- topic bars (stats) ---------- */
.bars { display: grid; gap: 8px; }
.bars .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; font-size: 15px; }
.bars .row .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars .row .n { font-family: var(--num); font-weight: 700; color: var(--text-2); }
.bars .row .track { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.bars .row .track i { display: block; height: 100%; border-radius: inherit; background: var(--b, var(--accent)); width: 0; transition: width 0.6s var(--ease); }
.bars-empty { color: var(--text-3); font-size: 14px; }