/* ============================================================
   Address Book Converter — application styles
   Component classes follow the nPrint design system handoff.
   Tokens live in branding.css; nothing here introduces a new hue,
   radius, or type size.
   ============================================================ */
*{box-sizing:border-box}
html{font-family:var(--np-font-sans);font-size:var(--np-body-size);line-height:var(--np-body-leading);color:var(--np-text-primary);background:var(--np-bg-page);-webkit-font-smoothing:antialiased}
body{margin:0}
a{color:var(--np-deep-cyan);text-decoration:none;border-bottom:1px solid rgba(7,149,190,.35)}
a:hover{color:var(--np-deep-cyan-active);border-bottom-color:var(--np-deep-cyan-active)}

/* --- Type helpers --- */
h1,h2,h3{margin:0}
.np-h1{font-size:var(--np-h1-size);font-weight:var(--np-h1-weight);line-height:var(--np-h1-leading);letter-spacing:var(--np-h1-tracking)}
.np-h2{font-size:var(--np-h2-size);font-weight:var(--np-h2-weight);line-height:var(--np-h2-leading)}
.np-small{font-size:var(--np-small-size);line-height:var(--np-small-leading)}
.np-caption,.note,.fieldHelp{font-size:var(--np-caption-size);line-height:var(--np-caption-leading);color:var(--np-text-muted);margin:0}
.np-label{font-size:var(--np-label-size);font-weight:var(--np-label-weight);line-height:1;letter-spacing:var(--np-label-tracking);text-transform:uppercase}
.muted{color:var(--np-text-muted);font-weight:var(--np-weight-regular)}
.lede{font-size:var(--np-small-size);line-height:var(--np-small-leading);color:var(--np-text-secondary);margin:0 0 var(--np-space-6);max-width:62ch}
.num{font-variant-numeric:tabular-nums}

/* ============================================================
   Header — charcoal band, compact lockup, 1024px inner content
   ============================================================ */
.np-header{background:var(--np-charcoal);padding:var(--np-space-4) var(--np-page-padding)}
.np-header__inner{max-width:var(--np-content-max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--np-space-8)}
.np-lockup{display:flex;align-items:flex-start;gap:0;border:0}
.np-lockup:hover{border:0}
.np-lockup svg{display:block;margin-top:5.6px}
.np-lockup__word{font-size:40px;font-weight:var(--np-weight-semibold);line-height:1;margin-bottom:-6.4px;margin-left:-.61px;letter-spacing:-.02em;color:var(--np-white)}
.np-nav{display:flex;align-items:center;gap:var(--np-space-8)}
.np-nav__link{font-size:16px;font-weight:var(--np-weight-regular);color:var(--np-gray-300);border:0;padding:var(--np-space-2) 0;border-bottom:2px solid transparent;background:none;font-family:inherit;cursor:pointer;transition:color var(--np-transition)}
.np-nav__link:hover{color:var(--np-white);border-bottom-color:transparent}
.np-nav__link--active{color:var(--np-white);border-bottom-color:var(--np-deep-cyan-hover)}
.np-header__user{display:flex;align-items:center;gap:var(--np-space-3)}
.np-avatar{width:32px;height:32px;border-radius:var(--np-radius-pill);background:var(--np-charcoal-dark);color:var(--np-white);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:var(--np-weight-semibold)}
.np-header__username{color:var(--np-white);font-size:15px;font-weight:var(--np-weight-semibold)}
.inlineForm{display:inline;margin:0}

/* ============================================================
   Page shell
   ============================================================ */
.wrap{max-width:var(--np-content-max);margin:0 auto;padding:var(--np-space-12) var(--np-page-padding) var(--np-space-24)}
.wrap--narrow{max-width:520px}
.wrap--wide{max-width:var(--np-content-max-wide)}
.pageHead{margin-bottom:var(--np-space-8)}
.pageHead .np-h1{margin-bottom:var(--np-space-2)}

/* ============================================================
   Card
   ============================================================ */
