/* Kin Kai surface layouts.
   Generated from docs/design/kin-kai-design-direction.html, the direction Mesh
   approved on 29 July 2026. Edit the sheet and rerun tools/build_design_bundle.py,
   do not diverge this file by hand. Source of the tokens is the locked Kin brand
   at projects/kin-partners-setup/assets/BRAND.md. */

/* --- auth ---
   The ground is flat carbon with one soft centred olive glow, which is exactly
   how the kinpartners.io holding page reads as carbon black. The previous
   corner wash used olive at 0.20 across 30rem and tipped the whole screen
   green. Glow stops copied from the holding page: 0.16 to 0.05 at 45 percent
   to 0 at 75 percent, in lifted olive rather than base olive.
   min-height fills the viewport so no bar of bare page shows below the fold. */
.kk-auth {
  display: grid; place-items: center; padding: 40px 24px; min-height: 100vh;
  background:
    radial-gradient(50% 50% at 50% 50%, rgba(155, 176, 104, 0.16), rgba(155, 176, 104, 0.05) 45%, rgba(155, 176, 104, 0) 75%),
    var(--carbon);
}

/* Split sign in: the Kin globe on the left, the form on the right. The globe is
   internal Kai's animation recoloured, served from kin_kai/static/vendor so the
   page makes no external request. See kin_kai/static/globe.js. */
.kk-auth--split { grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); place-items: stretch; padding: 0; min-height: 100vh; }
.kk-auth-hero { position: relative; overflow: hidden; display: grid; align-content: end; gap: 18px; padding: 44px; background: var(--carbon); }
.kk-globe { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.kk-globe:active { cursor: grabbing; }
/* Scrim so the copy always clears the wireframe, without dimming the globe itself. */
.kk-auth-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top right, rgba(16, 19, 9, 0.88) 0%, rgba(16, 19, 9, 0.46) 34%, rgba(16, 19, 9, 0) 62%);
}
.kk-auth-hero-copy { position: relative; z-index: 1; display: grid; gap: 14px; max-width: 42ch; }
.kk-auth-hero-copy h1 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1.18; letter-spacing: -0.025em; }
.kk-auth-hero-copy p { margin: 0; font-size: 14px; color: var(--sage); line-height: 1.55; }
.kk-auth-form { position: relative; overflow: hidden; display: grid; place-items: center; padding: 44px 34px; background: var(--ink); border-left: 1px solid var(--line); }
.kk-aura { position: absolute; border-radius: 50%; pointer-events: none; }
.kk-aura--a { width: 340px; height: 340px; left: -26%; top: -14%; background: radial-gradient(circle, rgba(155, 176, 104, 0.16), transparent 66%); }
/* Lifted olive at the holding page's low alpha. Base olive at 0.22 read as a
   green wash across the form panel. */
.kk-aura--b { width: 300px; height: 300px; right: -28%; bottom: 2%; background: radial-gradient(circle, rgba(155, 176, 104, 0.06), transparent 66%); }
@media (prefers-reduced-motion: no-preference) {
  .kk-aura--a { animation: kk-drift-a 27s ease-in-out infinite; }
  .kk-aura--b { animation: kk-drift-b 33s ease-in-out infinite; }
}
@keyframes kk-drift-a { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(32px, 38px) scale(1.12); } }
@keyframes kk-drift-b { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-28px, -32px) scale(1.08); } }
.kk-auth--split .kk-auth-card { position: relative; z-index: 1; border: 0; background: none; padding: 0; width: min(360px, 100%); }
@media (max-width: 900px) {
  .kk-auth--split { grid-template-columns: minmax(0, 1fr); }
  .kk-auth-hero { display: none; }
}
.kk-auth-card { width: min(430px, 100%); background: var(--ink); border: 1px solid var(--line); border-radius: 18px; padding: 30px; display: grid; gap: 16px; }
.kk-auth-brand { display: flex; align-items: center; gap: 11px; }
.kk-auth h1 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 23px; letter-spacing: -0.02em; line-height: 1.2; }
.kk-auth p { margin: 0; font-size: 13px; color: var(--sage); line-height: 1.5; }
.kk-steps { display: flex; align-items: center; gap: 8px; }
.kk-step { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage); }
.kk-step b { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-strong); font-size: 9px; font-weight: 700; }
.kk-step.is-done b { background: rgba(155, 176, 104, 0.16); border-color: rgba(155, 176, 104, 0.48); color: var(--olive-lift); }
.kk-step.is-now b { background: var(--olive-lift); border-color: var(--olive-lift); color: var(--carbon); }
.kk-step-line { flex: 1; height: 1px; background: var(--line); }
.kk-qr { width: 118px; height: 118px; border-radius: 10px; border: 1px solid var(--line-strong); background:
  repeating-conic-gradient(var(--sand) 0% 25%, var(--ink) 0% 50%) 0 0 / 14px 14px; flex: 0 0 auto; }
.kk-powered { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage); text-align: center; }

/* --- capability rows --- */
.kk-caps { display: grid; }
.kk-cap {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px;
  align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line-soft);
}
.kk-cap:last-child { border-bottom: 0; }
.kk-cap-copy { display: grid; gap: 3px; min-width: 0; }
.kk-cap-copy strong { font-size: 13px; font-weight: 600; }
.kk-cap-copy small { font-size: 11px; color: var(--sage); line-height: 1.45; }
.kk-cap-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kk-owner { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--sage); }