/**
 * Design to Code case study: the 60 → 30 merge loop and the token tiers with the theme swap.
 * Everything else on the page uses site.css, like the Invia case study.
 */

/* Context: the three problems next to the 60 → 30 loop */
.merge { margin-top: var(--space-32) !important; }
.merge__shell { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--space-48); align-items: center; }
.merge__problems { list-style: none; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; }
.merge__problem {
  display: flex; flex-direction: column; gap: 4px; margin: 0 !important; padding: var(--space-16) 0 var(--space-16) var(--space-16);
  border-left: var(--border-width-focus) solid var(--color-border-default);
}
.merge__problem + .merge__problem { border-top: 0; }
.merge__problem:hover { border-left-color: var(--color-action-primary-bg-default); }
.merge__kicker { margin: 0 !important; color: var(--color-fg-muted); }
.merge__title { color: var(--color-fg-default); text-decoration: none; }
.merge__title:hover { color: var(--button-ghost-fg); }
.merge__q { color: var(--color-fg-muted); }
.merge__r { color: var(--color-feedback-success-fg); font-weight: var(--font-weight-medium); }

.merge__stage { display: flex; flex-direction: column; gap: var(--space-16); min-width: 0; }
.merge__hud { display: flex; align-items: center; gap: var(--space-12); }
.merge__pill {
  padding: 2px var(--space-8); border-radius: var(--radius-pill);
  font-size: var(--font-size-100); line-height: var(--font-line-height-100); font-weight: var(--font-weight-medium);
  color: var(--color-fg-default); background: var(--color-bg-muted);
}
.merge.is-after .merge__pill { color: var(--color-base-white, #fff); background: var(--color-action-primary-bg-default); }
.merge__count { font-family: var(--font-family-display); font-weight: 700; font-size: 44px; line-height: 1; color: var(--color-fg-default); font-variant-numeric: tabular-nums; }
.merge__label { margin: 0 !important; color: var(--color-fg-muted); }
.merge__btn { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-8); }
.merge__field { position: relative; width: 100%; aspect-ratio: 3 / 2; }
.merge__tile {
  position: absolute;
  transition-property: left, top, width, height, border-radius, background-color, box-shadow, opacity, transform;
  transition-duration: 1.1s; transition-timing-function: cubic-bezier(.65, 0, .35, 1);
}
.merge.is-after .merge__tile {
  border-radius: 10px !important; transform: none !important;
  background-color: var(--color-purple-50, #EFEAFF) !important;
  box-shadow: inset 0 0 0 1.5px var(--color-action-primary-bg-default);
}
.merge.is-after .merge__tile:nth-child(even) { opacity: 0; }
@media (max-width: 880px) {
  .merge__shell { grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }
}

/* Token tiers as a line map, built from the ground up: reference tokens at the bottom, the button on top.
   Three lines (color, radius, padding) run up through the tiers. Hover or focus a token to light its line;
   on first view the lines light up once in turn, like the Invia timelines. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.map {
  --swap: var(--color-action-primary-bg-default);
  --line: var(--color-border-strong);
  --live: var(--color-blue-600, #0A68DC);
  position: relative; display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-24); margin-top: var(--space-16);
  background: var(--color-bg-subtle); border: var(--border-width-default) solid var(--color-border-default); border-radius: var(--radius-container);
}
.map[data-theme="secondary"] { --swap: var(--color-action-secondary-bg-default, #007B99); }

/* "Try it" sticker, as on the landing page (the lime sticker) */
.map__sticker {
  position: absolute; left: var(--space-16); top: -16px; z-index: 2;
  padding: var(--space-8) var(--space-12); border-radius: var(--radius-pill);
  font-size: var(--font-size-200); line-height: var(--font-line-height-200); font-weight: var(--font-weight-medium); white-space: nowrap;
  background: #d4ff3a; color: var(--color-neutral-900, #111015);
  box-shadow: 0 1px 2px rgba(43, 43, 47, .06), 0 8px 24px -8px rgba(43, 43, 47, .14);
  transform: rotate(-4deg); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
@media (hover: hover) { .map:hover .map__sticker { transform: rotate(0deg) scale(1.04); } }

/* segmented control, as in the Invia playground */
.map__bar { display: flex; justify-content: flex-end; }
/* segmented control, as in the Invia playground: neutral track, the selected segment outlined in the primary color */
.map__seg { display: inline-flex; padding: 2px; border-radius: var(--radius-control); background: var(--color-bg-muted); }
.map__seg button {
  border: 0; background: transparent; cursor: pointer; white-space: nowrap;
  min-height: 36px; padding: var(--space-4) var(--space-16); border-radius: calc(var(--radius-control) - 2px);
  font-family: var(--font-family-sans); font-size: var(--font-size-200); line-height: var(--font-line-height-200); font-weight: var(--font-weight-medium); color: var(--color-fg-muted);
  transition: background-color .15s, color .15s, box-shadow .15s;
}
.map__seg button:hover { color: var(--color-fg-default); }
.map__seg button[aria-pressed="true"] {
  background: var(--color-action-ghost-bg-hover); color: var(--color-action-ghost-fg);
  box-shadow: 0 0 0 var(--border-width-default) var(--color-action-primary-bg-default);
}
.map__seg button:focus-visible { outline: var(--border-width-focus) solid var(--color-border-focus); outline-offset: 1px; }

.map__scroll { overflow-x: auto; }
.map__grid { min-width: 760px; display: flex; flex-direction: column; }
.map__row { display: grid; grid-template-columns: 170px repeat(3, minmax(0, 1fr)) 150px; gap: var(--space-16); align-items: center; }

/* the button on top, shown 1.6× like under a loupe; blue arrows point at what each line defines */
.map__grid { position: relative; }
.map__labels { padding: 0 var(--space-16) var(--space-24); }
.map__label { justify-self: center; font-size: 12px; font-weight: var(--font-weight-medium); letter-spacing: .04em; text-transform: uppercase; color: var(--live); }
.map__result { padding: 0 var(--space-16); min-height: 140px; }
.map__stage { grid-column: 2 / 5; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--space-12); }
/* the component's name, like the token chips below */
.map__btnname {
  padding: 4px 10px; border-radius: var(--radius-sm, 4px); background: var(--color-bg-default);
  border: var(--border-width-default) solid var(--color-border-strong);
  font-family: 'Roboto Mono', ui-monospace, Menlo, monospace; font-size: 12px; line-height: 1.45; color: var(--color-fg-default);
}
.map__foot { margin: 0 !important; font-size: 12px; line-height: 1.5; color: var(--color-fg-muted); }
.map__foot::before { content: "* "; }
.map__button {
  --s: 1.6;
  position: relative; display: inline-flex; align-items: center;
  padding: calc(var(--s) * 8px) calc(var(--s) * 16px); border-radius: calc(var(--s) * 8px);
  font-size: calc(var(--s) * 15px); line-height: 1.3;
  background: var(--swap); color: var(--color-base-white, #fff); font-weight: var(--font-weight-medium); transition: background-color .4s;
}
/* padding shown as a lighter band, like in Figma */
.map__button::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  border: solid rgba(255, 255, 255, .1); border-width: calc(var(--s) * 8px) calc(var(--s) * 16px);
}
/* the content box edge, dashed, so padding x and y read as bands */
.map__button::before {
  content: ""; position: absolute; pointer-events: none;
  inset: calc(var(--s) * 8px) calc(var(--s) * 16px); border: 1px dashed rgba(255, 255, 255, .55); border-radius: 2px;
}
.map__notes-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.map__notes-svg path { fill: none; stroke: var(--live); stroke-width: 1.5; stroke-linecap: round; }
.map__notes-svg marker path { fill: var(--live); stroke: none; }
.map__merge { padding: 0 var(--space-16); height: 48px; }
.map__merge svg { grid-column: 2 / 5; display: block; width: 100%; height: 48px; overflow: visible; }
.map__merge path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.map__base { stroke: var(--line); }
.map__live { stroke: var(--live); stroke-width: 2.5 !important; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .2s ease-in; }

/* stations: one dot per line, with its symbol */
.map__head { padding: 0 var(--space-16) var(--space-8); }
.map__route { display: flex; justify-content: center; }
.map__dot {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--color-bg-default); border: var(--border-width-focus, 2px) solid var(--line); color: var(--color-fg-muted);
  box-shadow: 0 0 0 4px var(--color-bg-subtle); transition: background-color .15s, border-color .15s, color .15s;
}
.map__dot svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* the tiers */
.map__band {
  padding: var(--space-16); background: var(--color-bg-default);
  border: var(--border-width-default) solid var(--color-border-default); border-radius: var(--radius-container);
}
.map__band--locked { background: var(--color-bg-muted); border-style: dashed; border-color: var(--color-border-strong); }
.map__tier { display: flex; flex-direction: column; gap: 2px; }
.map__n { font-family: var(--font-family-display); font-weight: 700; font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }
.map__tname { font-weight: var(--font-weight-medium); font-size: var(--font-size-200); }
.map__sub { font-size: 12px; color: var(--color-fg-muted); }
.map__tier--button { gap: var(--space-4); }
.map__h { margin: 0; color: var(--color-fg-default); }
.map__lead { color: var(--color-fg-muted); }
.map__band--locked .map__n, .map__band--locked .map__tname { color: var(--color-fg-muted); }

.map__chip {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; justify-self: center; max-width: 100%;
  padding: 6px 10px; border-radius: var(--radius-sm, 4px); background: var(--color-bg-default);
  border: var(--border-width-default) solid var(--color-border-strong); outline: 0;
  font-family: 'Roboto Mono', ui-monospace, Menlo, monospace; font-size: 12px; line-height: 1.45; overflow-wrap: normal; word-break: normal;
  transition: border-color .15s, box-shadow .15s; cursor: default;
}
.map__chip code { font: inherit; background: none; padding: 0; }
.map__band--locked .map__chip { color: var(--color-fg-muted); background: transparent; border-style: dashed; }
.map__val { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-family: var(--font-family-sans); font-size: 12.5px; color: var(--color-fg-default); font-variant-numeric: tabular-nums; }
.map__swatch { width: 14px; height: 14px; border-radius: 4px; background: var(--swap); transition: background-color .4s; }
.map__corner { width: 14px; height: 14px; border-top: 2px solid var(--color-fg-default); border-left: 2px solid var(--color-fg-default); border-top-left-radius: 8px; }
.map__pad { display: inline-flex; padding: 4px 8px; border: 1px dashed var(--color-fg-muted); border-radius: 3px; }
.map__pad b { display: block; width: 12px; height: 8px; background: var(--color-fg-muted); border-radius: 1px; }

.map__access {
  justify-self: end; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: var(--font-size-100); line-height: var(--font-line-height-100); font-weight: var(--font-weight-medium);
  background: var(--color-bg-subtle); text-align: left;
}
.map__access::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--color-action-primary-bg-default); }
.map__access--locked { padding: 6px 12px; border-radius: var(--radius-control, 8px); background: var(--color-fg-default); color: var(--color-bg-default); }
.map__access--locked::before { display: none; }
.map__access--locked svg { flex: none; }