.np-card{background:var(--np-bg-surface);border:var(--np-border-width) solid var(--np-border);border-radius:var(--np-radius);box-shadow:var(--np-shadow-1);padding:var(--np-space-8);margin-bottom:var(--np-space-6)}
.np-card__heading{font-size:var(--np-h2-size);font-weight:var(--np-h2-weight);line-height:var(--np-h2-leading);margin:0 0 var(--np-space-4)}

/* --- Numbered step heading --- */
.np-step{display:flex;align-items:center;gap:var(--np-space-4);margin-bottom:var(--np-space-6)}
.np-step__num{flex:none;width:40px;height:40px;border-radius:var(--np-radius);background:var(--np-ink-black);color:var(--np-white);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:var(--np-weight-semibold);line-height:1}
.np-step__title{font-size:var(--np-h2-size);font-weight:var(--np-h2-weight);line-height:var(--np-h2-leading);margin:0}

/* ============================================================
   Buttons — 44px default, 38px small
   ============================================================ */
.np-btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--np-font-sans);font-size:16px;font-weight:var(--np-weight-semibold);line-height:1;padding:12px 24px;border-radius:var(--np-radius);border:var(--np-border-width) solid transparent;cursor:pointer;text-decoration:none;transition:background var(--np-transition),border-color var(--np-transition),color var(--np-transition)}
.np-btn:focus-visible{outline:var(--np-border-width-focus) solid var(--np-deep-cyan);outline-offset:2px}
.np-btn--primary{background:var(--np-deep-cyan);color:var(--np-white);border-color:transparent}
.np-btn--primary:hover:not(:disabled){background:var(--np-deep-cyan-hover);color:var(--np-white)}
.np-btn--primary:active:not(:disabled){background:var(--np-deep-cyan-active)}
.np-btn--secondary{background:var(--np-white);color:var(--np-text-primary);border-color:var(--np-border-input)}
.np-btn--secondary:hover:not(:disabled){border-color:var(--np-deep-cyan);color:var(--np-deep-cyan)}
.np-btn--destructive{background:var(--np-status-error);color:var(--np-white)}
.np-btn--destructive:hover:not(:disabled){background:#D40080;color:var(--np-white)}
.np-btn--dark{background:var(--np-ink-black);color:var(--np-white)}
.np-btn--dark:hover:not(:disabled){background:var(--np-charcoal-dark);color:var(--np-white)}
.np-btn--sm{font-size:14px;padding:9px 18px}
.np-btn:disabled,.np-btn[disabled]{background:var(--np-gray-200);color:var(--np-text-muted);border-color:transparent;cursor:not-allowed}
a.np-btn{border-bottom:1px solid transparent}
a.np-btn--secondary{border-color:var(--np-border-input)}

/* ============================================================
   Forms
   ============================================================ */
.np-field{display:flex;flex-direction:column;gap:var(--np-space-2)}
.np-field__label,.stack>label,.stack>label>.fieldName,.formGrid>label>.fieldName{font-size:var(--np-label-size);font-weight:var(--np-label-weight);letter-spacing:var(--np-label-tracking);text-transform:uppercase;color:var(--np-text-secondary)}
.stack{display:grid;gap:var(--np-space-4)}
.stack>label{display:grid;gap:var(--np-space-2)}
.stack>label>.fieldName{display:block}
/* text-transform and letter-spacing are inherited, and the Label token sets both on
   <label>. Reset them here or typed values render uppercase and tracked out. */
.np-input,.np-select,input:not([type=checkbox]):not([type=file]),select,textarea{font-family:var(--np-font-sans);font-size:16px;font-weight:var(--np-weight-regular);text-transform:none;letter-spacing:normal;line-height:var(--np-small-leading);color:var(--np-text-primary);background:var(--np-white);border:var(--np-border-width) solid var(--np-border-input);border-radius:var(--np-radius);padding:12px 14px;width:100%;transition:border-color var(--np-transition),box-shadow var(--np-transition)}
input::placeholder{color:var(--np-text-muted)}
input:focus,select:focus{outline:none;border-color:var(--np-border-focus);box-shadow:0 0 0 3px rgba(7,149,190,.18)}
select{appearance:none;padding-right:40px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2357585B' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.np-file input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
.formGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--np-space-4);align-items:start}
.formGrid>label{display:grid;gap:var(--np-space-2);align-content:start}
/* The label text and any "optional" hint are one grid item, so a hint never pushes
   the input onto its own row and knocks the row out of alignment. */
