/* auth-login.css — the Clino split-screen for the SSO entry page ONLY.
 *
 * Loaded by login.html alone (not the shared `head` partial), because only
 * /authorize/login wears the branded panel; totp/enrol/error keep the plain
 * centred .auth-card in layout.css. Kept out of layout.css so that shared file
 * stays under the 200-LoC gate and unrelated Go surfaces don't ship these
 * rules.
 *
 * CSP is `style-src 'self'`, so every value lives here, never in a `style`
 * attribute.
 *
 * The gradient stops USED to be literal hex here, on the argument that the panel
 * is one decorative surface rather than a token role. TestNoHardCodedHexInAuthoredCSS
 * disagreed, and it was right: the middle stop was #5E61FF, which is precisely
 * `--sn-primary`, and the ink was #fff, which is precisely `--sn-on-primary`. Two
 * of the four values were a token's value copied to a second place — exactly the
 * drift that gate exists to stop, and it would have survived the next palette
 * change silently. So the two that ARE roles now name their roles, and only the
 * two tints that answer to no role became tokens (`--sn-auth-brand-gradient-*`).
 *
 * This surface is still light-only (login.html hardcodes data-theme="light"). */

.auth-split { padding: 0; align-items: stretch; }
.auth-split .auth-card {
  /* `margin-inline`, never `margin: auto`. In the column below, an `auto` block
     margin absorbs ALL the free vertical space, which pins the card to the
     middle and throws its siblings to the floor of the viewport. Horizontal
     centring is the only part this was ever for. */
  margin-inline: auto;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
/* COLUMN. The sign-in column stacks: card, then whatever secondary actions the
   page carries beneath it.
   It was a row (the default) until 2026-08-31, and that was invisible for six
   days because login/forgot/forgot_done each put exactly ONE child in here. The
   reset-code page is the first with three — the card, the resend form and
   "Gunakan email lain" — and they laid out side by side, the two orphans
   floated out to the right of the card and vertically centred against it. */
.auth-split-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

/* The Clino mark atop the sign-in column (PosLogin's form-side logo). Always shown, so a phone —
 * where the brand panel is hidden below the breakpoint — still carries the Clino identity. */
.clino-formbrand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1.75rem;
}
.clino-logo-tile {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sn-primary);
  color: var(--sn-on-primary);
}
.clino-wordmark-ink {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--sn-on-surface);
}

.clino-brand {
  position: relative;
  flex: 1.05;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: 3.5rem;
  color: var(--sn-on-primary);
  background: radial-gradient(
    130% 120% at 12% 8%,
    var(--sn-auth-brand-gradient-from) 0%,
    var(--sn-primary) 44%,
    var(--sn-auth-brand-gradient-to) 100%
  );
}
.clino-brand-head { display: flex; align-items: center; gap: 0.75rem; }
.clino-logo { flex: none; }
.clino-wordmark { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.clino-brand-main { max-width: 26rem; }
.clino-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.72;
  margin: 0 0 1.1rem;
}
.clino-headline {
  font-size: 2.375rem;
  line-height: 1.15;
  font-weight: 600;
  margin: 0 0 1rem;
  /* Redundant with .clino-brand's inherited ink, but kept explicit: the headline
   * is the one line that must not be re-tinted by a future opacity rule above it. */
  color: var(--sn-on-primary);
}
.clino-sub { font-size: 1rem; line-height: 1.6; opacity: 0.85; margin: 0 0 2rem; }
.clino-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.clino-features li { display: flex; align-items: center; gap: 0.75rem; font-size: 0.9375rem; }
.clino-check { flex: none; fill: currentColor; opacity: 0.95; }
.clino-brand-foot { display: flex; justify-content: space-between; font-size: 0.8125rem; opacity: 0.7; }

/* Below the breakpoint the login collapses to the form alone (PosLogin's
 * @media(max-width:900px)); the brand panel is decoration, not content. */
@media (max-width: 60rem) {
  .clino-brand { display: none; }
  .auth-split-main { padding: 1.5rem; }
}