/* Cases index (/keysy/): direction filter and the case list. Loaded by the page template after site.css (scripts/site-lib.mjs, SECTION_CSS). */
.page-hero .narrow,.page-body .narrow{max-width:1280px}
.page-hero .lead{max-width:60ch}
.docs [hidden],.bar[hidden],.empty[hidden]{display:none!important}
.bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;padding-bottom:22px;border-bottom:1.5px solid var(--ink)}
.flt{display:flex;flex-wrap:wrap;gap:8px}
.flt button{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 15px;border-radius:12px;border:0;background:var(--sheet);box-shadow:inset 0 0 0 1.5px var(--line-2);font:600 14.5px/1 var(--f-b);color:var(--ink);cursor:pointer;transition:background .15s,box-shadow .15s}
.flt button:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.flt button i{width:11px;height:11px;border-radius:3px;background:var(--c)}
.flt button[data-f="integr"] i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink)}
.flt button[aria-pressed="true"]{background:var(--c);color:var(--c-on);box-shadow:none}
.flt button[aria-pressed="true"] i{background:var(--c-on);box-shadow:none}
.flt button[data-f="all"],.flt button[data-f="integr"]{--c:var(--ink);--c-on:var(--paper)}
.flt button[data-f="all"] i{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
.flt-st{font:500 14px/1.3 var(--f-b);color:var(--ink-3);margin:0!important}
.note{display:flex;gap:10px;align-items:center;font:500 15px/1.4 var(--f-b);color:var(--ink-2);max-width:40ch;margin:0!important}
.note svg{width:20px;height:20px;flex:none}
.prose .docs{list-style:none;padding:0;display:flex;flex-direction:column;gap:clamp(48px,4vw,62px);margin-top:58px}
.prose .docs > li{margin:0}
.doc{position:relative;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);background:var(--sheet);border:1px solid var(--line);border-radius:6px 26px 26px 26px;box-shadow:var(--sh-1);transition:transform .2s,box-shadow .2s}
.doc:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.doc::before{content:attr(data-tab);position:absolute;left:-1px;top:-30px;height:31px;padding:0 16px;display:flex;align-items:center;border-radius:12px 12px 0 0;background:var(--c);color:var(--c-on);font:600 13.5px/1 var(--f-d)}
.docs > li:nth-child(even) .doc{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.docs > li:nth-child(even) .doc-v{order:2;border-radius:0 26px 26px 0}
.doc-v{background:var(--c);color:var(--c-on);border-radius:0 0 0 26px;padding:clamp(18px,2.2vw,32px);display:flex;flex-direction:column;justify-content:space-between;gap:20px;min-height:300px;position:relative;overflow:hidden}
.doc-v .il{position:absolute;right:14px;top:14px}
.doc-b{padding:clamp(20px,2.6vw,40px);display:flex;flex-direction:column;gap:16px}
.doc-top{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.st-live{display:inline-flex;align-items:center;gap:7px;font:600 13px/1 var(--f-b);padding:7px 10px;border-radius:9px;background:var(--paper-2);color:var(--ink)}
.st-live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 2px var(--ink) inset}
.prose .doc-h{margin:0;font:700 clamp(26px,2.5vw,42px)/1.04 var(--f-d);letter-spacing:-.035em;max-width:22ch}
.prose .doc-h a{color:var(--ink)!important;text-decoration:none}
.doc-h a::after{content:"";position:absolute;inset:0;border-radius:6px 26px 26px 26px}
.doc-h a:focus-visible{outline:0}
.doc:focus-within{outline:3px solid var(--cobalt);outline-offset:4px}
.doc-dl{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;margin:0!important;padding-top:14px;border-top:1px solid var(--line);font-size:15.5px;line-height:1.45}
.doc-dl dt{font:600 13.5px/1.45 var(--f-b);color:var(--ink-3)}
.doc-dl dd{color:var(--ink-2)}
.doc .more{margin-top:auto!important;display:inline-flex;align-items:center;gap:8px;font:600 16px/1.2 var(--f-d);color:var(--ink);border-bottom:1.5px solid currentColor;width:fit-content;padding-bottom:2px}
.doc .more svg{width:15px;height:15px;transition:transform .2s}
.doc:hover .more svg{transform:translateX(4px)}
.doc-v .ctag{font:600 15px/1 var(--f-d)}
.empty{border:2px dashed var(--line-2);border-radius:20px;padding:22px;color:var(--ink-2);font-size:16px}
.il{font:600 11.5px/1 var(--f-b);padding:5px 7px;border-radius:7px;background:var(--obj);color:#6c675c}
.card-o{background:var(--obj);color:#16140F;border-radius:14px;padding:12px 13px;box-shadow:0 14px 26px -14px rgba(22,20,15,.6);font:500 13.5px/1.35 var(--f-b);max-width:330px;transform:rotate(-2deg);transform-origin:left bottom;transition:transform .3s}
.doc:hover .card-o{transform:rotate(0) translateY(-4px)}
.dz{display:grid;grid-template-columns:34px 1fr;gap:3px 10px;align-items:center}
.dz .av{grid-row:span 2;width:34px;height:34px;border-radius:9px;background:#FFE3DB;color:#b3321a;font:700 12px/34px var(--f-d);text-align:center}
.dz b{font:600 14px/1.15 var(--f-d)}
.dz small{font:500 12px/1.2 var(--f-b);color:#6c675c}
.dz-l{margin-top:9px;padding-top:9px;border-top:1px dashed #D9D6CB;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px}
.stamp{font:700 11px/1 var(--f-b);padding:5px 7px;border-radius:6px;background:var(--amber);color:#16140F;white-space:nowrap;transform:rotate(-3deg)}
.bb{font:500 13.5px/1.3 var(--f-b);padding:8px 11px;border-radius:13px;width:fit-content;max-width:92%}
.bb-in{background:#fff;color:#16140F;border-bottom-left-radius:4px}
.bb-out{background:#16140F;color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.chat{display:flex;flex-direction:column;gap:7px;max-width:330px}
.chip{display:inline-flex;align-items:center;gap:7px;font:600 12px/1 var(--f-b);padding:7px 9px;border-radius:8px;background:var(--obj);color:#16140F;width:fit-content}
.chip i{width:8px;height:8px;border-radius:2px;background:var(--c)}
.win{background:var(--obj);color:#16140F;border-radius:12px;overflow:hidden;box-shadow:0 14px 26px -14px rgba(22,20,15,.6);max-width:330px;transform:rotate(-2deg);transition:transform .3s}
.doc:hover .win{transform:none}
.win-t{display:flex;align-items:center;gap:4px;padding:8px 10px;border-bottom:1px solid #ECEAE2;font:600 11.5px/1 var(--f-b);color:#6c675c}
.win-t i{width:7px;height:7px;border-radius:50%;background:#D9D6CB}
.win-t span{margin-left:6px}
.win-b{display:grid;grid-template-columns:40px 1fr;gap:10px;padding:10px}
.win-side{display:flex;flex-direction:column;gap:6px}
.win-side i{height:6px;border-radius:3px;background:#E6E3D9}
.win-side i:first-child{background:var(--sun)}
.win-main{display:flex;flex-direction:column;gap:6px}
.row{display:flex;justify-content:space-between;align-items:center;gap:8px;font:500 12px/1.2 var(--f-b);padding:6px 8px;border-radius:7px;background:#F5F4EF}
.row b{font-weight:700}
.pay{font:600 11.5px/1 var(--f-b);padding:7px 9px;border-radius:7px;background:#16140F;color:#fff;width:fit-content}
.prose .cta-in{margin-top:clamp(64px,7vw,112px)}
.prose .cta-in .h2{margin:0;font:700 clamp(30px,3.2vw,56px)/1 var(--f-d)}
.prose .btn-pri{color:#fff!important}
.prose .btn-sec{color:var(--ink)!important}
.prose .btn svg{width:18px;height:18px}
@media (max-width:1100px){
.doc,.docs > li:nth-child(even) .doc{grid-template-columns:1fr}
.doc-v,.docs > li:nth-child(even) .doc-v{order:0;border-radius:0 26px 0 0;min-height:220px}
}
@media (max-width:760px){
.bar{padding-bottom:12px;gap:8px}
/* filter: one row that scrolls sideways; a single-colour fade marks that there is more (site.js drops it at the end) */
.flt{flex-wrap:nowrap;width:calc(100% + var(--g));margin-right:calc(var(--g) * -1);padding-right:var(--g);overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}
.flt::-webkit-scrollbar{display:none}
.flt.is-end{-webkit-mask-image:none;mask-image:none}
.flt button{flex:none;min-height:44px;padding:0 12px;font-size:14px}
.doc{border-radius:6px 22px 22px 22px}
.doc::before{font-size:12.5px;height:28px;top:-27px;padding:0 12px}
.doc-v{min-height:190px;border-radius:0 22px 0 0}
.doc-dl{grid-template-columns:1fr;gap:2px}
.doc-dl dd{margin-bottom:8px}
.prose .docs{margin-top:50px;gap:48px}
}
/* the <style> block that used to open the page body pushed the first block down by the .prose rhythm; keep that offset */
.page-body .prose > .bar:first-child{margin-top:14px}