@layer components {
.pane {
  /* the day's clock strip: a ribbon over the rows, the whole day on one
     axis. Faint pencil marginalia, one dark-grey ink — density read as
     thickness. It lines up with the document's text column (capped wide,
     in panes.css) and with the hour scale above. */
  .timeline {
    position: relative;                             /* the marks resolve left% against this box */
    height: 12px; margin: 0 .55rem; background: var(--bg);
    touch-action: pan-y;                            /* a horizontal touch sweeps a time block */

    &:empty { display: none; }
    /* the caret on a task/◆ opens an empty bar: a bare dashed track to
       drag the first block onto */
    &.tlopen { display: block; }
    &.tlopen::before {
      content: ''; position: absolute; left: 0; right: 0; top: 5px;
      border-top: 1px dashed color-mix(in oklab, var(--ink) 22%, transparent);
    }
    /* the sweep of a drag-to-block: an accent band, its span reading above */
    .tldrag {
      position: absolute; top: 0; height: 100%; min-width: 3px; border-radius: 2px;
      background: color-mix(in oklab, var(--accent) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 45%, transparent);
      pointer-events: none; z-index: 3;

      &::after {
        content: attr(data-span); position: absolute; left: 50%; top: -17px; transform: translateX(-50%);
        font: .68rem/1 var(--mono); color: var(--accent);
        background: var(--bg); padding: 0 .2rem; white-space: nowrap;
      }
    }
    /* an alt-sweep frames its span rather than blocking it */
    .tldrag.zoom { background: none; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 35%, transparent); }
    .tldrag.zoom::after { color: var(--dim); }
    /* zoomed, an edge past which more of the day lies is dotted */
    .tlmore {
      position: absolute; top: 1px; bottom: 1px; width: 0; border-left: 1.5px dotted color-mix(in oklab, var(--ink) 45%, transparent);
      pointer-events: none;

      &.l { left: 0; }
      &.r { right: 0; }
    }
    /* A freshly-typed event has no slot on the clock yet — pulse the bar to
       point at where its time gets blocked, revealing the bare track even
       when empty. The hint clears itself (and re-hides an empty bar). */
    &.tlhint { display: block; animation: tlhint .8s ease-in-out 2; }
    .tlrib { display: block; width: 100%; height: 9px; fill: var(--ink); fill-opacity: .72; }
    /* whose block it is, the bar's one distinction: mine in solid ink,
       another note's in ink bars (#tlhatch), its tick dotted. Texture
       carries it, because a light ground hides a shade. The log line's
       own texture reads as fit and says nothing about whose. */
    .tlrib .tlother { fill: url(#tlhatch); }
    /* done blocks fade: the open ribbon lies over the whole day's, faint */
    .tlrib.done { fill-opacity: .2; }
    .tlrib.open { position: absolute; top: 0; left: 0; }
    .tlmark.pt.tldone:not(.tlhov, .tlfoc) { opacity: .25; }
    /* a note switch flips whose on every mark at once: the old drawing
       stays on as a ghost and the two cross-fade (timeline.js) */
    .pane.tlswap & > :not(.tlghost) { animation: tlin .3s ease-out; }
    .tlmark.pt.tlother { background: repeating-linear-gradient(180deg, var(--ink) 0 1.5px, transparent 1.5px 3px); }
    /* the logged actuals: a thin ink line under the ribbon, the day's recorded
       time against its plan, read as texture — solid on a slot, dashed off it,
       dotted where the task held no slot to meet. */
    .tllog {
      position: absolute; bottom: 1px; height: 0; min-width: 2px; border-top: 2px solid var(--ink); pointer-events: none; opacity: .85;

      &.off { border-top: 0; height: 2px; background: repeating-linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 5px); }
      &.none { border-top-style: dotted; }
      /* a running clock: ink still bleeding from its start, fading out where the
         end has not landed yet: faint, in --spent, no hard right edge */
      &.run {
        border-top: 0; height: 3px; width: 14px; min-width: 0; opacity: .55;
        background: linear-gradient(90deg, var(--spent), transparent);
      }
      /* a clock a past day never closed: a short dashed stub, no bleed */
      &.left {
        border-top: 2px dashed var(--spent); width: 8px; min-width: 0; opacity: .55;
      }
    }
    /* a logged interval's hit-target rides the lower band, over the line and
       below the scheduled marks, so a hover finds the line it points at */
    .tlloghit {
      bottom: 0; height: 5px; min-width: 3px; border-radius: 1px; transition: background var(--bleed);

      &.tlhov, &.tlfoc { background: color-mix(in oklab, var(--ink) 18%, transparent); }
    }
    /* a deadline's window (timeline.js tlWindow): a faint bracket along
       the bar's foot, red once the deadline has passed with the task open */
    .tlwin {
      position: absolute; bottom: 0; height: 5px; min-width: 3px;
      border: 1.5px solid color-mix(in oklab, var(--ink) 30%, transparent); border-top: 0;

      &.tloverdue { border-color: var(--warn); }
    }
    /* one hit-target per mark; the ribbon shows the shape, these light up */
    .tlmark {
      position: absolute; cursor: pointer; transition: background var(--bleed), box-shadow var(--bleed), opacity var(--bleed);

      &.iv {
        top: 0; height: 100%; min-width: 3px; border-radius: 2px;

        &.tlhov, &.tlfoc { background: color-mix(in oklab, var(--accent) 18%, transparent); }
      }
      &.pt {                                        /* a point in time: a full-height tick, round-capped */
        top: 0; height: 100%; width: 1.5px; margin-left: -.75px;
        border-radius: 1px; background: var(--ink); opacity: .72;

        &.tlhov, &.tlfoc {
          background: var(--accent); opacity: 1; box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--accent) 25%, transparent);
        }
      }
    }
    /* the wall-clock playhead — an ink triangle pointing down, its tip sitting
       on top of the bar (where an interval band's top edge runs) and centred
       on the left% position. The shape, not a colour, sets it apart. */
    .tlnow {
      position: absolute; top: -4px; margin-left: -3px; width: 0; height: 0;
      border-left: 3px solid transparent; border-right: 3px solid transparent;
      border-top: 5px solid var(--ink); pointer-events: auto; z-index: 2;

      /* a roomier hover target than the 6px triangle (the content box sits at
         the tip, so 0,0 centres here) */
      &::before {
        content: ''; position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
        width: 18px; height: 16px;
      }
      /* the wall-clock time, above the arrow, on hover */
      &::after {
        content: attr(data-now); position: absolute; left: 0; top: -17px; transform: translateX(-50%);
        font: .68rem/1 var(--mono); color: var(--ink);
        background: var(--bg); padding: 0 .2rem; white-space: nowrap;
        opacity: 0; pointer-events: none; transition: opacity .1s;
      }
      &:hover::after { opacity: 1; }

      /* on another day it points along the row toward today, past the bar's end */
      &:is(.later, .earlier) {
        top: 1.5px; margin: 0; border: 3px solid transparent; border-inline-width: 0;   /* on the ribbon's midline */
      }
      &.later { left: 100%; margin-left: 2px; border-left: 5px solid var(--ink); }
      &.earlier { right: 100%; margin-right: 2px; border-right: 5px solid var(--ink); }
    }
  }
}
/* the cross-fade: the ghost drawing leaves as the new one arrives, so
   each keeps whatever opacity it wears (the implicit other keyframe) */
