/* OwnerSide's High Desert Stone palette, shared by the login and workspace. */
:root {
  --stone: #F2EFE7;
  --ink: #1B221D;
  --forest: #1D2A23;
  --cream: #E9E4D8;
  --sage: #4E7A6B;
  --sage-on-dark: #87AC97;
  --sage-deep: #41684F;
  --pine: #141F18;

  --paper: #FAF8F2;
  --body-ink: #414C43;
  --muted-ink: #566359;
  --rule: #C4CABF;
  --field-rule: #7D897D;
  --wash: #E9EAE0;
  --selected: #DEE7DD;
  --rail-hover: #2A3B30;
  --rail-selected: #32483B;
  --rail-rule: #415146;
  --rail-secondary: #B6C3B6;
  --error-ink: #913E30;
}
@font-face {
  font-family: Manrope;
  src: url('/command/assets/manrope-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--forest);
  color: var(--cream);
  font: 16px/1.45 Manrope, system-ui, sans-serif;
}
h1, h2, p { margin: 0; }
h1, h2 { font-weight: 600; letter-spacing: -.045em; line-height: 1.1; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .55; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--sage-deep); outline-offset: 3px; }
.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.micro, .overline { font: 600 10px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; }
.micro { color: var(--rail-secondary); }
.overline { display: flex; gap: 10px; align-items: center; color: var(--sage-on-dark); letter-spacing: .16em; }
.overline i { width: 18px; height: 2px; background: currentColor; }
.brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 18px; font-weight: 600; letter-spacing: -.05em; }
.brand img { width: 29px; height: 29px; object-fit: contain; }
.brand b { font-weight: 500; color: var(--sage-on-dark); }

.lock-view {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, var(--forest) 24%, var(--pine));
}
.lock-view::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgb(135 172 151 / 4%) 1px, transparent 1px), linear-gradient(90deg, rgb(135 172 151 / 4%) 1px, transparent 1px);
  background-size: 48px 48px;
}
.lock-top, .lock-foot { position: relative; display: flex; align-items: center; justify-content: space-between; margin: 0 clamp(20px, 5vw, 80px); }
.lock-top { height: 85px; border-bottom: 1px solid var(--rail-rule); }
.lock-classification { border: 1px solid var(--rail-rule); border-radius: 3px; padding: 5px 9px; }
.lock-foot { border-top: 1px solid var(--rail-rule); padding: 18px 0; letter-spacing: .16em; }
.lock-layout { position: relative; flex: 1; display: grid; grid-template-columns: minmax(360px, 1.4fr) minmax(300px, .78fr); gap: clamp(24px, 5vw, 90px); align-items: center; width: min(1120px, 90%); margin: auto; padding: 50px 0; }
.lock-visual { position: relative; align-self: stretch; display: flex; align-items: center; min-height: 480px; isolation: isolate; }
.orbit-art { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; opacity: .9; mask-image: linear-gradient(90deg, #0004, #000 80%); }
.orbit-grid { stroke: var(--sage-on-dark); opacity: .17; }
.orbit-rings { stroke: var(--sage); stroke-width: 1.2; opacity: .7; }
.orbit-scan { transform-origin: 290px 210px; animation: survey-orbit 28s linear infinite; stroke: var(--sage-on-dark); stroke-width: 1.4; opacity: .65; }
.orbit-terrain { stroke: var(--rail-secondary); stroke-width: 2; opacity: .52; }
.orbit-target { stroke: var(--cream); stroke-width: 1.5; }
.hero-type { position: relative; width: 82%; }
.hero-type h1 { font-size: clamp(62px, 7vw, 105px); line-height: .93; letter-spacing: -.075em; margin: 25px 0 22px; color: var(--stone); }
.hero-type em { font-style: normal; color: var(--sage-on-dark); }
.hero-type p { max-width: 310px; color: var(--cream); font-size: 18px; }
.lock-region { position: absolute; bottom: 28px; right: 0; }

.login-panel {
  color-scheme: light;
  position: relative; width: 100%; padding: clamp(24px, 3vw, 38px);
  color: var(--ink); background: var(--stone); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden;
}
.login-panel::before { content: ''; position: absolute; top: 0; left: 0; width: 48px; height: 2px; background: var(--sage); }
.login-mark { width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 23px; background: var(--selected); border: 1px solid var(--rule); border-radius: 9px; color: var(--sage-deep); }
.login-panel .overline { margin-bottom: 8px; color: var(--sage-deep); }
.login-panel h2 { font-size: clamp(25px, 2.4vw, 33px); }
.login-panel .muted { margin: 9px 0 24px; color: var(--body-ink); }
.login-panel label { display: block; margin: 15px 0 6px; font-size: 14px; font-weight: 650; }
.login-panel input { display: block; width: 100%; min-width: 0; min-height: 43px; padding: 10px 12px; line-height: 1.3; color: var(--ink); background: var(--paper); border: 1px solid var(--field-rule); border-radius: 5px; }
.login-panel input::placeholder { color: var(--muted-ink); opacity: 1; }
.login-panel .primary { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; padding: 12px 17px; border: 1px solid var(--sage-deep); border-radius: 5px; background: var(--sage-deep); color: var(--stone); font-size: 14px; font-weight: 650; }
.login-panel .primary:hover { background: var(--forest); }
.form-status { margin: 12px 0; min-height: 20px; color: var(--body-ink); font-size: 14px; }
.form-status.error { color: var(--error-ink); }
@keyframes survey-orbit { to { transform: rotate(360deg); } }
@media (max-width: 680px) {
  .lock-top { height: 66px; }
  .lock-layout { grid-template-columns: 1fr; width: min(470px, calc(100% - 36px)); padding: 16px 0 22px; gap: 12px; }
  .lock-visual { min-height: 190px; align-self: auto; }
  .hero-type h1 { font-size: 50px; margin: 8px 0; letter-spacing: -.07em; }
  .hero-type h1 br { display: none; }
  .hero-type em { margin-left: .15em; }
  .hero-type p { font-size: 16px; max-width: 280px; }
  .orbit-art { width: 76%; left: 34%; mask-image: linear-gradient(90deg, transparent, #000 60%); }
  .lock-region, .login-mark { display: none; }
  .login-panel { padding: 22px; }
  .login-panel .muted { margin-bottom: 15px; }
  .lock-foot, .lock-classification { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}