.formGrid>label>.fieldName{display:block}
/* Sit the button on the input baseline of its row without hard-coding a label height. */
.formGrid__actions{display:flex;align-self:end}
.formRow{display:flex;gap:var(--np-space-4);align-items:flex-end;flex-wrap:wrap}
.formRow .np-field{min-width:280px}
.formRow .np-field--grow{flex:1}

/* ============================================================
   Alerts — 4px left rule, status dot, tinted surface
   ============================================================ */
.np-alert{display:flex;gap:var(--np-space-3);align-items:flex-start;border:var(--np-border-width) solid var(--np-border);border-left-width:4px;border-radius:var(--np-radius);padding:var(--np-space-4);background:var(--np-bg-surface);margin-bottom:var(--np-space-4)}
.np-alert__dot{flex:none;width:8px;height:8px;border-radius:var(--np-radius-pill);margin-top:9px}
.np-alert__body{font-size:var(--np-small-size);line-height:var(--np-small-leading);color:var(--np-text-secondary);margin:0}
.np-alert--info,.np-alert--success{background:var(--np-tint-info);border-left-color:var(--np-deep-cyan)}
.np-alert--info .np-alert__dot,.np-alert--success .np-alert__dot{background:var(--np-status-ok)}
.np-alert--warning{background:var(--np-tint-warning);border-left-color:var(--np-status-warning)}
.np-alert--warning .np-alert__dot{background:var(--np-status-warning)}
.np-alert--error{background:var(--np-tint-error);border-left-color:var(--np-status-error)}
.np-alert--error .np-alert__dot{background:var(--np-status-error)}
.np-alert--neutral{background:var(--np-gray-100);border-left-color:var(--np-gray-300)}
.np-alert--neutral .np-alert__dot{background:var(--np-status-neutral)}

/* Inline status line under the import control */
.statusline{display:flex;gap:var(--np-space-3);align-items:flex-start;font-size:var(--np-small-size);line-height:var(--np-small-leading);color:var(--np-text-secondary);margin-top:var(--np-space-4);min-height:24px}
.statusline__dot{flex:none;width:8px;height:8px;border-radius:var(--np-radius-pill);margin-top:8px;background:var(--np-status-neutral)}
.statusline.is-success .statusline__dot{background:var(--np-status-ok)}
.statusline.is-error .statusline__dot{background:var(--np-status-error)}
.statusline.is-error{color:var(--np-text-primary)}

/* ============================================================
   Status pills
   ============================================================ */
.np-pill{display:inline-flex;align-items:center;gap:7px;background:var(--np-gray-100);border-radius:var(--np-radius-pill);padding:6px 14px 6px 11px;font-size:14px;font-weight:var(--np-weight-semibold);color:var(--np-charcoal-dark);white-space:nowrap}
.np-pill__dot{width:8px;height:8px;border-radius:var(--np-radius-pill);display:block}
.np-pill--ok .np-pill__dot{background:var(--np-status-ok)}
.np-pill--warning .np-pill__dot{background:var(--np-status-warning)}
.np-pill--error .np-pill__dot{background:var(--np-status-error)}
.np-pill--neutral .np-pill__dot{background:var(--np-status-neutral)}
/* Destination types map to the three process inks */
.np-pill--email .np-pill__dot{background:var(--np-process-cyan)}
.np-pill--smb .np-pill__dot{background:var(--np-process-magenta)}
.np-pill--fax .np-pill__dot{background:var(--np-process-yellow)}
.np-pill--sm{font-size:13px;padding:4px 11px 4px 9px}

/* ============================================================
   Table — ink black sticky header, zebra rows
   ============================================================ */
