/* Decorative brand motion: no external assets, audio, canvas, or loading gate. */
#auth-screen {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
  align-items: center;
  gap: clamp(36px, 6vw, 100px);
  min-height: 100svh;
  padding: clamp(32px, 6vw, 88px);
  background: #263f57;
  overflow: clip;
}
.brand-atmosphere {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: paint;
  background:
    radial-gradient(ellipse at 12% 16%, rgb(126 173 205 / 25%), transparent 52%),
    radial-gradient(ellipse at 90% 85%, rgb(12 28 45 / 70%), transparent 60%);
}
.brand-orbit {
  position: absolute;
  width: min(85vw, 1150px);
  aspect-ratio: 1;
  left: -36%;
  top: -52%;
  border: 1px solid rgb(196 224 241 / 20%);
  border-radius: 44% 56% 62% 38%;
  box-shadow:
    0 0 0 36px rgb(169 212 239 / 3%),
    0 0 0 100px rgb(169 212 239 / 3%),
    0 0 0 180px rgb(169 212 239 / 2%);
  animation: brand-drift 26s ease-in-out infinite alternate;
}
.brand-orbit-secondary {
  width: min(72vw, 980px);
  left: auto;
  right: -34%;
  top: auto;
  bottom: -55%;
  border-color: rgb(171 213 240 / 16%);
  animation-duration: 34s;
  animation-direction: alternate-reverse;
}
.brand-light {
  position: absolute;
  width: 65%;
  height: 35%;
  left: -8%;
  top: 26%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(145 193 229 / 15%), transparent 68%);
  transform: rotate(-30deg);
  animation: brand-light-drift 20s ease-in-out infinite alternate;
}
.auth-brand-panel {
  max-width: 660px;
  color: #f4f8fc;
  position: relative;
}
.auth-brand-panel .eyebrow {
  color: #bdcfde;
  font-size: var(--text-xs);
  letter-spacing: 0.17em;
}
.auth-brand-panel h2 {
  color: inherit;
  font-size: clamp(38px, 4.6vw, 68px);
  line-height: 1.06;
  letter-spacing: -0.055em;
  margin: 28px 0 24px;
  max-width: 600px;
  text-wrap: balance;
}
.auth-brand-panel h2 span {
  color: #b5d5ec;
}
.auth-brand-panel > p {
  color: #c5d4e0;
  font-size: var(--text-md);
  line-height: 1.8;
  max-width: 440px;
}
.brand-symbol {
  position: relative;
  width: 86px;
  height: 86px;
  margin: 4px 0 36px;
  color: #c4e0f3;
  animation: brand-symbol-float 12s ease-in-out infinite alternate;
  filter: drop-shadow(0 10px 24px rgb(121 184 225 / 10%));
}
.brand-symbol::before {
  content: "";
  position: absolute;
  inset: -10px;
  border: 1px solid rgb(196 224 241 / 16%);
  border-top-color: rgb(196 224 241 / 70%);
  border-right-color: rgb(196 224 241 / 34%);
  border-radius: 50%;
  animation: brand-symbol-orbit 16s linear infinite;
}
.brand-symbol::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px;
  border-radius: 50%;
  background: #d8efff;
  box-shadow:
    0 0 0 4px rgb(152 200 232 / 9%),
    0 0 14px rgb(162 214 247 / 65%);
  transform: rotate(0deg) translateY(-53px);
  animation: brand-symbol-dot 16s linear infinite;
}
.brand-symbol svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.brand-path {
  display: grid;
  grid-template-columns: max-content minmax(28px, 1fr) max-content minmax(28px, 1fr) max-content;
  align-items: center;
  width: min(100%, 565px);
  margin: 34px 0 0;
  color: #cedeea;
  font-size: var(--text-xs);
}
.brand-path-step {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 6px 14px 6px 7px;
  border: 1px solid rgb(218 237 251 / 14%);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 3.5%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
  animation: brand-step-focus 9s ease-in-out infinite;
}
.brand-path-step-2 {
  animation-delay: 3s;
}
.brand-path-step-3 {
  animation-delay: 6s;
}
.brand-path-number {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  flex: none;
  border: 1px solid rgb(207 232 248 / 18%);
  border-radius: 50%;
  background: rgb(221 240 252 / 6%);
  color: #d8e9f5;
  font-size: var(--text-xs);
  font-weight: 700;
  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease;
}
.brand-path-connector {
  position: relative;
  height: 1px;
  overflow: visible;
  background: rgb(201 226 243 / 16%);
}
.brand-path-connector::after {
  content: "";
  position: absolute;
  inset: -1px auto -1px 0;
  width: 38%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, transparent, #b9def5, transparent);
  opacity: 0;
  animation: brand-path-travel 9s ease-in-out infinite;
}
.brand-path-connector-1::after {
  animation-delay: 1.5s;
}
.brand-path-connector-2::after {
  animation-delay: 4.5s;
}
@media (hover: hover) {
  .brand-path-step:hover {
    transform: translateY(-2px);
    border-color: rgb(196 224 241 / 34%);
    background: rgb(255 255 255 / 6%);
  }
}
#auth-screen .auth-card {
  width: min(460px, 100%);
  margin: 0 auto;
  background: #fff;
  border: 1px solid rgb(255 255 255 / 60%);
  box-shadow: 0 24px 70px rgb(12 28 45 / 20%);
  position: relative;
}
html[data-brand-intro] #auth-screen .auth-logo {
  animation: brand-logo-arrive 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#discovery > .start-copy h1 {
  max-width: 700px;
}

