/* ============================================================================================
   ATiQ — HISTORY (the job ledger)  [093500]
   ============================================================================================
   A top-level page, so it lives in the BOARD's world: the --page / --card / --value scale out of
   app.css, lime accent, not the stage card's blue. Everything is scoped under #history-view so
   nothing here can reach the board, the quote or Quote Logic.
   ============================================================================================ */

/* ⚠ [118500] THIS VIEW COULD NOT BE SCROLLED, AND NEITHER COULD IDEAS.
   app.css:24 makes body a 100vh flex column with overflow:hidden, because the board scrolls its
   own lanes. A top-level view therefore has to opt IN to scrolling. #logic-view does
   (app.css:2003: flex:1; min-height:0; overflow-y:auto) and the quote view escapes another way
   (body.quoting sets height:auto;overflow:visible). History and Ideas were added later as
   "its own top-level view, same shape as history" and simply never got the rule, so anything
   past the first screenful was unreachable.
   ⚠ min-height:0 IS LOAD-BEARING. A flex item's default min-height is auto — "at least as tall
   as my content" — so without it the view grows past the viewport instead of scrolling inside it,
   and overflow-y never engages. Same reason .lane and .jp-body carry it. */
#history-view{ display:none; flex:1 1 0; min-height:0; overflow-y:auto; }
#ideas-view{ flex:1 1 0; min-height:0; overflow-y:auto; }
#history-view .inner{ max-width:1500px; margin:0 auto; padding:18px 22px 60px; }
#history-view .hist-title{
  font-size:20px; font-weight:800; color:var(--tprimary); letter-spacing:-.02em; margin:0 0 3px;
}
#history-view .hist-sub{ font-size:11.5px; color:var(--tmut); margin:0 0 16px; line-height:1.6; }

/* ── the band ─────────────────────────────────────────────────────────────────────────────
   The .pipe-strip pattern the board already uses for its stats, so the two pages agree on what a
   headline figure looks like. */
#history-view .hist-band{
  display:flex; align-items:center; gap:26px; flex-wrap:wrap;
  padding:0 0 13px; border-bottom:1px solid var(--divider); margin-bottom:13px;
}
#history-view .hist-stat{ display:flex; align-items:baseline; gap:7px; }
#history-view .hist-stat .l{ font-size:11px; font-weight:600; color:var(--tmut); }
#history-view .hist-stat .v{
  font-size:14px; font-weight:700; letter-spacing:-.01em; color:var(--tprimary);
  font-family:'SFMono-Regular',ui-monospace,monospace; font-variant-numeric:tabular-nums;
}
#history-view .hist-stat .v.lime{ color:var(--value); }
#history-view .hist-stat .v small{
  font-size:10px; color:var(--tmut); font-family:inherit; font-weight:600; margin-left:1px;
}
/* ── search ──────────────────────────────────────────────────────────────────────────────── */
#history-view .hist-srch{
  display:flex; align-items:center; gap:9px; background:var(--well);
  border:1px solid var(--well-bd); border-radius:9px; padding:8px 12px; margin-bottom:9px;
  transition:border-color .12s;
}
#history-view .hist-srch:focus-within,
#history-view .hist-srch.live{ border-color:rgba(212,252,0,.45); }
#history-view .hist-srch .mag{ color:var(--tmut); font-size:13px; line-height:1; }
#history-view .hist-srch input{
  flex:1 1 auto; background:none; border:none; color:var(--tprimary); font-family:inherit;
  font-size:12.5px; font-weight:500; padding:0; outline:none; min-width:0;
}
#history-view .hist-srch input::placeholder{ color:var(--place); font-weight:400; }
#history-view .hist-srch .hits{
  font-size:10.5px; color:var(--tmut); white-space:nowrap;
  font-family:'SFMono-Regular',ui-monospace,monospace;
}
#history-view .hist-srch .clr{ color:var(--tmut); font-size:14px; line-height:1; cursor:pointer; }
#history-view .hist-srch .clr:hover{ color:var(--tprimary); }

