/* ==========================================================================
   IDW-26 - frame.v1.css (bible section 5a)
   The drafting frame: fixed hairline rectangle inset var(--frame), corner
   crosshairs, sheet header on the top border, bottom-right scroll readout,
   2px amber progress tick, ghost index numerals and section scaffolding.

   Required body-child markup (copy VERBATIM from docs/IDW26-TEMPLATE.html):

   <div class="sheet-frame" aria-hidden="true">
     <span class="sf-x sf-x-tl"></span><span class="sf-x sf-x-tr"></span>
     <span class="sf-x sf-x-bl"></span><span class="sf-x sf-x-br"></span>
     <div class="sf-head">
       <span class="sf-left">ID-WARE / DRAWING SET IDW-26</span>
       <span class="sf-mid">SHT 03 - ACCESS MANAGEMENT</span>
       <span class="sf-right">REV B / 2026</span>
     </div>
     <span id="sheet-readout" class="sf-readout">0.000 m</span>
     <span class="sf-tick"></span>
   </div>

   z-index ladder (site-wide): section scaffolding -1 | content auto |
   nav-drawer 85 | .nav 90 | .nav-drop 95 | .sheet-frame 110 (drafting
   chrome draws over everything) | .skip-link 140.
   ========================================================================== */

.sheet-frame{
  position:fixed;
  inset:var(--frame);
  border:1px solid var(--hairline);
  pointer-events:none;
  z-index:110;
}

/* --- corner crosshairs ---------------------------------------------------- */
.sf-x{position:absolute;width:13px;height:13px}
.sf-x::before{
  content:'';position:absolute;left:6px;top:0;
  width:1px;height:13px;background:var(--hairline-strong);
}
.sf-x::after{
  content:'';position:absolute;top:6px;left:0;
  width:13px;height:1px;background:var(--hairline-strong);
}
.sf-x-tl{top:-7px;left:-7px}
.sf-x-tr{top:-7px;right:-7px}
.sf-x-bl{bottom:-7px;left:-7px}
.sf-x-br{bottom:-7px;right:-7px}

/* --- sheet header on the top border --------------------------------------- */
.sf-head{
  position:absolute;top:0;left:0;right:0;
  display:flex;justify-content:space-between;align-items:center;
  padding:0 14px;
}
.sf-left,.sf-right{flex:none}
.sf-mid{flex:none;overflow:hidden;text-overflow:ellipsis}
.sf-head>span{
  transform:translateY(-50%);
  background:var(--floor);
  padding:0 10px;
  font-family:var(--font);
  font-size:10px;font-weight:700;
  letter-spacing:1.3px;text-transform:uppercase;
  color:var(--annot);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* --- scroll readout, bottom-right ('0.000 m' to '1.000 m') ---------------- */
.sf-readout{
  position:absolute;right:14px;bottom:0;
  transform:translateY(50%);
  background:var(--floor);
  padding:0 10px;
  font-family:var(--font);
  font-size:10px;font-weight:700;
  letter-spacing:1.3px;text-transform:uppercase;
  color:var(--annot);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* --- 2px amber progress tick along the bottom edge ------------------------ */
/* Fallback: reveal.v1.js writes --p (0..1) on .sheet-frame from a passive,
   rAF-throttled scroll listener. Enhancement: scroll(root) animation
   timeline under @supports. */
.sf-tick{
  position:absolute;left:-1px;right:-1px;bottom:-1px;
  height:2px;background:var(--amber);
  transform:scaleX(var(--p,0));
  transform-origin:left center;
}
@supports (animation-timeline: scroll()){
  .sf-tick{
    animation:sf-progress linear both;
    animation-timeline:scroll(root);
  }
}
@keyframes sf-progress{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}
/* the tick is a measurement, not decoration: under reduced motion drop the
   scroll-timeline animation (the global kill-switch would corrupt it) and
   let the JS --p fallback drive it instead */
@media (prefers-reduced-motion: reduce){
  .sf-tick{animation:none}
}
html.no-motion .sf-tick{animation:none}

/* ==========================================================================
   GHOST INDEX NUMERALS (bible 5f) - one per section header, hard limit.
   Markup: <span class="ghost-n" aria-hidden="true">01</span> as the first
   child of a .sheet-section.
   ========================================================================== */
.ghost-n{
  position:absolute;
  top:max(0px, calc(var(--space-section) - 1.1em));
  right:clamp(8px, 4vw, 64px);
  z-index:-1;
  font-family:var(--font);
  font-size:clamp(10rem, 7rem + 8vw, 14rem);
  font-weight:900;
  line-height:1;
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  color:transparent;
  -webkit-text-stroke:1px rgba(63,63,70,.55);
  pointer-events:none;
  user-select:none;
}
@supports not (-webkit-text-stroke: 1px #000){
  .ghost-n{color:rgba(63,63,70,.28)}
}

/* ==========================================================================
   SECTION SCAFFOLDING
   .sheet-section: standard vertical rhythm + the exposed baseline grid band
   behind section headers, faded out by mask. Below-fold rendering is
   deferred via content-visibility (bible section 4).
   ========================================================================== */
.sheet-section{
  position:relative;
  isolation:isolate;
  padding-block:var(--space-section);
  content-visibility:auto;
  contain-intrinsic-size:auto 800px;
}
.sheet-section::before{
  content:'';
  position:absolute;top:0;left:0;right:0;
  height:260px;
  z-index:-1;
  background:repeating-linear-gradient(
    to bottom,
    var(--grid-line) 0,
    var(--grid-line) 1px,
    transparent 1px,
    transparent 32px
  );
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 30%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0,#000 30%,transparent 100%);
  pointer-events:none;
}
/* column guides: full-height vertical hairline pair at the .wrap content
   edges, so empty space reads as drawing margin rather than void */
.sheet-section::after{
  content:'';
  position:absolute;top:0;bottom:0;
  left:calc(max((100% - 1280px) / 2, 0px) + var(--frame) + 16px);
  right:calc(max((100% - 1280px) / 2, 0px) + var(--frame) + 16px);
  z-index:-1;
  border-left:1px solid var(--grid-line);
  border-right:1px solid var(--grid-line);
  pointer-events:none;
}

/* ==========================================================================
   COLLAPSE + PRINT
   ========================================================================== */
@media (max-width:480px){
  /* collapse to top + bottom rules */
  .sheet-frame{left:0;right:0;border-left:0;border-right:0}
  .sf-x{display:none}
  .sf-mid{display:none}
}
@media (max-width:720px){
  .sf-mid{display:none}
}

@media print{
  .sheet-frame{display:none}
  .ghost-n{display:none}
  .sheet-section{content-visibility:visible;contain-intrinsic-size:none}
}