@keyframes tlin { from { opacity: 0; } }
@keyframes tlout { to { opacity: 0; } }
.tlghost {
  position: absolute; inset: 0; pointer-events: none;
  animation: tlout .3s ease-out forwards;
}
@keyframes tlhint { 50% { box-shadow: inset 0 0 0 1px var(--accent), 0 0 7px color-mix(in oklab, var(--accent) 30%, transparent); } }
/* the minute under the pointer, read off the bar as it moves: a hairline
   where the pointer is, its HH:MM over it in the same place the sweep and
   the playhead put theirs */
.tlat {
  position: absolute; width: 1px; pointer-events: none; z-index: 5;
  background: color-mix(in oklab, var(--ink) 16%, transparent);

  &::after {
    content: attr(data-at); position: absolute; left: 50%; top: -17px; transform: translateX(-50%);
    font: .68rem/1 var(--mono); color: var(--dim);
    background: var(--bg); padding: 0 .2rem; white-space: nowrap;
  }
}
/* and a faint column dropped through the document at that moment */
.tlnowline { position: absolute; pointer-events: none; z-index: 0; width: 1px; background: color-mix(in oklab, var(--ink) 12%, transparent); }
/* on the image layer, so it composes over the focused row's bg-color */
.row.tlhov, .row.tlfoc { background-image: linear-gradient(color-mix(in oklab, var(--accent) 8%, transparent), color-mix(in oklab, var(--accent) 8%, transparent)); }
/* blocks set end to end part by a hairline, the bar's and each row's echo alike */
.tlrib .tlseam { stroke: var(--bg); stroke-width: 1px; vector-effect: non-scaling-stroke; }
/* each timed row echoes the day on its own top edge: the same ribbon,
   faint, with this row's slot a thin monochrome stroke. xOf is shared
   with the bar, so the stroke lands under its place in the strip above.
   Purely visual (pointer-events: none) — the row carries hover/click. */
.rowtl {
  position: absolute; top: -1px; left: 0; right: 0; height: 4px; pointer-events: none;

  .tlrib {
    display: block; width: 100%; height: 4px; fill: var(--ink);

    &.dim { fill-opacity: .1; }
  }
  .tlself {
    position: absolute; background: var(--ink); opacity: .5;

    &.iv { top: 50%; height: 1.5px; margin-top: -.75px; min-width: 1.5px; border-radius: 1px; }
    &.pt { top: 0; height: 100%; width: .75px; margin-left: -.375px; border-radius: .5px; }
    /* a ◷ row echoes its logged interval on the lower edge, same ink texture
       as the bar: solid on a slot, dashed off it, dotted with no slot */
    &.log {
      bottom: 0; top: auto; height: 0; min-width: 1.5px; background: none; border-top: 1px solid var(--ink);

      &.off { border-top: 0; height: 1px; background: repeating-linear-gradient(90deg, var(--ink) 0 2.5px, transparent 2.5px 4px); }
      &.none { border-top-style: dotted; }
    }
  }
}
/* hover a mark or its row → a dim column in the document's background,
   the event's time slot drawn from under the bar down to its line, tying
   the two layers together. Behind the text (z 0 < .doc z 1). */
.tlcon { position: absolute; pointer-events: none; z-index: 0; background: color-mix(in oklab, var(--ink) 6%, transparent); }
} /* @layer components */