/* the scope strip and the saved chips exist only while the search is in use — they are controls
   FOR the box, and above an empty box they are two rows of furniture over the table */
#history-view .hist-tools{ animation:histToolsIn .14s ease-out; }
@keyframes histToolsIn{ from{ opacity:0; transform:translateY(-3px) } to{ opacity:1; transform:none } }
#history-view .hist-scope{
  display:flex; border:1px solid var(--well-bd); border-radius:8px; overflow:hidden;
  width:max-content; margin-bottom:9px; max-width:100%; flex-wrap:wrap;
}
#history-view .hist-scope span{
  font-size:10px; font-weight:600; color:var(--tmut); padding:4px 12px; cursor:pointer;
  border-right:1px solid var(--well-bd); white-space:nowrap; transition:all .11s;
}
#history-view .hist-scope span:last-child{ border-right:none; }
#history-view .hist-scope span:hover{ color:var(--tsec); }
#history-view .hist-scope span.on{ color:var(--tprimary); background:rgba(255,255,255,.07); }
#history-view .hist-chips{
  display:flex; gap:7px; flex-wrap:wrap; align-items:center; margin-bottom:13px;
}
#history-view .hist-chip{
  font-size:10.5px; font-weight:600; color:var(--tsec); background:var(--well);
  border:1px solid var(--well-bd); border-radius:14px; padding:4px 11px; cursor:pointer;
  white-space:nowrap; display:inline-flex; align-items:center; gap:6px; transition:all .11s;
}
#history-view .hist-chip:hover{ color:var(--tprimary); border-color:var(--tmut); }
#history-view .hist-chip.on{ color:#0d0d0d; background:var(--value); border-color:var(--value); }
#history-view .hist-chip .pin{ font-size:8px; opacity:.8; }
#history-view .hist-chip.add{ border-style:dashed; color:var(--tmut); }
#history-view .hist-chips .sp{ margin-left:auto; font-size:10.5px; color:var(--tmut); }

/* ── the table ───────────────────────────────────────────────────────────────────────────── */
#history-view .hist-scroll{ overflow-x:auto; }
#history-view .hist-tbl{ width:100%; border-collapse:collapse; font-size:11.5px; min-width:900px; }
#history-view .hist-tbl th{
  text-align:left; font-size:9.5px; font-weight:700; color:var(--tmut); text-transform:uppercase;
  letter-spacing:.08em; padding:7px 9px; border-bottom:1px solid var(--card-bd);
  white-space:nowrap; cursor:pointer; user-select:none; transition:color .11s;
}
#history-view .hist-tbl th:hover{ color:var(--tsec); }
#history-view .hist-tbl th.nosort{ cursor:default; }
#history-view .hist-tbl th.nosort:hover{ color:var(--tmut); }
#history-view .hist-tbl th.sorted{ color:var(--tprimary); }
#history-view .hist-tbl th .ar{ color:var(--value); margin-left:4px; font-size:8px; }
#history-view .hist-tbl th.n{ text-align:right; }
#history-view .hist-tbl th.stg{ text-align:center; }
#history-view .hist-tbl td{
  padding:7px 9px; border-bottom:1px solid var(--divider); color:var(--tsec); vertical-align:top;
}
#history-view .hist-tbl tbody tr{ cursor:pointer; }
#history-view .hist-tbl tbody tr:hover td{ background:rgba(255,255,255,.028); }
#history-view .hist-tbl td.site{ color:var(--tprimary); font-weight:600; }
#history-view .hist-tbl td.n,
#history-view .hist-tbl td.stg{
  font-family:'SFMono-Regular',ui-monospace,monospace; font-variant-numeric:tabular-nums;
  color:var(--tprimary);
}
#history-view .hist-tbl td.n{ text-align:right; }
#history-view .hist-tbl td.stg{ text-align:center; color:var(--tsec); }
#history-view .hist-tbl td.key{
  text-align:right; font-family:'SFMono-Regular',ui-monospace,monospace; font-weight:700;
  color:var(--value); font-variant-numeric:tabular-nums;
}
#history-view .hist-tbl td.none{
  text-align:right; color:var(--tmut); font-family:'SFMono-Regular',ui-monospace,monospace;
}
/* the date: present, last, recessive. It places a job in time; it is not how you find one. */
#history-view .hist-tbl th.when,
#history-view .hist-tbl td.when{
  text-align:right; color:var(--tmut); font-size:10px; font-weight:500; white-space:nowrap;
  font-family:inherit;
}
#history-view .hist-tbl td.when{ padding-left:14px; }
#history-view .hist-empty{
  text-align:center; color:var(--tmut); font-size:11.5px; padding:34px 10px; font-style:italic;
}
/* a row whose figures were recomputed rather than frozen */

