/* ============================================================
   Navisurg Vision — design-system components

   The subset of _ds/.../components/components.css that this page actually
   uses: Button, Card, EyebrowLabel, Field / Input / Textarea. Rules are the
   design system's, verbatim, so a component here behaves the same as the
   component of that name in the design project. Every value resolves to a
   token from tokens.css. Prefix: .nsv-

   Page-specific styling does NOT belong here — put it in site.css.
   ============================================================ */

/* ---------- Button ---------- */
.nsv-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);border:var(--border-width) solid transparent;border-radius:var(--radius-control);font-family:var(--font-sans);font-weight:var(--weight-medium);cursor:pointer;text-decoration:none;white-space:nowrap;transition:var(--transition-control)}
.nsv-btn--sm{height:28px;padding:0 var(--space-3);font-size:var(--text-sm)}
.nsv-btn--md{height:36px;padding:0 var(--space-4);font-size:var(--text-base)}
.nsv-btn--lg{height:44px;padding:0 var(--space-6);font-size:var(--text-md)}
.nsv-btn--block{width:100%}
.nsv-btn--primary{background:var(--accent);color:var(--text-on-accent)}
.nsv-btn--primary:hover:not(:disabled){background:var(--accent-hover);color:var(--text-on-accent)}
.nsv-btn--primary:active:not(:disabled){background:var(--accent-press);color:var(--text-on-accent)}
.nsv-btn--ghost{background:transparent;color:var(--text-strong);border-color:var(--border-strong)}
.nsv-btn--ghost:hover:not(:disabled){color:var(--accent);border-color:var(--accent)}
.nsv-btn--ghost:active:not(:disabled){color:var(--accent-press);border-color:var(--accent-press)}
.nsv-btn:disabled{background:var(--surface-disabled);color:var(--text-disabled);border-color:transparent;cursor:not-allowed}
.nsv-btn--ghost:disabled{background:transparent;border-color:var(--border-hairline)}

/* The design system's Icon renders a CSS mask fed by its JS bundle. With no
   bundle here the icons are inline <svg>, so this only has to size them. */
.nsv-btn__icon{flex:none;width:15px;height:15px}

/* ---------- Card ---------- */
.nsv-card{background:var(--surface-card);border:var(--border-width) solid var(--border-hairline);border-radius:var(--radius-card);padding:var(--pad-card);transition:border-color var(--dur-fast) var(--ease-standard)}
.nsv-card--lg{padding:var(--space-8);border-radius:var(--radius-lg)}

/* ---------- EyebrowLabel ---------- */
.nsv-eyebrow{display:block;font-family:var(--font-sans);font-size:var(--text-2xs);font-weight:var(--weight-regular);line-height:var(--leading-flat);text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--text-muted)}
.nsv-eyebrow--md{font-size:var(--text-xs);letter-spacing:var(--tracking-caps)}
.nsv-eyebrow--accent{color:var(--accent)}
.nsv-eyebrow--strong{color:var(--text-strong)}

/* ---------- Field / Input / Textarea ---------- */
.nsv-field{display:flex;flex-direction:column;gap:var(--space-2)}
.nsv-field__label{font-family:var(--font-sans);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--text-muted)}
.nsv-input{width:100%;height:36px;padding:0 var(--space-3);background:transparent;border:var(--border-width) solid var(--border-strong);border-radius:var(--radius-input);color:var(--text-strong);font-family:var(--font-sans);font-size:var(--text-base);transition:var(--transition-control)}
.nsv-input::placeholder{color:var(--text-muted)}
.nsv-input:hover:not(:disabled){border-color:var(--text-muted)}
.nsv-input:focus{border-color:var(--accent);outline:none}
.nsv-input:disabled{background:var(--surface-disabled);color:var(--text-disabled);cursor:not-allowed}
.nsv-textarea{height:auto;min-height:88px;padding:var(--space-3);line-height:var(--leading-body);resize:vertical}