/* Shared service history: compact bike view and complete service book. */
:root {
  --timeline-line: var(--color-border, #dde4e5);
  --timeline-marker: var(--color-primary, #245b66);
  --timeline-surface: var(--color-surface, #fff);
}
.service-book { max-width: 960px; margin-inline: auto; }
.service-timeline-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem; }
.service-timeline-toolbar > .flex-grow-1 { min-width: min(100%, 230px); }
.service-timeline-status { color: var(--color-text-muted); margin-block: 1rem; font-size: .9rem; }
.service-timeline-list { list-style: none; padding: 0; margin: 1.5rem 0; }
.service-timeline-item { display: grid; grid-template-columns: 115px minmax(0, 1fr); gap: 2rem; position: relative; padding-bottom: 1.5rem; }
.service-timeline-item[hidden], .service-timeline [hidden] { display: none !important; }
.service-timeline-item::before { content: ''; position: absolute; left: 130px; top: 1rem; bottom: -1rem; width: 2px; background: var(--timeline-line); }
.service-timeline-item:last-child::before { bottom: 1.5rem; }
.service-timeline-date { padding-top: .85rem; font-size: .9rem; font-weight: 600; color: var(--color-primary); }
.service-timeline-date::after { content: ''; position: absolute; left: 125px; top: 1rem; width: 12px; height: 12px; border-radius: 50%; background: var(--timeline-marker); border: 3px solid var(--timeline-surface); box-shadow: 0 0 0 2px var(--timeline-marker); }
.service-timeline-entry { min-width: 0; padding: 1.1rem 1.25rem; background: var(--timeline-surface); border: 1px solid var(--timeline-line); border-radius: var(--radius-panel); box-shadow: 0 3px 12px rgb(21 35 43 / 4%); overflow-wrap: anywhere; }
.service-timeline-entry h3 { font-size: 1.05rem; margin: 0 0 .5rem; color: var(--color-ink); }
.service-timeline-cost { color: var(--color-text-muted); font-size: .9rem; margin-bottom: .65rem; }
.service-timeline-entry summary { cursor: pointer; color: var(--color-primary); font-weight: 600; padding-block: .35rem; }
.service-timeline-entry summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; border-radius: 3px; }
.service-timeline-content { padding-top: .75rem; color: var(--color-text); }
.service-timeline-actions { display: flex; gap: .65rem; flex-wrap: wrap; margin-top: 1rem; }
.service-timeline-empty { color: var(--color-text-muted); }
@media (max-width: 575.98px) {
  .service-timeline-item { grid-template-columns: minmax(0, 1fr); gap: .6rem; padding-left: 1.5rem; }
  .service-timeline-item::before { left: 5px; }
  .service-timeline-date::after { left: 0; }
  .service-timeline-entry { padding: 1rem; }
  .service-timeline-toolbar { align-items: stretch; }
  .service-timeline-toolbar > .flex-grow-1 { flex-basis: 100%; }
}