/*
==============================================================================
NILE CODES — COMPONENTS (P3 primitives only; page composition is P4)
Rules: semantic tokens exclusively (no --nc-f-*, no color/hex literals —
structural exceptions: 0 / 100% / transparent / 1px–4px widths / currentColor).
RTL-first: logical properties throughout; mirrored decoration handled via
[dir="rtl"]; focus-visible mandatory on every interactive element.
States model: default · hover · focus-visible · active · loading · selected ·
disabled · error (where applicable).
==============================================================================
*/

/* ---------------------------------------------------------------- layout */
.nc-container {
  width: 100%;
  max-inline-size: var(--nc-container-width);
  margin-inline: auto;
  padding-inline: var(--nc-gutter-page);
}
.nc-container--narrow { max-inline-size: var(--nc-container-width-narrow); }
.nc-container--wide  { max-inline-size: var(--nc-container-width-wide); }

.nc-section {
  padding-block: var(--nc-space-section);
}
.nc-section--tight { padding-block: var(--nc-space-block); }

.nc-stack {
  display: flex;
  flex-direction: column;
  gap: var(--nc-gap-stack);
}
.nc-stack--sm { gap: var(--nc-gap-stack-sm); }
.nc-stack--lg { gap: var(--nc-gap-stack-lg); }

.nc-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nc-gap-inline);
  align-items: center;
}
.nc-divider {
  border: 0;
  border-block-start: var(--nc-border-width) solid var(--nc-color-border);
  margin-block: var(--nc-gap-stack);
}

/* ---------------------------------------------------------------- text helpers */
.nc-lead {
  font-size: var(--nc-text-body-lg);
  color: var(--nc-color-text-secondary);
  max-inline-size: var(--nc-measure-reading);
}
.nc-display {
  font-family: var(--nc-font-heading);
  font-size: var(--nc-text-display);
  font-weight: var(--nc-weight-heading);
  line-height: var(--nc-leading-tight);
}

/* P14.1.4 — eyebrow: editorial kicker above headings (decorative, never sole info) */
.nc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--nc-gap-inline-sm);
  margin: 0;
  font-size: var(--nc-text-caption);
  font-weight: var(--nc-weight-strong);
  line-height: var(--nc-leading-compact);
  text-transform: uppercase;
  letter-spacing: 0.04em; /* structural letter-spacing */
  color: var(--nc-color-accent);
}
.nc-eyebrow::before {
  content: "";
  inline-size: var(--nc-gap-stack);
  block-size: var(--nc-border-width-strong);
  background-color: currentColor;
  border-radius: var(--nc-radius-pill);
}
.nc-eyebrow--invest { color: var(--nc-color-invest-accent); }

/* ---------------------------------------------------------------- buttons */
.nc-button {
  --nc-btn-pressed-shift: 1px; /* structural micro-offset */
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nc-gap-inline-sm);
  min-block-size: var(--nc-control-height);
  min-inline-size: var(--nc-touch-target);
  padding-inline: var(--nc-pad-inline);
  padding-block: var(--nc-pad-block);
  border: var(--nc-border-width) solid transparent;
  border-radius: var(--nc-radius-control);
  font: inherit;
  font-size: var(--nc-text-body);
  font-weight: var(--nc-weight-strong);
  line-height: var(--nc-leading-compact);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--nc-motion-fast) var(--nc-ease-standard),
    border-color     var(--nc-motion-fast) var(--nc-ease-standard),
    color            var(--nc-motion-fast) var(--nc-ease-standard),
    transform        var(--nc-motion-fast) var(--nc-ease-standard);
}

.nc-button--primary {
  background-color: var(--nc-color-accent);
  color: var(--nc-color-text-on-invested);
}
.nc-button--primary:hover { background-color: var(--nc-color-accent-hover); }
.nc-button--primary:active { background-color: var(--nc-color-accent-active); transform: translateY(var(--nc-btn-pressed-shift)); }

.nc-button--secondary {
  background-color: var(--nc-color-surface);
  color: var(--nc-color-text);
  border-color: var(--nc-color-border-strong);
}
.nc-button--secondary:hover { border-color: var(--nc-color-accent); color: var(--nc-color-accent); }
.nc-button--secondary:active { color: var(--nc-color-accent-active); }
.nc-button--secondary.nc-is-selected,
.nc-button--secondary[aria-pressed="true"] {
  background-color: var(--nc-color-accent-soft);
  border-color: var(--nc-color-accent);
  color: var(--nc-color-accent);
}

