/* ==========================================================================
   Spreadsheet to app (partials/spreadsheet-to-app.php,
   js/pages/spreadsheet-to-app.js) — on /services/development.
   ==========================================================================
   Plays once when it comes into view. The script sets, on .sa__stage:
     --chrome  1 → 0  the spreadsheet's letters, numbers, grid and spare cells
     --notes   0 → 1  the sticky notes falling away
     --app     0 → 1  the app's sidebar and panels appearing
     --done    0 → 1  the finishing tick
   and on each .sa-piece its box (left/top/width/height, % of the stage) and
   --t, 0 = still a cell, 1 = what it became. With reduced motion it sets
   everything to the finished app. Sizes inside the
   stage are in cqi so the whole thing scales as one picture. */
.sa { position: relative; margin-top: 112px; padding: 0 var(--gutter); }
.sa .hl { padding: 0 10px; border-radius: 16px; }
.sa__inner { display: flex; flex-direction: column; gap: clamp(16px, 3vh, 32px); }
.sa__head { display: flex; flex-direction: column; gap: 12px; max-width: 880px; }
.sa__captions { position: relative; min-height: 1.6em; font-size: clamp(17px, 1.6vw, 20px); font-weight: 500; }
.sa__caption { position: absolute; inset: 0 auto auto 0; opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; }
.sa__caption.is-on { opacity: 1; transform: none; }

.sa__stage {
    --chrome: 1; --notes: 0; --app: 0; --done: 0;
    container-type: inline-size;
    position: relative; overflow: hidden;
    width: min(100%, calc((100vh - 230px) * 5 / 3)); min-width: min(100%, 520px);
    aspect-ratio: 5 / 3; margin: 0 auto;
    background: var(--c-white);
    border: clamp(2px, .3cqi, 3px) solid var(--c-ink);
    border-radius: clamp(8px, 1.4cqi, 16px);
    box-shadow: 0 1.2cqi 0 var(--c-ink);
    font-size: 1.25cqi;
}
.sa__titlebar {
    position: absolute; inset: 0 0 auto 0; height: 6.6667%; z-index: 3;
    display: flex; align-items: center; gap: 1.6cqi; padding: 0 1.6cqi;
    background: var(--c-lilac-tint); border-bottom: clamp(1.5px, .25cqi, 3px) solid var(--c-ink);
}
.sa__dots { display: flex; gap: .7cqi; }
.sa__dots i { width: 1.1cqi; height: 1.1cqi; border-radius: 50%; background: var(--c-pink); }
.sa__dots i:nth-child(2) { background: var(--c-yellow); }
.sa__dots i:nth-child(3) { background: var(--c-teal); }
.sa__title { position: absolute; left: 7.5cqi; font-weight: 700; font-size: 1.35cqi; }
.sa__title--sheet { opacity: var(--chrome); font-family: ui-monospace, Menlo, Consolas, monospace; }
.sa__title--app { opacity: var(--app); font-family: var(--f-display); font-weight: 800; }

