/* ticker.css -- ONE LOG, TWO SURFACES.
 *
 * CONSUMERS: index.html (the notice that slides out of the left edge) and
 * build.html (the full log, a page of its own). Both render the SAME payload
 * with the same vocabulary, so the vocabulary lives here rather than twice
 * (CLAUDE.md rule 33). This file was MOVED out of index.html at v3.297.0, not
 * copied -- the same call the deck faced one arc earlier when the docs door
 * needed initDeck.
 *
 * WHAT IS HERE AND WHAT IS NOT. Here: a ROW -- its kind label, its version, its
 * line, the date rule that leads its group, and the four colours that say what
 * the change was -- plus, since v3.310.0, THE TITLE: its colour and its tremble.
 * Not here: anything about the CONTAINER. The notice's slide, hover expansion,
 * phone suppression and dismissal stay in index.html; the archive page's layout
 * stays in build.html. A row looks the same on both; a notice and a page do not.
 *
 * THE TITLE JOINED THE SHARED VOCABULARY BECAUSE THE TWO SURFACES HAD DRIFTED.
 * "In the workshop" is the same title on the notice and on the archive page, and
 * only one of them trembled: the keyframes and the animation shorthand lived in
 * index.html's inline <style>, where build.html cannot see them. Copying six
 * lines of keyframes into the second page would have been two implementations of
 * one motion (rule 33) -- and the two would have drifted the way the row colours
 * were drifting before they moved here at v3.297.0.
 *
 * WHAT IT ASSUMES OF ITS HOST, stated because a stylesheet that assumes
 * silently is a stylesheet that breaks silently on the third consumer:
 *   --panel-ink / --panel-dim   the panel's foreground and its quiet grey
 *   --led                       set per row by the [data-change] rules below
 *   a DARK ground               white means "in flight", and white on paper is
 *                               not a colour, it is an absence
 *   'Spline Sans Mono'          loaded by fonts.css, with a ui-monospace fallback
 */

/* ---- WHAT THE CHANGE WAS, IN COLOUR (his ruling 2026-08-19: "major changes
   should be yellow, minor white bug fixes green, new features some other
   colour").

   THE SELECTOR IS THE BARE ATTRIBUTE, deliberately. It is set on a ROW and, on
   the notice, on the BOX as well -- the notice announces one thing and takes the
   newest entry's colour -- and those are different elements on different pages.
   Scoping it to either would mean writing the four hues twice. `data-change` is
   this project's own attribute and appears nowhere else in the tree.

   THE HUES, checked against the rail's six (red 3, amber 35, green 150,
   cyan 194, violet 271, pink 333) so a row never reads as a menu item that
   escaped, and against each other so four lit rows stay separable:
     MAJOR     -> YELLOW #FFD60A (~50)  -- the loudest thing on a dark panel
     FEATURE   -> CYAN   #00E5FF (~187) -- his "some other colour", cool, and
                                           not the retired ship blue
     FIX       -> GREEN  #2BFF88 (~148) -- brighter and more saturated than the
                                           rail's #35D07F, which burns at .42
     IN FLIGHT -> WHITE  #FFFFFF        -- no hue, because nothing has moved yet
   The class itself is DERIVED from the version in ticker.js; nothing anywhere
   writes it down. */
