/* =============================================================================
   NordicSign — Design System
   Source of truth: NordicSign Brand Book (Sept 2026)
   Order: 1 fonts · 2 tokens · 3 base · 4 layout · 5 components · 6 utilities
   Rules that must not be broken:
     - every spacing value is a multiple of 8px
     - border-radius is always 4px (no softer corners anywhere)
     - Deep Royal Blue #2563EB is the only interactive accent
     - shadows stay at 0 4px 6px -2px rgba(0,0,0,.03)
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Typography — Inter, self-hosted (no third-party font requests, GDPR-safe)
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../lib/inter/inter-latin-wght-normal.woff2") format("woff2");
}

/* ---------------------------------------------------------------------------
   2. Design tokens
   --------------------------------------------------------------------------- */
:root {
  /* Brand */
  --ns-slate: #0f172a;          /* nav, footers, headings — the anchor */
  --ns-accent: #2563eb;         /* the single interaction colour */
  --ns-accent-hover: #1d4ed8;

  /* Surfaces */
  --ns-bg: #fafbfc;
  --ns-card: #ffffff;
  --ns-hover: #f9fafb;
  --ns-border: #e5e7eb;
  --ns-border-strong: #d1d5db;

  /* Text hierarchy */
  --ns-text: #111827;
  --ns-text-secondary: #4b5563;
  --ns-text-tertiary: #9ca3af;

  /* Semantic status */
  --ns-success: #059669;
  --ns-warning: #d97706;
  --ns-error: #dc2626;

  /* Ink variants — same hues, darkened to meet WCAG AA (4.5:1) as badge text
     on their tinted backgrounds. Dots and borders keep the pure status hues. */
  --ns-success-ink: #047857;
  --ns-warning-ink: #b45309;
  --ns-error-ink: #b91c1c;

  /* Value signal — "affordable agility". Pricing and credits only, never for
     primary actions, so it never competes with the interaction accent. */
  --ns-value: #0d9488;
  --ns-value-soft: #ccfbf1;

  /* Typography */
  --ns-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ns-font-hero: 700 3rem/1.2 var(--ns-font);        /* 48px */
  --ns-font-section: 600 2rem/1.3 var(--ns-font);     /* 32px */
  --ns-font-card-title: 600 1.125rem/1.4 var(--ns-font); /* 18px */
  --ns-font-body-lg: 400 1.125rem/1.6 var(--ns-font); /* 18px */
  --ns-font-body: 400 1rem/1.6 var(--ns-font);        /* 16px */
  --ns-font-small: 400 0.875rem/1.5 var(--ns-font);   /* 14px */
  --ns-font-label: 500 0.75rem/1.4 var(--ns-font);    /* 12px */
  --ns-font-mono: 400 0.8125rem/1.65 ui-monospace, "SFMono-Regular", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace; /* 13px code */

  /* Layout — 8px baseline grid */
  --ns-radius: 4px;
  --ns-shadow-card: 0 4px 6px -2px rgba(0, 0, 0, 0.03);
  --ns-container-max: 1280px;
  --ns-space-1: 8px;
  --ns-space-2: 16px;
  --ns-space-3: 24px;
  --ns-space-4: 32px;
  --ns-space-6: 48px;
  --ns-space-8: 64px;

  /* Motion — no bounce, no play */
  --ns-duration-micro: 150ms;
  --ns-duration-transition: 300ms;
  --ns-easing: ease-in-out;
  --ns-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.15);

  /* ---- Bootstrap 5.3 bridge ---------------------------------------------
     Re-point Bootstrap's own custom properties at the brand tokens so that
     components we have not styled explicitly still inherit the palette. */
  --bs-body-font-family: var(--ns-font);
  --bs-body-color: var(--ns-text);
  --bs-body-bg: var(--ns-bg);
  --bs-body-line-height: 1.6;
  --bs-border-color: var(--ns-border);
  --bs-border-radius: var(--ns-radius);
  --bs-border-radius-sm: var(--ns-radius);
  --bs-border-radius-lg: var(--ns-radius);
  --bs-border-radius-xl: var(--ns-radius);
  --bs-border-radius-xxl: var(--ns-radius);
  --bs-primary: var(--ns-accent);
  --bs-primary-rgb: 37, 99, 235;
  --bs-link-color: var(--ns-accent);
  --bs-link-color-rgb: 37, 99, 235;
  --bs-link-hover-color: var(--ns-accent-hover);
  --bs-success: var(--ns-success);
  --bs-warning: var(--ns-warning);
  --bs-danger: var(--ns-error);
  --bs-secondary-color: var(--ns-text-secondary);
  --bs-tertiary-color: var(--ns-text-tertiary);
  --bs-emphasis-color: var(--ns-slate);
}

