/* The gate, shown instead of the app while the account loads, before
   sign-in, while it waits for approval or when it is blocked. */

/* The gate: shown instead of the app while the account loads, before sign-in,
   and while the account waits for approval. */
body[data-gate] .layout,
body[data-gate] .view-tabs {
  display: none;
}

/* With the tabs gone, the settings menu keeps its end of the bar. */
body[data-gate] .topbar {
  justify-content: flex-end;
}

.gate {
  display: grid;
  justify-items: center;
  gap: 16px;
  max-width: 540px;
  margin: 9vh auto 0;
  padding: 46px 34px 38px;
  border: 1.5px solid var(--line);
  border-radius: 23px 17px 21px 15px;
  background: var(--surface);
  text-align: center;
}

.gate[hidden],
.gate [hidden] {
  display: none;
}

.gate-title {
  margin: 0;
  font-size: 2rem;
  letter-spacing: -0.02em;
}

/* Under the name, close to it: what is special here. Balanced, so a
   phone breaks it into two even lines, not one with a word alone. */
.gate-tagline {
  max-width: 36ch;
  margin: -10px 0 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.5;
  text-wrap: balance;
}

/* Before sign-in: a small line and three steps, each with its icon. */
.gate-intro {
  display: grid;
  justify-items: center;
  gap: 14px;
}

/* While waiting, the steps sit between the status line and the account. */
body[data-gate="waiting"] .gate-intro {
  margin-block: 10px 12px;
}

.gate-lead {
  margin: 0;
  color: var(--brand-strong);
  font-size: 1.15rem;
  font-weight: 650;
}

.gate-steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: start;
}

/* Balanced too: a step that takes two lines on a phone never leaves one
   word alone on the second. */
.gate-steps li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.02rem;
  line-height: 1.45;
  text-wrap: balance;
}

.gate-step-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--line);
  border-radius: 13px 10px 12px 9px;
  background: var(--title-wash);
  color: var(--brand-strong);
}

.gate-step-icon svg {
  width: 19px;
  height: 19px;
}

.gate-text {
  max-width: 34ch;
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.6;
}

.gate-text:empty {
  display: none;
}

.gate-sign-in {
  margin-top: 8px;
  padding: 12px 28px;
  border: 1.5px solid var(--line);
  border-radius: 15px 12px 16px 11px;
  background: var(--brand);
  color: var(--surface);
  font-size: 1.05rem;
  font-weight: 700;
  transition: background-color 0.18s ease;
}

.gate-sign-in:hover {
  background: var(--brand-strong);
}

/* Google draws its own button in a frame; this keeps its place while it
   loads, so the note under it does not jump. */
.gate-google {
  display: grid;
  place-items: center;
  min-height: 44px;
  margin-top: 8px;
}

.gate-note,
.gate-account {
  max-width: 44ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

/* The note, and the link to the privacy policy on a line of its own under
   it; both balanced, so a long link breaks into two even lines. */
.gate-note {
  text-wrap: balance;
}

.gate-note span {
  display: block;
}

.gate-note a {
  color: var(--brand-strong);
  font-weight: 650;
  text-underline-offset: 3px;
}

.gate-note a:focus-visible {
  border-radius: 4px;
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

.gate-sign-out {
  padding: 7px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-raised);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 650;
}

.gate-sign-out:hover {
  border-color: var(--brand);
}

.gate-sign-in:focus-visible,
.gate-sign-out:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

@media (max-width: 620px) {
  .gate {
    margin-top: 4vh;
    padding: 34px 20px 28px;
  }
}