/* per-page polish: login
   Scoped exclusively to structures in login.html.
*/

/* ── Main signin card: ensure shadow-pop ── */
main.signin .signin-card {
  box-shadow: var(--shadow-pop) !important;
}

/* ── Floom logo mark: use accent in light, auto in dark ── */
main.signin .logo {
  background: var(--ink) !important;
  opacity: .88;
  transition: opacity .2s;
}
main.signin .logo:hover {
  opacity: 1;
}

/* CANON sec 10  -  auth-card h1 = 28 / 660 / -.025em. */
main.signin .signin-card h1 {
  font-size: 28px;
  letter-spacing: -.025em;
  font-weight: 660;
  line-height: 1.12;
}
main.signin .signin-card .sub {
  color: var(--ink-soft) !important;
  line-height: 1.5;
}

/* ── Google button: proper bordered ghost with Google colors intact ── */
/* R7  -  gbtn retired as bespoke; mapped to CANON sec 3 primary (46h / r-md / 15px / 600). */
main.signin .gbtn {
  height: 46px !important;
  padding: 0 28px !important;
  border: 1px solid var(--line-strong) !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  transition: border-color .15s, background .15s, box-shadow .15s;
  border-radius: var(--r-md) !important;
}
main.signin .gbtn:hover {
  border-color: var(--accent-line) !important;
  background: var(--accent-soft) !important;
  box-shadow: var(--shadow-sm);
}

/* ── Feature props: icon boxes get steel accent border ── */
main.signin .prop {
  border-radius: var(--r-md);
  transition: background var(--t-base) var(--ease);
}
main.signin .prop:hover {
  background: var(--accent-soft) !important;
}
main.signin .prop .ic {
  border-color: color-mix(in srgb, var(--accent) 20%, var(--line)) !important;
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  transition: border-color .2s, background .2s;
}
main.signin .prop:hover .ic {
  border-color: var(--accent-line) !important;
  background: color-mix(in srgb, var(--accent) 18%, transparent) !important;
}
main.signin .prop strong {
  font-size: 13px;
  color: var(--ink) !important;
  font-weight: 620;
  letter-spacing: -.01em;
}
main.signin .prop span {
  color: var(--ink-mute) !important;
  line-height: 1.45;
}

/* Props section divider */
main.signin .props {
  border-top-color: var(--line) !important;
}

/* ── Trust text + links ── */
main.signin .trust {
  color: var(--ink-mute) !important;
  line-height: 1.6;
}
main.signin .trust a {
  color: var(--ink-soft) !important;
  border-bottom-color: var(--line-strong) !important;
  text-decoration: none;
}
main.signin .trust a:hover {
  color: var(--accent) !important;
  border-bottom-color: var(--accent-line) !important;
}

/* ── CLI hint card at the bottom: glass treatment ── */
main.signin + * .below,
.signin-wrap .below {
  background: var(--surface-3) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: color-mix(in srgb, var(--accent) 12%, var(--line)) !important;
}
.signin-wrap .below .mono {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
}

/* ── Mobile ── */
@media (max-width: 480px) {
  main.signin .signin-card {
    padding: 28px 22px 20px !important;
  }
  /* R1  -  mobile h1 = 24. */
  main.signin .signin-card h1 {
    font-size: 24px;
  }
  /* CANON sec 3 primary stays 46 even on mobile. */
  main.signin .gbtn {
    height: 46px !important;
  }
}