/* ---------------------------------------------------------------------------
   3. Base
   --------------------------------------------------------------------------- */
html {
  font-size: 16px;
  position: relative;
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  font-family: var(--ns-font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ns-text);
  background-color: var(--ns-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ns-slate);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: var(--ns-space-2);
}

h1 { font: var(--ns-font-section); }
h2 { font-size: 1.5rem; line-height: 1.3; }
h3 { font: var(--ns-font-card-title); }

p { margin-bottom: var(--ns-space-2); }

a {
  color: var(--ns-accent);
  text-decoration: none;
  transition: color var(--ns-duration-micro) var(--ns-easing);
}

a:hover { color: var(--ns-accent-hover); text-decoration: underline; }

hr {
  border: 0;
  border-top: 1px solid var(--ns-border);
  opacity: 1;
  margin: var(--ns-space-2) 0;
}

/* Only function-driven motion: a 200ms page-entry fade. */
@media (prefers-reduced-motion: no-preference) {
  .ns-main { animation: ns-fade-in 200ms var(--ns-easing) both; }
}

@keyframes ns-fade-in {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   4. Layout
   --------------------------------------------------------------------------- */
.container { max-width: var(--ns-container-max); }

/* Header / navigation — Deep Slate */
.ns-site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
}

.ns-navbar {
  background-color: var(--ns-slate);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: var(--ns-space-2);
  padding-bottom: var(--ns-space-2);
}

.ns-navbar .navbar-brand {
  color: #ffffff;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.ns-navbar .navbar-brand:hover { color: #ffffff; text-decoration: none; }

.ns-navbar .nav-link {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.875rem;
  font-weight: 500;
  padding: var(--ns-space-1) var(--ns-space-2);
  border-bottom: 2px solid transparent;
  transition: color var(--ns-duration-micro) var(--ns-easing),
              border-color var(--ns-duration-micro) var(--ns-easing);
}

.ns-navbar .nav-link:hover,
.ns-navbar .nav-link:focus-visible {
  color: #ffffff;
  text-decoration: none;
}

.ns-navbar .nav-link.active,
.ns-navbar .nav-link[aria-current="page"] {
  color: #ffffff;
  border-bottom-color: var(--ns-accent);
}

.ns-navbar .navbar-toggler {
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--ns-radius);
  padding: 4px 8px;
}

.ns-navbar .navbar-toggler:focus { box-shadow: var(--ns-focus-ring); }

.ns-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Buttons sitting on the Deep Slate bar need a light-on-dark variant. */
.ns-navbar .btn-secondary {
  --bs-btn-color: rgba(255, 255, 255, 0.85);
  --bs-btn-border-color: rgba(255, 255, 255, 0.28);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-border-color: #ffffff;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-border-color: #ffffff;
  --bs-btn-focus-shadow-rgb: 255, 255, 255;
}

.ns-navbar form { margin: 0; }

/* Right-hand cluster: language selector + account actions. */
.ns-navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--ns-space-2);
}

/* Language selector ------------------------------------------------------- */
.ns-lang { display: flex; align-items: center; }

.ns-lang__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--ns-space-1) var(--ns-space-2);
  background: transparent;
  border: 0;
  border-radius: var(--ns-radius);
  cursor: pointer;
}

.ns-lang__toggle:focus-visible {
  outline: none;
  box-shadow: var(--ns-focus-ring);
}

.ns-lang__globe { opacity: 0.75; }

.ns-lang__code {
  font: var(--ns-font-label);
  letter-spacing: 0.08em;
}

.ns-lang__menu {
  min-width: 176px;
  margin-top: 8px;
  padding: 4px;
  background-color: var(--ns-card);
  border: 1px solid var(--ns-border);
  border-radius: var(--ns-radius);
  box-shadow: 0 12px 24px -16px rgba(15, 23, 42, 0.24);
}

.ns-lang__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--ns-radius);
  font: var(--ns-font-small);
  color: var(--ns-text);
}