html[data-brand-paused] .brand-orbit,
html[data-brand-paused] .brand-light,
html[data-brand-paused] .brand-symbol,
html[data-brand-paused] .brand-symbol::before,
html[data-brand-paused] .brand-symbol::after,
html[data-brand-paused] .brand-path-step,
html[data-brand-paused] .brand-path-connector::after,
html[data-brand-idle] .brand-orbit,
html[data-brand-idle] .brand-light,
html[data-brand-idle] .brand-symbol,
html[data-brand-idle] .brand-symbol::before,
html[data-brand-idle] .brand-symbol::after,
html[data-brand-idle] .brand-path-step,
html[data-brand-idle] .brand-path-connector::after {
  animation-play-state: paused;
}
@keyframes brand-drift {
  to {
    transform: translate3d(35px, 28px, 0) rotate(16deg);
  }
}
@keyframes brand-light-drift {
  to {
    transform: translate3d(70px, -30px, 0) rotate(-20deg);
  }
}
@keyframes brand-symbol-float {
  to {
    transform: translate3d(0, -8px, 0) rotate(3deg);
  }
}
@keyframes brand-symbol-orbit {
  to {
    transform: rotate(360deg);
  }
}
@keyframes brand-symbol-dot {
  to {
    transform: rotate(360deg) translateY(-53px);
  }
}
@keyframes brand-step-focus {
  0%,
  22%,
  100% {
    border-color: rgb(218 237 251 / 14%);
    background: rgb(255 255 255 / 3.5%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
  }
  8%,
  14% {
    border-color: rgb(190 222 244 / 38%);
    background: rgb(201 229 247 / 8%);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 7%),
      0 0 24px rgb(116 181 225 / 9%);
  }
}
@keyframes brand-path-travel {
  0%,
  13%,
  100% {
    opacity: 0;
    transform: translateX(-20%);
  }
  17% {
    opacity: 0.9;
  }
  24% {
    opacity: 0;
    transform: translateX(170%);
  }
}
@keyframes brand-logo-arrive {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 1180px) and (min-width: 981px) {
  .brand-path {
    grid-template-columns: max-content 24px max-content 24px max-content;
  }
  .brand-path-step {
    padding-right: 11px;
  }
}
@media (max-width: 980px) {
  #auth-screen {
    grid-template-columns: 1fr;
    padding: 32px 20px;
  }
  .auth-brand-panel {
    display: none;
  }
  .brand-orbit {
    width: 900px;
    left: -650px;
    top: -400px;
  }
  .brand-orbit-secondary {
    width: 750px;
    right: -500px;
    bottom: -400px;
  }
}
@media (max-width: 980px) {
  #auth-screen {
    padding-bottom: 60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-orbit,
  .brand-light,
  .brand-symbol,
  .brand-symbol::before,
  .brand-symbol::after,
  .brand-path-step,
  .brand-path-connector::after,
  #auth-screen .auth-logo {
    animation: none !important;
  }
}
@media print {
  .brand-atmosphere {
    display: none !important;
  }
}

