/* The day bar of every cheatsheet.life product (Create.Websites goal 3906, Ian 2026-10-14). One sheet for the one thing, so how the
   bar looks is decided here and nowhere else: canonical copy buckets/TEMPLATE/css-lib/day-bar.css, linked by every product that loads
   /js-lib/cheatsheet-life.js (index.html: <link href="/css-lib/day-bar.css"> after the family sheet); a bucket copy is byte-identical to
   TEMPLATE's and the dist-js-lib daemon puts it there (edit TEMPLATE only; seed_lib_files seeds a missing one).
   Ian: "a 2 pixel wide border above and below it ... a one pixel wide black line separating all the colors ... Make the main 5 pixel
   high band 10 pixels instead. When I hover over each color band, have a little pop-up tell me ... the name of that section and if it's
   earmarked for any particular task, or if it's an appointment, what the appointment is. Clicking on it should go to the main schedule
   page ... it really shouldn't be interacting with any other element on the page, that should be fine since it's sticky."
   js-lib/cheatsheet-life.js builds #dayBar (one <a class="dayBarPart"> per piece of today's parts, each holding its drawer, then the
   day gone) as a child of <html>: kushim re-renders <body>, never <html>, so the bar outlives every page change. Every rule starts at
   #dayBar: no page selector reaches the bar and the bar reaches no page element. 14px = 2px border + 10px band + 2px border.
   Goal 3917 (Ian 2026-10-14): "When I hover over a section of the top bar, just that colored section [grows] so that it slides down
   and reveals text describing what that section of time is earmarked for. The font color can be black. I don't want to see the tops
   of the text when it's in its minimized form." So the pop-up is the part's own drawer: a grid whose row goes 0fr -> 1fr (a height
   that needs no number), the clip box inside it hiding everything while it is 0, and visibility off once it has folded, so not even
   the top of a letter shows minimised. The part's own colour fills it; the words are black, or white (script, on the part) when the
   colour is too dark for black to be read. The slide is 0.16s and ignores prefers-reduced-motion on purpose: Ian asked for the slide and
   his Mac reports reduce-motion on (a rule for it would have switched his slide off); delete this note and add the media rule to undo. */
#dayBar { position: fixed; top: 0; left: 0; right: 0; z-index: 2147483000; box-sizing: border-box; height: 14px; margin: 0; padding: 0;
          border-top: 2px solid #000; border-bottom: 2px solid #000; background: #fff; overflow: visible; line-height: 0; }   /* visible: a drawer hangs below the bar */
#dayBar .dayBarPart { position: absolute; top: 0; bottom: 0; display: block; box-sizing: border-box; margin: 0; padding: 0;
                      border: 0; border-left: 1px solid #000; background-clip: padding-box; text-decoration: none; cursor: pointer; }
#dayBar .dayBarPart:first-child, #dayBar .dayBarJoin { border-left-width: 0; }   /* a line between colours only: not before the first, nor inside a part that midnight (or a one-part day) cut in two */
#dayBar .dayBarPart:hover, #dayBar .dayBarPart:focus-visible { filter: brightness(1.15); outline: none; }
#dayBar .dayBarGone { position: absolute; top: 0; bottom: 0; left: 0; display: block; box-sizing: border-box; margin: 0; padding: 0;
                      background: rgba(255, 255, 255, 0.6); border-right: 2px solid #000; pointer-events: none; }
/* The drawer (goal 3917): inside its part, from just under the band, its left side on the part's own 1px black line (left: -1px). Folded it is a 0fr grid row, hidden; hover or keyboard focus
   unfolds it to its text. A piece wider than the drawer is as wide as the piece; a narrow one gets the drawer's minimum, growing to
   the right (to the left from a piece in the second half of the day: .dayBarRight). Taking the click too: it is inside the link. */
#dayBar .dayBarDrawer { position: absolute; top: 100%; left: -1px; width: calc(100% + 1px); min-width: 11em; z-index: 1; display: grid; grid-template-rows: 0fr; visibility: hidden;
                        margin: 0; padding: 0; background: inherit; color: inherit; font: 13px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: normal;
                        text-align: left; text-transform: none; white-space: normal; transition: grid-template-rows 0.16s ease, visibility 0s linear 0.16s; }
#dayBar .dayBarRight .dayBarDrawer { left: auto; right: 0; }
#dayBar .dayBarPart:hover .dayBarDrawer, #dayBar .dayBarPart:focus-visible .dayBarDrawer { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 0.16s ease, visibility 0s; }
#dayBar .dayBarDrawerClip { display: block; min-height: 0; overflow: hidden; margin: 0; padding: 0; }
#dayBar .dayBarDrawerText { display: block; box-sizing: border-box; margin: 0; padding: 4px 9px 6px; border: 1px solid #000; border-top-width: 0; border-bottom-width: 2px; overflow-wrap: anywhere; }
#dayBar .dayBarTipName, #dayBar .dayBarTipWhen, #dayBar .dayBarTipAppt { display: block; }
#dayBar .dayBarTipName { font-weight: 700; }
#dayBar .dayBarTipWhen { opacity: 0.85; }
#dayBar .dayBarTipAppt { margin-top: 3px; padding-top: 3px; border-top: 1px solid currentColor; }
@media print { #dayBar { display: none; } }