/* What a tag is — the colours, and the chip they are drawn as.
 *
 * This file exists because BOTH ends load it. The site draws tags on the
 * writing list and in a byline; the console draws them in the library, in the
 * editor's bar, in the registry editor and inside its own preview of the same
 * byline. It sat in site.css, which the console does not load, and the console
 * would have had to keep a copy — two files free to disagree about what
 * `violet` is, when the whole point of naming a colour instead of storing one
 * is that there is exactly one answer.
 *
 * Loaded after the system's sheets and before the surface's own:
 *
 *   .../preprint/styles.css   .../preprint/core.css
 *   /assets/tags.css          this file
 *   /assets/site.css   or   /admin/console.css
 *
 * It restates nothing the system owns. The three names below that ARE plates
 * point at them; they do not redeclare them.
 */

:root {
  /*
     A piece carries as many tags as it wants and every one of them has a
     colour, so the three plates ran out immediately. These are the colours a
     tag may be, and content picks one BY NAME: `colour: violet` in tags.json
     becomes var(--tag-violet) in the markup. The values live here and only
     here, which is the whole reason the registry stores a name and not a hex —
     tags.json is edited in a console that shows one mode at a time, and a hex
     chosen there is a colour that works in that mode and nowhere else.

     Green, red and blue ARE the system's plates, aliased rather than restated:
     the three tags this site already had keep the exact colours they had, and
     a fourth tag beside them is a new colour rather than a redrawn one.

     The other four are declared, and each is a PAIR, because the system's own
     rule is that a plate below 18px hands over to a text companion. The fill
     draws the 2px row rule, the chip's dot and the drop cap; the text draws
     the 11px label beside it. A one-value tag would be either an unreadable
     label or a washed-out rule, and which one depends on the mode.

     The set is closed on purpose. Each of these has been drawn in both modes
     as all three of those things, and an eighth colour is a line here plus
     that check — not a free-text field in the console. */
  --tag-green: var(--pp-plate-1);
  --tag-green-text: var(--pp-plate-1-text);
  --tag-red: var(--pp-plate-2);
  --tag-red-text: var(--pp-plate-2-text);
  --tag-blue: var(--pp-plate-3);
  --tag-blue-text: var(--pp-plate-3-text);

  /* Citron as INK, which is not the citron the workshop door is pressed in.
     That one is #deee2e and it measures 1.6:1 as type on eggshell — the
     system says so in as many words. This is the same hue taken down until it
     is a colour a word can be written in. */
  --tag-citron: #8a9500;
  --tag-citron-text: #6d7600;
  --tag-violet: #7b3fe4;
  --tag-violet-text: #6429c8;
  --tag-amber: #c26a00;
  --tag-amber-text: #9a5200;
  /* The neutral, for a tag that is filing rather than a register. It is the
     ink family and not a colour, so it never competes with one. */
  --tag-slate: var(--pp-faint);
  --tag-slate-text: var(--pp-muted);
}

/* Plates gain saturation as well as lightness on the night ground, because a
   plate that is merely brighter goes chalky. The three aliased names are not
   here: the plates they point at have already done this. */
[data-mode='dark'] {
  --tag-citron: #d4e33a;
  --tag-citron-text: #dbe95e;
  --tag-violet: #b48cff;
  --tag-violet-text: #c4a5ff;
  --tag-amber: #ffab4d;
  --tag-amber-text: #ffc078;
}

/* The tags, on a row and in a byline. They are the same object in both places
   and drawn by the same rule, because they are the same claim about the piece.

   A chip is a mark and a word and no box. The language chip beside the title
   has a frame, and a framed tag next to it would read as the same kind of
   thing — it is not. A language is a fact about the file; a tag is what the
   piece is about, and it is set in the piece's own colours, which a frame
   would fight. Nothing here is a plate behind type either: the mark is the
   colour and the word merely follows it, which is how the tag stays legible
   when a reader has picked seven of them. */
.tag {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--pp-font-mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; line-height: 1.4;
}
/* The mark is the tag's colour and the word follows it. A tag with an icon
   shows the icon INSTEAD of the dot, never beside it: two marks for one tag is
   two things to read. The glyph is set on the word's own 11px rather than on
   the dot's 6, and takes the colour through currentColor, which is what every
   icon in this system does. */
.tag .sq { flex: none; width: .4rem; height: .4rem; }
.tag__i { flex: none; width: .69rem; height: .69rem; }

/* The byline's tags stand where the register's single eyebrow stood, so they
   keep its spacing below. They do NOT carry `.eyebrow` with them: the system
   draws that as an inline-flex row with one mark in it, which is exactly one
   tag, and a second one wrapping inside it has nowhere to go. `.tag` carries
   the type it used to borrow. */
.art__tags {
  display: flex; flex-wrap: wrap; gap: .2rem .9rem; margin-bottom: .5rem;
}