/* Playground-only history viewer; the original case study retains its viewer. */
#design-history{margin:36px 0 70px}
.history-showcase{position:relative;display:grid;grid-template-columns:minmax(240px,1fr) minmax(260px,1fr);gap:55px;align-items:center;padding:48px;background:radial-gradient(ellipse at 80% 30%,#567a9260,transparent 65%),#2b3548;border:1px solid #ffffff1a;border-radius:24px;overflow:hidden}
.history-disclosures{display:flex;flex-direction:column;gap:16px;max-width:380px}
.history-feature{display:flex;align-items:center;gap:12px;border:1px solid #ffffff25;border-radius:30px;padding:16px 20px;font:600 17px/1.3 var(--sans);color:#f5f6fc;background:linear-gradient(135deg,#ffffff20,#ffffff0c);backdrop-filter:blur(20px);cursor:pointer;box-shadow:inset 0 1px #ffffff18;text-align:left;transition:background .25s,border-color .25s;width:100%}
.history-feature>img{filter:invert(1);flex-shrink:0}.history-feature .history-plus{margin-left:auto;opacity:.6;transition:transform .3s}.history-disclosure.is-selected .history-plus{transform:rotate(45deg)}
.history-disclosure.is-selected .history-feature{background:#ffffff24;border-color:#baffee80}.history-feature-description{border-left:2px solid #baffee;margin:14px 0 2px 22px;padding:0 16px}.history-feature-description p{font:400 15px/1.65 var(--sans);color:#d0ddee;margin:0!important}.history-feature-description[hidden]{display:none}
.history-preview{position:relative;min-width:0;padding:0 8px}.history-single-phone{position:relative;width:245px;max-width:100%;aspect-ratio:122/264;margin:auto;background:#435880;border:6px solid #101217;outline:1px solid #c9d3e158;border-radius:32px;overflow:hidden;box-shadow:0 24px 40px #0004}.history-current-screen{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .6s ease;border-radius:0!important}.history-current-screen.is-visible{opacity:1}.history-progress{display:flex;gap:12px;max-width:310px;margin:28px auto 0}.history-progress button{flex:1;border:0;background:transparent;color:#bdcde0;padding:5px 0;cursor:pointer;font:600 13px var(--sans)}.history-progress button[aria-pressed=true]{color:white}.history-track{display:block;height:5px;overflow:hidden;border-radius:10px;background:#baffee25;margin-top:12px}.history-track i{display:block;width:100%;height:100%;background:#e1fffa;transform:scaleX(0);transform-origin:left;border-radius:10px}.history-progress button[aria-pressed=false] .history-track i{opacity:.5}
.round-motion{display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;border:1px solid #ffffff35;background:#15232f45;backdrop-filter:blur(18px);color:white;cursor:pointer;z-index:5}.round-motion span{display:block;width:20px;height:20px;background:currentColor;mask:url('ui-icons/pause-fill.svg') center/contain no-repeat}.round-motion[aria-pressed=true] span{mask-image:url('ui-icons/play-fill.svg')}.round-motion:hover{background:#ffffff28}.round-motion:focus-visible,.history-showcase button:focus-visible{outline:2px solid #baffee;outline-offset:5px}#history-playback{position:absolute;left:-20px;top:0}.motion-tile{position:relative}#playground-motion-toggle{position:absolute;left:18px;top:18px;min-height:0;margin:0}.case-body>.impact-grid+p{margin-top:36px}
@media(max-width:700px){.history-showcase{grid-template-columns:1fr;padding:25px 22px;gap:32px}.history-disclosures{max-width:none}.history-feature{font-size:16px;padding:13px 17px}.history-feature-description p{font-size:14px}.history-preview{padding-top:0}.history-single-phone{width:230px}#history-playback{left:0}.history-progress{max-width:290px}}
@media(prefers-reduced-motion:reduce){.history-current-screen,.history-feature,.history-plus{transition:none}}
#design-history #history-features{flex-direction:column;gap:16px;min-width:0}.history-disclosure{min-width:0}.history-showcase{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media(max-width:700px){.history-showcase{grid-template-columns:minmax(0,1fr)}}

/* Reference recording: label-sized pills expand into inline explanations. */
.history-showcase{isolation:isolate;background:radial-gradient(ellipse at 68% 46%,#222934 0%,#15191f 40%,#090b0e 76%,#07090b 100%);animation:none;border-color:#ffffff12}
.history-showcase:before,.history-showcase:after{display:none}
#design-history #history-features{align-items:flex-start;gap:12px;width:100%;max-width:380px}
.history-disclosure{position:relative;width:var(--pill-width,170px);max-width:100%;flex-shrink:0;border:1px solid #ffffff09;border-radius:28px;background:#ffffff0b;box-shadow:inset 0 1px #ffffff05;transition:width .48s cubic-bezier(.22,.8,.25,1),background .3s,border-radius .4s}
.history-disclosure:hover{background:#ffffff12}
.history-disclosure.is-selected{width:100%;border-radius:23px;background:#ffffff0e;border-color:#ffffff0b}
.history-disclosure .history-feature,.history-disclosure.is-selected .history-feature{display:block;width:100%;min-height:50px;padding:14px 20px;border:0;background:transparent;box-shadow:none;backdrop-filter:none;border-radius:inherit;font:400 15px/1.65 var(--sans);color:#e5e7eb;white-space:nowrap}
.history-disclosure .history-feature>img{display:inline-block;width:20px;height:20px;vertical-align:-4px;margin-right:10px;filter:invert(1);opacity:.85}
.history-feature-title{font-weight:600}
.history-disclosure .history-feature-description{display:none;margin:0;padding:0;border:0;font:400 14px/1.65 var(--sans);color:#c7cbd2;opacity:0}
.history-disclosure.is-selected .history-feature{padding:22px 23px;white-space:normal;text-align:left}
.history-disclosure.is-selected .history-feature>img{display:none}
.history-disclosure.is-selected .history-feature-title:after{content:none}
.history-disclosure.is-selected .history-feature-description{display:block;margin:8px 0 0;padding:0;opacity:1;animation:history-copy-in .3s .12s both}
.history-disclosure:has(.history-feature:focus-visible){outline:2px solid #baffee;outline-offset:4px}
.history-feature:focus-visible{outline:none}
.history-showcase>#history-playback{top:18px;right:18px;left:auto}
.history-preview{position:static;z-index:1}.history-disclosures{position:relative;z-index:1}
@keyframes history-copy-in{from{opacity:0}to{opacity:1}}
@media(max-width:700px){.history-showcase{padding-top:72px}.history-showcase>#history-playback{top:16px;right:16px}.history-disclosure .history-feature,.history-disclosure.is-selected .history-feature{font-size:15px}.history-disclosure.is-selected .history-feature{padding:20px}.history-disclosure .history-feature-description{font-size:14px}}
@media(prefers-reduced-motion:reduce){.history-disclosure,.history-feature-description{transition:none!important;animation:none!important}}

/* Keep the copy's line length stable while the pill morphs around it. */
.history-disclosure{height:56px;overflow:hidden;transition:width .48s cubic-bezier(.22,.8,.25,1),height .48s cubic-bezier(.22,.8,.25,1),background .3s,border-radius .4s}
.history-disclosure.is-selected{height:var(--panel-height,126px)}
.history-disclosure.is-selected .history-feature{width:calc(var(--expanded-width,380px) - 2px);max-width:none}
@media(prefers-reduced-motion:reduce){.history-disclosure{transition:none!important}}
.history-showcase{padding-top:88px}
.history-showcase>.history-section-title{position:absolute;top:29px;left:48px;margin:0;font:400 27px/1.15 var(--serif);color:#f2f0e7;z-index:2}
@media(max-width:700px){.history-showcase{padding-top:84px}.history-showcase>.history-section-title{top:27px;left:22px;font-size:21px;max-width:calc(100% - 90px)}}