/* Kit v3 Join: the membership journey as an application. Tokens from v3.css only. Logical properties, so the page
   works right to left. Red marks only the current step, the reader's Cell and the one action (Create your account). */
@font-face { font-family: "Plex"; src: url(vendor/fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plex"; src: url(vendor/fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

.jn-main { inset-block: 76px 120px; inset-inline-start: 76px; width: 412px; }
.jn-main .panel__hd { padding-block-end: 12px; }
.jn-hdrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.jn-main .title { font-size: 24px; }
.jn-main .ctx1 { margin-block-start: 8px; }
.chip--sm { height: 20px; padding-inline: 7px; font-size: 11px; }

/* Step rail: the four steps of the register as one segmented line */
.jn-rail { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 4px; }
.jn-rail button { width: 100%; display: grid; grid-template-columns: 20px minmax(0,1fr); align-items: center; gap: 6px; height: 40px; padding: 0 6px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-1); color: var(--ink-2); text-align: start; font-size: 11.5px; line-height: 1.15; position: relative; }
.jn-rail button span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.jn-rail button i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); font: 500 10.5px/1 var(--m); font-style: normal; color: var(--ink-3); }
.jn-rail button:hover { border-color: var(--line-2); color: var(--ink); }
.jn-rail button.is-done i { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.jn-rail button.is-now { color: var(--ink); border-color: var(--line-2); background: var(--bg-2); }
.jn-rail button.is-now i { border-color: var(--red); color: var(--ink); box-shadow: 0 0 0 3px var(--red-soft); }
.jn-rail button.is-now::after { content: ""; position: absolute; inset-inline: 8px; inset-block-end: -1px; height: 1.5px; background: var(--pastel); border-radius: var(--r); }

/* One step */
.jn-step { padding: 14px 16px 16px; }
.jn-step__hd h2 { margin: 6px 0 4px; font: 600 18px/1.25 var(--f); letter-spacing: -.01em; }
.jn-step__hd p { margin: 0 0 14px; color: var(--ink-2); }
.jn-form { border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-1); padding: 10px 12px 4px; }
.jn-pvbar { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 11.5px; padding-block-end: 8px; border-block-end: 1px dashed var(--line-2); margin-block-end: 10px; }
.jn-pvbar svg { flex: none; }
.jn-fld { display: block; margin-block-end: 10px; }
.jn-lab { display: flex; align-items: baseline; justify-content: space-between; font-size: 12px; color: var(--ink-2); font-weight: 500; margin-block-end: 5px; }
.jn-lab em { font-style: normal; color: var(--ink-3); font-weight: 400; }
.jn-fld input { width: 100%; height: 34px; padding-inline: 10px; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); font-size: 13px; }
.jn-fld input:focus { outline: none; border-color: var(--ink-3); }
.jn-fld input:disabled { background: repeating-linear-gradient(135deg, var(--bg-2) 0 6px, var(--bg-1) 6px 12px); color: var(--ink-3); cursor: not-allowed; }
.jn-fld small { display: block; color: var(--ink-3); font-size: 11.5px; margin-block-start: 4px; }
.jn-opt { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; margin-block: 14px 10px; }
.jn-opt b { display: block; font-weight: 600; }
.jn-opt small { color: var(--ink-3); font-size: 12px; }
.jn-sw { width: 36px; height: 20px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--bg-3); position: relative; padding: 0; margin-block-start: 1px; }
.jn-sw i { position: absolute; inset-block-start: 2px; inset-inline-start: 2px; width: 14px; height: 14px; border-radius: calc(var(--r) - 2px); background: var(--ink-3); transition: inset-inline-start .15s var(--ease); }
.jn-sw[aria-checked="true"] { background: var(--ink); border-color: var(--ink); }
.jn-sw[aria-checked="true"] i { inset-inline-start: 18px; background: var(--bg); }
.jn-vis { display: grid; gap: 4px; }
.jn-vis button { display: block; width: 100%; text-align: start; padding: 8px 10px 8px 32px; padding-inline: 32px 10px; border-radius: var(--r); border: 1px solid var(--line); background: transparent; position: relative; }
.jn-vis button::before { content: ""; position: absolute; inset-inline-start: 10px; inset-block-start: 10px; width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--ink-3); }
.jn-vis button[aria-checked="true"] { border-color: var(--line-2); background: var(--bg-2); }
.jn-vis button[aria-checked="true"]::before { border: 4px solid var(--ink); }
.jn-vis b { display: flex; align-items: center; gap: 6px; font-weight: 500; }
.jn-vis b em { font-style: normal; font-size: 10.5px; color: var(--ink-3); border: 1px solid var(--line-2); border-radius: var(--r); padding: 1px 5px; font-weight: 400; }
.jn-vis small { display: block; color: var(--ink-3); font-size: 11.5px; margin-block-start: 2px; }

