/* hover dates: "from 2022" beside a row, only while the row is hovered or focused */
.since {
  order: 1;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  color: var(--gray-1000);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 150ms ease-out, transform 150ms ease-out;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .branch-title:hover .since { opacity: 1; transform: none; }
}
.branch-title:focus-visible .since,
.branch-title.show-since .since { opacity: 1; transform: none; }

/* shared pieces */
.cmp { --cmp-ease: cubic-bezier(0.23, 1, 0.32, 1); }
.cmp button, .cmp a, .cmp input { touch-action: manipulation; }
.cmp .prompt { margin: 12px 0 0; }
@media (min-width: 1024px) { .cmp .prompt { margin-inline: 0; padding-inline-start: 16px; } }
.cmp .win { box-shadow: 0 0 0 1px rgb(var(--shadow) / 0.08), 0 1px 3px rgb(var(--shadow) / 0.05); }
.cmp .win-chrome { padding: 8px 10px; gap: 8px; }
.cmp .win-dot { width: 10px; height: 10px; }
.cmp .win-url { padding: 3px 10px; font-size: 12px; }
.shot-view { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--gray-200); }
.shot-view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.shot-view iframe {
  position: absolute; top: 0; left: 0;
  width: 1280px; height: 800px; max-width: none; border: 0;
  transform: scale(var(--s, 0.35)); transform-origin: 0 0;
  opacity: 0; transition: opacity 200ms ease-out;
}
.shot-view iframe.is-ready { opacity: 1; }
.cmp-name { color: var(--gray-1200); font-weight: 500; }
.cmp-desc { color: var(--gray-1100); }
.cmp-meta { font-family: var(--mono); font-size: 13px; color: var(--gray-1000); font-variant-numeric: tabular-nums; }

/* hosts sit in the tree's indent; at desktop they take the course's 32px bleed on the right */
.builds-host, .portfolio-host { margin: 12px 0 8px; }
@media (min-width: 1024px) { .builds-host, .portfolio-host { margin-right: -32px; } }

/* rail: the devices timeline. a big faded word behind, the item in a frame,
   a ruler whose ticks swell toward the selected stop */
.rail-cmp { position: relative; }
.rail-stage { position: relative; display: grid; justify-items: center; padding-top: 60px; }
.rail-big {
  position: absolute; top: 0; left: 0; right: 0;
  font-size: clamp(56px, 12vw, 88px); font-weight: 600; letter-spacing: -0.05em; line-height: 1;
  text-align: center; white-space: nowrap; overflow: hidden;
  color: var(--gray-400); user-select: none; pointer-events: none;
}
.rail-frame { position: relative; width: 100%; }
.rail-stage .win.is-pending .shot-view img { opacity: 0.6; }
.rail-id { width: 100%; min-height: 48px; margin-top: 12px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.rail-id a { font-weight: 500; }
.rail-ruler {
  position: relative; height: 72px; margin-top: 8px;
  touch-action: none; cursor: ew-resize; user-select: none; border-radius: 8px;
}
.rail-ruler.is-dragging { cursor: grabbing; }
.rail-ticks { position: absolute; inset: 0 8px; display: flex; align-items: flex-end; justify-content: space-between; pointer-events: none; }
.rail-ticks i { width: 2px; height: 12px; border-radius: 1px; background: var(--gray-1200); opacity: 0.16; }
.rail-ruler input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; touch-action: none; outline: none; }
.rail-stage.no-big { padding-top: 0; }
.rail-stops { position: relative; height: 44px; margin: 0 8px; }
.rail-stops button {
  position: absolute; top: 0; transform: translateX(-50%);
  min-height: 44px; padding: 0 2px; border: 0; background: none;
  font: 11px/1 var(--mono); color: var(--gray-1000); white-space: nowrap; cursor: pointer;
  transition: color 150ms ease-out;
}
.rail-stops button[aria-current="true"] { color: var(--gray-1200); }
@media (hover: hover) and (pointer: fine) { .rail-stops button:hover { color: var(--gray-1200); } }
.rail-stops button:focus-visible { outline: 2px solid var(--gray-1200); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 600px) { .rail-cmp:not(.is-vertical) .rail-stops { display: none; } }