/* The sheet. */
.sa__sheet { position: absolute; inset: 0; opacity: var(--chrome); pointer-events: none; }
.sa__cols {
    position: absolute; left: 4.4%; right: 0; top: 6.6667%; height: 5.3333%;
    display: grid; grid-template-columns: repeat(6, 1fr);
    background: #f5f0fa; border-bottom: 1px solid #d9cfe6;
}
.sa__rows {
    position: absolute; left: 0; width: 4.4%; top: 12%; bottom: 0;
    display: grid; grid-template-rows: repeat(12, 4.4cqi);
    background: #f5f0fa; border-right: 1px solid #d9cfe6;
}
.sa__cols span, .sa__rows span {
    display: grid; place-items: center; color: var(--c-muted);
    font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.1cqi;
}
.sa__cols span + span { border-left: 1px solid #e6ddf0; }
.sa__rows span + span { border-top: 1px solid #e6ddf0; }
.sa__grid {
    position: absolute; left: 4.4%; right: 0; top: 12%; bottom: 0;
    background:
        repeating-linear-gradient(90deg, transparent 0 calc(15.933cqi - 1px), #e6ddf0 calc(15.933cqi - 1px) 15.933cqi),
        repeating-linear-gradient(180deg, transparent 0 calc(4.4cqi - 1px), #e6ddf0 calc(4.4cqi - 1px) 4.4cqi);
}
.sa__filler, .sa-piece__a {
    font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.2cqi; color: var(--c-ink);
    white-space: nowrap; overflow: hidden; text-overflow: clip;
}
.sa__filler { position: absolute; display: flex; align-items: center; padding: 0 .8cqi; }
.sa__filler.is-red, .sa-piece--chip .sa-piece__a { color: #c62828; background: #fde7e7; font-weight: 700; }
.sa__filler.is-bold { font-weight: 700; }

/* The app's furniture. */
.sa__app { position: absolute; inset: 0; opacity: var(--app); pointer-events: none; }
.sa__sidebar {
    position: absolute; left: 0; top: 6.6667%; bottom: 0; width: 20%;
    background: var(--c-ink); padding: 1.6cqi 1.8cqi;
}
.sa__brand { display: flex; align-items: center; gap: .8cqi; color: var(--c-white); font-family: var(--f-display); font-weight: 800; font-size: 1.5cqi; }
.sa__brand i { width: 2cqi; height: 2cqi; border-radius: .6cqi .6cqi .6cqi .15cqi; background: var(--c-pink); }
.sa__panel {
    position: absolute; background: var(--c-cream);
    border: clamp(1.5px, .2cqi, 2px) solid var(--c-ink); border-radius: 1.2cqi;
    padding: 1.2cqi 1.6cqi; font-family: var(--f-display); font-weight: 800; font-size: 1.4cqi;
}
.sa__panel--chart { left: 22.4%; top: 30.6667%; width: 38%; height: 66%; }
.sa__panel--list { left: 62%; top: 30.6667%; width: 36%; height: 66%; }

/* Moving pieces: positioned by the script; two faces cross-fade on --t. */
.sa-piece { --t: 0; position: absolute; z-index: 2; }
.sa-piece__a, .sa-piece__b { position: absolute; inset: 0; display: flex; align-items: center; }
.sa-piece__a {
    opacity: clamp(0, calc(1 - var(--t) * 2.4), 1);
    padding: 0 .8cqi; background: var(--c-white); box-shadow: inset 0 0 0 1px #e6ddf0;
}
.sa-piece--nav .sa-piece__a, .sa-piece:not(.sa-piece--chip) .sa-piece__a:only-child { font-weight: 700; }
.sa-piece--nav .sa-piece__a { background: #faf6fd; font-weight: 700; }
.sa-piece__b { opacity: clamp(0, calc(var(--t) * 2.4 - 1.4), 1); }

.sa-piece--nav .sa-piece__b {
    padding: 0 1.2cqi; border-radius: .9cqi; color: #e8dcf5; font-weight: 600; font-size: 1.35cqi;
}
.sa-piece--nav.is-on .sa-piece__b { background: rgba(255, 255, 255, .14); color: var(--c-white); }
.sa-piece--card .sa-piece__b {
    flex-direction: column; align-items: flex-start; justify-content: center; gap: .3cqi; padding: 0 1.4cqi;
    border: clamp(1.5px, .2cqi, 2px) solid var(--c-ink); border-radius: 1.2cqi 1.2cqi 1.2cqi .3cqi;
    box-shadow: 0 .45cqi 0 var(--c-ink);
}
.sa-piece--card strong { font-family: var(--f-display); font-weight: 800; font-size: 3.2cqi; line-height: 1; }
.sa-piece--card small { font-size: 1.15cqi; font-weight: 600; }
.sa-piece--card.tint-yellow .sa-piece__b { background: var(--c-yellow-tint); }
.sa-piece--card.tint-pink .sa-piece__b   { background: var(--c-pink-tint); }
.sa-piece--card.tint-teal .sa-piece__b   { background: var(--c-teal-tint); }
.sa-piece--card.tint-lilac .sa-piece__b  { background: var(--c-lilac-tint); }
.sa-piece--bar .sa-piece__b {
    border: clamp(1.5px, .2cqi, 2px) solid var(--c-ink); border-radius: .8cqi .8cqi .2cqi .2cqi;
}
.sa-piece--bar.bar-pink .sa-piece__b   { background: var(--c-pink); }
.sa-piece--bar.bar-yellow .sa-piece__b { background: var(--c-yellow); }
.sa-piece--bar.bar-teal .sa-piece__b   { background: var(--c-teal); }
.sa-piece--row .sa-piece__b {
    gap: 1.2cqi; padding: 0 1.2cqi; background: var(--c-white);
    border: clamp(1px, .15cqi, 2px) solid var(--c-ink); border-radius: 1cqi;
}
.sa-piece--row i {
    flex: none; display: grid; place-items: center; width: 3.4cqi; height: 3.4cqi; border-radius: 50%;
    border: clamp(1px, .15cqi, 2px) solid var(--c-ink); font-style: normal; font-weight: 800; font-size: 1.3cqi;
}
.sa-piece--row.tint-teal i   { background: var(--c-teal-tint); }
.sa-piece--row.tint-yellow i { background: var(--c-yellow-tint); }
.sa-piece--row.tint-pink i   { background: var(--c-pink-tint); }
.sa-piece--row.tint-lilac i  { background: var(--c-lilac-tint); }
.sa-piece--row b { flex: 1; font-weight: 700; font-size: 1.4cqi; }
.sa-piece--row em {
    font-style: normal; font-weight: 700; font-size: 1.1cqi; padding: .4cqi 1cqi; border-radius: 99px;
    background: var(--c-teal-tint); border: 1px solid var(--c-ink);
}
.sa-piece--chip .sa-piece__b {
    justify-content: center; border-radius: 99px; background: var(--c-teal); border: clamp(1.5px, .2cqi, 2px) solid var(--c-ink);
    font-weight: 800; font-size: 1.35cqi;
}

/* Sticky notes: jiggle while the sheet is a mess, then fall away. */
.sa__note {
    position: absolute; z-index: 4; width: 17cqi; padding: 1.4cqi; aspect-ratio: 1;
    background: var(--c-yellow); border: clamp(1px, .15cqi, 2px) solid var(--c-ink);
    box-shadow: .5cqi .6cqi 0 rgba(59, 23, 88, .25);
    font-family: 'Comic Sans MS', 'Segoe Print', 'Bradley Hand', cursive; font-weight: 700; font-size: 1.6cqi; line-height: 1.25;
    opacity: clamp(0, calc(1 - var(--notes) * 1.3), 1);
}
.sa__note-1 { left: 56%; top: 22%; transform: translateY(calc(var(--notes) * 70cqi)) rotate(calc(-6deg + var(--notes) * 60deg)); }
.sa__note-2 { left: 74%; top: 50%; background: var(--c-pink-tint); transform: translateY(calc(var(--notes) * 60cqi)) rotate(calc(5deg - var(--notes) * 45deg)); }
.sa__note-3 { left: 40%; top: 62%; background: var(--c-teal-tint); transform: translateY(calc(var(--notes) * 50cqi)) rotate(calc(-3deg + var(--notes) * 35deg)); }

.sa__done {
    position: absolute; z-index: 5; right: 2.4%; bottom: 4%;
    width: 6cqi; height: 6cqi; display: grid; place-items: center; border-radius: 50%;
    background: var(--c-yellow); border: clamp(1.5px, .25cqi, 3px) solid var(--c-ink);
    opacity: var(--done); transform: scale(calc(.4 + var(--done) * .6)) rotate(calc((1 - var(--done)) * -40deg));
}
.sa__done svg { width: 60%; fill: none; stroke: var(--c-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* No script: the pieces have no positions, so the stage isn't shown at all
   (the heading and captions still say it). */
.sa:not(.is-ready) .sa__stage { display: none; }
.sa:not(.is-ready) .sa__caption { position: static; opacity: 1; transform: none; display: block; }
@media (prefers-reduced-motion: reduce) {
    .sa__caption { transition: none; }
}
@media (max-width: 700px) {
    .sa { margin-top: 72px; }
    .sa__stage { width: 100%; min-width: 0; }
}