/* Novaplex design-system components (Button, Card, Accordion, form fields, ...). */

/* components/actions/Button.jsx */
.np-btn{
  --_bg: var(--color-brand);
  --_bg-hover: var(--color-brand-hover);
  --_bg-active: var(--color-brand-active);
  --_fg: var(--text-on-brand);
  --_border: transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--font-sans); font-weight:var(--weight-heavy);
  letter-spacing:.01em; line-height:1; white-space:nowrap;
  border:1.5px solid var(--_border); border-radius:var(--radius-sm);
  background:var(--_bg); color:var(--_fg); cursor:pointer;
  transition: background var(--duration-normal) var(--ease-standard),
              border-color var(--duration-normal) var(--ease-standard),
              box-shadow var(--duration-normal) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
  text-decoration:none; -webkit-user-select:none; user-select:none;
}
.np-btn:hover{ background:var(--_bg-hover); }
.np-btn:active{ background:var(--_bg-active); transform:scale(var(--press-scale)); }
.np-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--focus-ring); }
.np-btn[disabled],.np-btn[aria-disabled="true"]{ opacity:.45; pointer-events:none; }

.np-btn--sm{ font-size:var(--text-sm); padding:.5rem .875rem; }
.np-btn--md{ font-size:var(--text-sm); padding:.6875rem 1.25rem; }
.np-btn--lg{ font-size:var(--text-base); padding:.875rem 1.75rem; }
.np-btn--full{ width:100%; }

.np-btn--primary{}
.np-btn--secondary{ --_bg:var(--surface-ink); --_bg-hover:var(--gray-800); --_bg-active:#06151f; --_fg:var(--text-inverse); }
.np-btn--outline{ --_bg:transparent; --_bg-hover:var(--color-brand-subtle); --_bg-active:var(--blue-100); --_fg:var(--text-brand); --_border:var(--border-default); }
.np-btn--outline:hover{ border-color:var(--border-brand); }
.np-btn--ghost{ --_bg:transparent; --_bg-hover:var(--surface-muted); --_bg-active:var(--gray-100); --_fg:var(--text-body); }
.np-btn--danger{ --_bg:var(--color-danger); --_bg-hover:var(--red-600); --_bg-active:#a82d31; --_fg:#fff; }
.np-btn__icon{ display:inline-flex; }

/* components/actions/Icon.jsx */
.np-iconbtn{
  --_bg:transparent; --_bg-hover:var(--surface-muted); --_bg-active:var(--gray-100);
  --_fg:var(--text-body); --_border:transparent;
  display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid var(--_border); border-radius:var(--radius-sm);
  background:var(--_bg); color:var(--_fg); cursor:pointer; padding:0;
  transition: background var(--duration-normal) var(--ease-standard),
              border-color var(--duration-normal) var(--ease-standard),
              box-shadow var(--duration-normal) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.np-iconbtn:hover{ background:var(--_bg-hover); }
.np-iconbtn:active{ background:var(--_bg-active); transform:scale(var(--press-scale)); }
.np-iconbtn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--focus-ring); }
.np-iconbtn[disabled]{ opacity:.45; pointer-events:none; }
.np-iconbtn--sm{ width:32px; height:32px; }
.np-iconbtn--md{ width:40px; height:40px; }
.np-iconbtn--lg{ width:48px; height:48px; }
.np-iconbtn--solid{ --_bg:var(--color-brand); --_bg-hover:var(--color-brand-hover); --_bg-active:var(--color-brand-active); --_fg:var(--text-on-brand); }
.np-iconbtn--outline{ --_border:var(--border-default); }
.np-iconbtn--outline:hover{ border-color:var(--border-brand); }

/* components/content/Accordion.jsx */
.np-accordion{ display:flex; flex-direction:column; border-top:1px solid var(--border-subtle); }
.np-acc-item{ border-bottom:1px solid var(--border-subtle); }
.np-acc-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:none; border:none; cursor:pointer; text-align:left;
  padding:1.25rem 0; font-family:var(--font-sans); font-weight:var(--weight-heavy);
  font-size:var(--text-lg); color:var(--text-strong);
  transition:color var(--duration-fast) var(--ease-standard);
}
.np-acc-trigger:hover{ color:var(--text-brand); }
.np-acc-trigger:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--focus-ring); border-radius:var(--radius-xs); }
.np-acc-chev{
  flex:0 0 auto; width:11px; height:11px; margin-right:.25rem;
  border-right:2px solid var(--color-brand); border-bottom:2px solid var(--color-brand);
  transform:rotate(45deg); transition:transform var(--duration-normal) var(--ease-standard);
}
.np-acc-item[data-open="true"] .np-acc-chev{ transform:rotate(-135deg); }
.np-acc-panel{ overflow:hidden; display:grid; grid-template-rows:0fr;
  transition:grid-template-rows var(--duration-slow) var(--ease-standard); }