.nc-button--ghost {
  background-color: transparent;
  color: var(--nc-color-text-secondary);
}
.nc-button--ghost:hover { color: var(--nc-color-text); background-color: var(--nc-color-surface-sunken); }

.nc-button--danger {
  background-color: var(--nc-color-error);
  color: var(--nc-color-text-on-invested);
}
.nc-button--danger:hover { filter: brightness(0.92); }

.nc-button--sm { min-block-size: var(--nc-control-height-sm); font-size: var(--nc-text-body-sm); }
.nc-button--lg { min-block-size: var(--nc-control-height-lg); font-size: var(--nc-text-body-lg); }

/* P14.1.4 — inverse outline (invest/dark bands: hero, CTA) */
.nc-button--inverse {
  background-color: transparent;
  color: var(--nc-color-invest-text);
  border-color: var(--nc-color-invest-text-muted);
}
.nc-button--inverse:hover { border-color: var(--nc-color-invest-accent); color: var(--nc-color-invest-accent); }
.nc-button--inverse:active { color: var(--nc-color-invest-accent); background-color: var(--nc-color-invest-accent-soft); }
.nc-button--inverse:focus-visible { outline-color: var(--nc-color-invest-accent); }

.nc-button:focus-visible {
  outline: var(--nc-border-width-focus) solid var(--nc-color-focus);
  outline-offset: 0.15rem;
}

.nc-button:disabled,
.nc-button[aria-disabled="true"] {
  cursor: not-allowed;
  background-color: var(--nc-color-disabled-bg);
  border-color: transparent;
  color: var(--nc-color-disabled-text);
  transform: none;
}

/* loading — spinner keeps role text (not color-only: aria-busy + disabled) */
.nc-button.nc-is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}
.nc-button.nc-is-loading::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: var(--nc-icon-size);
  height: var(--nc-icon-size);
  margin: calc(var(--nc-icon-size) / -2);
  border-radius: var(--nc-radius-pill);
  border: var(--nc-border-width-strong) solid transparent;
  border-block-start-color: var(--nc-color-text-on-invested);
  border-inline-end-color: var(--nc-color-text-on-invested);
  animation: nc-spin var(--nc-motion-slow) linear infinite;
}
@keyframes nc-spin { to { transform: rotate(1turn); } }

.nc-button-group { display: inline-flex; gap: var(--nc-gap-inline-sm); flex-wrap: wrap; }

/* ---------------------------------------------------------------- forms */
.nc-field { display: flex; flex-direction: column; gap: var(--nc-gap-inline-sm); margin-block-end: var(--nc-gap-stack); }
.nc-field__label { font-size: var(--nc-text-label); font-weight: var(--nc-weight-strong); color: var(--nc-color-text); }
.nc-field__label .nc-field__required { color: var(--nc-color-error); margin-inline-start: 0.25em; } /* structural 0.25em */
.nc-field__help { font-size: var(--nc-text-caption); color: var(--nc-color-text-muted); }
.nc-field__error { font-size: var(--nc-text-caption); font-weight: var(--nc-weight-strong); color: var(--nc-color-error); }

.nc-input,
.nc-select,
.nc-textarea {
  font: inherit;
  color: var(--nc-color-text);
  background-color: var(--nc-color-surface);
  border: var(--nc-border-width) solid var(--nc-color-border-strong);
  border-radius: var(--nc-radius-control);
  min-block-size: var(--nc-control-height);
  padding-inline: var(--nc-pad-inline);
  padding-block: var(--nc-pad-block);
  inline-size: 100%;
  transition: border-color var(--nc-motion-fast) var(--nc-ease-standard), box-shadow var(--nc-motion-fast) var(--nc-ease-standard);
}
.nc-textarea { min-block-size: calc(var(--nc-control-height) * 2.4); resize: vertical; }

.nc-input:hover, .nc-select:hover, .nc-textarea:hover { border-color: var(--nc-color-accent); }
.nc-input:focus-visible, .nc-select:focus-visible, .nc-textarea:focus-visible {
  outline: var(--nc-border-width-focus) solid var(--nc-color-focus);
  outline-offset: 1px; /* structural */
  border-color: var(--nc-color-accent);
}
.nc-input::placeholder { color: var(--nc-color-text-muted); }

.nc-input:disabled, .nc-select:disabled, .nc-textarea:disabled {
  background-color: var(--nc-color-disabled-bg);
  color: var(--nc-color-disabled-text);
  cursor: not-allowed;
  border-color: var(--nc-color-border);
}
.nc-input[aria-invalid="true"], .nc-select[aria-invalid="true"], .nc-textarea[aria-invalid="true"] {
  border-color: var(--nc-color-error);
  box-shadow: 0 0 0 1px var(--nc-color-error); /* structural 0 + 1px ring */
}

