/* Interface details · platform and solutions pages.
   A last, additive layer applying the checklist from
   jakub.kr/writing/details-that-make-interfaces-feel-better. Remove the <link> and the <script>
   (interface-details.js) to switch it off; nothing else depends on it. */

/* 1 · Text rendering and wrapping */
body.platform-next{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--id-muted:#6c6d67;--id-muted-green:#5f6a55;--id-ease:cubic-bezier(.25,.46,.45,.94)}
body.platform-next :is(h1,h2,h3,summary,figcaption,.pn-eyebrow){text-wrap:balance}
body.platform-next :is(p,li,dd){text-wrap:pretty}
body.platform-next ::selection{background:#e9e7e1;color:#171716}

/* 2 · Numbers that change or line up never shift */
body.platform-next :is(.film-step,.cf-step-progress,.cf-demo-meta,.cf-skill-rules li>span,.pn-foundation-notes>div>span,.pn-status,.pn-agent-state,.pn-file-scope,.ff-legal,.lh-player-top,.fm){font-variant-numeric:tabular-nums}

/* 3 · Contrast: every grey that carries copy now clears WCAG AA (4.5:1) on its own surface */
body.platform-next :is(.pn-eyebrow,.pn-section-heading>p,.pn-configure-lead,.pn-configure-copy>p,.pn-configuration-list p,.pn-foundation-notes p,.platform-card-grid p,.pn-demo-caption,.pn-demo-caption>span:last-child){color:var(--id-muted)}
body.platform-next .pn-foundation-notes>div>span{color:var(--id-muted)}
body.platform-next :is(.pn-sidebar,.pn-side-label,.pn-workspace-name,.pn-side-item:not(.is-active),.pn-app-bar,.pn-app-heading p,.pn-file-row>div>span,.pn-file-scope,.pn-context-label,.pn-context-strip div>span,.pn-private,.pn-agent-row div>span,.pn-working-output,.pn-small-label,.pn-source-controls,.pn-evidence>span:last-child,.pn-review-action>p){color:var(--id-muted)}
body.platform-next :is(.pn-recommendation>p,.pn-agent-state,.pn-working-output>div>span,.pn-status){color:var(--id-muted-green)}
body.firms-next :is(.film-chapters button,.film-step,.film-captions p,.cf-skill-rules li>span,.cf-demo-meta){color:var(--id-muted)}
body.firms-next .film-chapters button[aria-selected=true],body.firms-next .film-chapters button[aria-selected=true] .film-step{color:var(--pn-ink)}
body:is(.firms-next,.solutions-house) .engagement-screen .fm{--fm-faint:#77726c;--fm-rose:#7a5f4f}

/* 4 · Depth from layered, transparent shadows instead of hard borders */
body.platform-next .pn-source-controls button{border-color:transparent;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 1px 2px -1px rgba(0,0,0,.06),0 2px 4px 0 rgba(0,0,0,.04);transition-property:box-shadow,background-color,color,scale;transition-duration:150ms;transition-timing-function:ease-out}
body.platform-next .pn-source-controls button[aria-pressed=true]{border-color:transparent;box-shadow:0 0 0 1px rgba(84,109,73,.22)}
body.platform-next .pn-workspace{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 18px 36px -22px #0006}
body.firms-next .cf-skill-card{border-color:transparent;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 1px 2px -1px rgba(0,0,0,.06),0 2px 4px 0 rgba(0,0,0,.04),0 20px 50px -30px #21180f70}
body.firms-next .cf-motion-control{border-color:transparent;box-shadow:0 0 0 1px rgba(255,255,255,.2);transition-property:background-color,box-shadow,scale;transition-duration:150ms;transition-timing-function:ease-out}
body.platform-next .pn-skip{box-shadow:0 0 0 1px rgba(0,0,0,.06),0 1px 2px -1px rgba(0,0,0,.06),0 2px 4px 0 rgba(0,0,0,.04)}
@media(hover:hover){
 body.platform-next .pn-source-controls button:not([aria-pressed=true]):hover{box-shadow:0 0 0 1px rgba(0,0,0,.08),0 1px 2px -1px rgba(0,0,0,.08),0 2px 4px 0 rgba(0,0,0,.06)}
 body.firms-next .cf-motion-control:hover{box-shadow:0 0 0 1px rgba(255,255,255,.32)}
}

/* 5 · Images keep a clean edge on any background */
body.platform-next :is(.cf-intro figure,.platform-card-grid figure,.cf-methods-visual,.engagement-screen){outline:1px solid rgba(0,0,0,.1);outline-offset:-1px}

/* 6 · Concentric radii where surfaces nest closely (outer radius = inner radius + padding) */
@media(max-width:760px){
 body.platform-next .pn-workspace{border-radius:6px}   /* stage 20px, padding 14px */
}
@media(max-width:360px){
 body.platform-next .pn-workspace{border-radius:10px}  /* stage 20px, padding 10px */
}

/* 7 · Hit areas of at least 40px, without changing how the controls look */
body.platform-next :is(.pn-source-controls button,.pn-demo-tabs button,.pn-approve),body.firms-next .cf-motion-control,body.platform-next .lh-player-close,body.platform-next .ff-legal a{position:relative}
body.platform-next :is(.pn-source-controls button,.pn-demo-tabs button,.pn-approve)::after,body.firms-next .cf-motion-control::after,body.platform-next .lh-player-close::after,body.platform-next .ff-legal a::after{content:"";position:absolute;inset:-4px 0}
body.firms-next .cf-motion-control::after{inset:-4px}
body.platform-next .lh-player-close::after{inset:-8px}
body.platform-next .ff-legal a::after{inset:-14px -8px}

/* 8 · Press feedback and focus, on transitions so they can be interrupted */
@media(prefers-reduced-motion:no-preference){
 body.platform-next :is(.pn-button,.lh-nav-cta,.ff-button,.pn-approve,.pn-source-controls button){transition-property:background-color,box-shadow,color,scale;transition-duration:150ms;transition-timing-function:ease-out}
 body.platform-next :is(.pn-button,.lh-nav-cta,.ff-button,.pn-approve:not(:disabled),.pn-source-controls button):active,body.firms-next .cf-motion-control:active{scale:.96}
}
body.firms-next :is(button,summary,a):focus-visible,body.platform-next :is(button,summary,a):focus-visible{outline:2px solid #171716;outline-offset:4px;border-radius:4px}
body.platform-next :is(.pn-demo-tabs button,.cf-motion-control):focus-visible{outline-color:#fff}
body.platform-next :is(.pn-button,.lh-nav-cta,.ff-button):focus-visible{border-radius:999px}

/* 9 · Workspace walkthrough: panels and evidence change with opacity, a short rise and a little blur */
@media(prefers-reduced-motion:no-preference){
 body.platform-next .pn-panel{transition:opacity 280ms var(--id-ease),transform 280ms var(--id-ease),filter 280ms var(--id-ease),visibility 0s}
 body.platform-next .pn-panel[hidden]{transform:translateY(6px);filter:blur(4px);transition:opacity 140ms ease-out,transform 140ms ease-out,filter 140ms ease-out,visibility 0s 140ms}
 body.platform-next .id-swap{animation:id-swap 320ms var(--id-ease) both}
 body.platform-next .pn-approve.is-approved svg{animation:id-icon 300ms var(--id-ease) both}
 body.firms-next details[open]>:not(summary){animation:id-swap 360ms var(--id-ease) both}
}
@keyframes id-swap{from{opacity:0;transform:translateY(4px);filter:blur(4px)}}
@keyframes id-icon{from{opacity:0;scale:.25;filter:blur(4px)}}

/* 10 · Entrances: opacity, 8px of rise and 8px of blur, 800ms, staggered (80ms per title word, 100ms per block) */
@keyframes id-enter{from{opacity:0;transform:translateY(8px);filter:blur(8px)}}
html.id-ready [data-id-enter]{opacity:0}
html.id-ready [data-id-enter].id-in{opacity:1;animation:id-enter 800ms var(--id-ease) both;animation-delay:calc(var(--base,0ms) + var(--delay,100ms) * var(--stagger,0))}
html.id-ready [data-id-enter].id-done{opacity:1;animation:none}
body.platform-next .id-word{display:inline-block;white-space:pre}
@media(prefers-reduced-motion:reduce){html.id-ready [data-id-enter]{opacity:1!important;animation:none!important}}