/* web/marks.css · the one mark vocabulary (26 sep 2026)
 *
 * A state or a refusal is a mark: a 7px dot and one mono word, 11px 600.
 * The stock check's flag, made the rule (briefs/2026-09-26_no_words_sweep_brief.md §1).
 * The dot is always there, so colour is never the only signal (operational
 * spec §2.1). The word comes from words.txt through web/marks.js; blank shows
 * the dot alone.
 *
 * Tokens: the page's own --ink, --ink-2, --watch, --urgent. The fallbacks are
 * the operational spec §2.1 values. Neutral marks use --ink-2 (6.2:1), not
 * --ink-3 (2.9:1 fails AA for 11px text).
 *
 * The public pages (menu, cheesecake) set data-marks="public" on <html>:
 * navy only, no red, no tint (public spec §2).
 */
.mk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono, 'JetBrains Mono', ui-monospace, Menlo, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-2, #4C6472);
  transition: opacity var(--base, 160ms) var(--ease, cubic-bezier(0.2,0,0,1));
}
.mk-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
  background: currentColor;
}
.mk-hollow .mk-dot { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.mk-plain .mk-dot  { display: none; }                      /* none: the word only */
.mk-ok     { color: var(--ink, #102A38); }
.mk-watch  { color: var(--watch, #996100); }               /* 5.2:1 on white */
.mk-urgent { color: var(--urgent, #C81E14); }              /* 4.9:1 on white */
.mk-gone   { opacity: 0; }

/* a field the server or the page refused: the bottom border, and the mark under it */
.mk-invalid { border-bottom: 2px solid var(--urgent, #C81E14) !important; }
.mk-under   { display: block; margin-top: 6px; min-height: 0; }
.mk-under:empty { display: none; }

/* the public pages: one colour */
[data-marks="public"] .mk,
[data-marks="public"] .mk-ok,
[data-marks="public"] .mk-watch,
[data-marks="public"] .mk-urgent { color: var(--navy, currentColor); }
[data-marks="public"] .mk-invalid { border-bottom-color: var(--navy, currentColor) !important; }