/* NAS1149 Part Number Decoder (NAS1149-Decoder.html).
   Builds on css/washer-finder.css (same app frame, table and detail panel). */
.washer-finder.nd-app .body{grid-template-columns:1fr 360px}
@media (max-width:1100px){.washer-finder.nd-app .body{grid-template-columns:1fr}}

/* the one big input */
.nd-entry{padding:16px 16px 12px;background:var(--panel);border-bottom:1px solid var(--line)}
.nd-entry label{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:700;margin-bottom:6px}
.nd-inrow{display:flex;gap:8px;align-items:stretch}
.nd-inrow input{flex:1;min-width:0;font-family:var(--mono);font-size:28px;font-weight:700;letter-spacing:.06em;color:var(--ink);
  background:#fff;border:2px solid var(--line);border-radius:10px;padding:10px 14px;outline:none;text-transform:uppercase}
.nd-inrow input:focus{border-color:var(--brass)}
.nd-inrow input::placeholder{color:#9aa9ad;font-weight:400;letter-spacing:.03em;text-transform:none;font-size:20px}
.nd-inrow button{background:#fff;border:1px solid var(--line);border-radius:10px;padding:0 14px;color:var(--muted);font-family:var(--mono);cursor:pointer}
.nd-inrow button:hover{color:var(--hot);border-color:var(--hot)}
.nd-ex{margin-top:9px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:11px;color:var(--faint)}
.nd-ex button{background:var(--panel-2);border:1px solid var(--line-soft);border-radius:14px;padding:3px 10px;font-family:var(--mono);font-size:11.5px;color:var(--ink);cursor:pointer}
.nd-ex button:hover{border-color:var(--brass);color:var(--brass)}

/* breakdown strip: one box per part of the number */
.nd-segs{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px;background:var(--panel-2);border-bottom:1px solid var(--line)}
.nd-seg{flex:1 1 130px;min-width:120px;background:#fff;border:1px solid var(--line-soft);border-top:4px solid var(--seg);border-radius:8px;padding:7px 10px 8px;display:flex;flex-direction:column;gap:2px}
.nd-seg .nd-lab{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:700}
.nd-seg .nd-code{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--seg);min-height:28px;letter-spacing:.04em}
.nd-seg .nd-mean{font-size:11.5px;color:var(--muted);line-height:1.35}
.nd-seg.empty .nd-code{color:#c4cdd0}
.nd-seg.bad{border-color:var(--hot);border-top-color:var(--hot)}
.nd-seg.bad .nd-code{color:var(--hot)}
.nd-seg.dim .nd-code{color:#9aa9ad}
.s-doc{--seg:#4e6a72}.s-mat{--seg:#1a6475}.s-size{--seg:#7a4f9a}.s-thk{--seg:#a0621a}.s-fin{--seg:#2e7d4f}
.c-doc{color:#4e6a72}.c-mat{color:#1a6475}.c-size{color:#7a4f9a}.c-thk{color:#a0621a}.c-fin{color:#2e7d4f}
.nd-pn{font-family:var(--mono);letter-spacing:.02em}
.nd-big{font-size:24px;letter-spacing:.03em;word-break:break-all}

/* messages */
.nd-msgs{padding:8px 16px 4px;background:var(--bg)}
.nd-msgs:empty{display:none}
.nd-msg{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.45;padding:7px 10px;border-radius:7px;margin-bottom:6px;border:1px solid}
.nd-msg b{flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:11px;color:#fff;margin-top:1px}
.nd-msg.error{background:#fdf0ea;border-color:#f0c2aa;color:#7a2e0b}.nd-msg.error b{background:var(--hot)}
.nd-msg.warn{background:#fdf8e8;border-color:#ead79a;color:#5e4a0c}.nd-msg.warn b{background:#b58a12}
.nd-msg.info{background:#eef4f6;border-color:#c5d7dd;color:#24505f}.nd-msg.info b{background:#4e6a72}
.nd-msg.ok{background:#ecf6ef;border-color:#b6dbc2;color:#1d5130}.nd-msg.ok b{background:#2e7d4f}

.nd-flag{display:inline-block;font-size:9px;font-weight:700;color:#7a5a2a;background:#f6efe2;border:1px solid #d8c6a2;border-radius:8px;padding:0 5px;margin-left:5px;vertical-align:middle;font-family:var(--mono)}
.nd-spec .v small{display:block;font-size:9.5px;color:var(--faint);font-weight:400}
.washer-finder.nd-app .spec{grid-template-columns:auto 1fr 1.2fr}

/* static anatomy and code tables */
.nd-anatomy{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;font-family:"Roboto Mono",Consolas,monospace;font-size:34px;font-weight:700;margin:6px 0 4px}
.nd-anatomy span{padding:2px 6px;border-bottom:4px solid currentColor}
.nd-anatomy-key{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;font-size:13px;margin-bottom:10px}
.nd-anatomy-key b{font-weight:700}
@media (max-width:680px){
  .nd-inrow input{font-size:20px;padding:9px 10px}
  .nd-anatomy{font-size:22px}
  .nd-seg{flex-basis:calc(50% - 4px);min-width:0}
  .nd-seg.s-doc{flex-basis:100%}
  .nd-seg .nd-code{font-size:19px}
}