/* binder: window, tabs, pages. All under .w-binder. */
.w-binder{display:grid;gap:14px;justify-items:start}
.w-binder-win{width:100%;max-height:390px;border:3px solid var(--ink);border-radius:6px;background:var(--paper-hi);box-shadow:var(--shadow);overflow:hidden}
.w-binder-bar{height:26px;display:grid;place-items:center;border-bottom:3px solid var(--ink);background:repeating-linear-gradient(var(--ink) 0 2px,var(--paper-hi) 2px 5px)}
.w-binder-bar span{padding:0 12px;background:var(--paper-hi);font:700 12px/22px var(--sans)}
.w-binder-body{padding:14px;min-height:300px}
.w-binder-list{list-style:none;margin:0;padding:0}
.w-binder-list li{display:grid;gap:8px;align-content:start;padding:12px 0;border-top:1.5px solid}
.w-binder-h{margin:0;font:700 20px/1.25 var(--serif)}
.w-binder-c{margin:0;display:flex;flex-wrap:wrap;gap:6px}
.w-binder-c span{padding:2px 8px;border:1.5px solid;background:var(--card);font:600 13px var(--sans)}
.w-binder-rows,.w-binder-empty,.w-binder-tabs{display:none}
.w-binder.on .w-binder-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.w-binder.on .w-binder-list{display:grid;grid-template:"p"}
.w-binder.on .w-binder-list li{grid-area:p;border:0;padding:0;visibility:hidden;opacity:0}
.w-binder.on .w-binder-list li.sel{visibility:visible;opacity:1;animation:w-binder-flip var(--t-base) var(--ease)}
.w-binder.on .w-binder-list h4,.w-binder.on:not(.built) .w-binder-list{display:none}
.w-binder.on:not(.built) .w-binder-empty{display:grid;gap:8px;place-content:center;justify-items:center;min-height:210px;border:3px dashed var(--ink);opacity:.7}
.w-binder-cover{display:grid;gap:5px;justify-items:center;font:700 26px var(--serif)}.w-binder-cover i{width:90px;height:8px;border:2px solid var(--ink)}
.w-binder.on .w-binder-rows{display:grid;gap:8px}
.w-binder-rows i{height:12px;border:2px solid var(--ink);background:var(--c);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--t-story) var(--ease)}
li.sel .w-binder-rows i{transform:none}
.w-binder-tab{position:relative;isolation:isolate;padding:0 14px;border:3px solid var(--ink);background:var(--card);color:var(--ink);font:700 14px var(--sans);cursor:pointer;opacity:.45;transform:translateY(12px);transition:var(--t-base) var(--ease)}
.w-binder-tab::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--c);opacity:.55;transform:scaleY(0);transform-origin:50% 100%;transition:transform var(--t-story) var(--ease)}
.w-binder-tab.in{opacity:1;transform:none}
.w-binder-tab.full::before{transform:none}
.w-binder-tab[aria-selected=true]{box-shadow:0 5px 0 var(--ink)}
@keyframes w-binder-flip{from{opacity:0;transform:rotateX(-70deg)}to{opacity:1;transform:none}}
@media (max-width:499px){.w-binder.on .w-binder-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.w-binder-tab{padding:0 2px;font-size:12px}.w-binder-rows i:nth-child(4){display:none}}
@media (prefers-reduced-motion:reduce){.w-binder-tab,.w-binder-tab::before,.w-binder-rows i{transition:none}.w-binder.on .w-binder-list li.sel{animation:none}}