/* THE PRODUCT MARK — Meridian-N: two ivory uprights and one gold diagonal.
 *
 * A sheet of its own, holding one component, because TWO SHELLS DRAW IT and
 * neither of the obvious homes works:
 *
 *   navy/components.css — where it used to live. The Command Navy masthead gets
 *     it from there, but the Desert Storm editor deliberately does not load that
 *     sheet: it describes page furniture the editor does not render.
 *   tokens/brand.css — the product's other brand assets are there, and the
 *     editor does reach it. But the token layer is self-contained by rule
 *     (test_every_var_reference_inside_the_layer_resolves), and this component
 *     reads --nx-text and --nx-gold, which are navy's.
 *   navy/tokens.css — reached by both, and where those two variables are
 *     declared. It is :root declarations and nothing else, and a component rule
 *     in a token file is how token files stop being token files.
 *
 * So: one file, one definition, and every template that renders `.nx-mark`
 * links this sheet AND navy/tokens.css. That pairing is checked by
 * test_the_product_mark_is_defined_once_and_its_tokens_are_loaded rather than
 * remembered — without the token layer the mark computes to nothing and
 * reports no error at all.
 */
.nx-mark {
  position: relative;
  width: 22px;
  height: 22px;
  display: inline-block;
  flex: none;
}
.nx-mark i {
  position: absolute;
  border-radius: 1.5px;
  background: var(--nx-text);
}
/* The uprights are physical left/right on purpose: a letterform does not
   mirror in RTL. */
.nx-mark i:nth-child(1) { left: 2px; top: 0; width: 4px; height: 15px; }
.nx-mark i:nth-child(2) { right: 2px; bottom: 0; width: 4px; height: 15px; }
.nx-mark i:nth-child(3) {
  left: 9px;
  top: -1px;
  width: 4px;
  height: 24px;
  background: var(--nx-gold);
  transform: rotate(33deg);
}
.nx-mark--sm { width: 18px; height: 18px; }
.nx-mark--sm i:nth-child(1) { left: 1.5px; width: 3.2px; height: 12px; }
.nx-mark--sm i:nth-child(2) { right: 1.5px; width: 3.2px; height: 12px; }
.nx-mark--sm i:nth-child(3) { left: 7.4px; width: 3.2px; height: 20px; }