/* Page-only composition for job-detail.html.
   Shared rules live in assets/app.css, which loads first. Tokens only. */

.summary-row { --od-gap: var(--s-4); flex-wrap: wrap; }
.summary-text { flex: 1 1 240px; --od-gap: var(--s-4); }
.summary-aside { flex: 0 0 200px; --od-gap: var(--s-3); }

.desc-body { display: grid; gap: var(--s-4); }
.bullet-list { list-style: disc; padding-left: var(--s-6); }
.bullet-list > li { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-muted); margin-bottom: var(--s-1); }
.bullet-list > li:last-child { margin-bottom: 0; }

.stage-col-head { --od-gap: var(--s-2); }
.col-empty { padding: var(--s-2); }

/* <1024px the board is a rail of columns inside its own scroller, so the
   page itself never scrolls sideways; <768px it stacks. */
@media (max-width: 1023px) {
  .stage-board {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding-bottom: var(--s-2);
  }
  .stage-board > .stage-col { flex: 0 0 248px; scroll-snap-align: start; }
}
@media (max-width: 767px) {
  .stage-board { display: grid; grid-template-columns: minmax(0, 1fr); overflow-x: visible; padding-bottom: 0; }
  .stage-board > .stage-col { flex: initial; }
}

/* ---------------------------------------------------------------------------
   Activity log
   The card reads top to bottom — history first, composer last — so the write
   action sits where the eye already ends up. The two pickers share one row
   and fall to their own lines inside the 340px side column.
   --------------------------------------------------------------------------- */
.timeline-head { --od-gap: var(--s-2); flex-wrap: wrap; }
.timeline-meta {
  display: block;
  font-size: var(--fs-micro); line-height: var(--lh-micro);
  color: var(--ink-faint);
}

.log-form { display: grid; gap: var(--s-3); }
.log-row { --od-gap: var(--s-3); flex-wrap: wrap; }
.log-row > .field { flex: 1 1 132px; }
.log-note { min-height: 72px; }
.log-foot { --od-gap: var(--s-3); flex-wrap: wrap; }

/* a freshly logged entry announces itself once, then settles */
.timeline > li.is-logged::before { background: var(--primary); }
@media (prefers-reduced-motion: no-preference) {
  .timeline > li.is-logged { animation: log-in 220ms ease-out; }
  @keyframes log-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
  }
}