/*
  /migrations/ · the rebuild figure (rebuild.js; Tong's review 6.2 and 6.7): four bands, the source system (its list),
  one drawing of the two parts (the source, the records crossing, the destination building) and the destination system
  (its list, ticked), and the seven systems as a picker under them. Every rule is the grey hairline; ink and pink are
  for type and drawing. Scoped to .rb.
*/
.rb { margin: 0; }
/* four bands, left to right (Tong's review 6.7): the source system · its part · the rebuilt part · the destination
   system; the two parts share one drawing */
.rb-frame { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 7.2fr) minmax(0, 2.4fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rb-stage {
  position: relative; min-width: 0; height: clamp(440px, min(31vw, calc(100svh - 330px)), 480px);   /* the two parts are bound by the width here; at least the bands' height with six features and a long STEP name on two lines (the Pi 5 enclosure's), so a swap never moves the page */
  background-image: linear-gradient(var(--rb-grid) 1px, transparent 1px), linear-gradient(90deg, var(--rb-grid) 1px, transparent 1px);
  background-size: 24px 24px; background-position: -1px -1px;
}
/* the grid paper: light as it was (the line grey at 70%, today's #f0f0f0 to the level); dark, the site's minor grid */
.rb { --rb-grid: color-mix(in srgb, var(--line) 70%, transparent); }
:root[data-theme="dark"] .rb { --rb-grid: var(--grid-minor); }
.rb-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* ---------- the two systems' bands: the same build, mirrored round the drawing */
.rb-band { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 18px 24px 20px; }
.rb-src { padding-left: 0; border-right: 1px solid var(--line); }
.rb-dst { padding-right: 0; border-left: 1px solid var(--line); }
.rb-sys, .rb-head, .rb-feats, .rb-meta { margin: 0; }
.rb-sys { display: flex; align-items: center; gap: 10px; min-height: 26px; font-family: var(--font-display); font-size: 22px; line-height: 1.1; letter-spacing: -.02em; color: var(--ink); }
.rb-sys img { width: 22px; height: 22px; object-fit: contain; flex: none; }
.rb-sys span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the destination's list head, where that system has one (Onshape's count, CATIA's body, NX's history) */
.rb-head { min-height: 18px; margin-bottom: -10px; font-family: var(--font-mono); font-size: 11px; line-height: 18px; letter-spacing: .02em; color: var(--muted); }
.rb-src .rb-sys { margin-bottom: 24px; }   /* the source has no list head: its rows start level with the destination's */
/* the parts take turns (rebuild.js PARTS) and have five or six features: the lists keep the most rows' height
   (--rb-rows, set by rebuild.js; a row is 18 + 2 × 7 + its rule), so nothing under them moves at a swap */
