/* VITALIS · 管理為何要系統 — why-v7 (2026-10-20, Joey):
   00  the poll question sweeps in from the left, its seven answers pop like popcorn, full width, with some body to them
   00  "人的問題" becomes a sorting game: three kinds, drag (with a magnetic pull and a small shake) or tap-then-tap
   02  the four cost cards rise on mouse-over and bounce when pressed
   03  impression vs record: faces, a rank that flips, and the point said in words
   Nothing here follows the pointer as a light; the only pointer tracking is the drag in why-sort.js. Nothing heavier than 600. */

/* ---------- 00 · poll: the question sweeps in, left to right ---------- */
.pw-sweep>span{clip-path:none !important;translate:none !important;transition:none !important}
.pw-sweep .pw-ch{display:inline-block}
.pw-sweep::after{content:"";display:block;width:min(560px,70%);height:2px;margin-top:16px;border-radius:2px;background:linear-gradient(90deg,var(--pw-gold-deco),var(--pw-gold),rgba(212,188,132,0));transform:scaleX(0);transform-origin:0 50%}
.pw-sweep.is-wait .pw-ch{opacity:0}
.pw-sweep.is-go .pw-ch{animation:pw-chsweep .62s var(--pw-spring) calc(var(--c) * 26ms) both}
.pw-sweep.is-go::after{transform:scaleX(1);transition:transform 1.1s var(--pw-apple) .15s}
@keyframes pw-chsweep{0%{opacity:0;transform:translateX(-.55em) scale(.55);filter:blur(5px)}55%{opacity:1;transform:translateX(.05em) scale(1.12);filter:blur(0)}100%{opacity:1;transform:none;filter:none}}