.ns-lang__item:hover,
.ns-lang__item:focus {
  background-color: var(--ns-hover);
  color: var(--ns-text);
}

.ns-lang__item.active {
  color: var(--ns-accent);
  font-weight: 600;
  background-color: transparent;
}

.ns-lang__item-code {
  width: 20px;
  font: var(--ns-font-label);
  color: var(--ns-text-secondary);
}

.ns-main {
  flex: 1 0 auto;
  padding-top: var(--ns-space-6);
  padding-bottom: var(--ns-space-8);
}

/* Footer */
.ns-footer {
  flex-shrink: 0;
  background-color: var(--ns-card);
  border-top: 1px solid var(--ns-border);
  color: var(--ns-text-secondary);
  font: var(--ns-font-small);
  padding: var(--ns-space-3) 0;
}

.ns-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ns-space-2);
}

.ns-footer__tagline { color: var(--ns-text-secondary); }

/* ---------------------------------------------------------------------------
   5. Components
   --------------------------------------------------------------------------- */

/* 5.1 Buttons -------------------------------------------------------------- */
.btn {
  border-radius: var(--ns-radius);
  font-family: var(--ns-font);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  padding: 10px 20px;
  transition: color var(--ns-duration-micro) var(--ns-easing),
              background-color var(--ns-duration-micro) var(--ns-easing),
              border-color var(--ns-duration-micro) var(--ns-easing),
              box-shadow var(--ns-duration-micro) var(--ns-easing);
}

.btn:focus-visible { box-shadow: var(--ns-focus-ring); }

.btn-lg {
  font-size: 1rem;
  font-weight: 600;
  padding: 12px 28px;
}

.btn-sm { padding: 6px 12px; font-size: 0.8125rem; }

/* Primary — the Sign / Send / Proceed action, and nothing else. */
.btn-primary {
  --bs-btn-bg: var(--ns-accent);
  --bs-btn-border-color: var(--ns-accent);
  --bs-btn-color: #ffffff;
  --bs-btn-hover-bg: var(--ns-accent-hover);
  --bs-btn-hover-border-color: var(--ns-accent-hover);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: var(--ns-accent-hover);
  --bs-btn-active-border-color: var(--ns-accent-hover);
  --bs-btn-active-color: #ffffff;
  --bs-btn-disabled-bg: var(--ns-accent);
  --bs-btn-disabled-border-color: var(--ns-accent);
  --bs-btn-focus-shadow-rgb: 37, 99, 235;
}

/* Secondary — Cancel / Back / Download. Bordered, never filled. */
.btn-secondary,
.btn-outline-secondary {
  --bs-btn-bg: transparent;
  --bs-btn-color: #374151;
  --bs-btn-border-color: var(--ns-border-strong);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-color: var(--ns-accent);
  --bs-btn-hover-border-color: var(--ns-accent);
  --bs-btn-active-bg: transparent;
  --bs-btn-active-color: var(--ns-accent);
  --bs-btn-active-border-color: var(--ns-accent);
  --bs-btn-focus-shadow-rgb: 37, 99, 235;
  border-width: 1.5px;
}

.btn-link {
  color: var(--ns-accent);
  font-weight: 500;
  text-decoration: none;
}

.btn-link:hover { color: var(--ns-accent-hover); text-decoration: underline; }

/* 5.2 Form controls -------------------------------------------------------- */
.form-control,
.form-select {
  border: 1px solid var(--ns-border-strong);
  border-radius: var(--ns-radius);
  background-color: var(--ns-card);
  color: var(--ns-text);
  font-size: 1rem;
  padding: 10px 14px;
  transition: border-color var(--ns-duration-micro) var(--ns-easing),
              box-shadow var(--ns-duration-micro) var(--ns-easing);
}

.form-control::placeholder { color: var(--ns-text-tertiary); }

.form-control:focus,
.form-select:focus {
  border-color: var(--ns-accent);
  box-shadow: var(--ns-focus-ring);
  background-color: var(--ns-card);
  color: var(--ns-text);
}

.form-floating > label {
  color: var(--ns-text-secondary);
  font-size: 0.875rem;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
  color: var(--ns-text-secondary);
}

.form-check-input {
  border: 1px solid var(--ns-border-strong);
  border-radius: var(--ns-radius);
}

