/* ============================================================
   Safina International: the Reading Room
   Chapter pages, the section page, and the games.
   Loaded after main.css on these pages only.
   ============================================================ */

/* English that stays English when the page is in Urdu (book and chapter titles) */
.en-fixed{font-family:var(--serif);direction:ltr;unicode-bidi:isolate}
body.ur h1.en-fixed,body.ur h3.en-fixed{font-weight:300;letter-spacing:-.02em;line-height:1.04;text-wrap:balance}
[dir="rtl"] .en-fixed{text-align:right}
.hon{font-family:var(--ar);font-size:.9em;white-space:nowrap;unicode-bidi:isolate}

/* a shorter night hero for chapters and games */
.phero.mini{min-height:clamp(350px,52vh,500px)}
.phero.mini .phero-copy{padding-top:clamp(112px,16vh,150px)}
.phero.mini h1{font-size:clamp(2.3rem,1.2rem + 4.6vw,4.9rem);max-width:19ch}
body.ur .phero.mini h1.en-fixed{font-size:clamp(2.3rem,1.2rem + 4.6vw,4.9rem);max-width:19ch}
body.ur .phero .sub.en-fixed{font-size:clamp(1.1rem,1rem + .4vw,1.3rem);line-height:1.5}
.phero .label.back{display:inline-flex;align-items:center;gap:.5em;transition:color .3s}
.phero .label.back::before{content:"";width:.5em;height:.5em;border-top:1px solid;border-inline-start:1px solid;transform:rotate(-45deg)}
[dir="rtl"] .phero .label.back::before{transform:rotate(45deg)}
.phero .label.back:hover{color:#f6efd9}

/* ---------- the section page ---------- */
.rr-head{grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:clamp(20px,4vw,60px)}
.rr-head>div:first-child{display:grid;gap:clamp(14px,1.8vw,24px)}
.model.book.rr-book{width:clamp(250px,30vw,430px);height:clamp(180px,21vw,300px);margin:0}
@media(max-width:820px){.rr-head{grid-template-columns:1fr}.model.book.rr-book{order:-1;margin:0 auto;width:min(340px,100%);height:230px}}
.folio-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,44px)}
@media(max-width:820px){.folio-row{grid-template-columns:1fr}}
.folio{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;min-height:clamp(300px,29vw,390px);
  padding:clamp(26px,3.4vw,50px);background:#fffdf6;border:1px solid var(--hair);border-inline-start:7px solid var(--navy);
  box-shadow:10px 10px 0 -1px var(--paper-2),10px 10px 0 0 var(--hair)}