/* lines between the tiers: grey, they fill from the bottom up when lit */
.map__link { height: 32px; padding: 0 var(--space-16); }
.map__pt { display: flex; align-items: center; height: 100%; padding-left: 4px; font-size: 12px; color: var(--color-fg-muted); }
.map__link i {
  position: relative; justify-self: center; width: 2px; height: 100%;
  background: linear-gradient(var(--live), var(--live)) bottom / 100% 0% no-repeat, var(--line);
  transition: background-size .14s ease-in;
}
.map__link i::after {
  content: ""; position: absolute; left: -4px; top: 0; border: 5px solid transparent; border-top: 0; border-bottom: 6px solid var(--line);
  transition: border-bottom-color .2s;
}

/* lit line (hover, focus, or the first-view run) */
.map[data-active="color"] .map__link i[data-route="color"],
.map[data-active="radius"] .map__link i[data-route="radius"],
.map[data-active="padding"] .map__link i[data-route="padding"] { background-size: 100% 100%, auto; }
.map[data-active="color"] .map__link i[data-route="color"]::after,
.map[data-active="radius"] .map__link i[data-route="radius"]::after,
.map[data-active="padding"] .map__link i[data-route="padding"]::after { border-bottom-color: var(--live); transition-delay: .1s; }
.map[data-active="color"] .map__chip[data-route="color"],
.map[data-active="radius"] .map__chip[data-route="radius"],
.map[data-active="padding"] .map__chip[data-route="padding"] { border: 1.5px solid var(--live); box-shadow: 0 0 0 3px var(--color-blue-50, #EAF2FF); }
.map[data-active="color"] .map__route[data-route="color"] .map__dot,
.map[data-active="radius"] .map__route[data-route="radius"] .map__dot,
.map[data-active="padding"] .map__route[data-route="padding"] .map__dot { background: var(--live); border-color: var(--live); color: var(--color-base-white, #fff); animation: map-pop .5s cubic-bezier(.34, 1.56, .64, 1); }
.map[data-active="color"] .map__live[data-route="color"],
.map[data-active="radius"] .map__live[data-route="radius"],
.map[data-active="padding"] .map__live[data-route="padding"] { stroke-dashoffset: 0; }
/* bottom up: reference, first line, system, second line, component, station, merge */
.map[data-active] .map__band[data-step="2"] .map__chip { transition-delay: .12s; }
.map[data-active] .map__link[data-step="2"] i { transition-delay: .14s; }
.map[data-active] .map__band[data-step="3"] .map__chip { transition-delay: .26s; }
.map[data-active] .map__dot { transition-delay: .3s; animation-delay: .3s; }
.map[data-active] .map__live { transition-delay: .34s; }
/* the arrows on the button: hidden at rest, they pop in once the blue line has reached the button */
.map__label { opacity: 0; transform: translateY(8px) scale(.85); transition: opacity .12s, transform .12s; }
.map__notes-svg path[data-note] { opacity: 0; stroke-width: 2; transition: opacity .12s; }
.map[data-active="color"] .map__label[data-note="color"],
.map[data-active="radius"] .map__label[data-note="radius"],
.map[data-active="padding"] .map__label[data-note="padding"] {
  opacity: 1; transform: none; transition: opacity .2s .55s, transform .5s cubic-bezier(.34, 1.56, .64, 1) .55s;
}
.map[data-active="color"] .map__notes-svg path[data-note="color"],
.map[data-active="radius"] .map__notes-svg path[data-note="radius"],
.map[data-active="padding"] .map__notes-svg path[data-note^="pad"] { opacity: 1; transition: opacity .25s .6s; }
/* the button gives a small bounce when a line arrives */
.map[data-active] .map__button { animation: map-arrive .5s cubic-bezier(.34, 1.56, .64, 1) .5s both; }
@keyframes map-arrive { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes map-pop { 0% { transform: scale(.7); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .merge__tile, .map__swatch, .map__button, .map__chip, .map__link i, .map__link i::after, .map__live, .map__dot, .map__label, .map__notes-svg path { transition: none !important; animation: none !important; }
  .map__sticker { transition: none; }
}

/* Decision 1: Figma as the core of an atom. Tools on the inner orbit, the teams that use it on the outer orbit.
   Both directions (design to code, code back to design) are shown in the rebuild diagram. */
.atom__scroll { overflow-x: auto; }
.atom__frame {
  position: relative; min-width: 560px; aspect-ratio: 1000 / 680; container-type: inline-size;
  background: radial-gradient(circle at 50% 50%, var(--color-action-ghost-bg-hover) 0, transparent 34%);
}
.atom__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.atom__orbit { fill: none; stroke: var(--color-border-default); stroke-width: 1.5; stroke-dasharray: 3 7; }
.atom__orbit--outer { stroke: var(--color-border-strong); opacity: .7; }
.atom__spokes line { stroke: var(--color-action-primary-bg-default); stroke-width: 1.25; opacity: .28; }
.atom__electron { fill: var(--color-action-primary-bg-default); }
.atom__electron--outer { fill: var(--color-action-secondary-bg-default); }

/* everything round, like an atom, and floating a little */
.atom__core, .atom__node {
  position: absolute; z-index: 1; aspect-ratio: 1; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  transform: translate(calc(-50% + var(--px, 0px)), -50%) scale(calc(var(--s, 1) * var(--h, 1)));
  transition: --h .35s cubic-bezier(.3, 1.6, .5, 1), box-shadow .35s;
  animation: atom-float var(--float-d, 7s) ease-in-out var(--float-delay, 0s) infinite;
}
.atom__core {
  --float-d: 9s; width: 18%; padding: 2.4cqw; gap: .6cqw; z-index: 2;
  background: var(--color-action-ghost-bg-hover); border: var(--border-width-focus) solid var(--color-action-primary-bg-default);
  box-shadow: 0 0 0 14px rgba(95, 44, 255, .07), 0 0 0 32px rgba(95, 44, 255, .04), 0 18px 40px -18px rgba(95, 44, 255, .45);
}
.atom__core-title { font-family: var(--font-family-display); font-weight: 700; font-size: clamp(22px, 4.4cqw, 34px); line-height: 1; color: var(--color-fg-default); }
.atom__core-desc { font-size: clamp(11px, 1.8cqw, 14px); line-height: 1.35; color: var(--color-action-ghost-fg); font-weight: var(--font-weight-medium); }
.atom__core-lock { font-size: clamp(10px, 1.5cqw, 12px); line-height: 1.35; color: var(--color-fg-muted); }
.atom__node {
  width: 17%; padding: 1.3cqw; cursor: default; gap: .5cqw; background: var(--color-bg-default);
  border: var(--border-width-default) solid var(--color-border-strong);
  box-shadow: 0 1px 2px rgba(43, 43, 47, .05), 0 12px 28px -14px rgba(43, 43, 47, .25);
}
.atom__node--qa { border: var(--border-width-focus) solid var(--color-action-primary-bg-default); }
.atom__node--dev { border: var(--border-width-focus) solid var(--color-action-secondary-bg-default); }
@keyframes atom-float {
  0%, 100% { transform: translate(calc(-50% + var(--px, 0px)), -50%) scale(calc(var(--s, 1) * var(--h, 1))); }
  50% { transform: translate(calc(-50% + var(--px, 0px)), calc(-50% - 7px)) scale(calc(var(--s, 1) * var(--h, 1))); }
}
@property --h { syntax: '<number>'; inherits: false; initial-value: 1; }
.atom__node:hover { --h: 1.1; box-shadow: 0 2px 4px rgba(43, 43, 47, .06), 0 22px 40px -16px rgba(95, 44, 255, .45); }
.atom__core:hover { --h: 1.04; }
.atom__node { transition: --h .35s cubic-bezier(.3, 1.6, .5, 1), box-shadow .35s, opacity .3s; }
@media (prefers-reduced-motion: reduce) { .atom__core, .atom__node { animation: none; } }
.hub__title { font-weight: var(--font-weight-medium); font-size: clamp(12px, 2cqw, 16px); line-height: 1.25; color: var(--color-fg-default); }
.hub__desc { font-size: clamp(10.5px, 1.6cqw, 12.5px); line-height: 1.35; color: var(--color-fg-muted); }
.hub__logo { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; color: var(--color-fg-muted); }
.hub__logo img { display: block; width: 28px; height: 28px; object-fit: contain; }
/* until the official logo file is in assets/logos/, a neutral placeholder with the initial */
.hub__logo:empty::before {
  content: attr(data-initial); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px;
  border: 1px dashed var(--color-border-strong); font-size: 12px; font-weight: var(--font-weight-medium); color: var(--color-fg-muted);
}

/* Design QA timeline: the step 2 frame is a small QA report instead of a screenshot */
.qa-report { display: grid; gap: var(--space-12); }
.qa-report__head { margin: 0 !important; font-family: 'Roboto Mono', ui-monospace, Menlo, monospace; font-size: 12px; color: var(--color-fg-muted); }
.qa-report__list { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: var(--space-8); }
.qa-report__list li {
  display: flex; align-items: flex-start; gap: var(--space-8); margin: 0 !important; padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-md); background: var(--color-bg-default); border: var(--border-width-default) solid var(--color-feedback-warning-border);
  font-size: var(--font-size-200); line-height: var(--font-line-height-200); color: var(--color-fg-default);
}
.qa-report__list svg { flex: none; margin-top: 3px; color: var(--color-feedback-warning-fg); }
.qa-report__list b { display: block; font-weight: var(--font-weight-medium); color: var(--color-feedback-warning-fg); }
/* all four frames share one width; tall screenshots are fitted inside */
.ft--qa .ft-step > .ft__frame { width: 100%; max-width: 560px; box-sizing: border-box; }
.ft--qa .ft__frame img { max-height: 420px; width: 100%; object-fit: contain; object-position: top center; }

/* Text left (1/3), visual right (2/3), used in section 1 */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-40, 40px); align-items: stretch; margin-top: var(--space-24); }
.split__text { display: flex; flex-direction: column; }
.split__text > p:first-child { margin-top: 0; }
.split__text > .cs-result { margin-top: auto; }   /* bottom edge shared with the figure caption */

.split__visual { margin: 0 !important; }
.split__visual .atom__scroll { overflow: visible; }
@media (max-width: 600px) { .split__visual .atom__scroll { overflow-x: auto; } }
.split__visual figcaption { margin-top: var(--space-8); }
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }
  .split__text > .cs-result { margin-top: var(--space-24); }
}