/* ═══════════════════════════════════════════════════════════════════
   ኤላም — sign in

   The approved split: the way in on the left on paper, the reason to
   bother on the right on ink. Three corrections to the mock:

     1. The mock's aside is `min-width:340px` inside a plain flex row, so
        on any phone it refuses to shrink and pushes the form off-screen.
        Here the two columns are a grid that collapses to one below
        900px, and the dark panel moves *under* the form — a learner on a
        phone should see the button, not the sales pitch.
     2. The mock has an email and password form but the app only has
        Google and guest. A field that cannot sign anyone in is worse
        than no field, so the form is gone and the two things that do
        work are given the room.
     3. The mock's dark panel is centred vertically with no scroll of its
        own; at 700px tall its content overflows silently. It scrolls
        with the page here.
   ═══════════════════════════════════════════════════════════════════ */

.si {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--app);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media (max-width: 900px) {
  .si { grid-template-columns: minmax(0, 1fr); }
}

/* ── Left: the way in ─────────────────────────────────────────────── */
.si__main {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 3vw, 34px) clamp(20px, 4vw, 56px) 40px;
}
/* The column is a flex, so the brand would otherwise stretch across it
   and give the logo a 500px hit area. */
.si__brand { align-self: flex-start; }

.si__body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 34px;
}
.si__card {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: fadeUp .3s var(--ease) both;
}

.si__head { display: flex; flex-direction: column; gap: 8px; }
.si__head h1 {
  margin: 0;
  font: 800 30px/1.2 var(--display);
  letter-spacing: -.03em;
  color: var(--ink);
}
.si__head p {
  margin: 0;
  font: 500 14.5px/1.7 var(--ui);
  color: var(--ink-5);
  text-wrap: pretty;
}

/* Google's button keeps Google's mark and nothing else: a white surface,
   our hairline, our radius. It is the primary action here, so it is the
   tallest thing on the card. */
.gbtn {
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 0 20px;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  font: 700 16px/1.4 var(--ui);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .14s var(--ease), box-shadow .14s var(--ease), background .14s var(--ease);
}
.gbtn:hover { color: var(--ink); border-color: var(--line-3); box-shadow: var(--sh-lift); }
.gbtn:disabled { cursor: default; opacity: .6; box-shadow: none; }
.gbtn__mark { flex: none; display: grid; place-items: center; }

.si__or { display: flex; align-items: center; gap: 12px; }
.si__or span:first-child,
.si__or span:last-child { flex: 1; height: 1px; background: var(--line); }
.si__or b {
  font: 600 11.5px/1.4 var(--ui);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-6);
}

.si__guest {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: var(--r-md);
  font: 700 15px/1.4 var(--ui);
  transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
}
.si__guest:hover { color: var(--ink); border-color: var(--line-2); box-shadow: var(--sh-lift); }

.si__note {
  margin: 0;
  font: 500 12.5px/1.7 var(--ui);
  color: var(--ink-6);
  text-wrap: pretty;
}

/* One line, three states, always in the same place so it never shifts
   the card when it appears. */
.si__msg {
  margin: 0;
  min-height: 20px;
  font: 600 13px/1.55 var(--ui);
  color: var(--ink-4);
  text-wrap: pretty;
}
.si__msg[data-tone="bad"]  { color: var(--bad); }
.si__msg[data-tone="good"] { color: var(--good); }

.si__signedin {
  background: var(--good-bg);
  border: 1px solid var(--good-line);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.si__signedin b { font: 800 15px/1.4 var(--ui); color: var(--good-2); }
.si__signedin span { font: 500 13.5px/1.6 var(--ui); color: var(--ink-4); word-break: break-word; }
/* The way out. Quiet, but a real target — this is the only escape from a
   session that is stale or belongs to somebody else. */
.si__switch {
  align-self: flex-start;
  margin-top: 8px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--good-line);
  background: transparent;
  font: 700 12.5px/1.3 var(--ui);
  color: var(--good-2);
  cursor: pointer;
}
.si__switch:hover:not(:disabled) { background: #fff; border-color: var(--good); }
.si__switch:disabled { opacity: .6; cursor: default; }

/* ── Right: why an account ────────────────────────────────────────── */
.si__aside {
  background: var(--ink-block);
  padding: clamp(34px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
}
.si__aside-head { display: flex; flex-direction: column; gap: 14px; }
.si__aside-head h2 {
  margin: 0;
  font: 800 clamp(23px, 2.6vw, 32px)/1.25 var(--display);
  letter-spacing: -.03em;
  color: #fff;
  text-wrap: pretty;
}
.si__perks { display: flex; flex-direction: column; gap: 12px; }
.si__perk {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-lg);
  padding: 18px;
  display: flex;
  gap: 13px;
  align-items: flex-start;
}
.si__perk i {
  flex: none;
  width: 24px; height: 24px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.1);
  color: var(--accent-lt);
  display: grid; place-items: center;
  font: 400 12px/1 var(--et);
  font-style: normal;
}
.si__perk span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.si__perk b { font: 700 14.5px/1.5 var(--ui); color: #fff; }
.si__perk em {
  font: 500 13.5px/1.7 var(--ui);
  font-style: normal;
  color: #a8a099;
  text-wrap: pretty;
}
.si__aside > p {
  margin: 0;
  font: 500 13px/1.7 var(--ui);
  color: #8a8279;
  text-wrap: pretty;
}

@media (max-width: 900px) {
  /* On a phone the pitch belongs under the button, not before it. */
  .si__aside { order: 2; }
  .si__main { order: 1; min-height: auto; }
  .si__body { padding-block: 24px 32px; }
}