.folio-num{position:absolute;inset-inline-end:.08em;top:-.14em;z-index:0;font-family:var(--serif);font-size:clamp(8rem,15vw,14rem);font-weight:300;line-height:1;letter-spacing:-.05em;color:var(--paper-2);transition:color .6s var(--ease),transform .8s var(--ease)}
.folio:hover .folio-num{color:#e6d9ad;transform:translateY(-6px)}
.folio>*:not(.folio-num){position:relative;z-index:1}
.folio h3,body.ur .folio h3.en-fixed{font-size:clamp(1.9rem,1.2rem + 2.4vw,3.1rem);margin:.4em 0 .45em;color:var(--navy);max-width:13ch}
.folio p{color:var(--ink-2);max-width:31em}
.folio .actions{margin-top:auto;padding-top:1.6em}
.folio-lang{font-size:.72em;color:var(--brass)}
.gcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,34px)}
@media(max-width:880px){.gcards{grid-template-columns:1fr}}
.gcard{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(22px,2.8vw,40px);border:1px solid var(--hair-d);background:rgba(20,58,99,.38);color:#dfe7f0;transition:background .4s,border-color .4s}
.gcard:hover,.gcard:focus-visible{background:rgba(27,74,122,.6);border-color:var(--gold)}
.gcard-icon{width:clamp(54px,5vw,74px);color:var(--gold);margin-bottom:1.3em;transition:transform .7s var(--ease)}
.gcard:hover .gcard-icon{transform:perspective(500px) rotateY(180deg)}
.gcard h3{color:#f6efd9;margin-bottom:.4em}
.gcard p{color:#c4d0de;margin-bottom:1.5em}
.gcard .link{margin-top:auto;color:var(--gold)}

/* ---------- a chapter, set to be read ---------- */
.chapter{width:min(720px,100% - 2*var(--gut));margin-inline:auto;padding-block:clamp(44px,6vw,88px) clamp(40px,6vw,84px);
  font-family:var(--serif);font-size:clamp(1.1rem,1rem + .36vw,1.26rem);line-height:1.72;color:#243449;text-align:left}
.chapter p{margin-top:1.05em}
.ch-head{padding-bottom:1.3em;margin-bottom:1.9em;border-bottom:1px solid var(--hair)}
.ch-book{display:flex;flex-wrap:wrap;align-items:baseline;gap:.1em .7em;margin:0!important}
.ch-book b{font-weight:500;font-size:1.5em;letter-spacing:-.012em;color:var(--navy)}
.ch-book span{font-style:italic;color:var(--ink-2)}
.ch-meta{margin-top:.45em!important;font-family:var(--sc);font-size:.84em;letter-spacing:.06em;color:var(--brass)}
.ch-note{margin-top:.6em!important;font-family:var(--ur);font-size:1.2em;line-height:1.8;color:var(--ink-2);text-align:right}
.ch-lead{font-size:1.26em;font-style:italic;font-weight:300;line-height:1.5;color:var(--navy);padding-left:1em;border-left:2px solid var(--rule);margin:0 0 1.6em!important}
body .chapter h2{margin-top:2em;font-size:clamp(1.5rem,1.2rem + 1.1vw,2rem);font-weight:400;letter-spacing:-.012em;line-height:1.18;color:var(--navy);text-wrap:balance;max-width:none}
body .chapter .ch-kicker,.g-kicker{margin:0 0 .75em;font-family:var(--sc);font-weight:500;font-size:.86em;letter-spacing:.07em;line-height:1.3;color:var(--brass);text-wrap:initial}
.ch-box{margin-top:1.7em;padding:1.3em 1.5em 1.4em;background:var(--paper-2);border:1px solid var(--hair)}
.ch-box ul,.ch-box li{margin:0}
.ch-box ul{display:grid;gap:.6em}
.ch-box li{position:relative;padding-left:1.25em}
.ch-box li::before{content:"";position:absolute;left:0;top:.68em;width:.38em;height:.38em;background:var(--rule);transform:rotate(45deg)}
.ch-terms{margin-top:1.9em}
.ch-terms dl{margin:0;border-top:1px solid var(--hair)}
.ch-terms dl>div{display:grid;grid-template-columns:minmax(0,10.5em) minmax(0,1fr);gap:.15em 1.4em;padding-block:.7em;border-bottom:1px solid var(--hair)}
.ch-terms dt{font-weight:500;color:var(--navy)}
.ch-terms dd{margin:0;color:var(--ink-2)}
@media(max-width:560px){.ch-terms dl>div{grid-template-columns:1fr}}
.ch-verse{margin:1.9em 0;padding:1.35em .5em 1.25em;text-align:center;border-block:1px solid var(--hair)}
.ch-verse .ar{font-weight:700;color:var(--navy);font-size:clamp(1.7rem,1.2rem + 2.2vw,2.6rem);line-height:1.95}
.chapter .ch-tr{margin-top:.5em;font-style:italic;color:var(--ink-2)}
.ch-ref,.chapter .ch-src{font-family:var(--sc);font-size:.82em;letter-spacing:.06em;color:var(--brass)}
.ch-ref{display:block;margin-top:.65em}
.ch-grade{display:block;margin-top:.15em;font-size:.84em;font-style:italic;color:var(--ink-2)}
.chapter .ch-src{margin-top:.55em}
.ch-table{margin:2.1em 0 0}
.ch-table table{width:100%;border-collapse:collapse;font-size:.95em;line-height:1.5}
.ch-table th{text-align:left;padding:.5em 1em .5em 0;font-family:var(--sc);font-weight:500;font-size:.88em;letter-spacing:.06em;color:var(--navy);border-bottom:1.5px solid var(--navy)}
.ch-table td{vertical-align:top;padding:.75em 1em .75em 0;border-bottom:1px solid var(--hair)}
.ch-table td:first-child{color:var(--navy);width:42%}
.chapter .ch-closing{margin-top:1.7em;font-style:italic;font-size:1.12em;line-height:1.55;color:var(--navy)}
.quiz{margin-top:2.8em;padding-top:1.6em;border-top:1.5px solid var(--navy)}
.q-list{display:grid;gap:1.9em;counter-reset:q}
.q{counter-increment:q}
.chapter .q-text{margin:0;font-weight:500;color:var(--ink)}
.q-text::before{content:counter(q) ". ";color:var(--brass)}
.q-opts{display:grid;gap:.5em;margin-top:.8em}
.q-opt{display:flex;align-items:baseline;gap:.8em;width:100%;padding:.68em .9em .72em;text-align:left;font:inherit;line-height:1.45;color:inherit;background:#fffdf6;border:1px solid var(--hair);transition:border-color .25s,background .25s}
.q-opt:hover{border-color:var(--rule);background:#fff}
.q-key{flex:none;font-family:var(--sc);color:var(--brass)}
.q.done .q-opt{pointer-events:none}
.q.done .q-opt:not(.right):not(.wrong){opacity:.55}
.q-opt.right{border-color:#2f6b4a;background:#e6f1e4;color:#173d27}
.q-opt.wrong{border-color:#a23a2e;background:#f6e4df;color:#6d2219}
.chapter .q-score{margin-top:1.4em;font-family:var(--sc);letter-spacing:.06em;color:var(--navy)}
.ch-reflect{margin-top:2.4em}
.ch-reflect ol{display:grid;gap:.85em;margin:0;padding-left:1.3em;list-style:decimal}
.ch-reflect li::marker{color:var(--brass)}
body.ur .chapter [data-k],body.ur [data-game] [data-k],body.ur .cx-clue b{font-family:var(--ur);letter-spacing:0;font-size:1.22em;line-height:1.7}
body.ur .chapter{text-align:left}
body.ur .chapter [data-k],body.ur [data-game] [data-k]{direction:rtl;unicode-bidi:isolate}
body.ur .q-score,body.ur .sort-score{font-family:var(--ur);letter-spacing:0;font-size:1.3em;line-height:1.7}

/* ---------- the review copy: every edit shown ---------- */
.review{padding-block:clamp(24px,3.4vw,44px);background:#fff7d1;border-block:1px solid #dcc66a;font-family:var(--serif);font-size:1.02rem;line-height:1.55;color:#3a3210;text-align:left}
.review-tag{font-family:var(--sc);font-size:.84em;letter-spacing:.07em;color:#7a5c00}
body .review h2{margin:.25em 0 .5em;font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem);font-weight:400;line-height:1.15;letter-spacing:-.01em;color:#3a3210;max-width:none}
.review-btn{margin-left:.5em;padding:.28em .8em .34em;font-family:var(--sc);font-size:.92em;letter-spacing:.05em;border:1px solid #7a5c00;border-radius:2px;color:#3a3210}
.review-btn:hover{background:#7a5c00;color:#fff7d1}
.review-list{display:grid;gap:.55em;margin-top:1.1em;padding-left:1.15em;list-style:disc}
ins.chg{text-decoration:none;background:#d8efd0;box-shadow:inset 0 -2px #3c8a4b;color:#143a1c}
del.chg{background:#f8dcd6;color:#8c2f25;text-decoration:line-through}
.chapter:not(.marks-on) ins.chg{background:none;box-shadow:none;color:inherit}
.chapter:not(.marks-on) del.chg{display:none}
.chapter.marks-on .ch-verse.is-new{background:#eef7ea;outline:2px solid #3c8a4b;outline-offset:3px}

/* ---------- games: shared ---------- */
.game-sec{padding-top:clamp(36px,5vw,64px)}
.game-note{margin-bottom:1em;color:var(--ink-2);font-size:.82em}
.cx,.pairs,.sorter{font-family:var(--serif);font-size:clamp(1.04rem,.98rem + .3vw,1.2rem);line-height:1.55;text-align:left;color:var(--ink)}
.cx-tabs{display:flex;flex-wrap:wrap;gap:.5em;margin-bottom:clamp(18px,2.6vw,30px)}
.tab{padding:.5em .95em .56em;font-family:var(--sc);font-size:.92rem;letter-spacing:.05em;line-height:1.2;color:var(--ink-2);border:1px solid var(--hair);border-radius:2px;transition:background .3s,color .3s,border-color .3s}
.tab:hover{border-color:var(--navy);color:var(--navy)}
.tab[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:var(--paper)}
.tab.done::after{content:"";display:inline-block;width:.42em;height:.42em;margin-left:.6em;background:var(--gold);transform:rotate(45deg) translateY(-.12em)}
.tool{padding:.5em 1em .56em;font-family:var(--sc);font-size:.9rem;letter-spacing:.05em;line-height:1.2;color:var(--navy);border:1px solid var(--navy);border-radius:2px;transition:background .3s,color .3s}
.tool:hover{background:var(--navy);color:var(--paper)}
.g-done{position:relative;margin-top:clamp(24px,4vw,44px);padding:clamp(28px,5vw,60px) clamp(18px,4vw,48px);background:var(--deep);color:#f6efd9;text-align:center;opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.g-done.show{opacity:1;transform:none}
.g-done .g-kicker{display:block;margin:0;color:var(--gold)}
.g-done blockquote{margin:.5em auto .55em;max-width:24em;font-style:italic;font-weight:300;font-size:clamp(1.35rem,1rem + 1.7vw,2.3rem);line-height:1.33}
.g-done cite{display:block;font-style:normal;font-family:var(--sc);font-size:.9em;letter-spacing:.06em;color:var(--gold-soft)}
.g-done .actions{justify-content:center;margin-top:1.5em}
.g-done .btn.dark{color:var(--night);background:linear-gradient(var(--paper),var(--paper)) no-repeat 0 100%/100% 0,var(--gold)}

/* ---------- crossword ---------- */
.cx-main{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(22px,4vw,60px);align-items:start}
@media(max-width:940px){.cx-main{grid-template-columns:minmax(0,1fr)}}
.cx-grid{--n:13;--cell:clamp(22px,calc((min(100vw,600px) - 2*var(--gut) - 2px)/var(--n)),42px);display:grid;grid-template-columns:repeat(var(--n),var(--cell));width:max-content;padding:1px;perspective:900px}
.cx-cell{position:relative;width:var(--cell);height:var(--cell)}
.cx-cell.blank{visibility:hidden}
.cx-cell input{display:block;width:100%;height:100%;padding:0;margin:0;border:0;border-radius:0;outline:0;text-align:center;text-transform:uppercase;caret-color:transparent;
  font:500 max(16px,calc(var(--cell) * .56))/1 var(--serif);color:var(--ink);background:#fffdf6;box-shadow:0 0 0 1px var(--navy);-webkit-appearance:none;appearance:none}
.cx-cell .num{position:absolute;top:1px;left:2.5px;z-index:1;font:500 calc(var(--cell) * .27)/1 var(--serif);color:var(--brass);pointer-events:none}
.cx-cell.word input{background:#f4ebcd}
.cx-cell.active input{background:var(--gold)}
.cx-cell.bad input{color:#a23a2e;background:#f6e4df}
.cx.solved .cx-cell input{animation:cxwin .9s var(--ease) both;animation-delay:calc(var(--o) * 26ms);pointer-events:none}
@keyframes cxwin{0%{transform:rotateX(0)}45%{transform:rotateX(90deg);background:var(--gold)}100%{transform:rotateX(0);background:var(--navy);color:var(--gold)}}
.cx.solved .cx-cell .num{color:var(--gold-soft);transition:color .3s .9s}
/* the clue sits above the grid and stays in view, so a phone keyboard never hides it */
.cx-clue{position:sticky;top:82px;z-index:3;min-height:3.3em;margin-bottom:.9em;padding:.6em .85em;background:var(--paper-2);border-left:3px solid var(--gold);font-size:1rem;line-height:1.45;max-width:calc(var(--n,13) * 42px)}
.cx-clue b{font-family:var(--sc);font-weight:500;letter-spacing:.05em;color:var(--brass);margin-right:.4em}
.len{font-style:normal;color:var(--ink-2);font-size:.9em}
.cx-tools{display:flex;flex-wrap:wrap;gap:.5em;margin-top:.8em}
.cx-clues{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,3vw,40px)}
@media(max-width:600px){.cx-clues{grid-template-columns:1fr}}
.cx-list{display:grid;gap:.1em;font-size:.98rem;line-height:1.42}
.cx-list li{display:flex;gap:.65em;padding:.36em .5em;border-radius:2px;cursor:pointer;transition:background .2s}
.cx-list li b{flex:none;min-width:1.3em;font-weight:500;color:var(--brass)}
.cx-list li:hover{background:#f1e9d2}
.cx-list li.cur{background:var(--paper-2);box-shadow:inset 3px 0 var(--gold)}
.cx-list li.filled{color:#8b95a3}

/* ---------- pairs ---------- */
.pairs-main{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,4vw,60px);align-items:start}
.pairs-bar{display:flex;align-items:center;justify-content:space-between;gap:1em;margin-bottom:1.2em;font-family:var(--sc);letter-spacing:.05em;color:var(--brass)}
.pairs-bar b{font-weight:500;color:var(--navy);margin-left:.3em}
/* all sixteen cards stay on screen at once: the grid is sized to the height of the window */
.pairs-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(7px,1.2vw,14px);width:min(100vw - 2*var(--gut),620px,calc((100svh - 190px) * .76));}
@media(max-width:860px){.pairs-main{grid-template-columns:minmax(0,1fr)}.pairs-grid{margin-inline:auto}.pairs-side{order:-1}.pairs-note{order:2}}
.pcard{position:relative;display:block;aspect-ratio:3/4;padding:0;perspective:900px;cursor:pointer;animation:pdeal .6s var(--ease) backwards;animation-delay:calc(var(--o) * 35ms)}
@keyframes pdeal{from{opacity:0;transform:translateY(30px)}}
.pc-in{position:absolute;inset:0;display:block;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.3,.85,.2,1)}
.pcard.up .pc-in{transform:rotateY(180deg)}
.pcard .f{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2em;padding:.5em .4em;border-radius:3px;text-align:center;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.pcard .back{color:var(--gold);border:1px solid var(--rule);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 92 92'%3E%3Cg fill='none' stroke='%23d8b74e' stroke-opacity='.2' stroke-width='1.6'%3E%3Crect x='20' y='20' width='52' height='52'/%3E%3Crect x='20' y='20' width='52' height='52' transform='rotate(45 46 46)'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(180deg,#1a4675,#0b2342)}
.pcard .back svg{width:44%;max-width:54px}
.pcard:hover .back{border-color:var(--gold)}
.pcard .front{transform:rotateY(180deg);background:#fffdf6;border:1px solid var(--rule);color:var(--navy);font-size:clamp(.7rem,.5rem + .62vw,.98rem);line-height:1.2;transition:box-shadow .5s,background .5s}
.pcard .front b{font-weight:500;font-size:1.1em;text-wrap:balance}
.pcard .front small{font-size:.86em;font-style:italic;color:var(--ink-2);text-wrap:balance}
.pcard .front .ar{font-size:1.7em;line-height:1.5;color:var(--brass)}
.pcard .front .hon{font-size:1em;color:var(--brass)}
.pcard.matched{cursor:default}
.pcard.matched .front{background:#f6eecf;box-shadow:0 0 0 2px var(--gold),0 0 28px rgba(216,183,78,.5)}
.pairs-note{min-height:3.2em;max-width:22em;font-style:italic;font-size:clamp(1.1rem,1rem + .6vw,1.5rem);font-weight:300;line-height:1.4;color:var(--navy)}
@media(max-width:860px){.pairs-side{display:contents}.pairs-bar{order:-1;margin-bottom:0}.pairs-note{font-size:1.08rem;min-height:4.4em}.pairs-main{gap:14px}}

/* ---------- science or scientism ---------- */
.sorter{max-width:660px;margin-inline:auto}
.sort-progress{display:flex;justify-content:center;gap:7px;margin-bottom:clamp(18px,3vw,30px)}
.sort-progress i{width:9px;height:9px;border:1px solid var(--rule);transform:rotate(45deg);transition:background .3s,border-color .3s}
.sort-progress i.on{background:var(--gold);border-color:var(--gold)}
.sort-progress i.r{background:#3c8a4b;border-color:#3c8a4b}
.sort-progress i.w{background:#a23a2e;border-color:#a23a2e}
.sort-stage{display:grid;place-items:center;min-height:clamp(230px,36vw,310px);perspective:1200px}
.sort-card{position:relative;width:100%;padding:clamp(52px,7vw,64px) clamp(20px,5vw,52px) clamp(34px,6vw,60px);text-align:center;background:#fffdf6;border:1px solid var(--rule);
  box-shadow:9px 9px 0 -1px var(--paper-2),9px 9px 0 0 var(--hair),18px 18px 0 -1px var(--paper-2),18px 18px 0 0 var(--hair);
  touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;transition:transform .45s var(--ease),opacity .3s}
.sort-card.drag{transition:none;cursor:grabbing}
.sort-card.in{animation:sortin .55s var(--ease) both}
@keyframes sortin{from{opacity:0;transform:translateY(34px) rotateX(-28deg)}}
.sort-card.go-l{transform:translateX(-120%) rotate(-16deg);opacity:0}
.sort-card.go-r{transform:translateX(120%) rotate(16deg);opacity:0}
.sort-text{font-size:clamp(1.3rem,1rem + 1.7vw,2.05rem);font-weight:300;line-height:1.3;letter-spacing:-.008em;color:var(--navy);text-wrap:balance}
.sort-card[data-stamp]::after{content:attr(data-stamp);position:absolute;top:14px;right:14px;padding:.2em .7em .26em;font-family:var(--sc);font-size:.92rem;letter-spacing:.08em;border:1.5px solid;border-radius:2px;transform:rotate(7deg);animation:stamp .35s var(--ease) both}
@keyframes stamp{from{opacity:0;transform:rotate(7deg) scale(1.9)}}
.sort-card.r::after{color:#2f6b4a}.sort-card.w::after{color:#a23a2e}
.sort-btns{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:clamp(18px,3vw,30px)}
.sort-btn{display:flex;flex-direction:column;align-items:center;gap:.15em;padding:.85em .6em .95em;font-family:var(--sc);font-size:1.12rem;letter-spacing:.05em;color:var(--navy);border:1.5px solid var(--navy);border-radius:2px;transition:background .3s,color .3s,opacity .3s}
.sort-btn small{font-family:var(--serif);font-style:italic;font-size:.8em;letter-spacing:0;color:var(--ink-2);transition:color .3s}
.sort-btn:hover:not([disabled]),.sort-btn.picked,.sort-stage[data-lean="science"]~.sort-btns [data-v="science"],.sort-stage[data-lean="scientism"]~.sort-btns [data-v="scientism"]{background:var(--navy);color:var(--paper)}
.sort-btn:hover:not([disabled]) small,.sort-btn.picked small,.sort-stage[data-lean="science"]~.sort-btns [data-v="science"] small,.sort-stage[data-lean="scientism"]~.sort-btns [data-v="scientism"] small{color:#c9d5e3}
.sort-btn[disabled]:not(.picked){opacity:.35;cursor:default}
.sort-why{margin-top:1.2em;padding:1em 1.2em 1.2em;background:var(--paper-2);border-left:3px solid var(--rule)}
.sort-why.r{border-color:#3c8a4b}.sort-why.w{border-color:#a23a2e}
.sort-why b{font-family:var(--sc);font-weight:500;letter-spacing:.05em}
.sort-why.r b{color:#2f6b4a}.sort-why.w b{color:#a23a2e}
.sort-why p{margin:.25em 0 1em}
.sorter.over .sort-stage,.sorter.over .sort-btns{display:none}

@media(prefers-reduced-motion:reduce){
  .g-done{opacity:1;transform:none}
}