/* vertical rail: the ruler runs down the left, dates beside it, the frame on the right */
.rail-cmp.is-vertical .rail-grid { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: minmax(320px, auto); gap: 16px; }
.rail-cmp.is-vertical .rail-stage { padding-top: 0; align-content: start; grid-template-columns: minmax(0, 1fr); }
.rail-frame { min-width: 0; }
.rail-cmp.is-vertical .rail-side { position: relative; display: grid; }
.rail-cmp.is-vertical .rail-ruler { height: auto; margin: 0; cursor: ns-resize; border-radius: 0; }
.rail-cmp.is-vertical .rail-ruler.is-dragging { cursor: grabbing; }
.rail-cmp.is-vertical .rail-ticks { inset: 8px 0; flex-direction: column; align-items: flex-start; }
.rail-cmp.is-vertical .rail-ticks i { width: 8px; height: 2px; }
.rail-cmp.is-vertical .rail-stops { height: auto; margin: 8px 0; }
.rail-cmp.is-vertical .rail-stops button { left: 0; transform: translateY(-50%); min-height: 32px; padding: 0 4px; }
.rail-cmp.is-vertical .rail-stops button::before { content: ""; position: absolute; inset: -6px 0; }
.rail-cmp.is-vertical .rail-id { margin-top: 10px; }
@media (max-width: 480px) {
  .rail-cmp.is-vertical .rail-grid { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
}

/* shelf: every build as a small window; one opens across the row */
.shelf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
.shelf-item { min-width: 0; }
.shelf-card {
  display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer; border-radius: 12px;
  transition: transform 150ms ease-out;
}
.shelf-card:active { transform: scale(0.98); }
.shelf-card:focus-visible { outline: 2px solid var(--gray-1200); outline-offset: 3px; }
.shelf-card .win { transition: box-shadow 150ms ease-out; }
@media (hover: hover) and (pointer: fine) {
  .shelf-card:hover .win { box-shadow: 0 0 0 1px rgb(var(--shadow) / 0.12), 0 1px 3px rgb(var(--shadow) / 0.07), 0 6px 14px -6px rgb(var(--shadow) / 0.12); }
}
.shelf-label { display: block; margin-top: 8px; font-size: 14px; line-height: 1.4; }
.shelf-label .cmp-desc { display: block; }
.shelf-item.is-open { grid-column: 1 / -1; }
.shelf-open { display: none; }
.shelf-item.is-open .shelf-card { display: none; }
.shelf-item.is-open .shelf-open { display: block; }
.shelf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 10px; }
.shelf-close {
  min-height: 32px; padding: 0 10px; border: 0; border-radius: 999px; background: var(--gray-200);
  font: 13px/1 var(--mono); color: var(--gray-1100); cursor: pointer; transition: background-color 150ms ease-out, color 150ms ease-out, transform 150ms ease-out;
}
@media (hover: hover) and (pointer: fine) { .shelf-close:hover { background: var(--gray-300); color: var(--gray-1200); } }
.shelf-close { position: relative; }
.shelf-close::before { content: ""; position: absolute; inset: -6px; }
.shelf-close:active { transform: scale(0.96); }
.shelf-close:focus-visible { outline: 2px solid var(--gray-1200); outline-offset: 2px; }
@media (max-width: 480px) { .shelf { grid-template-columns: minmax(0, 1fr); } }

/* list: the tree rows as they are; hover floats a window in the right margin,
   the toggle opens the window and the prompt under the row */
.list-cmp { position: relative; }
.list-cmp.tree { margin-top: 0; }
.list-row { display: flex; align-items: baseline; gap: 8px; }
.list-row .cmp-desc { min-width: 0; }
.list-toggle {
  flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; margin: -4px 0; padding: 0;
  border: 0; border-radius: 6px; background: none; color: var(--gray-1000); font: 13px/1 var(--mono); cursor: pointer;
  position: relative; transition: background-color 150ms ease-out, color 150ms ease-out;
}
.list-toggle::before { content: ""; position: absolute; inset: -10px; }
@media (hover: hover) and (pointer: fine) { .list-toggle:hover { background: var(--gray-300); color: var(--gray-1200); } }
.list-toggle:focus-visible { outline: 2px solid var(--gray-1200); outline-offset: 2px; }
.list-more { display: none; padding: 8px 0 12px; }
.list-cmp li.is-open .list-more { display: block; }
.list-peek {
  position: absolute; z-index: 5; width: 300px;
  opacity: 0; transform: translateX(-6px) scale(0.98); transform-origin: 0 50%;
  transition: opacity 150ms ease-out, transform 150ms ease-out, top 180ms var(--cmp-ease, ease-out);
  pointer-events: none;
}
.list-peek.is-on { opacity: 1; transform: none; }
.list-peek .win { box-shadow: 0 0 0 1px rgb(var(--shadow) / 0.08), 0 2px 6px rgb(var(--shadow) / 0.06), 0 12px 28px -12px rgb(var(--shadow) / 0.2); }
@media (max-width: 1279px), (hover: none) { .list-peek { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .since, .list-peek, .shelf-card, .shelf-card .win, .shot-view iframe { transition: none; }
}

/* the prototype picker: verbatim from emil-prototype PICKER.md */
.proto-picker {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2147483647;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.82);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 8px 24px rgba(0, 0, 0, 0.24),
    0 2px 6px rgba(0, 0, 0, 0.12);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
}
.proto-picker-highlight {
  position: absolute;
  top: 4px;
  left: 0;
  height: 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  will-change: transform;
}
.proto-picker[data-ready] .proto-picker-highlight {
  transition:
    transform 250ms cubic-bezier(0.23, 1, 0.32, 1),
    width 250ms cubic-bezier(0.23, 1, 0.32, 1);
}
@media (prefers-reduced-motion: reduce) {
  .proto-picker[data-ready] .proto-picker-highlight { transition: none; }
}
.proto-picker-item {
  position: relative;
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  font: inherit;
  cursor: pointer;
  transition: color 150ms ease-out;
}
.proto-picker-item:hover { color: rgba(255, 255, 255, 0.85); }
.proto-picker-item:active { transform: scale(0.97); }
.proto-picker-item:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.4); outline-offset: 2px; }
.proto-picker-item[data-active] { color: #fff; }
.proto-picker-divider { width: 1px; height: 16px; margin: 0 4px; background: rgba(255, 255, 255, 0.12); }
.proto-picker-replay { padding: 0 10px; font-size: 14px; }
.proto-picker[data-position="top"] { bottom: auto; top: 24px; }