/* ── THE TYPE PILLS ───────────────────────────────────────────────────────────────────────
   ⚠ THE PAIR IS CHOSEN, NOT PICKED. Blue and violet looked right and are nearly the same colour
   to a red-green colourblind reader (ΔE 1.8, where 8 is the floor). Blue and pink measure 11.9
   deutan / 25.2 normal, which is the only pair of the three I tried that passes outright.
   Text contrast on its own tint: 6.78:1 and 5.54:1 dark, 5.91:1 and 5.86:1 light.
   The accent lime is deliberately NOT used — it is the $/m² colour two columns away, and a lime
   pill beside a lime figure makes neither of them mean anything. */
#history-view .hist-typ{ display:flex; flex-wrap:wrap; gap:4px; }
#history-view .hist-pill{
  display:inline-flex; align-items:center; font-size:9px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; padding:3px 9px; border-radius:11px; white-space:nowrap;
  cursor:pointer; transition:all .12s;
  color:var(--tsec); border:1px solid var(--well-bd); background:var(--well);
}
#history-view .hist-pill:hover{ filter:brightness(1.18); }
#history-view .hist-pill.more{ color:var(--tmut); border-style:dashed; cursor:default; }
#history-view .hist-pill[data-type="Waffle pod"]{
  color:#38bdf8; border-color:rgba(56,189,248,.45); background:rgba(56,189,248,.14);
}
#history-view .hist-pill[data-type="Suspended"]{
  color:#e879a9; border-color:rgba(232,121,169,.45); background:rgba(232,121,169,.14);
}

/* ── where a search matched ──────────────────────────────────────────────────────────────── */
#history-view .hist-hit{
  display:block; margin-top:4px; font-size:10px; color:var(--tmut); font-weight:500; line-height:1.55;
}
#history-view .hist-hit b{
  color:var(--value); font-weight:700; background:rgba(212,252,0,.12); border-radius:3px; padding:0 2px;
}
#history-view .hist-hit .kd{
  font-size:7.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--tmut); border:1px solid var(--well-bd); border-radius:8px; padding:1px 5px;
  margin-right:6px; vertical-align:1px;
}
#history-view .hist-hit .qt{
  font-family:'SFMono-Regular',ui-monospace,monospace; color:var(--tsec); font-size:9.5px;
  margin-left:6px;
}

/* ── LIGHT MODE ───────────────────────────────────────────────────────────────────────────
   Every token above resolves through app.css's light scale already. The two that cannot are the
   literal pill colours: at the dark steps they measure under 4:1 on a light tint, so they take
   their own darker steps (5.91:1 and 5.86:1). */
body.light #history-view .hist-pill[data-type="Waffle pod"]{
  color:#05506f; border-color:rgba(5,80,111,.4); background:rgba(5,80,111,.16);
}
body.light #history-view .hist-pill[data-type="Suspended"]{
  color:#8a1f49; border-color:rgba(138,31,73,.4); background:rgba(138,31,73,.16);
}
body.light #history-view .hist-tbl tbody tr:hover td{ background:rgba(0,0,0,.03); }
body.light #history-view .hist-scope span.on{ background:rgba(0,0,0,.06); }
body.light #history-view .hist-hit b{ background:rgba(143,184,0,.18); }

