/* Layer after entry.css, scene-layer.css, and mobile-compat.css.
   Artwork and hit-test geometry stay in entry.json/scenes.json + their JS.
   Decorative ink/brass SVG edges mirror those polygons; no source media is changed. */
:root {
  --hotspot-ink: #101711;
  --hotspot-ivory: #f0e7d3;
  --hotspot-brass: #c7a96e;
  --hotspot-fill: transparent;
}

.journal-hotspot { filter: none; }
.journal-hotspot::before,
.study-object-target::before {
  background-color: var(--hotspot-fill);
  background-image: var(--hotspot-edge, none);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 0;
  box-shadow: none;
  opacity: 1;
  animation: none;
  transition: background-color .15s ease;
}
.journal-hotspot:hover::before,
.journal-hotspot:focus-visible::before,
.entry-scene.pending .journal-hotspot::before,
.study-object-target:hover::before,
.study-object-target:focus-visible::before {
  background: transparent var(--hotspot-edge, none) 0 0 / 100% 100% no-repeat;
  opacity: 1;
  animation: none;
}

.journal-label,
.study-object-target::after,
.study-object-caption {
  box-sizing: border-box;
  background: var(--hotspot-ink);
  color: var(--hotspot-ivory);
  border: 2px solid var(--hotspot-brass);
  text-shadow: none;
  box-shadow: 0 0 0 2px #080d0b, 0 3px 9px #0008;
  font-weight: 600;
  line-height: 1.45;
}
.journal-label {
  padding: 7px 10px;
  font-size: 10px;
  letter-spacing: .08em;
}
.journal-label::before {
  position: absolute;
  bottom: 100%;
  left: calc(50% - 1px);
  width: 2px;
  height: 12px;
  margin: 0 0 2px;
  background: var(--hotspot-brass);
}
.entry-scene.pending .journal-label { opacity: 1; }
/* The visual cue still disappears when the approved entry clip takes over. */
.entry-scene.looking .journal-label { opacity: 0; }
.study-object-target::after {
  min-height: 32px;
  max-width: 145px;
  padding: 7px 10px;
  font-size: 11px;
}
.study-object-caption {
  min-width: 44px;
  min-height: 48px;
  padding: 12px 18px;
  font-size: 12px;
  cursor: pointer;
}
.study-object-target:hover::after,
.study-object-target:focus-visible::after,
.study-object-caption:hover {
  background: #1d281e;
  border-color: var(--hotspot-ivory);
  color: var(--hotspot-ivory);
}
/* Focus on the entry's clipped polygon is also echoed by its unclipped label. */
.journal-hotspot:focus-visible + .journal-label,
.study-object-target:focus-visible::after,
.study-object-caption:focus-visible,
.entry-action:focus-visible,
#study-main-action:focus-visible {
  outline: 3px solid var(--hotspot-ivory);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px #080d0b;
}
.entry-action,
#study-main-action { min-width: 44px; min-height: 48px; }

@media (max-width: 760px) {
  .journal-label { font-size: 10px; letter-spacing: .04em; padding: 6px 8px; }
  .study-object-target::after { max-width: 86px; min-height: 32px; padding: 6px; font-size: 10px; }
  .study-object-caption { min-height: 48px; font-size: 12px; padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .journal-hotspot::before,
  .study-object-target::before { transition: none; }
}
@media (forced-colors: active) {
  .journal-label,
  .study-object-target::after,
  .study-object-caption { background: Canvas; color: CanvasText; border-color: ButtonText; }
  .journal-hotspot:focus-visible + .journal-label,
  .study-object-target:focus-visible::after,
  .study-object-caption:focus-visible,
  .entry-action:focus-visible,
  #study-main-action:focus-visible { outline-color: Highlight; }
}

/* Entry edge matches its approved polygon. Scene JS supplies --hotspot-edge
   from each configured study polygon, using the same ink/brass double stroke. */
.journal-hotspot { --hotspot-edge: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cpolygon%20points%3D%2233.802817%2C0.000000%20100.000000%2C17.045455%2078.521127%2C100.000000%200.000000%2C75.568182%22%20fill%3D%22none%22%20stroke%3D%22%23080d0b%22%20stroke-width%3D%227%22%20stroke-linejoin%3D%22round%22%20vector-effect%3D%22non-scaling-stroke%22%2F%3E%3Cpolygon%20points%3D%2233.802817%2C0.000000%20100.000000%2C17.045455%2078.521127%2C100.000000%200.000000%2C75.568182%22%20fill%3D%22none%22%20stroke%3D%22%23c7a96e%22%20stroke-width%3D%223%22%20stroke-linejoin%3D%22round%22%20vector-effect%3D%22non-scaling-stroke%22%2F%3E%3C%2Fsvg%3E"); }


/* Text is in an external caption rail; only the object outline overlays artwork. */
.journal-label,.study-object-target::after{display:none}
.study-caption-rail .button{background:var(--hotspot-ink);color:var(--hotspot-ivory);border:2px solid var(--hotspot-brass);font-size:12px;line-height:1.6;min-height:48px;width:100%;white-space:normal}
.study-caption-rail .button:hover{background:#1d281e;border-color:var(--hotspot-ivory)}
.study-caption-rail .button:focus-visible{outline:3px solid var(--hotspot-ivory);outline-offset:4px}