.jn-meter { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; margin-block-end: 10px; color: var(--ink-2); font-size: 12px; }
.jn-meter b { font: 600 20px/1 var(--f); color: var(--ink); margin-inline-end: 2px; }
.jn-meter .meter i { --meter-w: 360px; transition: width .2s var(--ease); }
.jn-att { display: grid; gap: 6px; }
.jn-att button { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; width: 100%; text-align: start; padding: 11px 12px; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg-1); font-size: 13px; line-height: 1.4; }
.jn-att button:hover { border-color: var(--line-2); }
.jn-att button i { width: 18px; height: 18px; border-radius: var(--r); border: 1px solid var(--ink-3); display: grid; place-items: center; color: transparent; margin-block-start: 1px; }
.jn-att button[aria-checked="true"] { border-color: var(--line-2); background: var(--bg-2); }
.jn-att button[aria-checked="true"] i { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.jn-links { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 12px; }
.jn-links .btn { height: 30px; font-size: 12.5px; }
.jn-note { color: var(--ink-3); font-size: 12px; margin: 12px 0 0; }

.jn-cities { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; max-height: 300px; overflow: auto; scrollbar-width: thin; }
.jn-cities button { display: flex; gap: 8px; align-items: center; height: 34px; padding-inline: 8px; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg-1); text-align: start; font-size: 12.5px; }
.jn-cities button span:not(.jn-cfl) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jn-cities button small { color: var(--ink-3); font-size: 11px; }
.jn-cities button:hover { border-color: var(--line-2); }
.jn-cities button[aria-checked="true"] { border-color: var(--red); background: var(--red-soft); }
.jn-cfl { display: inline-flex; flex: none; }
.jn-cfl:empty { display: none; }

.jn-unit { border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-1); padding: 12px; margin-block-end: 8px; }
.jn-unit.is-sel { border-color: color-mix(in srgb, var(--red) 55%, var(--line)); }
.jn-unit__k { display: flex; align-items: center; gap: 6px; color: var(--ink-3); }
.jn-unit__n { display: flex; align-items: center; gap: 10px; margin-block: 8px 6px; }
.jn-unit__n b { font: 600 17px/1.2 var(--f); flex: 1; min-width: 0; }
.jn-unit small { display: block; color: var(--ink-3); font-size: 12px; }
.jn-route { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--r); border: 1px dashed var(--line-2); color: inherit; text-decoration: none; margin-block-start: 4px; }
.jn-route:hover { border-color: var(--ink-3); }
.jn-route b { display: block; font-weight: 600; }
.jn-route small { display: block; color: var(--ink-3); font-size: 12px; }
.jn-route--sm { grid-template-columns: 1fr auto; padding: 8px 10px; border-style: solid; border-color: var(--line); margin-block-start: 6px; }
.jn-empty { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: center; padding: 14px; border-radius: var(--r); border: 1px dashed var(--line-2); }
.jn-empty b { grid-row: span 2; font: 600 36px/1 var(--f); }
.jn-empty span { font-weight: 600; }
.jn-empty small { color: var(--ink-3); }
.jn-empty .btn { grid-column: 1 / -1; justify-content: center; margin-block-start: 10px; }