.form-check-input:checked {
  background-color: var(--ns-accent);
  border-color: var(--ns-accent);
}

.form-check-input:focus {
  border-color: var(--ns-accent);
  box-shadow: var(--ns-focus-ring);
}

.form-label { font: var(--ns-font-small); color: var(--ns-text-secondary); }

.field-validation-error,
.validation-summary-errors,
.text-danger {
  color: var(--ns-error) !important;
  font: var(--ns-font-small);
}

/* 5.3 Cards ---------------------------------------------------------------- */
.card {
  border: 1px solid var(--ns-border);
  border-radius: var(--ns-radius);
  box-shadow: var(--ns-shadow-card);
  background-color: var(--ns-card);
}

.card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--ns-border);
  font-weight: 600;
  color: var(--ns-slate);
}

.card-body { padding: var(--ns-space-3); }

/* 5.4 Alerts (Identity status messages) ------------------------------------ */
.alert {
  border-radius: var(--ns-radius);
  border-width: 1px;
  font: var(--ns-font-small);
  padding: var(--ns-space-2);
}

/* 5.5 Identity account nav (Manage area) ---------------------------------- */
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--ns-accent);
  --bs-nav-pills-link-active-color: #ffffff;
  --bs-nav-link-color: var(--ns-text-secondary);
  --bs-nav-link-hover-color: var(--ns-accent);
}

.nav-pills .nav-link {
  border-radius: var(--ns-radius);
  font: var(--ns-font-small);
  font-weight: 500;
  padding: 8px 16px;
}

.nav-pills .nav-link.active {
  background-color: var(--ns-accent);
  color: #ffffff;
}

/* 5.6 Status badges — sharp rectangular pills, 12px / 500 ----------------- */
.ns-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: var(--ns-radius);
  font: var(--ns-font-label);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ns-badge--completed { color: var(--ns-success-ink); background: #ecfdf5; border-color: rgba(5, 150, 105, 0.2); }
.ns-badge--pending   { color: var(--ns-warning-ink); background: #fffbeb; border-color: rgba(217, 119, 6, 0.2); }
.ns-badge--signed,
.ns-badge--info      { color: var(--ns-accent);  background: #eff6ff; border-color: rgba(37, 99, 235, 0.2); }
.ns-badge--expired   { color: var(--ns-error-ink);   background: #fef2f2; border-color: rgba(220, 38, 38, 0.2); }

/* 5.7 Document card — the core list item ---------------------------------- */
.ns-doc {
  display: flex;
  align-items: center;
  gap: var(--ns-space-2);
  padding: var(--ns-space-2);
  background-color: var(--ns-card);
  border: 1px solid var(--ns-border);
  border-left: 4px solid transparent;
  border-radius: var(--ns-radius);
  transition: background-color var(--ns-duration-micro) var(--ns-easing);
}

.ns-doc:hover { background-color: var(--ns-hover); }
.ns-doc--selected { border-left-color: var(--ns-accent); }
.ns-doc__name { font: var(--ns-font-card-title); color: var(--ns-text); }
.ns-doc__meta { font: var(--ns-font-small); color: var(--ns-text-secondary); }
.ns-doc__status { margin-left: auto; }

/* 5.8 Signing timeline — vertical stepper --------------------------------- */
.ns-timeline { list-style: none; margin: 0; padding: 0; }

.ns-timeline__item {
  position: relative;
  padding: 0 0 var(--ns-space-3) var(--ns-space-3);
  font: var(--ns-font-small);
  color: var(--ns-text-secondary);
}

.ns-timeline__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--ns-text-tertiary);
  border-radius: 50%;
  background-color: var(--ns-card);
}

.ns-timeline__item::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 16px;
  bottom: 0;
  width: 2px;
  background-color: var(--ns-border);
}

.ns-timeline__item:last-child { padding-bottom: 0; }
.ns-timeline__item:last-child::after { display: none; }

.ns-timeline__item--completed::before {
  background-color: var(--ns-success);
  border-color: var(--ns-success);
}

.ns-timeline__item--active::before {
  background-color: var(--ns-accent);
  border-color: var(--ns-accent);
}

@media (prefers-reduced-motion: no-preference) {
  .ns-timeline__item--active::before { animation: ns-pulse 2s var(--ns-easing) infinite; }
}

@keyframes ns-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.35); }
  70%  { box-shadow: 0 0 0 8px rgba(37, 99, 235, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

/* 5.9 Auth surface (Login / Register) ------------------------------------- */
.ns-auth {
  max-width: 424px;
  margin: var(--ns-space-6) auto var(--ns-space-8);
}

.ns-auth__card {
  background-color: var(--ns-card);
  border: 1px solid var(--ns-border);
  border-radius: var(--ns-radius);
  box-shadow: var(--ns-shadow-card);
  padding: var(--ns-space-4);
}

.ns-auth__title { margin-bottom: var(--ns-space-1); }
.ns-auth__subtitle { font: var(--ns-font-small); color: var(--ns-text-secondary); margin-bottom: var(--ns-space-3); }
.ns-auth__footer { margin-top: var(--ns-space-3); font: var(--ns-font-small); color: var(--ns-text-secondary); }
.ns-auth__footer a { text-decoration: underline; text-underline-offset: 2px; }
.ns-auth__divider { display: flex; align-items: center; gap: var(--ns-space-2); margin: var(--ns-space-3) 0; color: var(--ns-text-tertiary); font: var(--ns-font-label); text-transform: uppercase; }
.ns-auth__divider::before,
.ns-auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--ns-border); }