/* ── NARROW SCREENS ──────────────────────────────────────────────────────────────────────── */
@media (max-width:820px){
  #history-view .inner{ padding:14px 12px 50px; }
  #history-view .hist-band{ gap:16px; }
  #history-view .hist-chips .sp{ display:none; }
}
@media print{ #history-view{ display:none!important; } }

/* ── [094000] the row number, and the manual-price tag ──────────────────────────────────────
   The number is a RANK of what is on screen, so it is quiet: you read it to say "the fourth one
   down", not to look anything up. Tabular figures so the column does not shift between 9 and 10. */
#history-view .hist-tbl th.num{ text-align:right; width:43.69px; cursor:default; }
#history-view .hist-tbl th.num:hover{ color:var(--tmut); }
/* ⚠ QUIET BY SIZE, NOT BY DIMNESS. --tmut measures 3.41:1 on the dark page, under the 4.5:1
   floor for text this size — the same trap the "Ungrouped" label hit in 093000. 10px at --tsec
   is 6.55:1 and still reads as the smallest thing in the row. */
#history-view .hist-tbl td.num{
  text-align:right; width:43.69px; color:var(--tsec); font-size:12.85px; font-weight:600;
  font-family:'SFMono-Regular',ui-monospace,monospace; font-variant-numeric:tabular-nums;
  padding-right:5.14px;
}
/* amber, the app's "look at this" colour, and the same one the recomputed mark uses — both say
   the same kind of thing: this figure did not come from where the others came from */
#history-view .manualtag{
  display:inline-block; margin-left:7px; font-size:8px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:#e0a854; border:1px solid rgba(224,168,84,.4);
  background:rgba(224,168,84,.12); border-radius:8px; padding:1px 6px; vertical-align:1px;
  font-family:'Archivo',-apple-system,sans-serif;
}
body.light #history-view .manualtag{
  color:#6f4106; border-color:rgba(111,65,6,.4); background:rgba(111,65,6,.12);
}

/* ── [095000] the client column ───────────────────────────────────────────────────────────
   Second, right after the site, because "whose job was it" is the other half of identifying a
   row. Quieter than the site so the two do not compete: the site is what you scan for, the
   client is what confirms you found the right one. */
#history-view .hist-tbl th.cli{ white-space:nowrap; }
#history-view .hist-tbl td.cli{
  color:var(--tsec); font-weight:500; white-space:nowrap; max-width:190px;
  overflow:hidden; text-overflow:ellipsis;
}

/* ── [097000] the exclude tick ────────────────────────────────────────────────────────────
   Last column, narrow, and unchecked on nearly every row — which is the point: the few that ARE
   excluded should be the only marks in the column. Not the accent lime; a tick is not a figure. */
#history-view .hist-tbl th.exc{ text-align:center; width:62px; cursor:default; }
#history-view .hist-tbl th.exc:hover{ color:var(--tmut); }
#history-view .hist-tbl td.exc{ text-align:center; cursor:default; }
#history-view .hist-tbl td.exc input{
  width:13px; height:13px; cursor:pointer; accent-color:#e0a854; margin:0; vertical-align:middle;
}
/* an excluded row reads as set aside — still legible, plainly not in the pool */
#history-view .hist-tbl tbody tr:has(.hist-ex:checked) td{ opacity:.55; }
body.light #history-view .hist-tbl td.exc input{ accent-color:#8a5a0a; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   [119000]  TAGS — the column, the filter strip, the groups, the picker.

   James, 2 Nov: "i want to be able to group certain jobs with custom tags that i can add /
   remove. jobs can have multiple tags", then "i'm thinking we remove the waffle and suspended
   rules and they can just be tagged like we're doing now", then "lets have colour".

   ⚠ A GREY TAG IS BYTE-FOR-BYTE THE OLD PILL. The Type column rendered .hist-pill and nothing
   else; a tag with no colour chosen renders .hist-pill with no colour class. That is why the
   table does not shift when this build lands — measured at 33–34px a row before and after.
   ⚠ COLOUR IS DECLARED TWICE, ONCE PER THEME. The hue is a NAME in the database, so the
   stylesheet gets to resolve it; a hex stored against the tag would have been picked on the dark
   card and then shown on the white one. Light mode needs a darker ink on a paler wash to stay
   legible, so every tc-* class has a body.light twin.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* the hues, each one already in use somewhere in the app so a tag never looks foreign */
