.completed-cases{margin-top:64px;padding-top:40px;border-top:1px solid #ffffff26;min-width:0}.completed-cases-head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}.completed-cases-head h2{margin:0;color:#fff}.completed-cases-head p{margin:12px 0 0;color:#e7c6c6}.cases-controls{display:flex;gap:10px;flex-shrink:0}.cases-controls button{width:48px;height:48px;border:1px solid #ffffff55;background:transparent;color:#fff;border-radius:50%;font-size:25px;cursor:pointer}.cases-controls button:hover{background:#ffffff15}.cases-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding:4px 2px 20px;scrollbar-width:thin;scrollbar-color:#f7b2b2 #ffffff18}.case-card{flex:0 0 calc((100% - 60px)/4);min-width:210px;scroll-snap-align:start;margin:0}.case-open{display:block;width:100%;padding:0;border:0;border-radius:14px;overflow:hidden;background:#fff;cursor:zoom-in;color:#302526;text-align:left;font:inherit}.case-open img{display:block;width:100%;height:310px;object-fit:contain;background:white;padding:12px}.case-caption{display:block;padding:18px;border-top:1px solid #eee}.case-caption strong{display:block;font-size:18px}.case-caption small{display:block;font-size:14px;color:#78686a;margin-top:6px}.case-open:hover{outline:2px solid #f5aaaa}.case-open:focus-visible,.cases-controls button:focus-visible{outline:3px solid #f5aaaa;outline-offset:3px}.case-viewer{border:0;border-radius:16px;padding:0;width:min(1100px,96vw);max-width:96vw;height:94dvh;max-height:94dvh;background:#f6f3f3;color:#302526}.case-viewer::backdrop{background:#120d0de0}.case-viewer-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;background:#302526;color:#fff;position:sticky;top:0;z-index:1}.case-viewer-top h3{font:600 18px/1.4 Arial,sans-serif;margin:0}.case-viewer-close{border:0;background:transparent;color:white;font-size:32px;cursor:pointer;width:40px;height:40px}.case-viewer-pages{padding:20px;overflow:auto;height:calc(100% - 72px);-webkit-overflow-scrolling:touch}.case-viewer-pages img{display:block;width:min(900px,100%);height:auto;margin:0 auto 20px;background:white;box-shadow:0 3px 18px #0002}.case-viewer-pages p{text-align:center;font-size:14px;color:#695c5c}.cases-count{color:#e7c6c6;font-size:14px;margin:14px 0 0}@media(max-width:1000px){.case-card{flex-basis:calc((100% - 40px)/3)}.case-open img{height:280px}}@media(max-width:760px){.completed-cases{margin-top:40px;padding-top:32px}.completed-cases-head{align-items:flex-start;gap:12px}.completed-cases-head h2{font-size:32px}.completed-cases-head p{font-size:16px}.cases-controls{gap:6px}.cases-controls button{width:38px;height:38px;font-size:21px}.case-card{flex-basis:82%;min-width:0}.case-open img{height:330px}.case-caption{padding:16px}.case-viewer{width:96vw;height:94dvh}.case-viewer-top{padding:12px}.case-viewer-pages{padding:8px}.case-viewer-pages img{margin-bottom:12px}}
body:has(.case-viewer[open]){overflow:hidden}

/* One document immediately below the accompaniment link */
.approach-grid>div:first-child{min-width:0}
.approach .completed-cases{width:100%;max-width:none;margin:36px 0 0;padding:24px 0 0}
.approach .completed-cases-head{gap:12px;align-items:center}
.approach .completed-cases-head h2{font-size:clamp(26px,2.4vw,32px)}
.approach .cases-track{padding:0 0 12px;gap:20px}
.approach .case-card{flex:0 0 100%;min-width:0}
.approach .case-open img{height:520px;max-height:none;width:100%;padding:12px;object-fit:contain}
@media(max-width:760px){.approach .case-open img{height:450px}.approach .completed-cases{margin-top:28px}.approach .completed-cases-head h2{font-size:28px}}

/* Controls overlay the document */
.cases-stage{position:relative}
.approach .cases-stage .cases-controls{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 10px;pointer-events:none;z-index:2}
.approach .cases-stage .cases-controls button{pointer-events:auto;width:42px;height:42px;border:1px solid #ffffffaa;background:#302526b8;color:white;box-shadow:0 2px 8px #0003}
.approach .cases-stage .cases-controls button:hover{background:#302526}
.approach .cases-track{padding-bottom:0;scrollbar-width:none}
.approach .cases-track::-webkit-scrollbar{display:none}
@media(max-width:760px){.approach .cases-stage .cases-controls{padding:0 7px}.approach .cases-stage .cases-controls button{width:36px;height:36px}}