/* ---------- 00 · poll: seven answers, the full width, with body ---------- */
.pw-poll{max-width:none}
.pw-poll-resw,.pw-poll-note{max-width:880px}
.pw-poll-opts{display:flex;flex-wrap:wrap;gap:14px}
.pw-poll-opts button{position:relative;flex:1 1 230px;min-height:66px;padding:14px 22px 14px 52px;border-radius:16px;border:1px solid rgba(184,152,90,.45);
  background:linear-gradient(180deg,#FFFFFF 0%,#F7F2E8 100%);color:var(--pw-deep);font:500 17px/1.4 var(--pw-body);text-align:left;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(15,42,33,.06),0 14px 28px -20px rgba(15,42,33,.5);
  transition:translate .4s var(--pw-spring),scale .3s var(--pw-spring),box-shadow .35s,border-color .25s,background-color .25s,opacity .4s}
.pw-poll-opts button::before{content:"";position:absolute;left:20px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;border:1.5px solid var(--pw-gold-deco);background:#fff;box-shadow:inset 0 0 0 4px #fff;transition:background-color .3s,box-shadow .3s,border-color .3s}
@media (hover:hover) and (pointer:fine){.pw-poll-opts button:hover{translate:0 -4px;border-color:var(--pw-gold-deco);background:linear-gradient(180deg,#FFFFFF 0%,#F2EADA 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 22px 36px -22px rgba(15,42,33,.6)}}
.pw-poll-opts button:active{scale:.97}
.pw-poll-opts button[aria-pressed="true"]{background:linear-gradient(180deg,#E6CE8D 0%,#D4BC84 100%);border-color:var(--pw-gold-deco);color:var(--pw-deep);font-weight:600}
.pw-poll-opts button[aria-pressed="true"]::before{background:var(--pw-deep);border-color:var(--pw-deep);box-shadow:inset 0 0 0 4px var(--pw-gold-print)}
.pw-poll.is-popwait .pw-poll-opts button{opacity:0;scale:.3}
.pw-poll.is-pop:not(.is-settled) .pw-poll-opts button{animation:pw-popcorn .72s var(--pw-spring) var(--pd,0s) both}
@keyframes pw-popcorn{0%{opacity:0;scale:.25;translate:0 26px;rotate:var(--pr,0deg)}45%{opacity:1;scale:1.12;translate:0 -10px;rotate:calc(var(--pr,0deg) * -.5)}70%{scale:.95;translate:0 2px;rotate:0deg}100%{opacity:1;scale:1;translate:0 0;rotate:0deg}}

/* ---------- 00 · "人的問題": a sorting game ---------- */
.pw-sort{margin:40px 0 0}
.pw-sort-stage{position:relative;padding:clamp(24px,3.4vw,46px);border-radius:22px;color:var(--pw-ondark);
  background:radial-gradient(80% 90% at 50% 18%,#1B4D3D 0%,#0F2A21 62%,#0A1F18 100%);box-shadow:0 2px 6px rgba(15,42,33,.1),0 50px 100px -50px rgba(15,42,33,.65)}
.pw-sort-q{display:flex;flex-wrap:wrap;align-items:center;gap:.25em .45em;margin:0;font:500 clamp(22px,2.5vw,34px)/1.35 var(--pw-display);color:#fff}
.pw-sort-q .g{color:var(--pw-gold)}
.pw-sort-ico{display:inline-grid;place-items:center;flex:none;width:1.45em;height:1.45em;margin-right:.15em;border-radius:50%;background:var(--pw-gold);color:var(--pw-deep);font:italic 400 1em/1 var(--pw-latin)}
.pw-sort-how{margin:12px 0 0;font:400 14px/1.6 var(--pw-body);color:var(--pw-ondark-fine)}
.pw-sort-pool{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:10px 12px;min-height:76px;margin:24px 0 0;padding:18px;border-radius:18px;border:1px dashed rgba(212,188,132,.3);transition:border-color .3s,background-color .3s}
.pw-sort-pool:empty::after{content:"全部分好了。";font:400 14px/1 var(--pw-body);color:var(--pw-ondark-fine)}
.pw-chip{position:relative;z-index:1;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(212,188,132,.45);
  background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.06) 100%);color:#fff;font:500 16.5px/1.2 var(--pw-display);white-space:nowrap;
  cursor:grab;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 20px -14px rgba(0,0,0,.7);transition:scale .35s var(--pw-spring),background-color .25s,border-color .25s,box-shadow .25s}
@media (hover:hover) and (pointer:fine){.pw-chip:hover{border-color:var(--pw-gold);background:rgba(212,188,132,.2)}}
.pw-chip:focus-visible{outline:2px solid var(--pw-gold);outline-offset:3px}
.pw-chip[aria-pressed="true"]{border-color:var(--pw-gold);background:rgba(212,188,132,.32);box-shadow:0 0 0 3px rgba(212,188,132,.28),0 14px 24px -14px rgba(0,0,0,.7);scale:1.06}
.pw-chip.is-lift{scale:1.12;border-color:var(--pw-gold);box-shadow:0 0 0 3px rgba(212,188,132,.3),0 20px 34px -14px rgba(0,0,0,.75)}
.pw-chip.is-drag{z-index:30;cursor:grabbing;scale:1.1;border-color:var(--pw-gold);background:rgba(23,67,52,.96);box-shadow:0 0 0 1px rgba(212,188,132,.5),0 26px 44px -16px rgba(0,0,0,.8)}
.pw-chip.is-back{transition:transform .55s var(--pw-spring),scale .35s var(--pw-spring)}
.pw-chip.is-snap{animation:pw-snap .6s var(--pw-spring)}
@keyframes pw-snap{0%{scale:1.16}40%{scale:.88}70%{scale:1.06}100%{scale:1}}
.pw-sort.is-popwait .pw-chip{opacity:0;scale:.3}
.pw-sort.is-pop:not(.is-settled) .pw-chip{animation:pw-popcorn .72s var(--pw-spring) var(--pd,0s) both}

.pw-sort-bins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}
.pw-bin{display:flex;flex-direction:column;border-radius:18px;border:1px solid rgba(212,188,132,.38);background:rgba(255,255,255,.04);cursor:pointer;
  transition:border-color .25s,background-color .25s,box-shadow .3s,scale .35s var(--pw-spring)}
.pw-bin-unk{border-style:dashed}
.pw-bin-head{display:block;width:100%;padding:18px 20px 10px;border:0;border-radius:18px 18px 0 0;background:none;color:inherit;text-align:left;cursor:pointer}
.pw-bin-head b{display:block;font:500 clamp(19px,1.8vw,24px)/1.3 var(--pw-display);color:var(--pw-gold)}
.pw-bin-head span{display:block;margin-top:6px;font:400 13.5px/1.6 var(--pw-body);color:var(--pw-ondark-fine)}
.pw-bin-head:focus-visible{outline:2px solid var(--pw-gold);outline-offset:-3px}
.pw-bin-list{flex:1;display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px;min-height:132px;padding:6px 14px 18px}
.pw-bin-list .pw-chip{min-height:38px;padding:0 14px;font-size:15px}
.pw-sort.is-picking .pw-bin{border-color:rgba(212,188,132,.75);background:rgba(212,188,132,.07)}
.pw-bin.is-near{border-color:var(--pw-gold);background:rgba(212,188,132,.16);scale:1.025;box-shadow:0 0 0 3px rgba(212,188,132,.22),0 24px 44px -26px rgba(212,188,132,.7)}
.pw-sort-pool.is-near{border-color:var(--pw-gold);background:rgba(212,188,132,.08)}
.pw-bin.is-thud{animation:pw-thud .45s ease}
@keyframes pw-thud{0%{translate:0 0}15%{translate:-5px 0}35%{translate:5px 0}55%{translate:-3px 0}75%{translate:2px 0}100%{translate:0 0}}

.pw-sort-end{margin-top:26px;padding-top:22px;border-top:1px solid rgba(212,188,132,.3)}
.pw-sort.armed:not(.is-done) .pw-sort-end{display:none}
.pw-sort.armed.is-done .pw-sort-end{animation:pw-in .9s var(--pw-ease) both}
.pw-sort-tally{margin:0 0 10px;font:600 12px/1.5 var(--pw-label);letter-spacing:.12em;color:var(--pw-gold)}
.pw-sort-tally:empty{display:none}
.pw-sort-sum{margin:0;max-width:30em;font:500 clamp(21px,2.3vw,30px)/1.5 var(--pw-display);color:#fff;text-wrap:balance}
.pw-sort-pros{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}
.pw-sort-pros p{margin:0;padding:14px 18px;border-radius:14px;border:1px solid var(--pw-gold);background:rgba(212,188,132,.12);font:400 14.5px/1.7 var(--pw-body);color:var(--pw-ondark)}
.pw-sort-pros .t{display:block;margin-bottom:6px;font:600 11px/1 var(--pw-label);letter-spacing:.2em;color:var(--pw-gold)}
.pw-sort-pros b{margin-right:8px;font:500 19px/1.2 var(--pw-latin);color:#fff}

/* ---------- 02 · the four cost cards: rise on mouse-over, bounce when pressed ---------- */
.pw-chain li{cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:opacity .6s var(--pw-ease) calc(.2s + var(--i,0) * .18s),transform .7s var(--pw-apple) calc(.2s + var(--i,0) * .18s),box-shadow .4s,translate .45s var(--pw-spring),scale .3s var(--pw-spring),border-color .3s,background-color .3s}
@media (hover:hover) and (pointer:fine){
  .pw-chain.in li:hover{translate:0 -7px;border-color:var(--pw-gold-deco);background:#FFFDF8;box-shadow:0 26px 44px -26px rgba(15,42,33,.55)}
  .pw-chain.in li:last-child:hover{background:var(--pw-forest);border-color:var(--pw-gold);box-shadow:0 26px 44px -22px rgba(10,31,24,.85)}
}
.pw-chain li:active{scale:.95}
.pw-chain li.is-boing{animation:pw-boing .62s var(--pw-ease)}
@keyframes pw-boing{0%{scale:.93}30%{scale:1.06}55%{scale:.98}78%{scale:1.02}100%{scale:1}}

/* ---------- 03 · impression vs record ---------- */
.pw-p-top{display:flex;align-items:center;gap:12px}
.pw-ava{flex:none;width:46px;height:46px;clip-path:circle(50%)}
.pw-ava .bg{fill:#24584A}
.pw-ava .body{fill:var(--pw-gold)}
.pw-p-b .pw-ava .body{fill:#BDCCC5}
.pw-ava .head{fill:#F3EBDD}
.pw-ava .hair{fill:#0F2A21}
.pw-ava .tie{fill:#0F2A21}
.pw-ava .specs{fill:none;stroke:#0F2A21;stroke-width:1.2}
.pw-p .rank{margin-left:auto;display:flex;align-items:baseline;gap:6px}
.pw-p .rank small{font:600 10.5px/1 var(--pw-label);letter-spacing:.14em;color:var(--pw-ondark-fine)}
.pw-p .rank b{font:italic 400 30px/1 var(--pw-latin);color:var(--pw-gold)}
.pw-p .rank .rr{display:none}
.pw-lens[data-mode="rec"] .pw-p .rank .ri{display:none}
.pw-lens[data-mode="rec"] .pw-p .rank .rr{display:inline;animation:pw-rankpop .55s var(--pw-spring)}
.pw-lens[data-mode="imp"] .pw-p .rank .ri{animation:pw-rankpop .55s var(--pw-spring)}
@keyframes pw-rankpop{0%{opacity:0;scale:1.8}100%{opacity:1;scale:1}}
.pw-lens[data-mode="rec"] .pw-p-b{order:-1}
.pw-lens-verdict{margin:18px 0 0;padding:12px 16px;border-radius:12px;border-left:3px solid var(--pw-gold);background:rgba(212,188,132,.12);font:500 clamp(17px,1.6vw,20px)/1.55 var(--pw-display);color:#fff}
.pw-lens-verdict.is-flip{animation:pw-in .55s var(--pw-ease)}
.pw-lens-take{margin:14px 0 0;font:400 15px/1.75 var(--pw-body);color:var(--pw-ondark);transition:opacity .7s var(--pw-ease),translate .7s var(--pw-ease)}
.pw-lens.armed:not(.seen) .pw-lens-take{opacity:0;translate:0 8px}

/* ---------- small screens ---------- */
@media (max-width:860px){
  .pw-poll-opts button{flex-basis:100%;min-height:58px;font-size:16px}
  .pw-sort-bins{grid-template-columns:minmax(0,1fr)}
  .pw-bin-list{min-height:60px}
  .pw-sort-pros{grid-template-columns:minmax(0,1fr)}
  .pw-sort-pool{gap:8px;padding:14px 10px}
  .pw-chip{min-height:38px;padding:0 13px;font-size:14.5px}
  .pw-bin-list .pw-chip{min-height:34px;padding:0 12px;font-size:14px}
}

/* ---------- reduced motion: everything is simply there ---------- */
@media (prefers-reduced-motion:reduce){
  .pw-sweep .pw-ch,.pw-poll-opts button,.pw-chip,.pw-bin,.pw-chain li,.pw-lens-verdict,.pw-p .rank b{animation:none !important;transition:none !important}
  .pw-sweep::after{transform:scaleX(1)}
}