/* ============================================================================
   upon / blueprint kit  v0.1
   Design-tool and technical-drawing language as UI: rulers, a coordinate
   readout, Figma-style selection frames, dimension lines, a drawing title
   block. Load after base.css; blueprint.js wires it up.

   Rule: the kit appears on arrival or on interaction, then steps back.
   ========================================================================== */
:root{ --ruler: 18px }
@media (hover:none), (max-width:900px){ :root{ --ruler: 0px } }

/* ---- rulers ---- */
.bp-ruler{
  position:fixed; z-index:70; pointer-events:none; overflow:hidden;
  background-color:color-mix(in oklab, var(--paper) 94%, transparent);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:var(--line); font:500 8.5px/1 var(--font-mono); letter-spacing:.04em;
}
.bp-ruler--x{
  top:0; left:0; right:0; height:var(--ruler); border-bottom:1px solid var(--rule);
  background-image:
    linear-gradient(90deg, var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--guide) 1px, transparent 1px);
  background-size:120px 9px, 24px 4px;
  background-repeat:repeat-x; background-position:0 100%, 0 100%;
}
.bp-ruler--y{
  top:0; bottom:0; left:0; width:var(--ruler); border-right:1px solid var(--rule);
  background-image:
    linear-gradient(180deg, var(--line) 1px, transparent 1px),
    linear-gradient(180deg, var(--guide) 1px, transparent 1px);
  background-size:9px 120px, 4px 24px;
  background-repeat:repeat-y; background-position:100% 0, 100% 0;
}
.bp-ruler--x span{ position:absolute; top:3px }
.bp-ruler--y .strip{ position:absolute; left:0; top:0; width:100%; will-change:transform }
.bp-ruler--y span{ position:absolute; left:2px; transform:rotate(-90deg) translateX(-100%); transform-origin:0 0 }
.bp-corner{
  position:fixed; z-index:71; top:0; left:0; width:var(--ruler); height:var(--ruler);
  background:var(--paper); border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.bp-mark{ position:absolute; background:var(--ink) }
.bp-ruler--x .bp-mark{ top:0; bottom:0; width:1px }
.bp-ruler--y .bp-mark{ left:0; right:0; height:1px }
.bp-band{ position:absolute; background:color-mix(in oklab, var(--accent) 70%, transparent); opacity:0; transition:opacity .2s }
.bp-ruler--x .bp-band{ top:0; bottom:0 }
.bp-ruler--y .bp-band{ left:0; right:0 }
.bp-band.on{ opacity:1 }
@media (hover:none), (max-width:900px){ .bp-ruler, .bp-corner, .bp-coords{ display:none } }

/* ---- coordinate readout, riding with the pointer ---- */
.bp-coords{
  position:fixed; z-index:72; left:0; top:0; pointer-events:none;
  font:500 10px/1 var(--font-mono); letter-spacing:.04em; color:var(--ink);
  padding:5px 7px; border:1px solid var(--rule); border-radius:3px;
  background:color-mix(in oklab, var(--paper) 90%, transparent);
  opacity:0; transition:opacity .2s; white-space:nowrap;
}
.bp-coords.on{ opacity:1 }

/* ---- selection frame: one frame that glides between hovered layers ---- */
.bp-select{
  position:fixed; z-index:65; left:0; top:0; width:0; height:0; pointer-events:none;
  border:1px solid var(--ink); opacity:0;
  transition:opacity .2s, transform .5s var(--ease-out), width .5s var(--ease-out), height .5s var(--ease-out);
}
.bp-select.on{ opacity:1 }
.bp-select.snap{ transition:opacity .2s }          /* first appearance: no slide in from 0,0 */
.bp-select i{
  position:absolute; width:7px; height:7px; background:var(--paper); border:1px solid var(--ink);
  transform:translate(-50%, -50%);
}
.bp-select i:nth-child(1){ left:0;    top:0 }
.bp-select i:nth-child(2){ left:50%;  top:0 }
.bp-select i:nth-child(3){ left:100%; top:0 }
.bp-select i:nth-child(4){ left:100%; top:50% }
.bp-select i:nth-child(5){ left:100%; top:100% }
.bp-select i:nth-child(6){ left:50%;  top:100% }
.bp-select i:nth-child(7){ left:0;    top:100% }
.bp-select i:nth-child(8){ left:0;    top:50% }
.bp-select em{                                     /* layer name, top left */
  position:absolute; left:-1px; bottom:100%; margin-bottom:7px;
  font:500 10px/1 var(--font-mono); font-style:normal; letter-spacing:.06em; color:var(--ink); white-space:nowrap;
}
.bp-select b{                                      /* size badge, bottom centre */
  position:absolute; left:50%; top:100%; transform:translate(-50%, 9px);
  font:500 10px/1 var(--font-mono); letter-spacing:.04em; white-space:nowrap;
  background:var(--ink); color:var(--paper); padding:4px 7px; border-radius:3px;
}
@media (hover:none){ .bp-select{ display:none } }

/* ---- dimension line: measures the element it sits on ---- */
[data-dim]{ position:relative }
.bp-dim{
  position:absolute; left:0; right:0; top:-30px; height:11px; pointer-events:none;
  border-left:1px solid var(--line); border-right:1px solid var(--line);
  transform:scaleX(0); transition:transform 1.2s var(--ease-inout) .2s;
}
.bp-dim::before{ content:''; position:absolute; left:0; right:0; top:5px; height:1px; background:var(--line) }
.bp-dim span{
  position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
  font:500 10px/1 var(--font-mono); color:var(--line); letter-spacing:.06em;
  background:var(--paper); padding:0 8px; opacity:0; transition:opacity .4s 1.1s;
}
/* draws when its element builds in (data-dim goes with data-rise or data-build) */
[data-dim].is-built .bp-dim{ transform:scaleX(1) }
[data-dim].is-built .bp-dim span{ opacity:1 }

/* ---- drawing title block (the box in the corner of every architectural sheet) ---- */
.bp-titleblock{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));
  border:1px solid var(--ink);
}
.bp-titleblock > div{ padding:12px 14px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); min-height:64px }
.bp-titleblock .k{ display:block; font:500 9px/1 var(--font-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--soft); margin-bottom:10px }
.bp-titleblock .v{ font:400 15px/1.2 var(--font-display) }

@media (prefers-reduced-motion: reduce){
  .bp-select{ transition:opacity .2s }
  .bp-dim{ transition:none; transform:scaleX(1) }
  .bp-dim span{ transition:none; opacity:1 }
}