.jn-ft { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-block-start: 1px solid var(--line); }
.jn-ft .grow { flex: 1; color: var(--ink-3); font-size: 11.5px; text-align: end; }
.jn-ft .btn:disabled { opacity: .4; cursor: default; }

/* Inspector */
.jn-insp { width: 372px; }
.jn-tabs button { font-size: 12px; padding-inline: 4px; }
.jn-card { margin: 14px 16px 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-1); overflow: hidden; }
.jn-card__hd { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-block-end: 1px solid var(--line); }
.jn-av { display: flex; align-items: center; gap: 12px; padding: 14px 12px; }
.jn-av b { display: block; font: 600 16px/1.2 var(--f); }
.jn-av small { color: var(--ink-3); font-size: 12px; }
.jn-av__i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-3); color: var(--ink-2); }
.jn-kv { width: 100%; display: grid; grid-template-columns: 112px minmax(0,1fr) 18px; gap: 8px; align-items: center; padding: 9px 12px; border: 0; border-block-start: 1px solid var(--line); background: transparent; text-align: start; font-size: 12.5px; }
.jn-kv:hover { background: var(--bg-2); }
.jn-kv span { display: flex; align-items: center; gap: 8px; color: var(--ink-3); }
.jn-kv b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jn-kv i { width: 18px; height: 18px; border-radius: 50%; border: 1px dashed var(--line-2); display: grid; place-items: center; }
.jn-kv i.jn-ok { background: var(--ink); color: var(--bg); border: 0; }
.jn-sec { padding: 14px 16px 0; }
.jn-sec p { margin: 6px 0 0; color: var(--ink-2); }
.jn-lead { margin: 0 0 10px !important; color: var(--ink-2); }
.jn-cls { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 10px 0; border-block-start: 1px solid var(--line); }
.jn-cls__n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); font: 500 10.5px/1 var(--m); color: var(--ink-3); }
.jn-cls b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; }
.jn-cls b em { font-style: normal; font-weight: 500; font-size: 10.5px; color: var(--red); background: var(--red-soft); border-radius: var(--r); padding: 2px 6px; }
.jn-cls p { margin: 3px 0 2px; color: var(--ink-2); font-size: 12.5px; }
.jn-cls small { color: var(--ink-3); font-size: 12px; }
.jn-cls.is-you .jn-cls__n { border-color: var(--red); color: var(--ink); }
.jn-rule { display: grid; grid-template-columns: 16px 1fr; gap: 10px; align-items: start; padding: 7px 0; border-block-start: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); }
.jn-rule svg { margin-block-start: 2px; color: var(--ink-3); }
.jn-rule.is-no svg { color: var(--ink); }
.jn-faq { border-block-start: 1px solid var(--line); padding: 10px 0; }
.jn-faq summary { cursor: pointer; font-weight: 600; list-style: none; }
.jn-faq summary::-webkit-details-marker { display: none; }
.jn-faq p { margin: 6px 0 0; color: var(--ink-2); }
.jn-src { margin: 16px; padding-block-start: 10px; border-block-start: 1px solid var(--line); color: var(--ink-3); font: 400 11px/1.4 var(--m); }