.nc-field.nc-field--error .nc-input,
.nc-field.nc-field--error .nc-textarea,
.nc-field.nc-field--error .nc-select { border-color: var(--nc-color-error); }

/* select chevron — inline-end logical; mirrored via RTL-safe bg placement */
.nc-select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.125rem) calc(50% + 1px), calc(100% - 0.6875rem) calc(50% + 1px); /* structural arrows; LTR placement — RTL override below */
  background-size: 0.4375rem 0.4375rem;
  background-repeat: no-repeat;
  padding-inline-end: calc(var(--nc-pad-inline) + var(--nc-icon-size)); /* structural */
}
[dir="rtl"] .nc-select {
  background-position: 1.125rem calc(50% + 1px), 0.6875rem calc(50% + 1px);
  padding-inline-end: var(--nc-pad-inline);
  padding-inline-start: calc(var(--nc-pad-inline) + var(--nc-icon-size));
}

.nc-check {
  display: inline-flex;
  align-items: center;
  gap: var(--nc-gap-inline-sm);
  min-block-size: var(--nc-control-height-sm);
  cursor: pointer;
}
.nc-check input {
  inline-size: var(--nc-icon-size);
  block-size: var(--nc-icon-size);
  accent-color: var(--nc-color-accent);
}
.nc-check input:focus-visible { outline: var(--nc-border-width-focus) solid var(--nc-color-focus); outline-offset: 2px; }

/* ---------------------------------------------------------------- cards */
.nc-card {
  display: flex;
  flex-direction: column;
  background-color: var(--nc-color-surface);
  border: var(--nc-border-width) solid var(--nc-color-border);
  border-radius: var(--nc-radius-card);
  box-shadow: var(--nc-elevation-1);
  overflow: hidden;
}
.nc-card__media { display: block; inline-size: 100%; }
.nc-card__body { display: flex; flex-direction: column; gap: var(--nc-gap-inline); padding: var(--nc-pad-card); }
.nc-card__title { font-size: var(--nc-text-h4); font-weight: var(--nc-weight-strong); line-height: var(--nc-leading-compact); }
.nc-card__meta { font-size: var(--nc-text-caption); color: var(--nc-color-text-muted); }

.nc-card--link { text-decoration: none; color: inherit; cursor: pointer; transition: box-shadow var(--nc-motion-base) var(--nc-ease-out), border-color var(--nc-motion-fast) var(--nc-ease-standard), transform var(--nc-motion-fast) var(--nc-ease-standard); }
.nc-card--link:hover { box-shadow: var(--nc-elevation-2); border-color: var(--nc-color-border-strong); transform: translateY(-2px); } /* structural lift */
.nc-card--link:focus-visible { outline: var(--nc-border-width-focus) solid var(--nc-color-focus); outline-offset: 2px; }
.nc-card--link.nc-is-selected { border-color: var(--nc-color-accent); background-color: var(--nc-color-accent-soft); }

/* ---------------------------------------------------------------- badge */
.nc-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--nc-gap-inline-sm);
  padding: var(--nc-gap-inline-sm) var(--nc-gap-inline);
  border-radius: var(--nc-radius-pill);
  background-color: var(--nc-color-surface-inset);
  color: var(--nc-color-text-secondary);
  font-size: var(--nc-text-caption);
  font-weight: var(--nc-weight-strong);
  line-height: 1;
}
.nc-badge::before {
  content: "";
  inline-size: var(--nc-gap-inline-sm);
  block-size: var(--nc-gap-inline-sm);
  border-radius: var(--nc-radius-circle);
  background-color: currentColor;
  color: var(--nc-color-text-muted);
}
.nc-badge--success { background-color: var(--nc-color-success-bg); color: var(--nc-color-success); }
.nc-badge--success::before { color: var(--nc-color-success); }
.nc-badge--warning { background-color: var(--nc-color-warning-bg); color: var(--nc-color-warning); }
.nc-badge--warning::before { color: var(--nc-color-warning); }
.nc-badge--error { background-color: var(--nc-color-error-bg); color: var(--nc-color-error); }
.nc-badge--error::before { color: var(--nc-color-error); }
.nc-badge--info { background-color: var(--nc-color-information-bg); color: var(--nc-color-information); }
.nc-badge--info::before { color: var(--nc-color-information); }
.nc-badge--accent { background-color: var(--nc-color-accent-soft); color: var(--nc-color-accent); border: var(--nc-border-width) solid var(--nc-color-accent-soft-border); }

