@font-face {
  font-family: Heebo;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("./fonts/heebo-v28-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: Heebo;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("./fonts/heebo-v28-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;
  --g0: #fcf7ef;
  --g1: #f3ebdd;
  --g2: #e5d7c6;
  --g3: #cebca7;
  --g4: #a8917b;
  --g5: #76604e;
  --g6: #4b382c;
  --g7: #2f2119;
  --panel: #fffdf8;
  --border: #ddcebd;
  --text: #3b2c22;
  --muted: #826e5d;
  --inverse: #fffdf8;
  --appbar-text: #36454f;
  --green: #4f8b63;
  --amber: #c38a37;
  --success-surface: #edf4ec;
  --info-text: #2f6f9e;
  --info-surface: #e5eff7;
  --wordmark-accent: #3e5680;
  --shadow-rgb: 47 33 25;
  --fs: 1.27;
  --font-title: calc(19px * var(--fs));
  --font-header: calc(15px * var(--fs));
  --font-control: calc(16px * var(--fs));
  --font-card: calc(14px * var(--fs));
  --font-label: calc(13px * var(--fs));
  --font-small: calc(11px * var(--fs));
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 14px;
  --space-7: 16px;
  --space-9: 20px;
  --radius-chip: 5px;
  --radius-control: 6px;
  --radius-button: 8px;
  --radius-card: 10px;
  --radius-round: 999px;
  --control-height: 48px;
  --control-height-prominent: 56px;
  --lift: 0 1px 2px -1px rgb(var(--shadow-rgb) / 28%), 0 6px 16px -10px rgb(var(--shadow-rgb) / 42%);
}

:root[data-scheme="light"] {
  color-scheme: light;
}

:root[data-scheme="dark"] {
  color-scheme: dark;
  --g0: #131519;
  --g1: #191d23;
  --g2: #1f242c;
  --g3: #2b313a;
  --g4: #3f4653;
  --g5: #69707c;
  --g6: #c3c9d2;
  --g7: #f1f3f6;
  --panel: #1c2027;
  --border: #353a42;
  --text: #f1f3f6;
  --muted: #8b93a1;
  --inverse: #101318;
  --appbar-text: #b9c2cb;
  --green: #4ade80;
  --amber: #f5a524;
  --success-surface: #223933;
  --info-text: #7cc0ee;
  --info-surface: #1e2a36;
  --wordmark-accent: #6e8fc4;
  --shadow-rgb: 0 0 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-tap-highlight-color: transparent;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  background: var(--g0);
  color: var(--text);
  font-family:
    Heebo,
    -apple-system,
    BlinkMacSystemFont,
    Segoe UI,
    sans-serif;
  font-size: var(--font-card);
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  padding: 0 var(--space-6) calc(40px + env(safe-area-inset-bottom));
}

.wrap {
  max-width: 440px;
  margin: 0 auto;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--wordmark-accent);
  outline-offset: 3px;
  border-radius: var(--radius-chip);
}
header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-9) 0 var(--space-7);
  border-bottom: 1px solid var(--g2);
}
h1 {
  margin: 0 0 var(--space-1);
  color: var(--appbar-text);
  font-size: var(--font-title);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.3px;
}
.sub {
  margin: 0;
  color: var(--muted);
  font-size: var(--font-label);
}
.header-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: auto;
  flex: 0 0 auto;
}
.langbtn,
.themebtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 36px;
  min-block-size: 32px;
  padding: 0 var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-round);
  background: var(--panel);
  color: var(--muted);
  font:
    700 var(--font-small)/1 Heebo,
    sans-serif;
  cursor: pointer;
}
.themebtn .theme-icon {
  color: var(--appbar-text);
  font-size: var(--font-label);
  line-height: 1;
}

.rail {
  display: flex;
  gap: var(--space-2);
  margin: var(--space-7) 0 var(--space-9);
}
.rail button {
  flex: 1;
  block-size: 4px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-round);
  background: var(--g2);
  cursor: pointer;
  appearance: none;
  transition: background 0.2s ease;
}
.rail button.on {
  background: var(--green);
}
.rail button.cur {
  background: var(--wordmark-accent);
}
.rail button:disabled {
  cursor: default;
}