.np-table-wrap{max-height:440px;overflow:auto;border:var(--np-border-width) solid var(--np-border);border-radius:var(--np-radius);background:var(--np-white)}
.np-table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--np-small-size)}
.np-table th{position:sticky;top:0;z-index:1;background:var(--np-ink-black);color:var(--np-white);text-align:left;font-size:var(--np-label-size);font-weight:var(--np-label-weight);letter-spacing:var(--np-label-tracking);text-transform:uppercase;padding:var(--np-space-3) var(--np-space-4);white-space:nowrap}
.np-table td{padding:var(--np-space-3) var(--np-space-4);border-top:var(--np-border-width) solid var(--np-border);color:var(--np-text-secondary);vertical-align:middle}
.np-table tbody tr:nth-child(odd) td{background:var(--np-gray-100)}
.np-table tbody tr:hover td{background:#EFEFEF}
.np-table td.np-num,.np-table th.np-num{font-variant-numeric:tabular-nums;text-align:right}
.np-table .center{text-align:center}
.np-table .strong{color:var(--np-text-primary);font-weight:var(--np-weight-semibold)}
.rowTouch{width:18px;height:18px;accent-color:var(--np-deep-cyan);cursor:pointer}
.missing{color:var(--np-status-error);font-weight:var(--np-weight-semibold)}

/* ============================================================
   Stat tile
   ============================================================ */
.np-stat{background:var(--np-white);border:var(--np-border-width) solid var(--np-border);border-radius:var(--np-radius);box-shadow:var(--np-shadow-1);padding:var(--np-space-6);display:flex;flex-direction:column;gap:var(--np-space-2)}
.np-stat__label{font-size:var(--np-label-size);font-weight:var(--np-label-weight);letter-spacing:var(--np-label-tracking);text-transform:uppercase;color:var(--np-text-muted)}
.np-stat__value{font-size:40px;font-weight:var(--np-weight-semibold);line-height:1;letter-spacing:var(--np-h1-tracking);font-variant-numeric:tabular-nums;color:var(--np-text-primary)}
.statRow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--np-space-4);margin-bottom:var(--np-space-6)}
.np-stat__label{text-wrap:balance}

/* ============================================================
   Page-specific composition
   ============================================================ */
.reviewBar{display:flex;align-items:center;justify-content:space-between;gap:var(--np-space-4);flex-wrap:wrap;margin-bottom:var(--np-space-4)}
.summary{font-size:var(--np-small-size);color:var(--np-text-secondary)}
.selectionButtons{display:flex;gap:var(--np-space-2);flex-wrap:wrap}
.issues{list-style:none;padding:0;margin:var(--np-space-4) 0 0;display:grid;gap:var(--np-space-2)}
.issues li{display:flex;gap:var(--np-space-3);align-items:flex-start;padding:10px var(--np-space-4);border-radius:var(--np-radius);background:var(--np-gray-100);font-size:var(--np-small-size);line-height:var(--np-small-leading);color:var(--np-text-secondary)}
.issues li .np-alert__dot{margin-top:7px}
.issues .error{background:var(--np-tint-error)}
.issues .error .np-alert__dot{background:var(--np-status-error)}
.issues .warning{background:var(--np-tint-warning)}
.issues .warning .np-alert__dot{background:var(--np-status-warning)}
.issues .ok{background:var(--np-tint-info)}
.issues .ok .np-alert__dot{background:var(--np-status-ok)}
.modelConfirmation{margin:var(--np-space-4) 0 var(--np-space-6);padding:var(--np-space-3) var(--np-space-4);border-left:4px solid var(--np-deep-cyan);background:var(--np-tint-info);font-size:var(--np-small-size);font-weight:var(--np-weight-semibold);color:var(--np-text-secondary)}
.downloadGrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--np-space-6)}
.downloadBox{border:var(--np-border-width) solid var(--np-border);border-radius:var(--np-radius);padding:var(--np-space-6);display:flex;flex-direction:column;gap:var(--np-space-3)}
.downloadBox--priced{border-color:var(--np-deep-cyan)}
.downloadBox h3{font-size:var(--np-h2-size);font-weight:var(--np-h2-weight);line-height:var(--np-h2-leading)}
.downloadBox p{font-size:var(--np-small-size);line-height:var(--np-small-leading);color:var(--np-text-secondary);margin:0}
.outputButtons{display:flex;gap:var(--np-space-3);flex-wrap:wrap;margin-top:auto;padding-top:var(--np-space-2)}
.priceTag{font-size:var(--np-h1-size);font-weight:var(--np-weight-semibold);letter-spacing:var(--np-h1-tracking);line-height:1;font-variant-numeric:tabular-nums}
.priceTag small{font-size:var(--np-caption-size);font-weight:var(--np-weight-regular);color:var(--np-text-muted);letter-spacing:0;margin-left:var(--np-space-2)}
.twoCol{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:var(--np-space-6);align-items:start}
.twoCol>*{min-width:0}
/* A grid or flex child containing a wide table must be allowed to shrink, or the
   table's min-content width pushes the whole track past its container. */