/* ---------------------------------------------------------------------------
   6. Utilities
   --------------------------------------------------------------------------- */
.ns-hero { max-width: 720px; padding: var(--ns-space-8) 0; }

.ns-hero-title {
  font: var(--ns-font-hero);
  letter-spacing: -0.02em;
  color: var(--ns-slate);
  margin-bottom: var(--ns-space-2);
}

.ns-hero-sub {
  font: var(--ns-font-body-lg);
  color: var(--ns-text-secondary);
  max-width: 56ch;
  margin-bottom: var(--ns-space-4);
}

.ns-hero-actions { display: flex; flex-wrap: wrap; gap: var(--ns-space-2); }

.ns-eyebrow {
  font: var(--ns-font-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ns-accent);
  margin-bottom: var(--ns-space-1);
}

.ns-muted { color: var(--ns-text-secondary); }
.ns-meta { font: var(--ns-font-small); color: var(--ns-text-secondary); }

/* ---------------------------------------------------------------------------
   7. Product pages (Index)
   --------------------------------------------------------------------------- */
.ns-hero--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--ns-space-8);
  align-items: center;
  max-width: none;
  padding: var(--ns-space-6) 0;
}

.ns-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ns-space-1) var(--ns-space-3);
  margin: var(--ns-space-4) 0 0;
  padding: 0;
  list-style: none;
  font: var(--ns-font-small);
  color: var(--ns-text-secondary);
}

.ns-trust li { display: flex; align-items: center; gap: 8px; }

/* Square marker — sharp corners, no softness. */
.ns-trust li::before {
  content: "";
  width: 6px;
  height: 6px;
  background-color: var(--ns-accent);
}

