/* Kaevor One login — RC1 Build 009
   Reference-led pastel split screen, implemented as responsive HTML/CSS. */

:root {
  --login-charcoal: #252a31;
  --login-muted: #69717e;
  --login-sage: #6ca58d;
  --login-sage-dark: #4f8b73;
  --login-sage-soft: #e8f2ed;
  --login-lavender: #877bd4;
  --login-blue: #7899d5;
  --login-border: #dcdedc;
  --login-warm: #fbf8f3;
}

* { box-sizing: border-box; }

body.login-body {
  min-height: 100vh;
  margin: 0;
  color: var(--login-charcoal);
  background: #f4f7f5;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(390px, .95fr) minmax(520px, 1.05fr);
  overflow: hidden;
}

.login-story {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 12%, rgba(255,255,255,.95), transparent 36%),
    linear-gradient(145deg, #fbf9f5 0%, #f6f1ec 55%, #f9f6f3 100%);
  border-right: 1px solid rgba(101, 117, 109, .08);
}

.story-content {
  position: relative;
  z-index: 2;
  width: min(100%, 600px);
  min-height: 100vh;
  padding: clamp(42px, 6vw, 104px) clamp(36px, 6vw, 82px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 22px;
}

.brand-mark {
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(84,126,108,.14));
}

.brand-lockup h1 {
  margin: 0 0 7px;
  font-size: clamp(27px, 2.7vw, 41px);
  line-height: 1;
  letter-spacing: .12em;
  color: var(--login-charcoal);
}

.brand-lockup p {
  margin: 0;
  font-size: clamp(16px, 1.5vw, 21px);
  color: var(--login-sage-dark);
  letter-spacing: -.015em;
}

