/* Non-handbook data (supplier datasheets) on MaterialCompare.html and
   MaterialPropertyLookup.html.

   Everything here is deliberately grey and muted so it can never be mistaken for
   MIL-HDBK-5 data, and every place it appears also carries the words
   "NOT MIL-HDBK-5". The only loud element is the tag itself. */

:root {
  --np-grey: #6f777c;
  --np-grey-dk: #4a5156;
  --np-grey-md: #8c9399;
  --np-grey-lt: #eceeef;
  --np-grey-xl: #f3f4f4;
}

/* ── the explanatory box (both pages) ── */
.mc-supp-warn, .np-warn {
  box-sizing: border-box; border: 2px solid var(--np-grey); border-left-width: 8px;
  background: var(--np-grey-xl); color: #33393d; border-radius: 6px;
  padding: 10px 14px; font-size: 13px; line-height: 1.5;
}
.mc-supp-warn b, .np-warn b { text-transform: uppercase; letter-spacing: .04em; color: var(--np-grey-dk); }
.mc-chips .mc-supp-warn { flex: 1 0 100%; }
#mc-supp-warn, #mc-supp-warn-tbl { margin: 0 0 14px; }

/* ── comparison page: tab, chips, tray, table ── */
.mc-tabs button.mc-tab-supp {
  background: #dfe2e3; color: #596166; font-style: italic;
  border-right-style: dashed;
}
.mc-tabs button.mc-tab-supp:hover { background: #d3d7d9; }
.mc-tabs button.mc-tab-supp.is-on { background: #fff; box-shadow: inset 0 -3px 0 var(--np-grey); }

.mc-pchip.mc-pchip-supp {
  background: var(--np-grey-lt); border: 1px dashed var(--np-grey-md); color: #596166;
}
.mc-pchip.mc-pchip-supp:hover { background: #e0e3e4; border-color: var(--np-grey); }
.mc-pchip.mc-pchip-supp.is-on { background: #d4d8da; border-color: var(--np-grey); }

.mc-slot.mc-slot-supp { background: var(--np-grey-lt); border: 1px dashed var(--np-grey-md); }
.mc-slot-supp .mc-slot-t { color: #555d62; }
.mc-badge.mc-badge-supp {
  background: var(--np-grey-dk); color: #fff; font-weight: 700; letter-spacing: .03em;
}

.mc-table th.mc-col.mc-col-supp { background: var(--np-grey); color: #fff; }
.mc-notmil-tag {
  display: inline-block; margin-top: 3px; padding: 0 6px; border-radius: 3px;
  background: #fff; color: var(--np-grey-dk); font-size: 10px; font-weight: 700;
  letter-spacing: .05em;
}
.mc-notmil { color: var(--np-grey-dk); letter-spacing: .03em; }
td.mc-supp-cell { color: var(--np-grey); background: var(--np-grey-xl); font-style: italic; }
.mc-supp-note { border-left: 4px solid var(--np-grey); }

.mc-status-line .mc-chip-supp {
  background: #dfe2e3; color: #444b50; border: 1px dashed var(--np-grey-md); font-weight: 600;
}
.mc-status-line .mc-chip-supp-none { background: var(--np-grey-lt); color: var(--np-grey); }

/* ── lookup page: the supplementary panel ── */
.sq-panel.np-panel {
  background: var(--np-grey-lt); border: 2px dashed var(--np-grey-md); box-shadow: none;
}
.np-panel .sq-panel-h {
  background: #e1e4e5; color: #596166; border-bottom: 2px dashed var(--np-grey-md);
}
.np-tag {
  display: inline-block; padding: 1px 8px; border-radius: 3px; background: var(--np-grey-dk);
  color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .06em; white-space: nowrap;
}
.np-body { padding: 14px 16px 6px; font-family: var(--sq-ui); }
.np-body .np-warn { margin-bottom: 12px; }
.np-readout { margin: 0 0 10px; font-size: 13px; color: #4a5156; line-height: 1.5; }
.np-readout table { border-collapse: collapse; font-size: 13px; background: var(--np-grey-xl); }
.np-readout th, .np-readout td {
  padding: 4px 11px; border-bottom: 1px solid #d3d7d9; text-align: right; color: #4a5156;
  white-space: nowrap;
}
.np-readout th:first-child { text-align: left; font-weight: 600; }
.np-readout thead th { background: var(--np-grey); color: #fff; font-weight: 600; }
.np-chart { position: relative; width: 100%; height: 300px; margin-bottom: 4px; }
.np-chart canvas { background: #fff; }
.np-foot { font-size: 12px; color: #596166; line-height: 1.55; margin: 0; padding: 8px 16px 14px; }
.np-foot a { font-size: 12px; color: #4a5156; text-decoration: underline; }