/* P14.1.4 — badge on invest/dark bands (hero trust strip) */
.nc-badge--invest { background-color: var(--nc-color-invest-raise); color: var(--nc-color-invest-text-muted); }
.nc-badge--invest::before { color: var(--nc-color-invest-accent); }

/* ---------------------------------------------------------------- alert / status */
.nc-alert {
  border: var(--nc-border-width) solid var(--nc-color-border);
  border-inline-start: var(--nc-border-width-accent) solid var(--nc-color-accent);
  border-radius: var(--nc-radius-card);
  padding: var(--nc-gap-inline) var(--nc-gap-stack);
  background-color: var(--nc-color-surface-sunken);
  color: var(--nc-color-text);
  display: flex;
  gap: var(--nc-gap-inline);
  flex-direction: column;
}
.nc-alert__title { font-weight: var(--nc-weight-strong); font-size: var(--nc-text-body); }
.nc-alert p { margin: 0; }
.nc-alert--success { background-color: var(--nc-color-success-bg); border-inline-start-color: var(--nc-color-success); }
.nc-alert--warning { background-color: var(--nc-color-warning-bg); border-inline-start-color: var(--nc-color-warning); }
.nc-alert--error   { background-color: var(--nc-color-error-bg); border-inline-start-color: var(--nc-color-error); }
.nc-alert--info    { background-color: var(--nc-color-information-bg); border-inline-start-color: var(--nc-color-information); }

/* ---------------------------------------------------------------- navigation */
.nc-nav { display: flex; flex-wrap: wrap; gap: var(--nc-gap-inline-sm); align-items: center; }
.nc-nav a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--nc-control-height-sm);
  padding-inline: var(--nc-gap-inline);
  border-radius: var(--nc-radius-control);
  color: var(--nc-color-text-secondary);
  text-decoration: none;
  font-weight: var(--nc-weight-strong);
  transition: background-color var(--nc-motion-fast) var(--nc-ease-standard), color var(--nc-motion-fast) var(--nc-ease-standard);
}
.nc-nav a:hover { color: var(--nc-color-text); background-color: var(--nc-color-surface-sunken); }
.nc-nav a[aria-current="page"],
.nc-nav a.nc-is-selected { color: var(--nc-color-accent); background-color: var(--nc-color-accent-soft); }
.nc-nav a:focus-visible { outline: var(--nc-border-width-focus) solid var(--nc-color-focus); outline-offset: -2px; }

/* breadcrumb (chevron mirrored) */
.nc-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nc-gap-inline-sm); font-size: var(--nc-text-body-sm); color: var(--nc-color-text-muted); }
.nc-breadcrumb__sep {
  display: inline-block;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-inline-end: var(--nc-border-width-strong) solid currentColor;
  border-block-end: var(--nc-border-width-strong) solid currentColor;
  transform: rotate(-45deg); /* chevron pointing inline-end (RTL-safe) */
  margin-inline: var(--nc-gap-inline-sm);
}
.nc-breadcrumb a:hover { color: var(--nc-color-link-hover); text-decoration: underline; }
.nc-breadcrumb [aria-current="page"] { color: var(--nc-color-text); font-weight: var(--nc-weight-strong); }

/* ---------------------------------------------------------------- media frame */
.nc-media {
  display: block;
  position: relative;
  overflow: hidden;
  background-color: var(--nc-color-surface-inset);
  border-radius: var(--nc-radius-card);
}
.nc-media img, .nc-media video { inline-size: 100%; display: block; object-fit: cover; }
.nc-media--3-2 { aspect-ratio: 3 / 2; }
.nc-media--1-1 { aspect-ratio: 1; }
.nc-media--16-9 { aspect-ratio: 16 / 9; }

.nc-icon {
  inline-size: var(--nc-icon-size);
  block-size: var(--nc-icon-size);
  flex: none;
  display: inline-flex;
}

/* ---------------------------------------------------------------- utilities */
.u-visually-hidden {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.u-cluster-right { margin-inline-start: auto; }

/* ------------------------------------ responsive primitives (breakpoint contract: 40em / 64em / 90em, mobile-first) */
.nc-fieldset { min-inline-size: 0; border: 0; margin: 0; padding: 0; }
.nc-check-group { display: grid; gap: var(--nc-gap-inline-sm); }

@media (min-width: 40em) {
  .nc-check-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--nc-gap-inline);
  }
}

@media (min-width: 64em) {
  .nc-form-actions {
    display: flex;
    gap: var(--nc-gap-inline);
    align-items: center;
  }
}

@media (min-width: 90em) {
  .nc-container--wide { max-inline-size: var(--nc-container-width-xl); }
}