/* ============================================
   Medmio - NPI Lookup (live NPPES registry)
   Scoped styles for /npi-lookup/.
   Uses global tokens from styles.css. Indigo accent
   (denial=blue, ICD-10=green, HCPCS=teal, POS=orange, NPI=indigo).
   ============================================ */
:root { --np: #5b6cf0; --np-deep: #3f4fd0; --np-soft: #eef0fe; --np-line: rgba(91,108,240,.22); }

/* ---- Hero ---- */
.np-hero {
  padding: calc(var(--nav-h) + 48px) 0 40px;
  background:
    radial-gradient(900px 480px at 85% -10%, rgba(91,108,240,.09), transparent 60%),
    radial-gradient(640px 380px at -5% 110%, rgba(34,169,120,.05), transparent 60%),
    var(--white);
  border-bottom: 1px solid var(--border);
}
.np-hero__inner { max-width: 960px; margin: 0 auto; text-align: center; }
.np-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--np-deep); background: var(--np-soft);
  padding: 5px 12px; border-radius: 999px; margin-bottom: 18px; border: 1px solid var(--np-line);
}
.np-hero__eyebrow svg { width: 13px; height: 13px; }
.np-hero h1 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.03em; line-height: 1.08; margin: 0 0 16px; }
.np-hero__lead { font-size: 1.12rem; color: var(--gray); line-height: 1.6; max-width: 720px; margin: 0 auto 14px; }
.np-hero__meta-line { font-size: .82rem; color: var(--gray-soft); margin-top: 18px; }
.np-hero__meta-line strong { color: var(--ink-soft); font-weight: 600; }

/* ---- Search tool ---- */
.np-tool { max-width: 760px; margin: 22px auto 0; text-align: left; }
.np-form { display: flex; flex-direction: column; gap: 10px; }
.np-search__field { position: relative; display: flex; align-items: center; }
.np-search__field > svg { position: absolute; left: 16px; width: 18px; height: 18px; color: var(--gray-soft); pointer-events: none; }
.np-search__input {
  width: 100%; font: inherit; font-size: 1.02rem; color: var(--ink);
  padding: 15px 16px 15px 46px; border: 1.5px solid var(--border-strong);
  border-radius: var(--radius); background: var(--white); transition: border-color .15s, box-shadow .15s;
}
.np-search__input:focus { outline: none; border-color: var(--np); box-shadow: 0 0 0 3px rgba(91,108,240,.13); }
.np-search__input::placeholder { color: var(--gray-soft); }
.np-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.np-select {
  font: inherit; font-size: .92rem; color: var(--ink-soft); padding: 10px 12px;
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--white); cursor: pointer;
}
.np-select:focus { outline: none; border-color: var(--np); }
.np-btn {
  font: inherit; font-weight: 700; font-size: .92rem; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, var(--np), var(--np-deep)); border: none; border-radius: var(--radius-sm);
  padding: 11px 22px; transition: filter .15s, box-shadow .2s; box-shadow: 0 6px 16px -8px var(--np); margin-left: auto;
}
.np-btn:hover { filter: brightness(1.05); box-shadow: 0 9px 20px -8px var(--np); }
.np-hint { font-size: .8rem; color: var(--gray-soft); }

/* ---- Results ---- */
.np-results { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.np-card {
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--white);
  padding: 15px 16px; transition: border-color .15s, box-shadow .15s;
}
.np-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.np-card__top { display: flex; align-items: flex-start; gap: 12px; }
.np-card__npi {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 800; font-size: .92rem;
  padding: 6px 11px; border-radius: 7px; white-space: nowrap; flex-shrink: 0;
  background: var(--np-soft); color: var(--np-deep); border: 1px solid var(--np-line);
}
.np-card__id { min-width: 0; flex: 1; }
.np-card__name { display: block; font-size: 1rem; font-weight: 700; color: var(--ink); line-height: 1.3; }
.np-card__type { display: inline-flex; align-items: center; gap: 5px; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gray-soft); margin-top: 4px; }
.np-card__type .np-badge { padding: 2px 8px; border-radius: 999px; background: var(--gray-bg); border: 1px solid var(--border); }
.np-card__copy {
  font: inherit; font-size: .76rem; font-weight: 600; color: var(--gray);
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 6px 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.np-card__copy svg { width: 13px; height: 13px; }
.np-card__copy:hover { border-color: var(--np); color: var(--np-deep); }
.np-card__copy.is-copied { background: var(--np); color: #fff; border-color: var(--np); }
.np-card__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.np-card__field { font-size: .85rem; color: var(--gray); line-height: 1.4; }
.np-card__field strong { color: var(--ink-soft); font-weight: 600; }
.np-card__field .lbl { display: block; font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-soft); margin-bottom: 1px; }

.np-loading, .np-empty {
  padding: 22px 16px; text-align: center; color: var(--gray); font-size: .9rem;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.np-empty strong { color: var(--ink-soft); }
.np-spinner { width: 16px; height: 16px; border: 2px solid var(--border-strong); border-top-color: var(--np); border-radius: 50%; animation: np-spin .7s linear infinite; }
@keyframes np-spin { to { transform: rotate(360deg); } }
.np-results__more { font-size: .8rem; color: var(--gray-soft); text-align: center; padding: 8px 0 2px; }

/* ---- CodeSight strip ---- */
.np-strip { background: linear-gradient(135deg, var(--np-soft), var(--green-soft)); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.np-strip__inner { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 26px 0; }
.np-strip__text { flex: 1; min-width: 280px; }
.np-strip__text h2 { font-size: clamp(1.2rem, 2.4vw, 1.55rem); letter-spacing: -.02em; margin: 0 0 5px; }
.np-strip__text p { font-size: .96rem; color: var(--ink-soft); margin: 0; }
.np-strip__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---- Sections / prose ---- */
.np-section { padding: 56px 0; }
.np-section--alt { background: var(--gray-bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.np-prose { max-width: 760px; margin: 0 auto; }
.np-prose p { font-size: .98rem; color: var(--gray); line-height: 1.7; margin: 0 auto 14px; }
.np-prose p strong { color: var(--ink-soft); font-weight: 600; }
.np-prose code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85em; background: var(--gray-bg); padding: 2px 6px; border-radius: 5px; color: var(--np-deep); font-weight: 600; }

.np-callout { border-radius: var(--radius); padding: 15px 18px; font-size: .94rem; line-height: 1.6; display: flex; gap: 12px; margin: 14px auto 0; max-width: 760px; }
.np-callout svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.np-callout strong { color: var(--ink); }
.np-callout--tip { background: var(--np-soft); border: 1px solid var(--np-line); color: var(--ink-soft); }
.np-callout--tip svg { color: var(--np-deep); }

.np-meta { font-size: .78rem; color: var(--gray-soft); line-height: 1.6; margin: 28px auto 0; padding-top: 18px; border-top: 1px solid var(--border); max-width: 760px; }
.np-meta a { color: var(--gray); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 600px) {
  .np-card__top { flex-wrap: wrap; gap: 10px; }
  .np-card__copy { margin-left: auto; min-height: 40px; }
  /* stack the filter controls so the state <select> can't force horizontal overflow */
  .np-controls { flex-direction: column; align-items: stretch; }
  .np-select { width: 100%; min-height: 40px; }
  .np-btn { margin-left: 0; width: 100%; }
  .np-section { padding: 44px 0; }
}