.rb-feats { padding: 0; list-style: none; border-top: 1px solid var(--line); min-height: calc(var(--rb-rows, 6) * 33px); }
.rb-meta { display: grid; margin-top: auto; border-top: 1px solid var(--line); }
.rb-feats li, .rb-meta > div {
  display: grid; align-items: baseline; column-gap: 10px; min-height: 18px; padding: 7px 0; border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 12px; line-height: 18px; letter-spacing: .02em; color: var(--muted);
}
.rb-src .rb-feats li { grid-template-columns: 22px minmax(0, 1fr) auto; }
.rb-dst .rb-feats li { grid-template-columns: 12px 22px minmax(0, 1fr); }
.rb-src .rb-meta > div { grid-template-columns: auto minmax(0, 1fr); }
.rb-dst .rb-meta > div { grid-template-columns: 12px auto minmax(0, 1fr); }
.rb-n { color: var(--muted); transition: color .3s ease; }
.rb-f { color: var(--ink); text-transform: uppercase; letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-dst .rb-f { text-transform: none; letter-spacing: .02em; }   /* the destination's own names, as it spells them */
.rb-meta dt { color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.rb-v { text-align: right; white-space: nowrap; }
.rb-meta dd { margin: 0; color: var(--ink); text-align: right; overflow-wrap: anywhere; }
/* the source: the row being read, its number pink */
.rb-src [data-s="read"] :is(.rb-n, dt) { color: var(--accent); }
/* the destination: faint until its record lands; pink while it's built; then ticked, in ink */
.rb-dst :is(li, .rb-meta > div):is([data-s=""], [data-s="idle"], :not([data-s])) :is(.rb-f, .rb-n, dt) { color: color-mix(in srgb, var(--muted) 50%, transparent); }
.rb-dst [data-s="build"] :is(.rb-n, .rb-f, dt) { color: var(--accent); }
.rb-box { position: relative; top: 2px; display: inline-block; width: 12px; height: 12px; box-sizing: border-box; border: 1px solid var(--line); transition: border-color .3s ease; }
.rb-box svg { position: absolute; inset: -1px; width: 12px; height: 12px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset .35s cubic-bezier(.22, 1, .36, 1); }
.rb-dst [data-s="build"] .rb-box { border-color: var(--accent); }
.rb-dst [data-s="done"] .rb-box { border-color: var(--ink); }
.rb-dst [data-s="done"] .rb-box svg { stroke-dashoffset: 0; }

/* ---------- the picker: the seven systems; From marked in ink, To in pink, each labelled */
.rb-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.rb-row li + li { border-left: 1px solid var(--line); }
.rb-row button {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 52px; padding: 14px 12px 14px 12px;
  border: 0; background: none; cursor: pointer; text-align: left;
  font-family: var(--font-mono); font-size: 12px; line-height: 18px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
  transition: color .3s ease, background-color .2s ease;
}
.rb-row li:first-child button { padding-left: 0; }
.rb-row img { width: 24px; height: 24px; object-fit: contain; flex: none; }
.rb-row button > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-row button::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.22, 1, .36, 1), background-color .2s ease; }
.rb-row button::after { position: absolute; right: 10px; top: 4px; font-size: 10px; line-height: 14px; color: var(--muted); }
.rb-row button:is([data-role="from"], [data-role="to"]), .rb-row button:hover { color: var(--ink); }
.rb-row button[data-role="from"]::before { transform: scaleX(1); }
.rb-row button[data-role="to"]::before { background: var(--accent); transform: scaleX(1); }
.rb-row button[data-role="from"]::after { content: 'From'; }
.rb-row button[data-role="to"]::after { content: 'To'; color: var(--accent); }
/* hovering a system says what a click would make it */
@media (hover: hover) {
  .rb-row[data-next="from"] button:not([data-role]):hover::after, .rb-row[data-next="from"] button[data-role=""]:hover::after { content: 'From'; }
  .rb-row[data-next="to"] button:not([data-role="from"]):hover::after { content: 'To'; color: var(--accent); }
}
.rb-row button:focus-visible { outline: var(--focus-ring, 2px solid var(--focus)); outline-offset: -2px; }

@media (max-width: 1279px) {
  .rb-row button { gap: 8px; padding-right: 6px; padding-left: 8px; }
  .rb-row button::after { display: none; }
  /* the drawing across the top, the two systems under it: the source left, the destination right */
  .rb-frame { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rb-stage { grid-column: 1 / -1; grid-row: 1; height: auto; aspect-ratio: 16 / 7.2; border-bottom: 1px solid var(--line); }
  .rb-src { grid-row: 2; grid-column: 1; padding-right: 24px; }
  .rb-dst { grid-row: 2; grid-column: 2; padding-left: 24px; border-left: 0; }
  .rb-meta { margin-top: 0; }
}
@media (max-width: 1023px) {
  .rb-stage { aspect-ratio: 16 / 8.5; }
  .rb-row span { display: none; }
  .rb-row button { justify-content: center; padding: 14px 0; }
  .rb-row li:first-child button { padding-left: 0; }
  /* the metadata: the name over its value, so a long value never breaks mid-word */
  .rb-src .rb-meta > div { grid-template-columns: minmax(0, 1fr); }
  .rb-dst .rb-meta > div { grid-template-columns: 12px minmax(0, 1fr); }
  .rb-meta dd { overflow-wrap: normal; }
  .rb-dst .rb-meta dd { grid-column: 2; }
  .rb-meta dd { text-align: left; }
}
@media (max-width: 767px) {
  .rb-stage { aspect-ratio: 4 / 3.2; }
  .rb-band { gap: 12px; padding-top: 14px; }
  .rb-src { padding-right: 12px; }
  .rb-dst { padding-left: 12px; }
  .rb-sys { font-size: 16px; gap: 6px; min-height: 22px; }
  .rb-sys img { width: 16px; height: 16px; }
  .rb-src .rb-sys { margin-bottom: 24px; }
  .rb-head { font-size: 10px; margin-bottom: -6px; }
  .rb-feats li, .rb-meta > div { font-size: 11px; letter-spacing: 0; column-gap: 8px; }
  .rb-src .rb-feats li { grid-template-columns: 18px minmax(0, 1fr); }
  .rb-src .rb-v { display: none; }   /* the sizes stay on the wider screens; here the two lists match row for row */
  .rb-dst .rb-feats li { grid-template-columns: 12px 18px minmax(0, 1fr); }
  .rb-dst .rb-meta dd { grid-column: 1 / -1; }   /* as wide as the source's value, so a long name wraps in both or neither */
  .rb-row img { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .rb-n, .rb-box, .rb-box svg, .rb-row button, .rb-row button::before { transition: none; }
}