/**
 * Zeitachse der Projekte (AP-37): echte Tabelle, erste Spalte klebt links, Wochenraster per CSS-Grid.
 * 15 Wochen (WEEK_COUNT in projects/timeline.py). Positionen kommen als data-Attribute, nicht als
 * Inline-Stil: data-col-start/-end (Balken), data-col (Marke), data-week/-day (Heute-Linie).
 */
@layer components {
  .timeline-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-6);
  }

  .timeline-controls__archived {
    display: inline-flex;
    align-items: center;
    min-block-size: 1.75rem;
    color: var(--theme-meta-color);
    font-size: var(--font-size-label);
  }

  .timeline-wrap {
    position: relative;
    overflow-x: auto;
    border: var(--border-width-thin) solid var(--theme-card-border);
    border-radius: var(--theme-card-radius);
    background-color: var(--theme-card-bg);
  }

  .timeline {
    --timeline-name-width: 12rem;
    --timeline-week-min: 4rem;
    inline-size: 100%;
    min-inline-size: calc(var(--timeline-name-width) + 15 * var(--timeline-week-min));
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--font-size-label);
  }

  .timeline__corner,
  .timeline__name {
    position: sticky;
    inset-inline-start: 0;
    z-index: 2;
    inline-size: var(--timeline-name-width);
    padding: var(--space-3) var(--space-4);
    border-inline-end: var(--border-width-thin) solid var(--theme-card-border);
    background-color: var(--theme-card-bg);
    text-align: start;
  }

  .timeline__corner,
  .timeline__weeks-head {
    border-block-end: var(--border-width-thin) solid var(--theme-card-border);
    color: var(--theme-meta-color);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
  }

  .timeline__weeks-head {
    padding: 0;
    text-align: start;
  }

  .timeline__weeks,
  .timeline__grid {
    display: grid;
    grid-template-columns: repeat(15, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .timeline__week {
    display: grid;
    gap: 0;
    padding: var(--space-2) var(--space-2);
    border-inline-start: var(--border-width-thin) solid transparent;
    font-weight: var(--font-weight-regular);
  }

  .timeline__kw {
    color: var(--theme-heading-color);
    font-weight: var(--font-weight-medium);
  }

  .timeline__week--month {
    border-inline-start-color: var(--border-strong);
  }

  .timeline__week--current {
    background-color: var(--surface-accent);
  }

  .timeline__group {
    padding: var(--space-2) 0;
    background-color: var(--surface-hover);
    color: var(--theme-heading-color);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    text-align: start;
  }

  .timeline__group-label {
    position: sticky;
    inset-inline-start: var(--space-4);
    display: inline-block;
  }

  .timeline__row > * {
    border-block-end: var(--border-width-thin) solid var(--border-subtle);
  }

  .timeline__name {
    vertical-align: top;
  }

  .timeline__link {
    display: block;
    color: var(--theme-heading-color);
    font-weight: var(--font-weight-medium);
    overflow-wrap: anywhere;
  }

  .timeline__name .u-meta,
  .timeline__set-period {
    display: block;
  }

  .timeline__set-period {
    margin-block-start: var(--space-1);
  }

  .timeline__track {
    position: relative;
    padding: var(--space-2) 0;
    background-image: repeating-linear-gradient(
      to right,
      transparent 0,
      transparent calc(100% / 15 - 1px),
      var(--border-subtle) calc(100% / 15 - 1px),
      var(--border-subtle) calc(100% / 15)
    );
  }

  .timeline__grid {
    position: relative;
    z-index: 1;
    row-gap: var(--space-1);
    align-items: center;
    min-block-size: 1.5rem;
  }

  .timeline__today {
    position: absolute;
    inset-block: 0;
    inset-inline: 0;
    display: grid;
    grid-template-columns: repeat(15, minmax(0, 1fr));
    pointer-events: none;
  }

  .timeline__today::before {
    content: "";
    grid-row: 1;
    inline-size: 2px;
    background-color: var(--border-accent);
  }

  .timeline__bar {
    grid-row: 1;
    display: flex;
    align-items: center;
    min-inline-size: 0;
    block-size: 1.5rem;
    padding-inline: var(--space-2);
    border-radius: var(--radius-sm);
    background-color: var(--avatar-1-bg);
    color: var(--avatar-text);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
  }

  .timeline__bar--internal {
    background-color: var(--avatar-5-bg);
  }

  .timeline__bar--customer {
    background-color: var(--avatar-1-bg);
  }

  .timeline__bar--game {
    background-color: var(--avatar-4-bg);
  }

  .timeline__bar--cut-start {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
  }

  .timeline__bar--cut-end {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
  }

  .timeline__bar--cut-start::before,
  .timeline__bar--cut-end::after {
    flex: none;
    content: "‹" / "";
    font-size: var(--font-size-body);
    line-height: 1;
  }

  .timeline__bar--cut-end::after {
    content: "›" / "";
    margin-inline-start: auto;
  }

  .timeline__bar--cut-start::before {
    margin-inline-end: var(--space-1);
  }

  .timeline__bar-text {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .timeline__outside {
    grid-row: 1;
    grid-column: 1 / -1;
    margin: 0;
    padding-inline: var(--space-3);
  }

  .timeline__mark {
    position: relative;
    grid-row: 2;
    justify-self: center;
    min-inline-size: 1.5rem;
    block-size: 1.5rem;
    padding-inline: var(--space-2);
    border: var(--border-width-thin) solid var(--border-strong);
    border-radius: var(--radius-md);
    background-color: var(--surface-highlight);
    color: var(--theme-heading-color);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    line-height: calc(1.5rem - 2px);
    text-align: center;
    text-decoration: none;
  }

  .timeline__mark::after {
    content: "";
    position: absolute;
    inset: -0.625rem -0.25rem;
  }

  @media (hover: hover) and (pointer: fine) {
    .timeline__mark:hover {
      background-color: var(--surface-selected);
    }
  }

  .timeline__mark--overdue {
    border-color: var(--border-danger);
    background-color: var(--status-overdue-bg);
    color: var(--status-overdue-text);
  }

  @media (max-width: 48.75em) {
    .timeline {
      --timeline-name-width: 8.5rem;
    }

    .timeline__corner,
    .timeline__name {
      padding-inline: var(--space-3);
    }

    .timeline-controls__archived {
      min-block-size: 2.75rem;
    }
  }

  .timeline__bar[data-col-start="1"] { grid-column-start: 1; }
  .timeline__bar[data-col-start="2"] { grid-column-start: 2; }
  .timeline__bar[data-col-start="3"] { grid-column-start: 3; }
  .timeline__bar[data-col-start="4"] { grid-column-start: 4; }
  .timeline__bar[data-col-start="5"] { grid-column-start: 5; }
  .timeline__bar[data-col-start="6"] { grid-column-start: 6; }
  .timeline__bar[data-col-start="7"] { grid-column-start: 7; }
  .timeline__bar[data-col-start="8"] { grid-column-start: 8; }
  .timeline__bar[data-col-start="9"] { grid-column-start: 9; }
  .timeline__bar[data-col-start="10"] { grid-column-start: 10; }
  .timeline__bar[data-col-start="11"] { grid-column-start: 11; }
  .timeline__bar[data-col-start="12"] { grid-column-start: 12; }
  .timeline__bar[data-col-start="13"] { grid-column-start: 13; }
  .timeline__bar[data-col-start="14"] { grid-column-start: 14; }
  .timeline__bar[data-col-start="15"] { grid-column-start: 15; }
  .timeline__bar[data-col-start="16"] { grid-column-start: 16; }
  .timeline__bar[data-col-end="2"] { grid-column-end: 2; }
  .timeline__bar[data-col-end="3"] { grid-column-end: 3; }
  .timeline__bar[data-col-end="4"] { grid-column-end: 4; }
  .timeline__bar[data-col-end="5"] { grid-column-end: 5; }
  .timeline__bar[data-col-end="6"] { grid-column-end: 6; }
  .timeline__bar[data-col-end="7"] { grid-column-end: 7; }
  .timeline__bar[data-col-end="8"] { grid-column-end: 8; }
  .timeline__bar[data-col-end="9"] { grid-column-end: 9; }
  .timeline__bar[data-col-end="10"] { grid-column-end: 10; }
  .timeline__bar[data-col-end="11"] { grid-column-end: 11; }
  .timeline__bar[data-col-end="12"] { grid-column-end: 12; }
  .timeline__bar[data-col-end="13"] { grid-column-end: 13; }
  .timeline__bar[data-col-end="14"] { grid-column-end: 14; }
  .timeline__bar[data-col-end="15"] { grid-column-end: 15; }
  .timeline__bar[data-col-end="16"] { grid-column-end: 16; }
  .timeline__mark[data-col="1"] { grid-column: 1; }
  .timeline__mark[data-col="2"] { grid-column: 2; }
  .timeline__mark[data-col="3"] { grid-column: 3; }
  .timeline__mark[data-col="4"] { grid-column: 4; }
  .timeline__mark[data-col="5"] { grid-column: 5; }
  .timeline__mark[data-col="6"] { grid-column: 6; }
  .timeline__mark[data-col="7"] { grid-column: 7; }
  .timeline__mark[data-col="8"] { grid-column: 8; }
  .timeline__mark[data-col="9"] { grid-column: 9; }
  .timeline__mark[data-col="10"] { grid-column: 10; }
  .timeline__mark[data-col="11"] { grid-column: 11; }
  .timeline__mark[data-col="12"] { grid-column: 12; }
  .timeline__mark[data-col="13"] { grid-column: 13; }
  .timeline__mark[data-col="14"] { grid-column: 14; }
  .timeline__mark[data-col="15"] { grid-column: 15; }
  .timeline__today[data-week="1"]::before { grid-column: 1; }
  .timeline__today[data-week="2"]::before { grid-column: 2; }
  .timeline__today[data-week="3"]::before { grid-column: 3; }
  .timeline__today[data-week="4"]::before { grid-column: 4; }
  .timeline__today[data-week="5"]::before { grid-column: 5; }
  .timeline__today[data-week="6"]::before { grid-column: 6; }
  .timeline__today[data-week="7"]::before { grid-column: 7; }
  .timeline__today[data-week="8"]::before { grid-column: 8; }
  .timeline__today[data-week="9"]::before { grid-column: 9; }
  .timeline__today[data-week="10"]::before { grid-column: 10; }
  .timeline__today[data-week="11"]::before { grid-column: 11; }
  .timeline__today[data-week="12"]::before { grid-column: 12; }
  .timeline__today[data-week="13"]::before { grid-column: 13; }
  .timeline__today[data-week="14"]::before { grid-column: 14; }
  .timeline__today[data-week="15"]::before { grid-column: 15; }
  .timeline__today[data-day="0"]::before { margin-inline-start: calc(0 / 7 * 100%); }
  .timeline__today[data-day="1"]::before { margin-inline-start: 1/7*100%; }
  .timeline__today[data-day="2"]::before { margin-inline-start: 2/7*100%; }
  .timeline__today[data-day="3"]::before { margin-inline-start: 3/7*100%; }
  .timeline__today[data-day="4"]::before { margin-inline-start: 4/7*100%; }
  .timeline__today[data-day="5"]::before { margin-inline-start: 5/7*100%; }
  .timeline__today[data-day="6"]::before { margin-inline-start: 6/7*100%; }
}