/* Slide focus helper — dims everything except a named rectangle and
   draws an accent ring + label. Each screen positions the focus via
   inline CSS variables on .focus-overlay:
     --fx, --fy : top-left of focus rect (px from frame origin)
     --fw, --fh : focus rect width / height
     --lx, --ly : label top-left (px). If omitted, label sits above rect.
   Add `position: relative` to the frame container (or use --focus-host).
*/

.focus-host { position: relative; }

.focus-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  --scrim: rgba(20, 18, 16, 0.58);
}

.focus-overlay .scrim {
  position: absolute;
  background: var(--scrim);
}
.focus-overlay .scrim-top    { top: 0; left: 0; right: 0; height: var(--fy); }
.focus-overlay .scrim-bottom { top: calc(var(--fy) + var(--fh)); left: 0; right: 0; bottom: 0; }
.focus-overlay .scrim-left   { top: var(--fy); left: 0; width: var(--fx); height: var(--fh); }
.focus-overlay .scrim-right  { top: var(--fy); left: calc(var(--fx) + var(--fw)); right: 0; height: var(--fh); }

.focus-overlay .ring {
  position: absolute;
  top: var(--fy);
  left: var(--fx);
  width: var(--fw);
  height: var(--fh);
  border: 2px solid #C75B72;
  border-radius: 4px;
  box-shadow: 0 0 0 4px rgba(199, 91, 114, 0.20), 0 8px 28px rgba(199, 91, 114, 0.18);
}

.focus-overlay .label {
  position: absolute;
  top: var(--ly, calc(var(--fy) - 26px));
  left: var(--lx, var(--fx));
  background: #C75B72;
  color: #F7F3EE;
  font-family: 'JetBrains Mono', 'JetBrains Mono Variable', Menlo, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.focus-overlay .label .num {
  background: rgba(247, 243, 238, 0.22);
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 10px;
}

.focus-overlay .arrow {
  position: absolute;
  top: calc(var(--fy) - 8px);
  left: calc(var(--fx) + var(--fw) / 2 - 6px);
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 8px solid #C75B72;
}