/* Neutral pill for versions, channels and labels. */
.ns-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid var(--ns-border);
  border-radius: var(--ns-radius);
  background-color: var(--ns-card);
  color: var(--ns-text-secondary);
  font: var(--ns-font-label);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.ns-tag--alpha { border-color: rgba(217, 119, 6, 0.24); background-color: #fffbeb; color: var(--ns-warning-ink); }
.ns-tag--beta { border-color: rgba(37, 99, 235, 0.2); background-color: #eff6ff; color: var(--ns-accent); }
.ns-tag--stable { border-color: rgba(5, 150, 105, 0.24); background-color: #ecfdf5; color: var(--ns-success-ink); }

/* 7.1 API console ---------------------------------------------------------- */
.ns-console {
  margin: 0;
  overflow: hidden;
  background-color: var(--ns-slate);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--ns-radius);
  box-shadow: 0 24px 48px -32px rgba(15, 23, 42, 0.4);
}

.ns-console__bar {
  display: flex;
  align-items: center;
  gap: var(--ns-space-1);
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ns-console__dots { display: flex; gap: 6px; }

.ns-console__dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.18);
}

.ns-console__label {
  margin-left: var(--ns-space-1);
  color: rgba(255, 255, 255, 0.72);
  font: var(--ns-font-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ns-console__bar .ns-badge { margin-left: auto; }

.ns-console__code {
  margin: 0;
  padding: var(--ns-space-2);
  overflow-x: auto;
  color: #e2e8f0;
  font: var(--ns-font-mono);
  tab-size: 2;
}

.ns-console__code:focus-visible { outline: 2px solid #93c5fd; outline-offset: -2px; }

.ns-console__code--response { border-top: 1px solid rgba(255, 255, 255, 0.08); }

.ns-console__path,
.ns-console__key { color: #93c5fd; }

.ns-console__str { color: #a7f3d0; }

.ns-console__status { color: #86efac; font-weight: 600; }

.ns-console__caption {
  margin: 0;
  padding: 12px var(--ns-space-2);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.62);
  font: var(--ns-font-small);
}

/* 7.2 Sections ------------------------------------------------------------- */
.ns-section {
  padding: var(--ns-space-6) 0;
  border-top: 1px solid var(--ns-border);
}

.ns-section__head { max-width: 640px; margin-bottom: var(--ns-space-4); }

.ns-section-title {
  font: var(--ns-font-section);
  letter-spacing: -0.01em;
  color: var(--ns-slate);
  margin: 0;
}

/* 7.3 Changelog ------------------------------------------------------------ */
.ns-changelog {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ns-border);
}

.ns-release {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--ns-space-3);
  padding: var(--ns-space-3) 0;
  border-bottom: 1px solid var(--ns-border);
}

.ns-release__meta {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: center;
  gap: 8px;
}

.ns-release__version { font: var(--ns-font-mono); font-weight: 600; color: var(--ns-slate); }
.ns-release__date { font: var(--ns-font-mono); color: var(--ns-text-secondary); }

.ns-release__changes {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ns-release__changes li { display: flex; align-items: flex-start; gap: var(--ns-space-2); }

.ns-change {
  flex: none;
  min-width: 88px;
  padding-top: 2px;
  font: var(--ns-font-label);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ns-text-secondary);
}

.ns-change--added { color: var(--ns-success-ink); }
.ns-change--changed { color: var(--ns-accent); }
.ns-change--fixed { color: var(--ns-warning-ink); }
.ns-change--security { color: var(--ns-error-ink); }

.ns-release__text { font: var(--ns-font-small); color: var(--ns-text); }

/* 7.4 Responsive ----------------------------------------------------------- */
@media (max-width: 991.98px) {
  .ns-hero--split { grid-template-columns: 1fr; gap: var(--ns-space-6); }

  .ns-release { grid-template-columns: 1fr; gap: var(--ns-space-1); }
}

@media (max-width: 575.98px) {
  .ns-hero-title { font-size: 2rem; }

  .ns-hero-actions .btn { width: 100%; }

  .ns-release__changes li { flex-direction: column; gap: 0; }

  .ns-change { min-width: 0; padding-top: 0; }

  /* Collapsed navbar: language selector and account actions share a row. */
  .ns-navbar__actions {
    width: 100%;
    margin-top: var(--ns-space-2);
    padding-top: var(--ns-space-2);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    justify-content: space-between;
  }

  .ns-lang__menu { min-width: 160px; }
}

/* ---------------------------------------------------------------------------
   Documents (SPA island)
   The explorer needs the viewport below the header, not a scrolling page with a
   container: Chonky fills its parent's height. No magic header height is used —
   body is already a flex column, so the island takes the remaining space.
   --------------------------------------------------------------------------- */
body:has(.ns-main--full) {
  height: 100dvh;
  overflow: hidden;
}

body:has(.ns-main--full) .ns-footer {
  display: none;
}

.ns-main--full {
  max-width: none;
  padding: 0;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ns-main--full > .ns-documents {
  flex: 1 1 auto;
  min-height: 0;
}

/* ---------------------------------------------------------------------------
   Signing queue (Pages/Signing/Index)
   Reuses .ns-doc for the card; only the list container and signer rows are new.
   --------------------------------------------------------------------------- */
.ns-doc-list {
  display: grid;
  gap: var(--ns-space-2);
}

.ns-doc-list .ns-doc {
  align-items: flex-start;
}

.ns-doc__body {
  flex: 1 1 auto;
  min-width: 0;
}

.ns-signers {
  list-style: none;
  margin: var(--ns-space-2) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ns-space-2);
}

.ns-signers__item {
  display: inline-flex;
  align-items: center;
  gap: var(--ns-space-1);
  font: var(--ns-font-small);
  color: var(--ns-text-secondary);
}