.np-acc-item[data-open="true"] .np-acc-panel{ grid-template-rows:1fr; }
.np-acc-panel__inner{ min-height:0; }
.np-acc-body{ padding:0 0 1.35rem; color:var(--text-body); line-height:var(--leading-relaxed); max-width:64ch; }

/* components/content/Badge.jsx */
.np-badge{
  display:inline-flex; align-items:center; gap:.35em;
  font-family:var(--font-sans); font-weight:var(--weight-heavy);
  font-size:var(--text-xs); line-height:1; letter-spacing:.02em;
  padding:.35em .6em; border-radius:var(--radius-sm); white-space:nowrap;
}
.np-badge--dot::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
/* subtle (default) */
.np-badge--brand{ background:var(--color-brand-subtle); color:var(--blue-700); }
.np-badge--neutral{ background:var(--surface-sunken); color:var(--text-body); }
.np-badge--success{ background:var(--color-success-subtle); color:var(--green-600); }
.np-badge--warning{ background:var(--color-warning-subtle); color:var(--amber-600); }
.np-badge--danger{ background:var(--color-danger-subtle); color:var(--red-600); }
/* solid */
.np-badge--solid.np-badge--brand{ background:var(--color-brand); color:#fff; }
.np-badge--solid.np-badge--neutral{ background:var(--surface-ink); color:#fff; }
.np-badge--solid.np-badge--success{ background:var(--color-success); color:#fff; }
.np-badge--solid.np-badge--warning{ background:var(--color-warning); color:#fff; }
.np-badge--solid.np-badge--danger{ background:var(--color-danger); color:#fff; }

/* components/content/Card.jsx */
.np-card{
  background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-md); box-shadow:var(--shadow-sm);
  padding:var(--space-6); color:var(--text-body);
  transition: box-shadow var(--duration-normal) var(--ease-standard),
              transform var(--duration-normal) var(--ease-standard),
              border-color var(--duration-normal) var(--ease-standard);
}
.np-card--flat{ box-shadow:none; }
.np-card--elevated{ box-shadow:var(--shadow-md); border-color:transparent; }
.np-card--ink{ background:var(--surface-ink); border-color:var(--border-on-ink); color:rgba(255,255,255,.82); }
.np-card--ink h1,.np-card--ink h2,.np-card--ink h3,.np-card--ink h4{ color:#fff; }
.np-card--pad-sm{ padding:var(--space-4); }
.np-card--pad-lg{ padding:var(--space-8); }
.np-card--pad-none{ padding:0; }
.np-card--interactive{ cursor:pointer; }
.np-card--interactive:hover{ box-shadow:var(--shadow-lg); transform:translateY(-3px); border-color:var(--border-subtle); }
.np-card--accent{ border-top:3px solid var(--color-brand); }

/* components/content/Tag.jsx */
.np-tag{
  display:inline-flex; align-items:center; gap:.4em;
  font-family:var(--font-sans); font-weight:var(--weight-bold);
  font-size:var(--text-xs); line-height:1; color:var(--text-body);
  background:var(--surface-card); border:1.5px solid var(--border-default);
  padding:.45em .75em; border-radius:var(--radius-pill); white-space:nowrap;
  transition: border-color var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.np-tag--selectable{ cursor:pointer; }
.np-tag--selectable:hover{ border-color:var(--border-brand); color:var(--text-brand); }
.np-tag--selected{ background:var(--color-brand); border-color:var(--color-brand); color:#fff; }
.np-tag__x{
  display:inline-flex; align-items:center; justify-content:center;
  width:14px; height:14px; border-radius:50%; border:none; cursor:pointer;
  background:transparent; color:inherit; opacity:.7; font-size:13px; line-height:1; padding:0;
}
.np-tag__x:hover{ opacity:1; }

/* components/forms/Checkbox.jsx */
.np-check{ position:relative; display:inline-flex; align-items:flex-start; gap:.625rem; cursor:pointer; font-family:var(--font-sans); }
.np-check[data-disabled="true"]{ opacity:.5; cursor:not-allowed; }
.np-check__box{
  flex:0 0 auto; width:20px; height:20px; margin-top:1px;
  border:1.5px solid var(--border-default); border-radius:var(--radius-xs);
  background:var(--surface-card); position:relative;
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-normal) var(--ease-standard);
}
.np-check__native{ position:absolute; opacity:0; width:1px; height:1px; margin:-1px; }
.np-check:hover .np-check__box{ border-color:var(--border-brand); }
.np-check__native:focus-visible + .np-check__box{ box-shadow:0 0 0 3px var(--focus-ring); border-color:var(--border-brand); }
.np-check__box::after{
  content:""; position:absolute; left:6px; top:2px; width:5px; height:10px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg) scale(0);
  transition:transform var(--duration-fast) var(--ease-out);
}
.np-check__native:checked + .np-check__box{ background:var(--color-brand); border-color:var(--color-brand); }
.np-check__native:checked + .np-check__box::after{ transform:rotate(45deg) scale(1); }
.np-check__body{ display:flex; flex-direction:column; gap:.1rem; }
.np-check__label{ font-size:var(--text-sm); color:var(--text-strong); font-weight:var(--weight-semibold); line-height:1.4; }
.np-check__desc{ font-size:var(--text-xs); color:var(--text-muted); }

/* components/forms/Input.jsx */
.np-field{ display:flex; flex-direction:column; gap:.4rem; font-family:var(--font-sans); }
.np-field__label{ font-size:var(--text-sm); font-weight:var(--weight-bold); color:var(--text-strong); }
.np-field__req{ color:var(--color-brand); margin-left:.15em; }
.np-field__hint{ font-size:var(--text-xs); color:var(--text-muted); }
.np-field__hint--error{ color:var(--color-danger); font-weight:var(--weight-semibold); }
.np-input{
  font-family:var(--font-sans); font-size:var(--text-base); color:var(--text-strong);
  background:var(--surface-card); border:1.5px solid var(--border-default);
  border-radius:var(--radius-sm); padding:.6875rem .875rem; width:100%;
  transition: border-color var(--duration-normal) var(--ease-standard),
              box-shadow var(--duration-normal) var(--ease-standard);
}
.np-input::placeholder{ color:var(--text-subtle); }
.np-input:hover{ border-color:var(--border-strong); }
.np-input:focus{ outline:none; border-color:var(--border-brand); box-shadow:0 0 0 3px var(--focus-ring); }
.np-input[disabled]{ background:var(--surface-sunken); color:var(--text-muted); cursor:not-allowed; }
.np-input--error{ border-color:var(--color-danger); }
.np-input--error:focus{ box-shadow:0 0 0 3px rgba(229,72,77,.35); }

/* components/forms/Select.jsx */
.np-select-wrap{ position:relative; display:block; }
.np-select{
  appearance:none; -webkit-appearance:none; width:100%;
  font-family:var(--font-sans); font-size:var(--text-base); color:var(--text-strong);
  background:var(--surface-card); border:1.5px solid var(--border-default);
  border-radius:var(--radius-sm); padding:.6875rem 2.5rem .6875rem .875rem; cursor:pointer;
  transition: border-color var(--duration-normal) var(--ease-standard),
              box-shadow var(--duration-normal) var(--ease-standard);
}
.np-select:hover{ border-color:var(--border-strong); }
.np-select:focus{ outline:none; border-color:var(--border-brand); box-shadow:0 0 0 3px var(--focus-ring); }
.np-select[disabled]{ background:var(--surface-sunken); color:var(--text-muted); cursor:not-allowed; }
.np-select-wrap::after{
  content:""; position:absolute; right:1rem; top:50%; width:9px; height:9px;
  border-right:2px solid var(--text-muted); border-bottom:2px solid var(--text-muted);
  transform:translateY(-70%) rotate(45deg); pointer-events:none;
}

/* components/forms/Textarea.jsx (shares the .np-field styles above) */
.np-textarea{
  font-family:var(--font-sans); font-size:var(--text-base); color:var(--text-strong);
  background:var(--surface-card); border:1.5px solid var(--border-default);
  border-radius:var(--radius-sm); padding:.6875rem .875rem; width:100%; resize:vertical;
  line-height:var(--leading-normal); min-height:6.5rem;
  transition: border-color var(--duration-normal) var(--ease-standard),
              box-shadow var(--duration-normal) var(--ease-standard);
}
.np-textarea::placeholder{ color:var(--text-subtle); }
.np-textarea:hover{ border-color:var(--border-strong); }
.np-textarea:focus{ outline:none; border-color:var(--border-brand); box-shadow:0 0 0 3px var(--focus-ring); }
.np-textarea[disabled]{ background:var(--surface-sunken); color:var(--text-muted); cursor:not-allowed; }
.np-textarea--error{ border-color:var(--color-danger); }