/* Schattenseiten HUD: pale ink over the host's dark field. Every kind of information has a fixed place at the
   edges; nothing floats over the field in a box, so the flat picture in the centre stays free. Same grammar as the
   other bodies' HUDs; Display's own surfaces are respected through the safe-area contract:
   var(--display-safe-top) is the header, var(--display-safe-bottom) the minimap's band on the right. */
.schattenseiten-content{
  --ink:#ecebe6;--dim:#9a9a94;--faint:#4d4d49;--paper:#0b1412;--edge:clamp(.9rem,2.2vw,1.6rem);
  position:absolute;inset:0;pointer-events:none;color:var(--ink);
  font-family:var(--mono);text-shadow:0 0 6px var(--paper),0 0 14px var(--paper);
}
.schattenseiten-content button,.schattenseiten-content input,.schattenseiten-content a{pointer-events:auto}
.ss-hud-rail{
  inline-size:min(24rem,calc(100vw - 1.5rem));
  max-block-size:calc(100dvh - var(--display-safe-top,0px) - 1rem);
  display:flex;flex-direction:column;gap:1rem;overflow:hidden auto;scrollbar-width:none;
}
.ss-hud-rail::-webkit-scrollbar{display:none}
.ss-hud-top{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.25rem 1.1rem;padding-bottom:.55rem;border-bottom:1px solid color-mix(in srgb,var(--ink) 16%,transparent)}
.ss-hud-top h1{grid-column:1/-1;margin:0 0 .35rem;font:600 var(--type-r0)/1 var(--mono);letter-spacing:.18em;text-transform:uppercase}
.ss-hud-stat{display:inline-flex;align-items:baseline;gap:.35rem}
.ss-hud-stat b{font-weight:500;font-size:var(--type-rn1);font-variant-numeric:tabular-nums}
.ss-hud-stat small{color:var(--dim);font-size:var(--type-rn2);letter-spacing:.14em;text-transform:uppercase}
.ss-hud-side{
  inline-size:min(24rem,calc(100vw - 1.5rem));
  max-block-size:calc(100dvh - var(--display-safe-top,0px) - 1rem);
  display:flex;flex-direction:column;gap:1rem;overflow:hidden auto;scrollbar-width:none;text-align:left;
}
.ss-hud-side::-webkit-scrollbar{display:none}
.ss-hud-bottom{
  inline-size:min(42rem,calc(100vw - 1.5rem));
  padding-top:.5rem;border-top:1px solid color-mix(in srgb,var(--ink) 16%,transparent);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem 1.4rem;
}
.ss-hud-flat{font:inherit;font-size:var(--type-rn1);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:none;border:0;border-bottom:1px solid var(--faint);padding:0 0 .15rem;cursor:pointer}
.ss-hud-flat:hover,.ss-hud-flat:focus-visible{border-color:var(--ink);outline:none}
.ss-hud-block{display:grid;gap:.4rem;pointer-events:auto}
.ss-hud-label{display:flex;justify-content:space-between;gap:.8rem;color:var(--dim);font-size:var(--type-rn2);text-transform:uppercase;letter-spacing:.16em;padding-bottom:.25rem;border-bottom:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.ss-word{margin:0;font:var(--type-r0)/1.35 var(--sans)}
.ss-way{color:var(--dim);font-size:var(--type-rn1)}
.ss-placeholder{font-style:italic;letter-spacing:.02em;opacity:.7}
.ss-hud-series{grid-column:1/-1;color:var(--dim);font-size:var(--type-rn2);letter-spacing:.14em;text-transform:uppercase;margin-top:-.2rem}
.ss-op,.ss-rank,.ss-meta{margin:0;font-size:var(--type-rn1);line-height:1.5;color:var(--dim)}
.ss-panel[hidden]{display:none}
.ss-cluster{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:.35rem}
.ss-cluster img{width:100%;display:block}
.ss-cluster figcaption{grid-column:1/-1;font-size:var(--type-rn2);color:var(--dim)}
.ss-anim{width:100%;display:block}
@media (max-width:560px){
  .ss-op,.ss-rank{display:none}
}

/* The site bounds its own sidebar from the actual orientation anchor. */
.ss-hud-side{max-inline-size:calc(100% - var(--ui-field-x,0px) - .75rem);max-block-size:calc(100dvh - var(--ui-field-y,0px) - .75rem);min-inline-size:0;overflow-wrap:anywhere}