.point-focus-panel {
  position: absolute;
  z-index: 15;
  top: 18px;
  right: 18px;
  width: clamp(240px, 27%, 300px);
  max-height: calc(100% - 36px);
  overflow: auto;
  padding: 14px;
  border: 1px solid rgba(111, 165, 144, .36);
  border-radius: 16px;
  background: rgba(246, 251, 248, .97);
  color: #213b30;
  box-shadow: 0 16px 40px rgba(28, 48, 42, .18);
  font-family: var(--font-body, sans-serif);
}
.point-focus-panel[hidden], .point-focus-panel [hidden] { display: none !important; }
.point-focus-heading, .point-focus-identity { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.point-focus-label { margin: 0; color: #357962; font-size: 14px; font-weight: 500; }
.point-focus-return {
  min-height: 44px;
  flex: none;
  padding: 8px 12px;
  border: 1px solid #608c78;
  border-radius: 9px;
  background: #294d40;
  color: #f1f5f2;
  font: 500 12px/1.4 var(--font-body, sans-serif);
  cursor: pointer;
}
.point-focus-return:hover { background: #396653; }
.point-focus-return:focus-visible, .point-focus-card-source:focus-visible { outline: 2px solid #d7b576; outline-offset: 3px; }
.point-focus-canvas { display: block; width: 100%; aspect-ratio: 4 / 3; margin: 12px 0; background: #e4ede9; border-radius: 10px; }
.point-focus-name { margin: 0; color: #213b30; font: 500 23px/1.4 var(--font-display, serif); }
.point-focus-code { color: #83672d; font: 500 13px/1.4 var(--font-body, sans-serif); }
.point-focus-status { margin: 6px 0 10px; color: #6e5a31; font-size: 11px; line-height: 1.6; }
.point-focus-location { margin: 0 0 12px; color: #244336; font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
.point-focus-source, .point-focus-card-source { margin: 0; color: #516d5e; font-size: 10px; line-height: 1.7; overflow-wrap: anywhere; }
.point-focus-card-source { display: inline-block; margin-top: 4px; text-underline-offset: 3px; }
@media (width <= 780px) {
  .point-focus-panel { position: relative; inset: auto; width: auto; max-height: none; margin: 0 14px 16px; order: 1; }
  .point-focus-canvas { max-height: 260px; object-fit: contain; }
  [data-point-focus-mobile="true"] { overflow: visible; }
  [data-point-focus-mobile="true"] .workspace { height: auto; min-height: 0; }
  [data-point-focus-mobile="true"] .atlas-stage { display: flex; flex-direction: column; height: auto; }
  [data-point-focus-mobile="true"] .atlas-stage .viewport { flex: none; height: 65dvh; min-height: 430px; max-height: 680px; }
  [data-point-focus-mobile="true"] .point-rail { position: relative; inset: auto; padding: 0 14px 16px; order: 2; }
  [data-point-focus-mobile="true"] .info-panel { position: static; max-height: none; }
  [data-point-focus-mobile="true"] .viewport-tools { bottom: 16px; max-width: calc(100% - 28px); flex-wrap: wrap; }
  [data-point-focus-mobile="true"] .viewport-hint { bottom: 94px; }
}