/* timeline-cards.css — Cards view of the timeline block
   (spec docs/superpowers/specs/2026-09-30-timeline-cards-design.md §4b day boxes).
   Sizes MUST match panels/blocks/timeline-cards-layout.js (checked by the "CSS sync"
   test in tests/unit/frontend/timeline-cards-layout.test.js):
     .tl-card width 170px                      = BOX_W
     .tl-card-single height 48px               = BOX_H1
     .tl-card border 2px + .tl-card-multi padding 4px (top + bottom) = BOX_CHROME 12
     .tl-card-head height 16px                 = BOX_HEAD_H
     .tl-card-line height 20px                 = BOX_LINE_H
   The box height is also written inline by timeline-cards-html.js (boxHeight).

   Colours (spec §4b "Box colour"; rules checked by
   tests/unit/frontend/timeline-system-colours.test.js):
     .tl-card (base, = a multi box) — neutral: border --color-border-strong, fill
                   --color-bg-raised (a multi box can mix body systems); each line
                   = 16% of its own --dot-color over --color-bg-raised, plus the
                   full-colour dot.
     .tl-card-single — border = --card-color (the event's colour, written inline
                   on single boxes only), fill = 16% of it over --color-bg-raised.
   --card-color is used ONLY inside a single box (.tl-card-single, .tl-card-icon):
   a multi box does not set it, and var() of an unset property would void the
   whole declaration (e.g. the border shorthand → no border).
   Tints are mixed over the theme's raised background, so they follow the
   light and the dark theme.
   Text on a tint uses --color-text, never --color-text-muted (muted text on a
   16% tint is below WCAG AA 4.5:1 for several system colours in both themes).
   Muted text stays on the untinted box fill only (.tl-card-head). Checked for
   every human body-system colour, both themes, by
   tests/unit/frontend/timeline-card-contrast.test.js. */

.tl-view-switch {
  display: inline-flex;
  margin-left: 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
/* Dots | Cards switch in the block header (FINDINGS A245; contrast checked, all four theme
   declarations, by tests/unit/frontend/timeline-card-contrast.test.js). Inactive text is
   --color-text: muted text is below 4.5:1 on the header fill (light) and on the hover fill
   (dark). Active text is --white, which is an alias of --color-bg-raised (tokens.css): white
   on the dark green in the light theme, dark slate on the bright green in the dark theme. */
.tl-view-btn {
  padding: 3px 10px;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-size: 0.78rem;
  cursor: pointer;
}
.tl-view-btn.active {
  background: var(--color-primary);
  color: var(--white);
}

.tl-cards {
  position: relative;
}
.tl-cards-labels {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--tl-track-gutter, 104px);
}
.tl-cards-label {
  position: absolute;
  left: 0;
  width: calc(var(--tl-track-gutter, 104px) - 10px);
  display: flex;
  align-items: center;
  font-size: 0.72rem;
  line-height: 1.15;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.tl-cards-canvas {
  position: absolute;
  left: var(--tl-track-gutter, 104px);
  right: 0;
  top: 0;
  bottom: 0;
}
.tl-cards-canvas .timeline-today-line { top: -60px; bottom: 0; }   /* joins the axis, stops at the last row (not across the legend) */
.tl-cards-row {
  position: absolute;
  left: 0;
  right: 0;
  border-bottom: 1px dashed var(--color-border);
}

/* .tl-card = one day box (row, date); .tl-card-event = one event's click target */
.tl-card {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  width: 170px;
  overflow: hidden;
  border: 2px solid var(--color-border-strong);
  border-radius: 10px;
  background: var(--color-bg-raised);
  box-shadow: var(--shadow-sm);
}
.tl-card:hover,
.tl-card:focus-within { z-index: 4; box-shadow: var(--shadow-md); }   /* a hovered / focused box rises above the arrows (spec §6) */
.tl-card-clickable { cursor: pointer; }   /* only when the block wires click-to-section */

/* Compact single-event box: symbol, name, date (description in the tooltip).
   Border and light fill in the event's colour. */
.tl-card-single {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-color: var(--card-color);
  background: color-mix(in srgb, var(--card-color) 16%, var(--color-bg-raised));
}
.tl-card-icon {
  flex: 0 0 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--card-color) 22%, transparent);
  font-size: 16px;
}
.tl-card-body { min-width: 0; display: flex; flex-direction: column; }
.tl-card-title {
  overflow: hidden;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--color-text);
}
.tl-card-date { font-size: 0.72rem; line-height: 1.3; color: var(--color-text-muted); }
.tl-card-single .tl-card-date { color: var(--color-text); }   /* on the 16% tint: muted text is below 4.5:1 */

/* Multi-event box: date header, then one line per event (colour dot, symbol, name).
   The box keeps the neutral .tl-card border and fill; each line is tinted. */
.tl-card-multi {
  padding: 4px 6px;
}
.tl-card-head {
  height: 16px;
  font-size: 0.7rem;
  line-height: 16px;
  color: var(--color-text-muted);
}
.tl-card-line {
  height: 20px;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 0 4px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--dot-color) 16%, var(--color-bg-raised));
  box-shadow: inset 0 0 0 1px var(--color-bg-raised);   /* 2 px gap between neighbouring tinted lines, no layout change */
}
.tl-card-line.tl-card-clickable:hover { background: color-mix(in srgb, var(--dot-color) 30%, var(--color-bg-raised)); }
.tl-card-dot {
  flex: 0 0 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dot-color);
}
.tl-card-line-icon { flex: 0 0 auto; font-size: 13px; line-height: 1; }
.tl-card-line .tl-card-title { min-width: 0; font-size: 0.75rem; }

.tl-card-chip {
  position: absolute;
  z-index: 2;
  width: 130px;
  height: 22px;
  border: 1px dashed var(--color-border-strong);
  border-radius: 11px;
  background: var(--color-bg-raised);
  color: var(--color-text-muted);
  font-size: 0.72rem;
  cursor: zoom-in;
}

.tl-view-btn:not(.active):hover,
.tl-card-chip:hover { background: var(--color-bg-hover); }
.tl-card-chip:hover { color: var(--color-text); }   /* muted text on the hover fill is 4.04:1 in the dark theme (< 4.5) */
.tl-card-clickable:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }   /* inside the box (overflow hidden) */
.tl-card-chip:focus-visible,
.tl-view-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.tl-cards-arrows {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;   /* above the cards (z 2), below a hovered card (z 4) — spec §6 */
  overflow: visible;
  pointer-events: none;
}
.tl-cards-arrows path.tl-arrow { fill: none; stroke-width: 2; }

.tl-legend-line {
  display: inline-block;
  width: 16px;
  height: 3px;
  margin-right: 6px;
  border-radius: 2px;
  vertical-align: middle;
}