/* All cases — the sphere (cases.js). Tokens from spec §2, with fallbacks so the module renders on its own. */
.cases-field{position:relative;overflow:hidden;overflow:clip;background-color:var(--paper,#FAF8F3);
  background-image:radial-gradient(var(--dot,#cfcbc4) 1px,transparent 1.2px);background-size:24px 24px;
  color:var(--ink,#141412);font-family:var(--font-body,Georgia,"Times New Roman",serif);user-select:none;-webkit-user-select:none}
.cases-stage{position:absolute;inset:0;overflow:hidden;overflow:clip;touch-action:none;cursor:grab;
  /* cards drifting up fade out under the search field and the count, and cards at the sides fade into the page edge
     (the dots stay: they are the field's). The two gradients are intersected; cases.js also fades cards by the same
     bands, so a card never sits legible or clickable in them. */
  --cases-mask-top:linear-gradient(to bottom,transparent 150px,#000 215px);
  --cases-mask-side:linear-gradient(to right,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);
  -webkit-mask-image:var(--cases-mask-top),var(--cases-mask-side);mask-image:var(--cases-mask-top),var(--cases-mask-side);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.cases-stage.dragging{cursor:grabbing}
.cases-stage.dragging .cases-card{cursor:grabbing}

.cases-card{position:absolute;left:0;top:0;width:220px;padding:14px 16px 13px;margin:0;display:flex;flex-direction:column;gap:3px;
  text-align:left;background:var(--card,#fff);color:var(--ink,#141412);border:1px solid var(--line,rgba(20,20,18,.16));border-radius:2px;
  font:inherit;cursor:pointer;will-change:transform,opacity;transform-origin:50% 50%;
  transition:border-color .15s;-webkit-tap-highlight-color:transparent}
.cases-card:hover{border-color:var(--ink,#141412);z-index:100000!important;--hov:1.05}
.cases-card:focus-visible{outline:2px solid var(--blue,#3358A8);outline-offset:2px;z-index:100001!important}
.cases-title{font-family:var(--font-display,"Playfair Display",Georgia,serif);font-size:17px;font-weight:500;line-height:1.3;margin-bottom:4px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;line-clamp:3;overflow:hidden;overflow-wrap:anywhere}
.cases-far .cases-meta{display:none}                           /* far side: the title alone */
.cases-far .cases-title{margin-bottom:0}
.cases-meta{font-family:var(--font-body,Georgia,"Times New Roman",serif);font-size:13px;line-height:1.45;color:var(--mute,rgba(20,20,18,.55))}

.cases-top{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:min(420px,calc(100% - 120px));z-index:200000;text-align:center;pointer-events:none}
.cases-find{pointer-events:auto;display:block;width:100%;height:42px;padding:0 14px;margin:0;border:1px solid var(--line,rgba(20,20,18,.16));border-radius:2px;
  background:var(--card,#fff);color:var(--ink,#141412);font:16px/1.4 var(--font-body,Georgia,"Times New Roman",serif);outline:none;user-select:text;-webkit-user-select:text}
.cases-find::-webkit-search-cancel-button,.cases-find::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.cases-find::placeholder{color:var(--mute,rgba(20,20,18,.55))}
.cases-find:focus-visible,.cases-find:focus{border-color:var(--blue,#3358A8);outline:2px solid var(--blue,#3358A8);outline-offset:0}
.cases-count{margin-top:6px;font-size:14px;color:var(--mute,rgba(20,20,18,.55));display:inline-block;padding:0 8px;background:var(--paper,#FAF8F3)}

.cases-close{position:absolute;top:18px;right:18px;z-index:200000;width:40px;height:40px;display:grid;place-items:center;padding:0;margin:0;
  border:1px solid var(--line,rgba(20,20,18,.16));border-radius:2px;background:var(--card,#fff);color:var(--ink,#141412);
  font:22px/1 var(--font-body,Georgia,serif);cursor:pointer}
.cases-close:hover{background:var(--blue-soft,rgba(51,88,168,.10))}
.cases-close:focus-visible{outline:2px solid var(--blue,#3358A8);outline-offset:2px}

.cases-empty{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;width:calc(100% - 32px);max-width:560px;text-align:center;
  font:500 26px/1.35 var(--font-display,"Playfair Display",Georgia,serif);color:var(--ink,#141412)}

@media (max-width:600px){
  .cases-stage{--cases-mask-top:linear-gradient(to bottom,transparent 140px,#000 200px);
    --cases-mask-side:linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%)}
  .cases-top{top:14px;left:16px;transform:none;width:calc(100% - 32px - 52px)}
  .cases-close{top:14px;right:16px}
  .cases-empty{font-size:22px}
}
@media (prefers-reduced-motion:reduce){.cases-card{transition:none}}