/* Strip */
.jn-strip { inset-inline: 76px 76px; grid-template-columns: 176px minmax(0,1fr) 264px; }
.jn-steps { list-style: none; margin: 0; padding: 0 14px; display: flex; align-items: center; min-width: 0; }
.jn-steps li:not(:last-child) { flex: 1 1 auto; }
.jn-steps li { display: flex; align-items: center; min-width: 0; }
.jn-steps li::after { content: ""; flex: 1; height: 1px; min-width: 6px; margin-inline: 4px; background: var(--line-2); }
.jn-steps li.is-done::after { background: var(--pastel); }
.jn-steps li:last-child::after { display: none; }
.jn-steps button { display: flex; align-items: center; gap: 10px; min-width: 0; border: 0; background: transparent; text-align: start; padding: 6px 4px; border-radius: var(--r); }
.jn-steps button:hover { background: var(--bg-2); }
.jn-steps button > span:last-child { min-width: 0; }
.jn-steps b { display: block; font-weight: 500; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jn-steps small { display: block; color: var(--ink-3); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jn-dot { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); background: var(--bg); font: 500 11px/1 var(--m); color: var(--ink-3); }
.jn-dot.is-done { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.jn-dot.is-now { border-color: var(--red); color: var(--ink); box-shadow: 0 0 0 3px var(--red-soft); }
.jn-strip__r { gap: 6px; justify-content: center; }
.jn-strip__r .btn { justify-content: center; height: 38px; font-size: 14px; }
.jn-strip__r small { color: var(--ink-3); font-size: 11.5px; }

/* Map pieces */
@media (min-width: 761px) { .jn-layers, .has-rail-end .jn-layers, .has-rail-end .app:has(#insp[hidden]) .jn-layers { inset-inline-start: 500px; max-width: calc(100% - 500px - 460px); } }
.jn-pin { position: relative; display: grid; gap: 4px; pointer-events: none; }
.jn-pin > i { position: absolute; inset-inline-start: 0; inset-block-end: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px var(--red-soft); animation: jn-pulse 2.4s var(--ease) infinite; }
.jn-pin__b, .jn-pin small { margin-inline-start: 14px; }
.jn-pin__b { display: inline-flex; align-items: center; gap: 7px; justify-self: start; padding: 6px 9px; border-radius: var(--r); background: var(--glass-2); border: 1px solid var(--red); box-shadow: var(--sh); font: 600 13px/1 var(--f); color: var(--ink); white-space: nowrap; }
.jn-pin__b .fl { width: 20px; height: 13px; vertical-align: 0; }
.jn-pin small { justify-self: start; margin-block-end: 14px; padding: 4px 8px; border-radius: var(--r); background: var(--glass-2); border: 1px solid var(--line); color: var(--ink-2); font-size: 11.5px; white-space: nowrap; }
@keyframes jn-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 50%, transparent); } 60% { box-shadow: 0 0 0 12px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.toast { position: absolute; inset-block-end: 130px; inset-inline-start: 50%; transform: translateX(-50%); z-index: 40; padding: 10px 14px; }

.phone-only { display: none; }
@media (max-width: 760px) {
  .jn-main { max-height: 58vh !important; }
  .jn-main .title { font-size: 18px; margin-block-start: 4px; }
  .jn-main .ctx1 { display: none; }
  .jn-main .panel__hd { padding: 12px 12px 10px; }
  .jn-rail { margin-block-start: 10px; }
  .jn-rail button { height: 34px; grid-template-columns: 20px; justify-content: center; padding: 0; }
  .jn-rail button span { display: none; }
  .jn-rail button i { margin-inline: auto; }
  .jn-step { padding: 12px; }
  .jn-insp { display: none; }
  .jn-cities { max-height: none; }
  .jn-ft .grow { display: none; }
  .jn-ft { justify-content: space-between; padding: 8px 12px; }
  .jn-pin small { display: none; }
}

/* Select (the country picker), as in the other v3 consoles */
.sel { position: relative; }
.sel select { appearance: none; -webkit-appearance: none; width: 100%; height: 34px; padding-inline: 10px 28px; border-radius: var(--r); background: var(--bg-2); border: 1px solid var(--line); font-size: 13px; color: var(--ink); }
.sel select:hover { border-color: var(--line-2); }
.sel::after { content: ""; position: absolute; inset-inline-end: 11px; inset-block-start: 13px; width: 6px; height: 6px; border-inline-end: 1.5px solid var(--ink-3); border-block-end: 1.5px solid var(--ink-3); transform: rotate(45deg); pointer-events: none; }
.sel select option, .sel select optgroup { background: var(--bg-1); color: var(--ink); }
[dir="rtl"] .time__now small, [dir="rtl"] .jn-steps small { unicode-bidi: plaintext; }