/* =========================================================
   Instagram-exklusive Akten
   ---------------------------------------------------------
   Marks cases that are hidden/solved via @elb.dossier on
   Instagram rather than the normal hint flow. A colored
   "sticker" on the file card + a small dot in the chronik.
   ========================================================= */

/* Sticker on file-tab cards: sits centered under the "Standort"-meta
   line as a small identifier that this case is solved via Instagram.
   display:flex + width:fit-content + margin:auto centers the whole
   block while keeping the title/meta above it left-aligned.
   Note: no `filter: drop-shadow(...)` here — that creates a new
   containing block which breaks the parent's rotate() transform in
   stack mode, making the sticker look unrotated. Shadows live on
   the individual children instead. */
.file-tab .ig-sticker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0.9rem auto 0;
  width: fit-content;
  pointer-events: none;
}
.file-tab .ig-sticker img {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  /* Soft white border like a real sticker's die-cut edge */
  border: 2px solid #faf6ec;
  display: block;
  box-shadow: 0 2px 4px rgba(20, 10, 5, 0.25);
}
.file-tab .ig-sticker-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  padding: 2px 7px;
  border-radius: 3.5px;
  white-space: nowrap;
  text-transform: none;
  box-shadow: 0 2px 4px rgba(20, 10, 5, 0.22);
}

/* Vault sticker on case folders — mirrors the IG-sticker placement
   (centered below the title) but ICON ONLY, no label or text. This
   is intentional: the icon's meaning is the endgame puzzle. Anyone
   who's deep into the riddle will recognize the vault icon from the
   footer link and figure out what's special about these two cases.
   Anyone who isn't will see "a little vault icon" and not know it's
   a clue at all. */
.file-tab .vault-sticker {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Top margin reduced from 0.9rem (used by .ig-sticker) because the
     vault icon is much bigger and we need to claim vertical space.
     The icon itself still has visual breathing room because of the
     drop-shadow and its own internal padding. */
  margin: 0.4rem auto 0;
  width: fit-content;
  pointer-events: none;
}
.file-tab .vault-sticker img {
  /* Aspect 3:4 für die Frauenkirche — höher als breit, damit Kuppel
     und Treppentürme erhalten bleiben. */
  width: 60px;
  height: 80px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(20, 10, 5, 0.25));
}

/* Small IG dot on the chronik tile's top-right corner */
.chronik-card .chronik-ig-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  z-index: 2;
  pointer-events: none;
}
.chronik-card .chronik-ig-dot img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  border: 1.5px solid #faf6ec;
  display: block;
  box-shadow: 0 1px 2px rgba(20, 10, 5, 0.35);
}

/* Small vault dot on the chronik tile's top-LEFT corner (mirror
   of the IG dot's position so a card with both icons would not
   overlap them — but currently no card has both). Like the bigger
   sticker, no label, no aria description. Pure visual cue. */
.chronik-card .chronik-vault-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 16px;
  height: 22px;
  z-index: 2;
  pointer-events: none;
}
.chronik-card .chronik-vault-dot img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(20, 10, 5, 0.45));
}
.chronik-card { position: relative; }  /* ensure dot can absolute-position */

/* --- Image Lightbox (full-screen clue photo) --- */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12, 10, 8, 0.97);
  /* Über dem mobilen Fallakte-Overlay (z-index 250), damit das Vollbild
     auch aus der geöffneten Akte heraus oben liegt. */
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.lightbox-overlay.active {
  display: flex;
  opacity: 1;
}
.lightbox-img {
  /* Fill the viewport without exceeding it. Because small source
     images (~300px) would otherwise never scale up past their native
     size, we set explicit width/height ceilings that almost reach the
     viewport edges. `object-fit: contain` keeps the aspect ratio
     intact — the image won't ever crop, just upscale to fit.

     Wichtig: min-width darf NICHT größer als max-width werden — sonst
     gewinnt min-width und das Bild quillt aus dem Viewport. Wir
     nutzen `min(...)` mit beiden Constraints. */
  display: block;
  margin: auto;
  box-sizing: border-box;
  width: auto;
  height: auto;
  max-width: calc(100vw - 4rem);
  max-height: calc(100vh - 4rem);
  min-width: min(90vw, 600px, calc(100vw - 4rem));
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
  border: 8px solid #f4ecd6;
  background: transparent;
  cursor: zoom-out;
}
.lightbox-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 48px;
  height: 48px;
  background: rgba(239, 231, 212, 0.95);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s, transform 0.2s;
  padding: 0;
}
.lightbox-close:hover {
  background: var(--stamp-red);
  color: var(--paper);
  border-color: var(--stamp-red);
  transform: scale(1.05);
}
.lightbox-close svg { display: block; }

/* --- Folder overlay / Modal --- */
.folder-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 22, 19, 0.94);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.folder-overlay.active { display: flex; }
.folder-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.55 0 0 0 0 0.45 0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.15;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.folder-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: transparent;
  border: 1px solid rgba(239, 231, 212, 0.4);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  padding: 0.7rem 1.1rem;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.25s;
  z-index: 120;
}
.folder-close:hover {
  background: var(--paper);
  color: var(--ink);
  letter-spacing: 0.25em;
}