/* Design review pass (Oct 19): the newest notes as cards on the Lab and Scrubs indexes, a real 404, a tighter Ask page,
   one monospace, readable demo text on phones, and demo play states that keep every visible word at AA contrast. */

/* ---------- the newest three notes, as cards ---------- */
.px-feat{padding-top:clamp(28px,4vw,56px)}
.px-feat+.px-arch{padding-top:clamp(56px,6vw,88px)}
.px-feat-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;margin:0 0 22px}
.px-feat-head h2{font:600 clamp(24px,2.3vw,30px)/1.15 var(--px-sans);letter-spacing:-.022em;color:var(--px-ink);margin:0}
.px-feat-head a{font:500 15px/1.4 var(--px-sans);color:var(--px-blue);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.px-feat-head a:hover{text-decoration:underline;text-underline-offset:4px}
.px-fcards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.px-fcard{position:relative;display:flex;flex-direction:column;margin:0;background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 0 0 1px var(--px-line),0 1px 2px rgba(10,22,51,.04);transition:box-shadow .25s,transform .35s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.px-fcard:hover{transform:translateY(-3px);box-shadow:0 0 0 1px #d3dbeb,0 28px 50px -30px rgba(10,22,51,.38)}}
.px-fcard:has(.px-ft a:focus-visible){outline:2px solid var(--px-blue);outline-offset:3px}
.px-fart{aspect-ratio:1200/630;background:#f2f6ff;border-bottom:1px solid var(--px-line);overflow:hidden}
.px-fart img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.px-fcard:hover .px-fart img{transform:scale(1.025)}}
.px-fart.none img{visibility:hidden}
.px-fbody{display:flex;flex-direction:column;flex:1;padding:20px 22px 18px}
.px-fk{font:500 13px/1.4 var(--px-sans);color:var(--px-blue);margin:0!important}
.px-ft{font:600 20px/1.25 var(--px-sans);letter-spacing:-.016em;color:var(--px-ink);text-wrap:balance;margin:6px 0 0!important}
.px-ft a{color:var(--px-ink);text-decoration:none}
.px-ft a::after{content:"";position:absolute;inset:0;z-index:1}
.px-ft a:focus-visible{outline:none}
.px-fx{font:400 15px/1.5 var(--px-sans);color:var(--px-mute);margin:8px 0 0!important;text-wrap:pretty;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.px-ffoot{margin-top:auto;padding-top:18px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.px-fmeta{margin:0!important;display:flex;flex-wrap:wrap;gap:2px 12px;font:400 14px/1.4 var(--px-sans);color:var(--px-char)}
.px-fmeta time{font:400 13px/1.4 var(--px-mono);color:var(--px-mute)}
.px-ffoot .px-play{flex:none;min-width:0;z-index:2}
.px-fcard .px-prog{height:3px;bottom:0;z-index:2}
.px-feat.scr .px-fk,.px-feat.scr .px-feat-head a{color:var(--px-violet)}
.px-feat.scr .px-fcard:has(.px-ft a:focus-visible){outline-color:var(--px-violet)}
.px-feat.scr .px-fcard .px-prog{background:var(--px-violet)}
.px-feat.scr .px-fart{background:#f6f3ff}
@media (max-width:900px){
  .px-fcards{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(84%,360px);gap:14px;overflow-x:auto;
    scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;
    margin:0 calc(-1 * var(--px-gut));padding:4px var(--px-gut) 14px;scroll-padding:0 var(--px-gut)}
  .px-fcards::-webkit-scrollbar{display:none}
  .px-fcard{scroll-snap-align:start}
  .px-fbody{padding:18px 18px 16px}
  .px-ft{font-size:19px}
}

/* ---------- 404: the home page's hero band ---------- */
.px-nf{position:relative;isolation:isolate;padding:clamp(56px,8vw,112px) 0 clamp(40px,5vw,64px)}
.px-nf::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:100%;max-height:640px;
  clip-path:polygon(0 0,100% 0,100% 58%,0 100%);background:linear-gradient(100deg,#f2f6ff 0%,#e1eaff 38%,#9cb8ff 68%,#1559f5 100%);opacity:.95;pointer-events:none}
.px-nf-k{font:500 14px/1.4 var(--px-mono);color:var(--px-blue);margin:0!important;letter-spacing:.02em}
.px-nf h1{font:600 clamp(40px,5.6vw,72px)/1.03 var(--px-sans);letter-spacing:-.04em;color:var(--px-ink);max-width:14ch;margin:16px 0 0;text-wrap:balance}
.px-nf-d{font:400 clamp(17px,1.5vw,19px)/1.55 var(--px-sans);color:var(--px-char);max-width:520px;margin:20px 0 0!important}
.px-nfs{display:none;align-items:center;gap:12px;width:min(100%,520px);min-height:56px;margin:32px 0 0;padding:0 20px;box-sizing:border-box;
  background:#fff;border:0;border-radius:14px;box-shadow:0 0 0 1px rgba(10,22,51,.1),0 18px 40px -24px rgba(10,22,51,.45);
  font:400 17px/1 var(--px-sans);color:var(--px-mute);text-align:left;cursor:text;transition:box-shadow .2s}
.js .px-nfs{display:flex}
.px-nfs svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--px-ink);stroke-width:2;stroke-linecap:round}
.px-nfs:hover{box-shadow:0 0 0 1px rgba(21,89,245,.45),0 18px 40px -24px rgba(10,22,51,.45)}
.px-nfs:focus-visible{outline:2px solid var(--px-blue);outline-offset:3px}
.px-nfl{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.px-nfl li{margin:0}
.px-nfl a{position:relative;display:flex;flex-direction:column;height:100%;box-sizing:border-box;padding:20px 22px 22px;border-radius:14px;background:#fff;
  box-shadow:0 0 0 1px var(--px-line),0 1px 2px rgba(10,22,51,.04);text-decoration:none;transition:box-shadow .25s,transform .35s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.px-nfl a:hover{transform:translateY(-2px);box-shadow:0 0 0 1px #d3dbeb,0 24px 44px -28px rgba(10,22,51,.35)}}
.px-nfl a:focus-visible{outline:2px solid var(--px-blue);outline-offset:3px}
.px-nfl b{font:600 18px/1.3 var(--px-sans);letter-spacing:-.012em;color:var(--px-ink);display:flex;align-items:center;gap:8px}
.px-nfl b::after{content:"→";color:var(--px-blue);transition:transform .25s}
.px-nfl a:hover b::after{transform:translateX(3px)}
.px-nfl span{font:400 15px/1.5 var(--px-sans);color:var(--px-mute);margin-top:6px}
.px-nfl .scr b::after{color:var(--px-violet)}
@media (max-width:900px){.px-nfl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .px-nf::before{clip-path:none;max-height:none;height:100%;
    background:radial-gradient(130% 70% at 100% 0%,#9cb8ff 0%,#dfe8ff 42%,rgba(242,246,255,0) 78%);
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 45%,transparent 85%);mask-image:linear-gradient(180deg,#000 0,#000 45%,transparent 85%)}
  .px-nfl{grid-template-columns:none;gap:12px}
  .px-nfl a{padding:16px 18px 18px}
}

/* ---------- Ask page: the box fits what it holds until the conversation starts; the word carries "Online" ---------- */
#px-askpage:has(.px-askp-thread>.px-askp-start:only-child) .px-askp.inline{height:auto}
#px-askpage:has(.px-askp-thread>.px-askp-start:only-child) .px-askp-in{height:auto}
#px-askpage:has(.px-askp-thread>.px-askp-start:only-child) .px-askp-thread{flex:none;overflow:visible;padding-bottom:22px}
.px-askp-live i{display:none}
.px-askp-live{padding:3px 8px;color:var(--px-blue-ink,#0f46c9);background:#eef3ff}

/* ---------- one monospace ---------- */
main :is(code,pre,kbd,samp),.cn-rows b,.cn-key b,.hx2-code{font-family:"IBM Plex Mono",ui-monospace,monospace!important}

/* ---------- demo mockups on phones: nothing under 12px ---------- */
.hx5-nums dt{color:#566074}
@media (max-width:640px){
  .hx5-who small,.hx5-who em,.hx5-av,.hx5-bar span,.hx5-nums dt,.sx-chrome span,.sx-ui .sx-av,.sx-who em,.ok-scope em,
  .okx-chip,.okx-own i,.okx-weeks span,.okx-agent small,.okx-steps span,.okx-nums li span,.okx-nums li em,.okx-n-k,.okx-ok-k,
  .okx-to span,.cn-bar span,.cn-h small,.cn-rows b,.cn-rows code,.cn-key b,.cn-key span{font-size:12px!important}
  .okx-to i{width:22px!important;height:22px!important;flex:none;font-size:12px!important}
  .okx-own i{font-size:12px!important}
}

/* ---------- demo play states: what is still to come is a pale outline of the finished card, with no faded words ---------- */
/* the OKR coworker (home and OKR pages) */
.okx.s0 .okx-steps li,.okx.s1 .okx-steps li:nth-child(n+2),.okx.s2 .okx-steps li:nth-child(n+3),
.okx:is(.s0,.s1,.s2,.s3) .okx-ok,.okx:is(.s0,.s1,.s2,.s3,.s4) .okx-done,
/* the Teams conversation (OKR page) */
.pl .sx-m:not(.on),.pl .sx-did li:not(.on),.pl .pl-hide:not(.on){opacity:1!important;filter:none!important}
:is(.okx.s0 .okx-steps li,.okx.s1 .okx-steps li:nth-child(n+2),.okx.s2 .okx-steps li:nth-child(n+3),
.okx:is(.s0,.s1,.s2,.s3) .okx-ok,.okx:is(.s0,.s1,.s2,.s3,.s4) .okx-done,
.pl .sx-m:not(.on),.pl .sx-did li:not(.on),.pl .pl-hide:not(.on)),
:is(.okx.s0 .okx-steps li,.okx.s1 .okx-steps li:nth-child(n+2),.okx.s2 .okx-steps li:nth-child(n+3),
.okx:is(.s0,.s1,.s2,.s3) .okx-ok,.okx:is(.s0,.s1,.s2,.s3,.s4) .okx-done,
.pl .sx-m:not(.on),.pl .sx-did li:not(.on),.pl .pl-hide:not(.on)) *{
  color:transparent!important;-webkit-text-fill-color:transparent;text-shadow:none!important;transition:none!important}
:is(.okx.s0 .okx-steps li,.okx.s1 .okx-steps li:nth-child(n+2),.okx.s2 .okx-steps li:nth-child(n+3),
.okx:is(.s0,.s1,.s2,.s3) .okx-ok,.okx:is(.s0,.s1,.s2,.s3,.s4) .okx-done,
.pl .sx-m:not(.on),.pl .sx-did li:not(.on),.pl .pl-hide:not(.on)) :is(b,strong,span,em,i,small,code,p,dt,dd,h3,h4,a,button),
:is(.okx:is(.s0,.s1,.s2,.s3,.s4) .okx-done,.pl .sx-did li:not(.on),.pl .pl-hide:not(.on)){
  background:#edf0f6!important;background-image:none!important;border-color:transparent!important;box-shadow:none!important;border-radius:6px}
:is(.okx.s0 .okx-steps li,.okx.s1 .okx-steps li:nth-child(n+2),.okx.s2 .okx-steps li:nth-child(n+3),
.okx:is(.s0,.s1,.s2,.s3) .okx-ok,.okx:is(.s0,.s1,.s2,.s3,.s4) .okx-done,
.pl .sx-m:not(.on),.pl .sx-did li:not(.on),.pl .pl-hide:not(.on)) :is(svg,img){visibility:hidden}
.pl .sx-m:not(.on) .sx-av{border-radius:50%}
.okx.s0 .okx-steps li::before,.okx.s1 .okx-steps li:nth-child(n+2)::before,.okx.s2 .okx-steps li:nth-child(n+3)::before{
  background:#fff!important;box-shadow:0 0 0 3px #fff,inset 0 0 0 1.5px #d3d9e6!important}
.okx:is(.s0,.s1,.s2,.s3) .okx-ok{box-shadow:0 0 0 1px #e7eaf2!important}
/* the button already pressed: a quiet tint, not a faded blue */
.okx:is(.s1,.s2,.s3,.s4,.s5,.s6) .okx-go{opacity:1!important;background:#eef3ff!important;color:#0f46c9!important;box-shadow:none!important}

/* the Teams reply on the home page: wipes in instead of fading, so no word is ever half-faded */
.hx5-msg,.hx5-card,.hx5-ask,.hx5-done{clip-path:inset(-40px -40px -40px -40px);
  transition:clip-path .45s cubic-bezier(.2,.7,.2,1) .18s,transform .5s cubic-bezier(.2,.7,.2,1) .18s,opacity 0s linear .18s!important}
.hx5.p:not(.t1) .hx5-m1,.hx5.p:not(.t2) .hx5-m2,.hx5.p:not(.t3) .hx5-card,.hx5:not(.p) .hx5-ask,.hx5.p .hx5-done{
  clip-path:inset(0 0 100% 0);transition:clip-path .18s ease-in,transform .18s ease-in,opacity 0s linear .18s!important}
.hx5-btns .pri{transition:transform .2s,box-shadow .25s!important}
@media (prefers-reduced-motion:reduce){.hx5-msg,.hx5-card,.hx5-ask,.hx5-done{transition:none!important}}
/* the goal's status word changes at once, never through a half-blended colour */
.okx-pill{transition:none!important}
.pl .sx-m:not(.on) .sx-did li::before,.pl .sx-did li:not(.on)::before{background:#fff!important;background-image:none!important;box-shadow:inset 0 0 0 1.5px #d3d9e6!important;color:transparent!important}

/* ---------- second pass ---------- */
/* Status and Platform: the curl line wraps on phones instead of running off the card */
@media (max-width:640px){.st-check pre,.pf-out pre{white-space:pre-wrap;overflow-wrap:anywhere}}
/* Ask: the word "Online" at the 12px floor */
.px-askp-live{font-size:12px!important}
/* the demos' still-to-come outline: lighter, so it reads as a hint of the finished card and never as a loading screen */
:is(.okx.s0 .okx-steps li,.okx.s1 .okx-steps li:nth-child(n+2),.okx.s2 .okx-steps li:nth-child(n+3),
.okx:is(.s0,.s1,.s2,.s3) .okx-ok,.okx:is(.s0,.s1,.s2,.s3,.s4) .okx-done,
.pl .sx-m:not(.on),.pl .sx-did li:not(.on),.pl .pl-hide:not(.on)) :is(b,strong,span,em,i,small,code,p,dt,dd,h3,h4,a,button),
:is(.okx:is(.s0,.s1,.s2,.s3,.s4) .okx-done,.pl .sx-did li:not(.on),.pl .pl-hide:not(.on)){background:#f3f5f9!important}