/* The hover blueprint's layer (design/blueprint.js; DESIGN.md, "The blueprint").
   Consumes tokens.css only; every surface ships a byte copy of this file. */

.bp-layer { position: fixed; inset: 0; pointer-events: none; z-index: var(--z-dropdown); opacity: 0; transition: opacity var(--dur-small) var(--ease-out); contain: strict; }
.bp-layer.is-on { opacity: 1; }
.bp-layer.is-quiet .bp-ghost { display: none; }
html:has(dialog:modal) .bp-layer,
html:has([data-bp-off]:not([hidden])) .bp-layer { display: none; }

.bp-box {
  position: absolute; inset-block-start: 0; left: 0;
  border: var(--bw) var(--skeleton-style) var(--bp-stroke);
  transition: transform var(--dur-small) var(--ease-out);
}
.bp-box::before,
.bp-box::after {
  content: ''; position: absolute; width: var(--bp-tick); height: var(--bp-tick);
  border: var(--bracket-w) solid var(--bp-stroke);
}
.bp-box::before { inset-block-start: calc(-1 * var(--bracket-w)); left: calc(-1 * var(--bracket-w)); border-right: 0; border-bottom: 0; }
.bp-box::after { inset-block-end: calc(-1 * var(--bracket-w)); right: calc(-1 * var(--bracket-w)); border-left: 0; border-top: 0; }

.bp-guide { position: absolute; }
.bp-guide-x { inset-block: 0; left: 0; border-left: var(--bw) var(--skeleton-style) var(--border-dash); }
.bp-guide-y { inset-inline: 0; top: 0; border-top: var(--bw) var(--skeleton-style) var(--border-dash); }

.bp-size,
.bp-tag {
  position: absolute; inset-block-end: calc(100% + var(--sp-4));
  font: var(--weight-strong) var(--text-xs) / 1 var(--font-mono); letter-spacing: var(--tracking-label);
  color: var(--accent-ink); background: var(--bg); padding: var(--sp-4) var(--sp-8);
  border: var(--bw) solid var(--accent-edge); white-space: nowrap; direction: ltr;
}
.bp-size { right: 0; }
.bp-tag { left: 0; text-transform: var(--case-eyebrow); }
.bp-tag[hidden] { display: none; }

.bp-ghost {
  position: absolute; inset-block-start: 0; left: 0; width: var(--bp-ghost-w);
  display: grid; gap: var(--sp-8); padding: var(--sp-12);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border: var(--bw) var(--skeleton-style) var(--skeleton-border);
}
.bp-bar { height: var(--sp-8); background: var(--skeleton-bar); }
.bp-bar-1 { width: 72%; }
.bp-bar-2 { width: 100%; }
.bp-bar-3 { width: 48%; }
.bp-coords { font: var(--weight-regular) var(--text-xs) / 1 var(--font-mono); color: var(--ink-faint); direction: ltr; }

@media (forced-colors: active) {
  .bp-layer { display: none; }
}