/* Get started: the five steps from creating an account to the first people
   added (signup.html, verify-email.html, get-started.html). Builds on
   css/portal.css and its colours, so it follows the day and night themes. */

.gs-steps {
  list-style: none; margin: 0; padding: 0; width: 100%; max-width: 640px;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0;
}
.gs-steps li {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--text-3); text-align: center; line-height: 1.25;
}
/* The line to the step before. */
.gs-steps li + li::before {
  content: ""; position: absolute; top: 13px; right: calc(50% + 18px); left: calc(-50% + 18px);
  height: 2px; background: var(--border);
}
.gs-steps .n {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--border-strong); background: var(--surface); color: var(--text-3);
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.gs-steps li.done { color: var(--text-2); }
.gs-steps li.done .n { border-color: var(--ok-fill); background: var(--ok-fill); color: #fff; }
.gs-steps li.done + li::before { background: var(--ok-fill); }
.gs-steps li.now { color: var(--text); }
.gs-steps li.now .n { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
@media (max-width: 520px) {
  .gs-steps li span:last-child { display: none; }
  .gs-steps li.now span:last-child { display: block; position: absolute; top: 34px; white-space: nowrap; }
  .gs-steps { margin-bottom: 18px; }
}

.gs-card { max-width: 640px; }
.gs-card h1 { font-size: 23px; }
.gs-step-label { font-size: 13px; font-weight: 700; color: var(--primary-text); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }

/* Big choices: team size, and how to add people. */
.gs-options { display: grid; gap: 10px; }
.gs-options--sizes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gs-option {
  position: relative; display: flex; gap: 12px; align-items: flex-start; text-align: left;
  padding: 14px 16px; border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--surface); color: var(--text); cursor: pointer; font: inherit; margin: 0;
}
.gs-option:hover { border-color: var(--text-3); background: var(--surface-2); }
.gs-option input { position: absolute; opacity: 0; pointer-events: none; }
.gs-option:has(input:checked), .gs-option.picked { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: var(--primary-soft); }
.gs-option:has(input:focus-visible) { outline: 3px solid var(--ring); outline-offset: 2px; }
.gs-option strong { display: block; font-size: 15.5px; font-weight: 700; }
.gs-option .d { display: block; font-size: 14px; font-weight: 400; color: var(--text-2); margin-top: 3px; line-height: 1.45; }
.gs-option--size { justify-content: center; text-align: center; padding: 16px 8px; }
.gs-option--size strong { font-size: 21px; font-variant-numeric: tabular-nums; }
.gs-option .ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); flex-shrink: 0; }
.gs-option .ico svg { width: 20px; height: 20px; }

/* One row per person. */
.gs-people { display: grid; gap: 10px; margin-top: 4px; }
.gs-person { display: grid; grid-template-columns: 1.1fr 1.3fr 1fr 44px; gap: 8px; align-items: start; }
.gs-person .x { width: 44px; height: 44px; }
.gs-person .gs-row-error { grid-column: 1 / -1; color: var(--danger); font-size: 14px; font-weight: 500; }
.gs-person .gs-row-error:empty { display: none; }
.gs-people-head { display: grid; grid-template-columns: 1.1fr 1.3fr 1fr 44px; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); margin-top: 18px; }
@media (max-width: 600px) {
  .gs-people-head { display: none; }
  .gs-person { grid-template-columns: 1fr 44px; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-md); }
  .gs-person input { grid-column: 1; }
  .gs-person .x { grid-column: 2; grid-row: 1; }
}

/* What happened to each person, and what to hand over. */
.gs-results { list-style: none; margin: 14px 0 0; padding: 0; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.gs-results li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-top: 1px solid var(--border); font-size: 14.5px; }
.gs-results li:first-child { border-top: 0; }
.gs-results .mark { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; flex-shrink: 0; margin-top: 1px; background: var(--ok-soft); color: var(--ok); }
.gs-results li.warn .mark { background: var(--warn-soft); color: var(--warn); }
.gs-results .who { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.gs-results .who strong { display: block; }
.gs-results .note { color: var(--text-2); font-size: 14px; }
.gs-kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin-top: 6px; font-size: 14px; }
.gs-kv .k { color: var(--text-3); }
.gs-token {
  display: block; font-family: var(--font-mono); font-size: 14px; padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--border); overflow-wrap: anywhere; user-select: all;
}
.gs-actions { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 24px; }
.gs-actions .right { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.gs-inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.gs-check { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 14.5px; color: var(--text); cursor: pointer; overflow-wrap: anywhere; }
.gs-check input { width: auto; flex-shrink: 0; }
.gs-next { margin: 12px 0 0; padding-left: 20px; color: var(--text-2); font-size: 15px; display: grid; gap: 6px; }
.gs-downloads { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 12px; }
.gs-downloads a { text-decoration: none; }
[hidden] { display: none !important; }