.story-divider {
  width: 50px;
  height: 2px;
  margin: 42px 0 34px;
  background: linear-gradient(90deg, var(--login-lavender), #b8b2ea);
  border-radius: 999px;
}

.brand-statement {
  max-width: 430px;
  margin: 0;
  font-size: clamp(25px, 2.25vw, 35px);
  line-height: 1.47;
  letter-spacing: -.03em;
  color: #303740;
}

.feature-list {
  display: grid;
  gap: 26px;
  margin-top: 58px;
  max-width: 470px;
}

.feature-item {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 22px;
  align-items: center;
}

.feature-icon {
  width: 68px;
  height: 68px;
  border-radius: 19px;
  display: grid;
  place-items: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.feature-icon [data-icon] { width: 28px; height: 28px; }
.feature-icon-sage { background: rgba(108,165,141,.14); color: var(--login-sage-dark); }
.feature-icon-lavender { background: rgba(135,123,212,.12); color: var(--login-lavender); }
.feature-icon-blue { background: rgba(120,153,213,.13); color: #668acb; }

.feature-item h2 {
  margin: 0 0 5px;
  font-size: 17px;
  line-height: 1.25;
  color: var(--login-charcoal);
}

.feature-item p {
  margin: 0;
  max-width: 290px;
  color: var(--login-muted);
  font-size: 14px;
  line-height: 1.5;
}

.pastel-shape, .orbit { position: absolute; pointer-events: none; }
.pastel-shape { z-index: 0; filter: saturate(.8); }
.shape-peach {
  width: 440px; height: 310px; border-radius: 0 0 0 78%;
  top: -72px; right: -105px;
  background: linear-gradient(145deg, rgba(239,225,215,.74), rgba(245,236,229,.3));
}
.shape-sage {
  width: 360px; height: 390px; border-radius: 53% 0 0 46%;
  right: -120px; top: 34%; transform: rotate(8deg);
  background: linear-gradient(150deg, rgba(167,192,181,.66), rgba(213,224,218,.3));
}
.shape-blue {
  width: 390px; height: 360px; border-radius: 62% 0 0 0;
  right: -85px; bottom: -95px;
  background: linear-gradient(145deg, rgba(128,160,212,.65), rgba(191,208,234,.32));
}
.shape-lavender {
  width: 380px; height: 230px; border-radius: 62% 55% 0 0;
  left: 18%; bottom: -110px; transform: rotate(-9deg);
  background: linear-gradient(145deg, rgba(190,181,224,.37), rgba(224,218,238,.15));
}
.orbit {
  z-index: 1;
  width: 540px; height: 740px;
  border: 2px solid rgba(255,255,255,.82);
  border-radius: 50%;
  right: -210px; top: 10%; transform: rotate(-12deg);
}
.orbit-two {
  width: 680px; height: 340px;
  left: -90px; right: auto; top: auto; bottom: -175px;
  transform: rotate(-8deg);
  border-color: rgba(255,255,255,.74);
}

.login-stage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(28px, 5vw, 72px);
  background:
    radial-gradient(circle at 76% 15%, rgba(222,238,232,.46), transparent 34%),
    radial-gradient(circle at 13% 79%, rgba(224,231,244,.38), transparent 32%),
    #f5f8f7;
}

.login-card {
  width: min(100%, 622px);
  padding: clamp(36px, 5vw, 62px) clamp(30px, 5vw, 54px) 38px;
  background: rgba(255,255,255,.91);
  border: 1px solid rgba(255,255,255,.94);
  border-radius: 22px;
  box-shadow: 0 22px 56px rgba(57,74,67,.11), 0 2px 10px rgba(57,74,67,.05);
  backdrop-filter: blur(16px);
  animation: login-rise .55s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes login-rise { from { opacity: 0; transform: translateY(12px); } }

.login-heading { text-align: center; margin-bottom: 43px; }
.login-heading h2 {
  margin: 0 0 10px;
  font-size: clamp(30px, 3vw, 39px);
  line-height: 1.1;
  letter-spacing: -.04em;
  color: var(--login-charcoal);
}
.login-heading p { margin: 0; color: var(--login-muted); font-size: 16px; }

.role-fieldset { border: 0; padding: 0; margin: 0 0 28px; min-width: 0; }
.role-fieldset legend,
.login-field label {
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #333941;
}

.role-picker {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.role-option {
  min-height: 41px;
  padding: 9px 8px;
  border: 1px solid #d9dddc;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  color: #363c43;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.role-option [data-icon] { display: none; }
.role-option span { display: block; }
.role-option:hover { border-color: #a5c6b8; transform: translateY(-1px); }
.role-option:focus-visible { outline: 3px solid rgba(108,165,141,.25); outline-offset: 2px; }
.role-option.is-selected {
  border-color: var(--login-sage);
  color: #264d3d;
  background: var(--login-sage-soft);
  box-shadow: 0 3px 10px rgba(79,139,115,.08);
}

.login-field { margin-bottom: 20px; }
.input-with-icon { position: relative; }
.input-with-icon > [data-icon] {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 19px; height: 19px;
  color: #7b838e;
  transform: translateY(-50%);
  pointer-events: none;
}
.input-with-icon input {
  width: 100%;
  min-height: 52px;
  padding: 13px 48px;
  border: 1px solid #d7dcda;
  border-radius: 10px;
  background: rgba(255,255,255,.78);
  color: #30363d;
  font: inherit;
  font-size: 14px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.input-with-icon input::placeholder { color: #939aa4; }
.input-with-icon input:focus {
  outline: none;
  border-color: var(--login-sage);
  background: white;
  box-shadow: 0 0 0 4px rgba(108,165,141,.12);
}
.input-with-action input { padding-right: 52px; }
.password-toggle {
  position: absolute;
  right: 9px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 0; border-radius: 9px;
  color: #737b85; background: transparent; cursor: pointer;
}
.password-toggle:hover { background: #f3f5f4; color: #3e4944; }
.password-toggle:focus-visible { outline: 3px solid rgba(108,165,141,.22); }
.password-toggle [data-icon] { width: 19px; height: 19px; }

.remember-row {
  margin: -3px 0 20px;
  color: var(--login-muted);
  font-size: 12px;
}

.login-submit {
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 0;
  border-radius: 10px;
  color: white;
  background: linear-gradient(95deg, var(--login-sage-dark), #72ae94);
  box-shadow: 0 8px 18px rgba(79,139,115,.18);
  font-weight: 600;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.login-submit [data-icon] { position: absolute; right: 22px; width: 21px; height: 21px; }
.login-submit { position: relative; }
.login-submit:hover { transform: translateY(-1px); box-shadow: 0 11px 23px rgba(79,139,115,.23); filter: saturate(1.04); }
.login-submit:focus-visible { outline: 3px solid rgba(108,165,141,.28); outline-offset: 3px; }
.login-submit:disabled { opacity: .7; cursor: wait; }

.login-divider { display: flex; align-items: center; gap: 18px; margin: 24px 0 18px; color: #838a93; font-size: 12px; }
.login-divider::before, .login-divider::after { content: ""; height: 1px; flex: 1; background: #dde1df; }

.demo-workspace-link {
  display: block;
  margin: 0 auto;
  border: 0;
  background: transparent;
  color: var(--login-lavender);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.demo-workspace-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.demo-workspace-link:focus-visible { outline: 3px solid rgba(135,123,212,.22); outline-offset: 5px; border-radius: 4px; }

.prototype-note {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  margin-top: 35px;
  color: #757d87;
  font-size: 12px;
  text-align: center;
}
.prototype-note [data-icon] { width: 16px; height: 16px; color: #71838b; flex: none; }

.existing-session {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 6px 0 4px;
  text-align: center;
}
.existing-session-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 4px;
  border-radius: 16px;
  color: #4f806d;
  background: #e7f2ed;
}
.existing-session-mark [data-icon] { width: 24px; height: 24px; }
.existing-session-label {
  margin: 0;
  color: #5f8d79;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.existing-session h3 { margin: 0; font-size: 24px; line-height: 1.2; }
.existing-session > p:not(.existing-session-label) { margin: 0 0 14px; color: var(--login-muted); }
.existing-session .login-submit { width: 100%; }
.existing-session-switch {
  border: 0;
  padding: 8px 12px;
  color: #5f6a70;
  background: transparent;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.existing-session-switch:hover { color: #315f50; text-decoration: underline; }
.form-footnote { margin-top: 18px; text-align: center; color: #a0a6ad; font-size: 10px; }

@media (max-width: 1050px) {
  .login-shell { grid-template-columns: .82fr 1.18fr; }
  .story-content { padding-inline: 38px; }
  .feature-list { gap: 20px; }
  .feature-item { grid-template-columns: 56px 1fr; gap: 16px; }
  .feature-icon { width: 56px; height: 56px; border-radius: 16px; }
}

@media (max-width: 850px) {
  .login-shell { display: block; min-height: 100vh; }
  .login-story { min-height: auto; border-right: 0; }
  .story-content { min-height: auto; width: 100%; padding: 30px 28px 34px; }
  .brand-mark { width: 48px; height: 48px; }
  .brand-lockup h1 { font-size: 30px; }
  .brand-lockup p { font-size: 15px; }
  .story-divider { margin: 24px 0 20px; }
  .brand-statement { font-size: 22px; max-width: 560px; }
  .feature-list { grid-template-columns: repeat(3, 1fr); max-width: none; margin-top: 28px; gap: 14px; }
  .feature-item { grid-template-columns: 42px 1fr; gap: 11px; align-items: start; }
  .feature-icon { width: 42px; height: 42px; border-radius: 12px; }
  .feature-icon [data-icon] { width: 21px; height: 21px; }
  .feature-item h2 { font-size: 13px; }
  .feature-item p { font-size: 11px; }
  .pastel-shape, .orbit { opacity: .6; }
  .login-stage { min-height: auto; padding: 34px 22px 48px; }
  .login-card { width: min(100%, 650px); }
}

@media (max-width: 620px) {
  .story-content { padding: 26px 20px 28px; }
  .brand-statement { font-size: 20px; line-height: 1.4; }
  .feature-list { display: none; }
  .shape-sage, .shape-blue, .shape-lavender, .orbit { display: none; }
  .login-stage { padding: 22px 14px 34px; }
  .login-card { padding: 32px 20px 26px; border-radius: 18px; }
  .login-heading { margin-bottom: 31px; }
  .role-picker { grid-template-columns: repeat(3, 1fr); }
  .role-option:nth-child(4), .role-option:nth-child(5) { grid-column: span 1; }
  .prototype-note { align-items: flex-start; }
}

@media (max-width: 390px) {
  .role-picker { grid-template-columns: repeat(2, 1fr); }
  .role-option:last-child { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .login-card { animation: none; }
  .role-option, .login-submit { transition: none; }
}

/* RC1 012-dev3 — visible, calm platform-entry motion */
.brand-lockup-live{animation:login-brand-arrive .9s .08s cubic-bezier(.16,1,.3,1) both}
.brand-statement{animation:login-story-arrive .78s .24s cubic-bezier(.16,1,.3,1) both}
.feature-item{animation:login-feature-arrive .65s cubic-bezier(.16,1,.3,1) both}
.feature-item:nth-child(1){animation-delay:.36s}.feature-item:nth-child(2){animation-delay:.48s}.feature-item:nth-child(3){animation-delay:.6s}
.feature-icon{animation:login-icon-float 4.6s ease-in-out infinite}.feature-item:nth-child(2) .feature-icon{animation-delay:-1.4s}.feature-item:nth-child(3) .feature-icon{animation-delay:-2.8s}
.login-card{position:relative;isolation:isolate;overflow:hidden;animation:login-card-arrive .82s .16s cubic-bezier(.16,1,.3,1) both}
.login-card>*{position:relative;z-index:1}
.login-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 25%,rgba(143,191,167,.14) 48%,transparent 70%);background-size:220% 100%;animation:login-card-sheen 7s 1.2s ease-in-out infinite}
.pastel-shape{will-change:transform;animation:login-shape-drift 11s ease-in-out infinite alternate}.shape-sage{animation-delay:-3s}.shape-blue{animation-delay:-6s}.shape-lavender{animation-delay:-8s}
.orbit-one{animation:login-orbit-turn 28s linear infinite}.orbit-two{animation:login-orbit-turn 38s linear infinite reverse}
.login-submit:hover [data-icon]{animation:login-arrow-nudge .7s ease-in-out infinite alternate}
@keyframes login-brand-arrive{from{opacity:0;transform:translateY(-14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes login-story-arrive{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@keyframes login-feature-arrive{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes login-card-arrive{from{opacity:0;transform:translateY(24px) scale(.975);box-shadow:0 8px 30px rgba(36,42,48,.06)}to{opacity:1;transform:none}}
@keyframes login-card-sheen{0%,68%{background-position:130% 0}88%,100%{background-position:-80% 0}}
@keyframes login-icon-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(2deg)}}
@keyframes login-shape-drift{from{transform:translate3d(-5px,6px,0) scale(.98)}to{transform:translate3d(12px,-10px,0) scale(1.04)}}
@keyframes login-orbit-turn{to{transform:rotate(360deg)}}
@keyframes login-arrow-nudge{to{transform:translateX(5px)}}
@media(prefers-reduced-motion:reduce){.brand-lockup-live,.brand-statement,.feature-item,.feature-icon,.login-card,.login-card::before,.pastel-shape,.orbit-one,.orbit-two,.login-submit:hover [data-icon]{animation:none!important}}
.existing-session-status{min-height:20px;margin:10px 0 2px;text-align:center;font-size:12px;line-height:1.5;color:var(--accent-strong)}.existing-session-status.is-error{color:var(--danger)}
.handoff-progress{display:grid;justify-items:center;gap:10px;padding:26px 0 14px;text-align:center;animation:login-card-arrive .5s cubic-bezier(.16,1,.3,1) both}.handoff-progress h3{font-size:20px}.handoff-progress p{color:var(--login-muted);font-size:13px}.handoff-spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--accent-soft);border-top-color:var(--accent-strong);animation:handoff-spin .8s linear infinite}@keyframes handoff-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.handoff-progress,.handoff-spinner{animation:none!important}.handoff-spinner{border-top-color:var(--accent-soft);background:var(--accent)}}

/* Approved Kaevor Labs logo lockup */
.brand-lockup-approved {
  display: block;
  width: min(100%, 520px);
}
.brand-logo-approved {
  display: block;
  width: min(100%, 520px);
  height: auto;
  object-fit: contain;
  object-position: left center;
  filter: none;
}
@media (max-width: 1100px) {
  .brand-lockup-approved,
  .brand-logo-approved { width: min(100%, 440px); }
}
@media (max-width: 760px) {
  .brand-lockup-approved,
  .brand-logo-approved { width: min(100%, 360px); }
}

/* Build 008.7: single approved logo lockup */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.brand-lockup-approved{display:block;width:min(100%,560px)}
.brand-logo-approved{display:block;width:100%;height:auto;object-fit:contain;object-position:left center;filter:none}
.brand-lockup-approved > div,.brand-lockup-approved h1:not(.sr-only),.brand-lockup-approved p{display:none!important}
@media(max-width:760px){.brand-lockup-approved{width:min(100%,390px)}}

/* RC1 Build 009 approved logo safe-area integration */
.brand-lockup-approved {
  display: block;
  width: min(100%, 590px);
  overflow: visible;
}
.brand-logo-approved {
  display: block;
  width: 100%;
  height: auto;
  max-height: 180px;
  object-fit: contain;
  object-position: left center;
  overflow: visible;
}
@media (max-width: 1100px) {
  .brand-lockup-approved { width: min(100%, 500px); }
  .brand-logo-approved { max-height: 155px; }
}
@media (max-width: 760px) {
  .brand-lockup-approved { width: min(100%, 390px); }
  .brand-logo-approved { max-height: 125px; }
}

/* RC1 Build 009 — restored stable login UI with explicit company lockup */
.brand-lockup-live {
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.brand-lockup-live .brand-mark {
  width: 86px !important;
  height: 86px !important;
  flex: 0 0 86px !important;
  object-fit: contain !important;
  background: transparent !important;
  filter: none !important;
}

.brand-lockup-live h1 {
  display: block !important;
  margin: 0 0 10px !important;
  color: #21262D !important;
  font-size: clamp(31px, 2.8vw, 43px) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: .13em !important;
  white-space: nowrap;
}

.brand-lockup-live p {
  display: block !important;
  margin: 0 !important;
  color: #5B8F7A !important;
  font-size: clamp(14px, 1.25vw, 18px) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: -.01em !important;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .brand-lockup-live { gap: 16px !important; }
  .brand-lockup-live .brand-mark {
    width: 66px !important;
    height: 66px !important;
    flex-basis: 66px !important;
  }
  .brand-lockup-live h1 {
    font-size: 27px !important;
    letter-spacing: .09em !important;
  }
  .brand-lockup-live p {
    font-size: 13px !important;
  }
}


/* RC1 Build 010.2 — login logo uses transparent uploaded mark with no square tile */
.login-visual-top .mark{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:86px !important;
  height:auto !important;
  min-width:86px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
  overflow:visible !important;
}
.login-visual-top .mark img{
  display:block !important;
  width:86px !important;
  height:auto !important;
  object-fit:contain !important;
  background:transparent !important;
  box-shadow:none !important;
}
@media (max-width: 760px){
  .login-visual-top .mark,
  .login-visual-top .mark img{
    width:68px !important;
  }
}


/* RC1 Build 010.3 — force transparent brand mark on login */
.login-visual-top .mark{
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
.login-visual-top .mark::before,
.login-visual-top .mark::after{
  content:none !important;
  display:none !important;
}
.login-visual-top .mark img{
  background: transparent !important;
}