/* ------------------------------------------------------------------- tag
 * templates/ui/tag.html, design system «Tag» (WEB-KOM-12). A tag names a
 * state or a kind in micro type in a thin frame; the word is always there,
 * never the colour alone. Neutral: web.tag.border (silver) with web.tag.text
 * (graphite); ok and current in slate (.tag--ok). Red stands for one
 * meaning per view, the error: corum text in a corum-light frame
 * (.tag--red, MAR-FAR-03). «Extern» is a kind and stays neutral, else
 * three public tags make three red statements (PRF-WEB-21). .tag--current, .tag--error and .tag--extern are
 * the old names, still written by some pages. The operations lamp:
 * ui/lamp.css. */
@layer ui {
.tag {
  display: inline-block; font-size: var(--t-micro); line-height: 1.55;
  padding: 0 var(--s-2); border: 1px solid var(--rule-control); color: var(--text-secondary); white-space: nowrap;
  max-width: 100%; box-sizing: border-box;
}
/* A long tag (a sample issue's note) wraps inside its frame on the phone
   instead of pushing the page sideways (WEB-LAY-12). */
@media (max-width: 720px) { .tag { white-space: normal; } }
.tag--ok, .tag--current { border-color: var(--rule-control); color: var(--slate); }
/* The one palette tone outside its role in the building blocks: the frame
   of the red tag after WEB-KOM-12 and MAR-FAR-03 until the gap to
   PRF-WEB-26 is decided (docs/berichte/etappe-0.md, gap 1). */
.tag--red, .tag--error, .tag--extern { border-color: var(--corum-light); color: var(--text-accent); }
}  /* @layer ui */