.np-table-wrap{min-width:0}
.facts{display:grid;grid-template-columns:auto 1fr;gap:var(--np-space-3) var(--np-space-6);margin:0 0 var(--np-space-6)}
.facts dt{font-size:var(--np-label-size);font-weight:var(--np-label-weight);letter-spacing:var(--np-label-tracking);text-transform:uppercase;color:var(--np-text-muted);padding-top:3px}
.facts dd{margin:0;font-size:var(--np-small-size);line-height:var(--np-small-leading);color:var(--np-text-secondary)}
.subnav{display:flex;gap:var(--np-space-2);margin-bottom:var(--np-space-6)}
.subnav a{padding:10px var(--np-space-4);border-radius:var(--np-radius);text-decoration:none;font-size:15px;font-weight:var(--np-weight-semibold);color:var(--np-text-secondary);background:var(--np-white);border:var(--np-border-width) solid var(--np-border)}
.subnav a:hover{border-color:var(--np-deep-cyan);color:var(--np-deep-cyan)}
.subnav a.active{background:var(--np-ink-black);color:var(--np-white);border-color:var(--np-ink-black)}
.actions{white-space:nowrap;display:flex;gap:var(--np-space-2);align-items:center}
.actions input{width:170px;padding:8px 10px;font-size:14px}
.np-table select{min-width:120px;padding:8px 32px 8px 10px;font-size:14px}
.inlineDetails summary{list-style:none;display:inline-block;cursor:pointer}
.inlineDetails summary::-webkit-details-marker{display:none}
.inlineDetails[open] summary{display:none}
.disabledRow td{opacity:.5}
.paymentElement{margin:var(--np-space-6) 0}
.footer{border-top:var(--np-border-width) solid var(--np-border);background:var(--np-white);padding:var(--np-space-6) var(--np-page-padding);font-size:var(--np-caption-size);color:var(--np-text-muted)}
.footer__inner{max-width:var(--np-content-max);margin:0 auto;display:flex;justify-content:space-between;gap:var(--np-space-4);flex-wrap:wrap}

/* ============================================================
   Responsive — breakpoints derived from the 1024px content max
   ============================================================ */
@media (max-width:1360px){
  .wrap--wide{max-width:var(--np-content-max)}
}
@media (max-width:1024px){
  .np-header,.wrap,.footer{padding-left:var(--np-page-padding-md);padding-right:var(--np-page-padding-md)}
  .statRow{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
}
@media (max-width:720px){
  .np-header,.wrap,.footer{padding-left:var(--np-page-padding-sm);padding-right:var(--np-page-padding-sm)}
  .np-header__inner{flex-wrap:wrap;gap:var(--np-space-3)}
  .np-nav{gap:var(--np-space-4);order:3;width:100%;overflow-x:auto}
  .twoCol,.downloadGrid,.statRow{grid-template-columns:minmax(0,1fr)}
  .np-card{padding:var(--np-space-6)}
  .np-header__username{display:none}
  .np-btn--sm{font-size:16px;padding:12px 24px}
}