/* Nexus Customer Onboarding — screen + field refinements
   Matches IK Studios Credit Note / form aesthetic:
   warm paper, forest ink, gold accent, rounded fillable fields.
   ========================================================================== */

/* — Rounded fillable fields (override underline style) -------------------- */
.iks-input,
.iks-textarea,
.iks-select,
.iks-line-field {
  font-family: var(--iks-body);
  font-size: var(--iks-fs-body);
  color: var(--iks-ink);
  background: var(--iks-field-bg);
  border: 1px solid var(--iks-field-line);
  border-radius: var(--iks-r-md); /* 9px — clearly rounded, not square */
  padding: 7px 11px;
  width: 100%;
  line-height: 1.4;
  transition: border-color var(--iks-t-fast) var(--iks-ease),
              background var(--iks-t-fast) var(--iks-ease),
              box-shadow var(--iks-t-fast) var(--iks-ease);
}

.iks-line-field {
  border-bottom: 1px solid var(--iks-field-line); /* keep boxed, not underline-only */
}

.iks-input::placeholder,
.iks-textarea::placeholder,
.iks-line-field::placeholder {
  color: var(--iks-ink-faint);
}

.iks-input:hover,
.iks-textarea:hover,
.iks-select:hover,
.iks-line-field:hover {
  background: var(--iks-field-bg-hover);
}

.iks-input:focus,
.iks-textarea:focus,
.iks-select:focus,
.iks-line-field:focus {
  outline: none;
  border-color: var(--iks-field-line-focus);
  border-bottom-color: var(--iks-field-line-focus);
  border-bottom-width: 1px;
  background: var(--iks-field-fill);
  box-shadow: var(--iks-focus-ring);
}

.iks-textarea {
  resize: vertical;
  min-height: 64px;
  border-radius: var(--iks-r-md);
}

.iks-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
  cursor: pointer;
}

/* Soft pill for date + short meta fields */
input[type="date"].iks-input,
input[type="date"].iks-line-field {
  border-radius: var(--iks-r-md);
  cursor: text;
  font-variant-numeric: tabular-nums;
}

/* Fieldsets & cards — slightly softer radius */
.iks-fieldset,
.iks-card,
.iks-note {
  border-radius: var(--iks-r-md);
}

/* Signature lines stay ruled; name/date inputs stay rounded */
.iks-sign .iks-line-field,
.iks-sign .iks-input {
  border-radius: var(--iks-r-md);
}

/* — Dark mode (portal only; printable sheets stay ivory) ----------------- */
@media (prefers-color-scheme: dark) {
  html[data-theme="dark"]:not(:has(body[data-doc])) {
    color-scheme: dark;
    --iks-paper-sunken: oklch(18% 0.012 155);
    --iks-paper: oklch(22% 0.014 155);
    --iks-paper-raised: oklch(26% 0.016 155);
    --iks-ink: oklch(93% 0.012 92);
    --iks-ink-muted: oklch(78% 0.014 92);
    --iks-ink-soft: oklch(66% 0.012 92);
    --iks-ink-faint: oklch(54% 0.01 92);
    --iks-line: oklch(93% 0.012 92 / 14%);
    --iks-line-strong: oklch(93% 0.012 92 / 24%);
    --iks-divider: oklch(93% 0.012 92 / 18%);
    --iks-hairline: oklch(93% 0.012 92 / 10%);
    --iks-field-bg: oklch(93% 0.012 92 / 5%);
    --iks-field-bg-hover: oklch(93% 0.012 92 / 8%);
    --iks-field-line: oklch(93% 0.012 92 / 28%);
  }
}

/* — Toolbar --------------------------------------------------------------- */
.iks-toolbar {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--iks-forest);
  color: var(--iks-ink-on-forest);
  border-radius: var(--iks-r-lg);
  box-shadow: 0 8px 32px oklch(16% 0.022 155 / 28%);
  font-family: var(--iks-body);
  font-size: var(--iks-fs-small);
}

.iks-toolbar__btn {
  appearance: none;
  border: 0;
  background: var(--iks-gold);
  color: var(--iks-forest-deep);
  font-family: var(--iks-heading);
  font-weight: 640;
  font-size: var(--iks-fs-small);
  padding: 8px 14px;
  border-radius: var(--iks-r-sm);
  cursor: pointer;
}

.iks-toolbar__btn:active { transform: scale(0.98); }

.iks-toolbar__hint {
  opacity: 0.85;
  max-width: 220px;
  line-height: 1.4;
}

.iks-pdf-hint {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  padding: 10px 16px;
  background: var(--iks-gold-soft);
  color: var(--iks-forest-deep);
  border: 1px solid var(--iks-gold);
  border-radius: var(--iks-r-md);
  font-family: var(--iks-body);
  font-size: var(--iks-fs-small);
  max-width: 480px;
  text-align: center;
}

.iks-brand__name--nexus {
  letter-spacing: 0.14em;
}

/* Portal nav (index / all-in-one) */
.onb-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--iks-4) 0 var(--iks-5);
  padding: 0;
  list-style: none;
}

.onb-nav a {
  display: inline-block;
  padding: 5px 11px;
  font-family: var(--iks-heading);
  font-size: var(--iks-fs-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--iks-ink-muted);
  border: 1px solid var(--iks-line);
  border-radius: var(--iks-r-pill);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.onb-nav a:hover,
.onb-nav a.is-active {
  color: var(--iks-ink-on-forest);
  background: var(--iks-forest);
  border-color: var(--iks-forest);
}

.onb-progress {
  height: 3px;
  background: var(--iks-hairline);
  border-radius: var(--iks-r-pill);
  overflow: hidden;
  margin-bottom: var(--iks-5);
}

.onb-progress__bar {
  height: 100%;
  width: 0%;
  background: var(--iks-gold);
  border-radius: var(--iks-r-pill);
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@media print {
  .iks-toolbar,
  .iks-pdf-hint,
  .screen-only,
  [data-screen-only],
  .onb-nav {
    display: none !important;
  }
  .iks-input,
  .iks-textarea,
  .iks-select,
  .iks-line-field {
    border-radius: var(--iks-r-md) !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

@media screen and (max-width: 720px) {
  .iks-toolbar {
    left: 12px;
    right: 12px;
    bottom: 12px;
    flex-direction: column;
    align-items: stretch;
  }
  .iks-toolbar__hint { max-width: none; text-align: center; }
}