/* Self-hosted variable font; the small Latin subset includes Danish characters. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("assets/fonts/manrope-latin-variable.woff2") format("woff2");
}
:root {
  --font-display: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
body {
  background: #dde8f2;
  font-family: var(--font-display);
}
h1,
h2,
h3,
h4 {
  font-weight: 700;
  letter-spacing: -0.045em;
}
.app-shell {
  position: relative;
  isolation: isolate;
}
main#leadstudio-app {
  min-height: 100svh;
}
.workspace-atmosphere {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  contain: paint;
  background:
    radial-gradient(ellipse at 70% 0%, rgb(191 215 236 / 70%), transparent 58%),
    radial-gradient(ellipse at 15% 80%, rgb(168 196 222 / 35%), transparent 55%),
    linear-gradient(135deg, #e3edf6, #d7e4f0 70%, #e7eef5);
}
.workspace-halo {
  position: absolute;
  width: 950px;
  height: 950px;
  left: 50%;
  top: -540px;
  border: 1px solid rgb(52 76 102 / 11%);
  border-radius: 43% 57% 55% 45%;
  box-shadow:
    0 0 0 50px rgb(115 152 185 / 4%),
    0 0 0 120px rgb(115 152 185 / 3%),
    0 0 0 220px rgb(115 152 185 / 2%);
  animation: workspace-orbit 32s ease-in-out infinite alternate;
}
.workspace-plus {
  position: absolute;
  width: 440px;
  height: 440px;
  right: -160px;
  top: 45%;
  color: rgb(52 76 102 / 11%);
  animation: workspace-symbol 24s ease-in-out infinite alternate;
}
.workspace-plus svg {
  width: 100%;
  height: 100%;
}

.card,
.company-list-panel,
.company-detail-panel,
.analysis-progress-card {
  border-color: #cbdbe8;
  box-shadow: 0 8px 30px rgb(34 57 80 / 5%);
}
.history-sidebar,
.history-groups {
  scrollbar-width: thin;
  scrollbar-color: #7f9eb9 #243a50;
  scrollbar-gutter: stable;
}
.history-sidebar::-webkit-scrollbar,
.history-groups::-webkit-scrollbar {
  width: 8px;
}
.history-sidebar::-webkit-scrollbar-track,
.history-groups::-webkit-scrollbar-track {
  background: #243a50;
  border-radius: var(--radius-pill);
}
.history-sidebar::-webkit-scrollbar-thumb,
.history-groups::-webkit-scrollbar-thumb {
  background: #7f9eb9;
  border: 2px solid #243a50;
  border-radius: var(--radius-pill);
}
.history-sidebar::-webkit-scrollbar-thumb:hover,
.history-groups::-webkit-scrollbar-thumb:hover {
  background: #b1ccdf;
}
textarea,
.company-list-panel,
.workspace-source-list {
  scrollbar-width: thin;
  scrollbar-color: #91acc4 #edf3f8;
}
textarea::-webkit-scrollbar,
.company-list-panel::-webkit-scrollbar,
.workspace-source-list::-webkit-scrollbar {
  width: 8px;
}
textarea::-webkit-scrollbar-track,
.company-list-panel::-webkit-scrollbar-track,
.workspace-source-list::-webkit-scrollbar-track {
  background: #edf3f8;
}
textarea::-webkit-scrollbar-thumb,
.company-list-panel::-webkit-scrollbar-thumb,
.workspace-source-list::-webkit-scrollbar-thumb {
  background: #91acc4;
  border: 2px solid #edf3f8;
  border-radius: var(--radius-pill);
}
html[data-brand-paused] .workspace-halo,
html[data-brand-paused] .workspace-plus,
html[data-brand-idle] .workspace-halo,
html[data-brand-idle] .workspace-plus {
  animation-play-state: paused;
}
@keyframes workspace-orbit {
  to {
    transform: translate3d(-55px, 40px, 0) rotate(14deg);
  }
}
@keyframes workspace-symbol {
  to {
    transform: translate3d(-45px, -20px, 0) rotate(12deg);
  }
}
@media (max-width: 980px) {
  .workspace-halo {
    left: 10%;
    top: -640px;
  }
  .workspace-plus {
    width: 300px;
    height: 300px;
    right: -185px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .workspace-halo,
  .workspace-plus {
    animation: none !important;
  }
}
@media print {
  .workspace-atmosphere {
    display: none !important;
  }
  body {
    background: white;
  }
}

/* A calm, editorial form surface with readable contrast and content-sized fields. */
#history-search {
  color: #fff !important;
  caret-color: #fff;
}
#history-search::placeholder {
  color: #b9cada;
  opacity: 1;
}
#history-search::-webkit-search-cancel-button {
  filter: grayscale(1) brightness(0) invert(1);
}
/* Uppercase display type is a brand moment: the page title (H1) and the
   sign-in panel. Everything else is set in sentence case. */