.tc-blue  { --tgf:#8cc4f5; --tgb:rgba(90,169,240,.15);  --tgd:rgba(90,169,240,.5);  }
.tc-teal  { --tgf:#6fd0c4; --tgb:rgba(75,179,168,.15);  --tgd:rgba(75,179,168,.5);  }
.tc-green { --tgf:#8edc9b; --tgb:rgba(111,207,127,.15); --tgd:rgba(111,207,127,.5); }
.tc-amber { --tgf:#e8bd6a; --tgb:rgba(224,163,58,.16);  --tgd:rgba(224,163,58,.5);  }
.tc-red   { --tgf:#ed938f; --tgb:rgba(224,115,111,.16); --tgd:rgba(224,115,111,.5); }
.tc-purple{ --tgf:#c6aae2; --tgb:rgba(178,143,214,.16); --tgd:rgba(178,143,214,.5); }
.tc-lime  { --tgf:#d4fc00; --tgb:rgba(212,252,0,.13);   --tgd:rgba(212,252,0,.45);  }
body.light .tc-blue  { --tgf:#1f5f9e; --tgb:rgba(90,169,240,.14);  --tgd:rgba(31,95,158,.4);  }
body.light .tc-teal  { --tgf:#1d6b63; --tgb:rgba(75,179,168,.14);  --tgd:rgba(29,107,99,.4);  }
body.light .tc-green { --tgf:#2b6b38; --tgb:rgba(111,207,127,.16); --tgd:rgba(43,107,56,.38); }
body.light .tc-amber { --tgf:#8a5a06; --tgb:rgba(224,163,58,.18);  --tgd:rgba(138,90,6,.38);  }
body.light .tc-red   { --tgf:#9c322e; --tgb:rgba(224,115,111,.16); --tgd:rgba(156,50,46,.36); }
body.light .tc-purple{ --tgf:#5c3b85; --tgb:rgba(178,143,214,.18); --tgd:rgba(92,59,133,.36); }
body.light .tc-lime  { --tgf:#54660a; --tgb:rgba(140,168,0,.18);   --tgd:rgba(84,102,10,.38); }
/* ── the pill, in all three places it appears ───────────────────────────────────────────────
   ⚠ THE BASE STYLE WAS SCOPED TO AN ID AND THE COLOUR RULE LOST TO IT. #history-view .hist-pill
   scores an id (1,1,0); .hist-pill.tagpill[class*="tc-"] scores 0,3,0, so every tag rendered in
   --tsec grey however it had been coloured. Caught by the guard, which compares blue ink against
   red ink rather than merely asserting that a class is present — the two were identical.
   The same selector list also gives the picker and the job popup a base style: neither is inside
   #history-view, so a pill in those places had no shape of its own at all. */
.jp-tags .hist-pill,
.tag-menu .hist-pill{
  display:inline-flex; align-items:center; font-size:9px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; padding:3px 9px; border-radius:11px; white-space:nowrap;
  color:var(--tsec); border:1px solid var(--well-bd); background:var(--well);
}
body.light .jp-tags .hist-pill,
body.light .tag-menu .hist-pill{ color:#5a5a56; background:#f1f1ee; border-color:rgba(0,0,0,.12); }
/* a pill wearing a colour simply reads the three vars; grey ones never set them */
#history-view .hist-pill.tagpill[class*="tc-"],
.jp-tags .hist-pill[class*="tc-"],
.tag-menu .hist-pill[class*="tc-"]{
  color:var(--tgf); background:var(--tgb); border-color:var(--tgd);
}

/* ── the cell ───────────────────────────────────────────────────────────────────────────────
   ⚠ THE + IS ALWAYS IN THE DOM, JUST INVISIBLE UNTIL THE ROW IS HOVERED. Appending it on hover
   would reflow the cell under the cursor, and on an untagged row that means the thing you were
   about to click moves as you reach it. */
#history-view .hist-typ{ display:flex; align-items:center; gap:4px; }
/* ⚠ UNSCOPED ON PURPOSE. The same + sits in the job popup head (core.js paintJob), which is not
   inside #history-view. Scoping it to the page it was written for is the mistake that left the
   labour note popup unstyled at 116500. */
.tag-add{
  font-size:11px; line-height:1; font-weight:700; color:var(--tmut); cursor:pointer;
  border:1px dashed var(--well-bd); border-radius:11px; background:none;
  padding:2px 7px 3px; transition:opacity .12s, color .12s, border-color .12s;
}
.tag-add:hover{ color:var(--value); border-color:var(--value); }
/* only on the table is it hidden until you are on the row — a hundred dashed plus signs down a
   ledger is a hundred invitations nobody asked for */
#history-view .tag-add{ opacity:0; }
#history-view tr:hover .tag-add, #history-view .tag-add.live{ opacity:1; }

/* the popup's row of tags, under the job title (the pill's own styling is up with the others) */
.jp-tags{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-top:7px; }
.jp-tags .hist-pill{ cursor:default; }

/* ── the filter strip ───────────────────────────────────────────────────────────────────────
   Sits above the search bar and, unlike the saved-search chips, is ALWAYS there: the tags are
   the page's own index now, not a control belonging to the search box. */
#history-view .hist-tagbar{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  padding:9px 2px 3px; margin-bottom:2px;
}
#history-view .hist-tagbar .tb-l{
  font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tmut); margin-right:2px;
}
#history-view .hist-chip.tagchip[class*="tc-"]{ color:var(--tgf); border-color:var(--tgd); }
#history-view .hist-chip.tagchip.on[class*="tc-"]{
  color:#0d0d0d; background:var(--tgf); border-color:var(--tgf);
}
body.light #history-view .hist-chip.tagchip.on[class*="tc-"]{ color:#fff; }
#history-view .hist-chip .tc-n{ font-size:9px; font-weight:700; opacity:.65; }
#history-view .hist-tagbar .tb-clr{
  font-size:10px; color:var(--tmut); cursor:pointer; text-decoration:underline;
  text-underline-offset:2px; background:none; border:0; padding:2px 4px;
}
#history-view .hist-tagbar .tb-clr:hover{ color:var(--tprimary); }
/* the AND notice — two tags narrow, they do not widen, and nobody can be expected to guess that */
#history-view .hist-tagbar .tb-and{ font-size:9.5px; color:var(--tmut); font-style:italic; }
#history-view .hist-chip.tb-grp{ margin-left:auto; }

/* ── group bands ────────────────────────────────────────────────────────────────────────────
   Borrowed from the stage-group band in the quote summary (stage-v2.css .sum-gband) so a band
   means the same thing in both places. They are rows INSIDE the table, not separate tables, so
   every column stays in one set of columns down the whole page.
   ⚠ A JOB WITH THREE TAGS APPEARS IN THREE BANDS. That is what grouping by tag means when a job
   can hold several, and the band counts say so; the # column restarts per band for the same
   reason — it is a rank within what you are reading, not an id. */
#history-view .hist-gband td{
  padding:0 !important; background:none !important; border:0 !important;
}
#history-view .hist-gband .gb{
  display:flex; align-items:baseline; gap:9px;
  padding:7px 11px; margin:10px 0 0;
  background:var(--tgb, rgba(255,255,255,.045));
  border-bottom:1px solid var(--tgd, var(--well-bd));
  border-top:1px solid var(--tgd, var(--well-bd));
}
#history-view .hist-gband .gb .n{
  font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--tgf, var(--tsec));
}
#history-view .hist-gband .gb .c{ font-size:9.5px; color:var(--tmut); }
#history-view .hist-gband.none .gb{
  background:none; border-color:var(--divider);
}

/* ── the picker ─────────────────────────────────────────────────────────────────────────────
   ⚠ NOT SCOPED TO #history-view. tagMenuOpen() appends to document.body — the same mistake that
   made the labour note popup unstyled at 116500, where the CSS was scoped to .quote-view and the
   dialog was appended to the body. It is opened from the history row and from the job popup, so
   it cannot be scoped to either. */
.tag-menu{
  position:fixed; z-index:10050; width:252px; max-height:62vh; overflow-y:auto;
  background:var(--card); border:1px solid var(--card-bd); border-radius:10px;
  box-shadow:0 18px 46px rgba(0,0,0,.5); padding:7px 0 0; font-family:var(--font);
}
body.light .tag-menu{ background:#fff; box-shadow:0 18px 46px rgba(0,0,0,.2); }
.tag-menu .tm-h{
  font-size:9px; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
  color:var(--tmut); padding:2px 12px 7px;
}
.tag-menu .tm-none{ font-size:11px; color:var(--tmut); padding:3px 12px 9px; }
.tag-menu .tm-r{
  display:flex; align-items:center; gap:8px; padding:5px 11px; cursor:pointer;
}
.tag-menu .tm-r:hover{ background:rgba(255,255,255,.05); }
body.light .tag-menu .tm-r:hover{ background:rgba(0,0,0,.045); }
.tag-menu .tm-box{
  flex:0 0 14px; width:14px; height:14px; border-radius:3px; font-size:10px; line-height:13px;
  text-align:center; color:var(--value); border:1px solid var(--well-bd); background:var(--well);
}
.tag-menu .tm-r.on .tm-box{ border-color:var(--value); }
.tag-menu .tm-r .hist-pill{ cursor:pointer; }
.tag-menu .tm-n{ margin-left:auto; font-size:9.5px; color:var(--tmut); }
.tag-menu .tm-col{
  background:none; border:0; cursor:pointer; font-size:11px; line-height:1;
  color:var(--tgf, var(--tmut)); padding:2px 1px 2px 3px; opacity:.65;
}
.tag-menu .tm-r:hover .tm-col{ opacity:1; }
.tag-menu .tm-new{ border-top:1px solid var(--divider); margin-top:4px; padding:7px 10px 9px; }
.tag-menu .tm-new input{
  width:100%; font-family:var(--font); font-size:11.5px; color:var(--tprimary);
  background:var(--well); border:1px solid var(--well-bd); border-radius:6px; padding:6px 8px;
}
body.light .tag-menu .tm-new input{ background:#f4f4f2; color:#1a1a18; }
.tag-menu .tm-new input::placeholder{ color:var(--place); }
.tag-menu .tm-new input:focus{ outline:none; border-color:var(--value); }

/* the colour row — eight swatches, opened off one tag */
.tag-sw{
  position:fixed; z-index:10060; display:flex; gap:5px; padding:7px 8px;
  background:var(--card); border:1px solid var(--card-bd); border-radius:9px;
  box-shadow:0 14px 34px rgba(0,0,0,.5);
}
body.light .tag-sw{ background:#fff; box-shadow:0 14px 34px rgba(0,0,0,.2); }
.tag-sw .sw{
  width:17px; height:17px; border-radius:50%; cursor:pointer; padding:0;
  border:1px solid var(--well-bd); background:var(--well);
}
.tag-sw .sw.on{ box-shadow:0 0 0 2px var(--page), 0 0 0 3px var(--tprimary); }
.tag-sw .sw-grey  { background:#4a4a4a; }
.tag-sw .sw-blue  { background:#5aa9f0; }
.tag-sw .sw-teal  { background:#4bb3a8; }
.tag-sw .sw-green { background:#6fcf7f; }
.tag-sw .sw-amber { background:#e0a33a; }
.tag-sw .sw-red   { background:#e0736f; }
.tag-sw .sw-purple{ background:#b28fd6; }
.tag-sw .sw-lime  { background:#d4fc00; }
body.light .tag-sw .sw-grey{ background:#b4b4b0; }

/* [119500] the one line the Tags strip shows when job-tags.sql has not been run */
#history-view .hist-tagbar .tb-setup{ font-size:10.5px; color:var(--tmut); }
#history-view .hist-tagbar .tb-setup code{
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:10px;
  background:var(--well); border:1px solid var(--well-bd); border-radius:4px; padding:1px 5px;
  color:var(--tsec);
}