[data-change="major"]   { --led:#FFD60A }
[data-change="feature"] { --led:#00E5FF }
[data-change="fix"]     { --led:#2BFF88 }
[data-change="inflight"]{ --led:#FFFFFF }

/* ---- EVERY ELEMENT GETS ITS OWN IDENTITY (his principle, 2026-08-19:
   "I believe in assigning identities to everything") -------------------------

   That is the rule the rest of this file now answers to, and it is what the
   cyan header broke: a TITLE was wearing the colour that means "new feature",
   so one hue said two things and the code stopped being readable as a code.

   THREE IDENTITIES ARE DECLARED HERE, beside the four above, because each
   belongs to a ROW or to the TITLE and all three are shared by the notice and
   the archive page:

     --cx-gold   THE SITE'S GOLD, AND IT NOW CARRIES TWO RELATED MEANINGS BY HIS
                 DECISION (2026-08-21). The first is the MAKER'S PLAQUE -- the
                 "Powered by CX+AI" hallmark in every footer, drawn by
                 tests/forge.cx, whose brushed-metal family this hex belongs to
                 (it is the plaque's own focus-ring gold, #E8CB68, not a new
                 colour invented beside it). The second is THE WORKSHOP TITLE,
                 which is the same statement said in words rather than in metal:
                 this is a made thing and somebody made it. One family, two
                 places where the site signs its own work.

                 IT IS DELIBERATELY NOT #FFD60A, the MAJOR class above. That
                 yellow is a hot LED at full saturation; this is warm metal at
                 74%. A title wearing a change colour is the defect this whole
                 block exists to prevent, and gold sitting one hue away from a
                 change hue is close enough that the browser arm measures the two
                 apart rather than trusting this paragraph.

     --tk-date   THE DATE, GREEN (his ask: "YYYY-Mmm-DD and coloured - say
                 green"). Deliberately NOT #2BFF88, which is the FIX class: a
                 date wearing a change colour is the same defect as a title
                 wearing one. This is the site's own softer --green, which is
                 declared on the front page and is spelt out here as well
                 because the archive page has its own :root and this file is the
                 one thing they share.

     --tk-title  THE TITLE'S OWN INK, AND IT IS GOLD AS OF v3.310.0 (his ruling,
                 2026-08-21: the workshop title's words go bright gold). It was
                 RED from v3.298.0 -- his "Red is the obvious choice for titles",
                 the rail's 00 tube -- and that ruling is RECORDED here rather
                 than deleted, because a reversal with no trace reads to the next
                 person as a colour nobody chose. Used by the notice's header and
                 by the archive page's h1 -- one colour, one meaning, two pages.

   RETIRED AT v3.310.1, AND RECORDED RATHER THAN DELETED: `--tk-frame`. For one
   version the struck tube around the notice's title had a name and a fixed red
   of its own, on the reasoning that the BOX was the notice's furniture while the
   WORDS were the title. His ruling closed it -- *"the frame should be the argb
   frame we use elsewhere"* -- and the tree agrees with him: every other tube on
   this site (the rail's `a::before`, its active state, the notice itself) is
   drawn in `var(--led)`, THE ELEMENT'S OWN IDENTITY COLOUR, and not one of them
   carries a hex of its own. So the header's tube takes --tk-title, exactly as
   those take theirs, and the site keeps ONE way of drawing a lit edge instead of
   one way plus an exception. The argument it was built on -- that a gold border
   would change one surface out of two -- was protecting a symmetry that was
   never at risk: the archive page has no tube at all, and what the two surfaces
   share is the COLOUR, which both already take from --tk-title.

   None of the three is a `--led`. --led means "what the change was" and only
   that; a second thing borrowing it is how the first thing stopped being
   legible. */
:root{
  --cx-gold:#E8CB68;
  --tk-date:#79C48E;
  --tk-title:var(--cx-gold);
}

/* ---- THE TITLE TREMBLES, IN ONE PLACE --------------------------------------
   His ask, 2026-08-19: "in the workshop can it be a different colour, larger
   font, in neon colours and jittering." It shipped on the notice at v3.296.0 and
   NOT on the archive page, because the keyframes lived in index.html's inline
   <style> and build.html has never been able to see them -- so the same title,
   on the page named after it, sat still. Asked for repeatedly; landed here.

   IT IS A CLASS, NOT A SELECTOR PER PAGE. `.ticker-h` and `h1` are two different
   elements on two different pages and neither is a name this file should know;
   a class is the handle both hosts reach for, and there is exactly one animation
   behind it. A third surface that wants the tremble adds the class and inherits
   the reduced-motion answer with it.

   IT SHAKES, IT DOES NOT BLINK. The rail's tube-fail animates the OPACITY of a
   border, and that file's own comment says why -- "text that blinks is
   unreadable, a frame that blinks is neon". So this animates sub-pixel TRANSFORM
   instead: the word is legible in every frame, and the displacement is under a
   pixel, which is a tremble rather than a wobble. Erratic by construction, like
   the rail: uneven gaps, one double-stutter, and a long still stretch so it never
   reads as a metronome.

   AND IT STOPS WHEN THE VISITOR ASKS. An involuntary repeating movement is
   precisely what prefers-reduced-motion is turned on to be rid of, and sub-pixel
   does not exempt it. The kill lives HERE, beside the animation, so a surface
   that takes the class cannot take the motion without the answer to it -- which
   is the half build.html would otherwise have had to remember on its own.
   (The front page ALSO kills it through his site toggle, `html.still`; that flag
   is deck.js's and only that page sets it, so it stays where it is set. This
   media query is the OS's answer and belongs to every surface.) */
.tk-jitter{ animation:tk-jitter 6.5s steps(1,end) infinite }
@keyframes tk-jitter{
  0%,6%    { transform:translate(0,0) }
  7%       { transform:translate(.6px,-.4px) }
  8%,22%   { transform:translate(0,0) }
  23%      { transform:translate(-.5px,.5px) }
  24%      { transform:translate(.4px,.2px) }
  25%,57%  { transform:translate(0,0) }
  58%      { transform:translate(0,-.6px) }
  59%      { transform:translate(.5px,.3px) }
  60%,100% { transform:translate(0,0) }
}
@media (prefers-reduced-motion:reduce){
  .tk-jitter{ animation:none }
}

/* ---- THE LOG ---------------------------------------------------------------
   A flat list. The gap is the only spacing between entries, because the date
   rules do the grouping and a second visual separator would compete with them. */
.tk-log{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.tk-log li{font-size:13px;line-height:1.4;transition:font-size .3s ease}

/* THE COLOUR IS ON THE TEXT, NOT ON THE LABEL -- his correction of 2026-08-19:
   "the colour should be applied to the text not titles. Shipped."

   It read the other way round until v3.298.0: the word SHIPPED burned in the
   change colour and the sentence sat in the panel's ordinary ink. That put the
   signal on the one part of the row that is the SAME on every row -- so the
   colour was decorating a constant, and the thing it was describing was
   unlit. Now the sentence carries it, which is also what makes a lit row
   readable at a glance: the eye lands on the line, and the line's colour has
   already said what kind of change it was. */
.tk-kind{
  font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--panel-dim);
  transition:font-size .3s ease;
}
.tk-ver{font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:10.5px;color:var(--panel-dim);
  transition:font-size .3s ease}
.tk-line{display:block;margin-top:3px;color:var(--led);font-weight:400;
  text-shadow:0 0 10px color-mix(in srgb, var(--led) 40%, transparent);
  transition:font-weight .3s ease,color .3s ease}

/* ---- THE DATE LEADS (his ask 2026-08-19: "date should come first so ---- DATE
   ---- we have new date when date changes") --------------------------------
   A rule appears above the first entry of each date, and only when the date
   CHANGES going down the list -- consecutive entries from the same day sit under
   one.

   IT LIVES INSIDE THE FIRST <li> OF ITS GROUP, not as a list item of its own,
   and that is load-bearing rather than tidy. The notice bounds its list by
   HEIGHT and scrolls; before v3.297.0 it shrank by removing the last child, and
   with the rule inside its group's first entry a dropped entry took its own
   heading with it. Both arrangements need `li` to count ENTRIES rather than
   entries-plus-headings, and a separate <li> would also have read to a screen
   reader as a list item that is not one.

   IT IS GREEN, AND THE GREEN IS ITS OWN (his ask 2026-08-19: "Yes I didn't
   mention it but YYYY-Mmm-DD and coloured - say green"). It used to be the
   panel's quiet grey, on the reasoning that colour here means one thing. His
   principle answers that better than the reasoning did: the date is a different
   KIND of thing from an entry, so it gets a different identity rather than no
   identity. --tk-date is declared at the top of this file and is deliberately
   not the fix class's green -- see the note there.

   THE SHOWN TEXT IS `YYYY-Mmm-DD` AND IT IS FORMATTED BY THE CX PROGRAM. The
   <time> element still carries the machine ISO string in its datetime
   attribute, so what a screen reader and a parser get is unchanged.

   THE HAIRLINES ARE DRAWN, NOT TYPED. His "----" is a rule either side of the
   date; flex:1 pseudo-elements give exactly that at any width, where a literal
   run of dashes would be a guess that breaks on the German heading, on the
   notice's hover expansion, and on the archive page's much wider column. */
.tk-date{
  display:flex;align-items:center;gap:8px;
  margin:0 0 7px;
  font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:10px;letter-spacing:.1em;color:var(--tk-date);
  text-shadow:0 0 9px color-mix(in srgb, var(--tk-date) 45%, transparent);
  transition:font-size .3s ease;
}
.tk-date::before,.tk-date::after{
  content:'';flex:1 1 auto;height:1px;background:currentColor;opacity:.32;
}