h1,
.auth-brand-panel h2,
.results-heading h2 {
  text-transform: uppercase !important;
  letter-spacing: -0.025em;
  font-weight: 800;
  text-wrap: balance;
}
h2,
h3 {
  text-wrap: balance;
}
#discovery > .start-copy h1 {
  font-size: var(--text-display);
  line-height: 1.12;
}
.auth-brand-panel h2 {
  font-size: clamp(34px, 4vw, 56px);
}
.card-heading h2 {
  font-size: var(--text-xl);
  letter-spacing: -0.015em;
}

/* Form controls: one height, radius, border and focus ring everywhere. */
#leadstudio-app
  :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.sc-input),
    textarea,
    select
  ),
#profile-workspace
  :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.sc-input),
    textarea,
    select
  ),
.auth-card :is(input:not([type="checkbox"]):not([type="radio"]), textarea) {
  min-height: 44px;
  border-radius: var(--radius-control);
  border: 1px solid #cdd8e2;
  background: #f8fafc;
  padding: 10px 14px;
  color: #20364c;
  box-shadow: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}
#leadstudio-app
  :is(input:not([type="checkbox"]):not([type="radio"]):not(.sc-input), textarea, select):hover,
#profile-workspace
  :is(input:not([type="checkbox"]):not([type="radio"]):not(.sc-input), textarea, select):hover,
.auth-card input:hover {
  border-color: #a9bccd;
}
textarea:not([data-fixed-height]) {
  resize: none;
  min-height: 88px;
  line-height: 1.65;
}

.workspace-halo {
  animation-duration: 22s;
}
.workspace-plus {
  animation-duration: 18s;
  right: -115px;
  color: rgb(52 76 102 / 14%);
}

@media (max-width: 760px) {
  #auth-screen {
    padding-bottom: 32px;
  }
}

.workspace-steps {
  display: flex;
  gap: 6px;
  padding: 0;
  border: 0;
}
.workspace-steps li {
  flex: 1;
  padding: 10px 0;
  border: 0;
  border-top: 3px solid #ccdbe7;
  border-radius: 0;
  background: transparent;
  font-size: var(--text-xs);
}
.workspace-steps li span {
  display: none;
}
.workspace-steps li[aria-current] {
  border-top-color: #344c66;
  color: #243a50;
  background: transparent;
}