.step {
  margin-bottom: var(--space-5);
  padding: var(--space-7);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--panel);
  transition:
    opacity 0.2s ease,
    box-shadow 0.2s ease;
}
.step[data-state="active"] {
  box-shadow: var(--lift);
}
.step[data-state="locked"] {
  border-style: dashed;
  background: transparent;
  box-shadow: none;
  opacity: 0.55;
}
.step[data-state="locked"] .body,
.step[data-state="done"] .body {
  display: none;
}
.head {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.head:disabled {
  cursor: default;
}
.chev {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-inline-start: auto;
  color: var(--muted);
}
.step[data-state="active"] .chev,
.step[data-state="locked"] .chev {
  display: none;
}
.num {
  display: grid;
  flex: 0 0 auto;
  inline-size: 30px;
  block-size: 30px;
  place-items: center;
  border: 1px solid var(--g2);
  border-radius: var(--radius-round);
  background: var(--g1);
  color: var(--muted);
  font-size: var(--font-label);
  font-weight: 700;
}
.step[data-state="active"] .num {
  border-color: var(--wordmark-accent);
  background: var(--panel);
  color: var(--wordmark-accent);
}
.step[data-state="done"] .num {
  border-color: var(--green);
  background: var(--success-surface);
  color: var(--green);
}
.step[data-state="done"] .num span {
  display: none;
}
.step[data-state="done"] .num::after {
  content: "✓";
  font-size: var(--font-control);
  line-height: 1;
}
h2 {
  margin: 0;
  font-size: var(--font-header);
  font-weight: 700;
  line-height: 1.3;
}
.body {
  margin-top: var(--space-6);
}
.body p {
  margin: 0 0 var(--space-5);
}
.hint {
  color: var(--muted);
  font-size: var(--font-label);
}

.btn {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  width: 100%;
  min-block-size: var(--control-height-prominent);
  margin-bottom: var(--space-5);
  padding: var(--space-5) var(--space-7);
  border: 1px solid var(--border);
  border-radius: var(--radius-button);
  background: var(--panel);
  color: var(--text);
  font:
    700 var(--font-control)/1.25 Heebo,
    sans-serif;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.btn svg {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
}
html[dir="rtl"] #optLink svg {
  transform: scaleX(-1);
}
.btn.go {
  border-color: var(--g7);
  background: var(--g7);
  color: var(--inverse);
  letter-spacing: 0.02em;
}
.btn.ghost {
  min-block-size: var(--control-height);
  border-color: var(--g5);
  background: var(--panel);
  color: var(--g6);
  font-size: var(--font-card);
  font-weight: 400;
}
.btn.ghost svg {
  width: 19px;
  height: 19px;
  color: var(--green);
}
.btn:active {
  transform: translateY(1px);
}

.mock {
  margin: 0 0 var(--space-6);
}
.mock-stage {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--g1);
}
.mock .topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  direction: ltr;
}
.mock .dots {
  color: var(--muted);
  font-size: var(--font-label);
  letter-spacing: 2px;
  line-height: 1;
}
.mock .groups-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-small);
  font-weight: 700;
}
.mock .groups-icon {
  color: var(--info-text);
  font-size: var(--font-label);
  letter-spacing: -5px;
}
.mock .hamburger {
  color: var(--muted);
  font-size: var(--font-label);
}
.mock .group-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.mock .gname {
  font-size: var(--font-small);
  font-weight: 700;
}
.mock .join {
  position: relative;
  margin-inline-start: auto;
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--g4);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--info-text);
  font-size: var(--font-small);
  font-weight: 700;
  white-space: nowrap;
}
.mock .halo {
  position: absolute;
  inset: -7px;
  border: 2px solid var(--amber);
  border-radius: var(--radius-button);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}
.mock-arrow {
  padding: var(--space-2) 0;
  color: var(--g4);
  font-size: var(--font-header);
  line-height: 1;
  text-align: center;
}
.mock .form-titlebar {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  font-size: var(--font-small);
  font-weight: 700;
}
.mock .join-form {
  padding: var(--space-5);
  background: var(--g0);
}
.mock .field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-block-size: 32px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-chip);
  background: var(--panel);
  color: var(--muted);
  font-size: var(--font-small);
}
.mock .field-value {
  color: var(--text);
}
.mock .account {
  padding: var(--space-2) 2px;
  color: var(--muted);
  font-size: var(--font-small);
}
.mock .actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
html[dir="ltr"] .mock .actions {
  flex-direction: row-reverse;
}
.mock .form-join {
  position: relative;
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--g4);
  border-radius: var(--radius-chip);
  background: transparent;
  color: var(--info-text);
  font:
    700 var(--font-small) Heebo,
    sans-serif;
}
.mock .cancel {
  color: var(--muted);
  font-size: var(--font-small);
}
.mock figcaption {
  margin-top: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: 1px solid color-mix(in srgb, var(--info-text) 40%, transparent);
  border-radius: var(--radius-button);
  background: var(--info-surface);
  color: var(--text);
  font-size: var(--font-label);
  line-height: 1.45;
}

.done {
  display: none;
  margin-bottom: var(--space-5);
  padding: var(--space-7);
  border: 1px solid var(--green);
  border-radius: var(--radius-card);
  background: var(--panel);
  box-shadow: var(--lift);
}
.done.show {
  display: block;
}
.done h2 {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--green);
}
.done-lead {
  margin: var(--space-4) 0 0;
  font-size: var(--font-label);
}
.keep {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px solid color-mix(in srgb, var(--green) 40%, transparent);
  border-radius: var(--radius-button);
  background: var(--success-surface);
  font-size: var(--font-label);
  line-height: 1.45;
}
details {
  padding: 0 var(--space-7);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--panel);
}
summary {
  padding: var(--space-6) 0;
  font-size: var(--font-card);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
summary::-webkit-details-marker {
  display: none;
}
summary::after {
  float: inline-end;
  color: var(--muted);
  content: "+";
  font-size: var(--font-header);
  line-height: 1.3;
}
details[open] summary::after {
  content: "–";
}
details .q {
  margin: 0 0 var(--space-1);
  font-size: var(--font-label);
  font-weight: 700;
}
details .a {
  margin: 0 0 var(--space-7);
  color: var(--muted);
  font-size: var(--font-label);
}
footer {
  padding: var(--space-9) 0 0;
  color: var(--muted);
  font-size: var(--font-small);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .btn:active {
    transform: none;
  }
  .mock .halo {
    animation: none;
    opacity: 1;
  }
}