#leadstudio-app textarea:not([data-fixed-height]),
#profile-workspace textarea:not([data-fixed-height]) {
  resize: none;
}

/* The moving blue ribbon behind the workspace. */

.workspace-ribbon {
  position: absolute;
  width: max(1500px, 130vw);
  height: auto;
  top: 2%;
  left: -15%;
  opacity: 0.65;
  transform-origin: 55% 50%;
  animation: ribbon-drift 22s ease-in-out infinite alternate;
}
.ribbon-flow {
  stroke-dasharray: 180 1820;
  opacity: 0.42;
  animation: ribbon-travel 30s linear infinite;
}
@keyframes ribbon-drift {
  from {
    transform: translate3d(-40px, -50px, 0) rotate(-7deg);
  }
  to {
    transform: translate3d(95px, 100px, 0) rotate(8deg);
  }
}
@keyframes ribbon-travel {
  to {
    stroke-dashoffset: -2000;
  }
}
html[data-brand-paused] :is(.workspace-ribbon, .ribbon-flow),
html[data-brand-idle] :is(.workspace-ribbon, .ribbon-flow) {
  animation-play-state: paused;
}
/* Focus: white surface, brand border and a soft ring (mouse and keyboard). */
#leadstudio-app
  :is(input:not([type="checkbox"]):not([type="radio"]):not(.sc-input), textarea, select):focus,
#profile-workspace
  :is(input:not([type="checkbox"]):not([type="radio"]):not(.sc-input), textarea, select):focus,
.auth-card input:focus {
  outline: none;
  border-color: var(--k-blue, #344c66);
  background: #fff;
  box-shadow: 0 0 0 3px rgb(52 76 102 / 16%);
}
#history-search:focus {
  outline: none;
  background: #3b5268;
  border-color: #789bb9;
  box-shadow: inset 0 -2px 0 #a8c4db;
}

@media (max-width: 980px) {
  .workspace-ribbon {
    width: 1250px;
    left: -540px;
    top: 15%;
    opacity: 0.5;
  }
}
@media (prefers-reduced-motion: reduce) {
  .workspace-ribbon,
  .ribbon-flow {
    animation: none !important;
  }
}
@media print {
  .workspace-ribbon {
    display: none;
  }
}

/* --- Kombination design guide (19 Oct 2026) ------------------------------
   Aptos; logo blue, white and light grey dominate; orange marks the next
   important action; dusty green for success, rust for real warnings and
   rejections. Loaded last, so it is the brand layer over product.css. */
:root {
  --k-blue: #344c66;
  --k-orange: #ec9638;
  --k-orange-hover: #dc8424;
  --k-grey: #8ea5b2;
  --k-dark: #1f2a35;
  --k-rust: #b55239;
  --k-green: #7c927b;
  --k-light: #e6ebed;
  --font-display:
    Aptos, "Aptos Display", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --danger: var(--k-rust);
}
body,
button,
input,
select,
textarea {
  font-family: var(--font-display);
}
/* The one next step on a screen. Dark text on orange (contrast ≈ 7:1).
   Sidebar navigation keeps its own look. */
.button.primary:not(.history-new-button) {
  background: var(--k-orange);
  border-color: var(--k-orange);
  color: var(--k-dark);
  box-shadow: 0 4px 14px rgb(236 150 56 / 24%);
}
.button.primary:not(.history-new-button):hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--k-orange-hover);
  border-color: var(--k-orange-hover);
}
.button.primary:not(.history-new-button):disabled {
  background: var(--k-light);
  border-color: var(--k-light);
  color: #6f7f88;
  box-shadow: none;
}
.button.primary.is-loading:not(.history-new-button) {
  background: #f3c08a;
  border-color: #f3c08a;
}