/* ============================================================
   Dimension annotations — drop-in overlay for a card grid.
   Container-agnostic. Usage:
     - add class "dims-host" to the grid container (+ toggle "show-dims"
       to reveal at rest instead of on hover)
     - wrap each card in <div class="dimframe" data-w='..' data-h='..'>
     - a card opts out entirely with class "no-dims"
   Throwaway preview asset — not wired into any live page.
   Colour tokens (--color-*) come from the page's own style.css.
   ============================================================ */
:root{
  --dim:#64748B; --dim-hi:#0EA5E9;
  --dim-weight:1px;          /* line thickness */
  --tick-len:11px;           /* tick-slash length */
  --tick-angle:45deg;        /* tick-slash angle */
  --dim-offset:34px;         /* distance of top/bottom dim line from card */
  --dim-offset-side:34px;    /* distance of left/right dim line from card */
  --wit-gap:6px;             /* witness gap from card edge */
  --overshoot:4px;           /* how far lines run past the tick */
  --card-gap:2rem;           /* horizontal gap between cards (matches .features) */
  --gap-drop:22px;           /* how far below the cards the spacing dim sits */
  --angle-d:76px;            /* corner-angle arc diameter */
  --angle-ext:46px;          /* corner-angle extension length (lines hidden) */
}

.dimframe{position:relative;display:flex}
.dimframe > .feature{flex:1}     /* fill the stretched grid cell → equal heights */
.dimbox{position:relative}       /* positioning context for annotating a non-card element */
.anno{position:absolute;pointer-events:none;z-index:5}

/* ---------- horizontal dimension (width) ---------- */
.dim-top{top:calc(-1*var(--dim-offset));left:0;right:0;height:var(--dim-offset)}
.dim-top .line{position:absolute;left:calc(-1*var(--overshoot));right:calc(-1*var(--overshoot));top:calc(6px - var(--dim-weight)/2);height:var(--dim-weight);background:var(--dim);transform:scaleX(0);transform-origin:center;transition:transform .5s ease .05s}
.dim-top .wit{position:absolute;width:var(--dim-weight);top:calc(6px - var(--overshoot));bottom:var(--wit-gap);background:var(--dim);opacity:0;transition:opacity .3s ease}
.dim-top .wit.l{left:0;transform:translateX(-50%)}.dim-top .wit.r{right:0;transform:translateX(50%)}
.dim-top .val{position:absolute;top:6px;left:50%;transform:translate(-50%,-50%);z-index:2;font-family:'JetBrains Mono',monospace;font-size:.7rem;line-height:1;color:var(--color-dark);background:var(--color-bg);padding:1px 8px;letter-spacing:.5px;opacity:0;transition:opacity .3s ease .3s;white-space:nowrap}

/* ---------- horizontal dimension on the BOTTOM (mirror of dim-top; bottommost stacked card) ---------- */
.dim-bottom{bottom:calc(-1*var(--dim-offset));left:0;right:0;height:var(--dim-offset)}
.dim-bottom .line{position:absolute;left:calc(-1*var(--overshoot));right:calc(-1*var(--overshoot));bottom:calc(6px - var(--dim-weight)/2);height:var(--dim-weight);background:var(--dim);transform:scaleX(0);transform-origin:center;transition:transform .5s ease .05s}
.dim-bottom .wit{position:absolute;width:var(--dim-weight);bottom:calc(6px - var(--overshoot));top:var(--wit-gap);background:var(--dim);opacity:0;transition:opacity .3s ease}
.dim-bottom .wit.l{left:0;transform:translateX(-50%)}.dim-bottom .wit.r{right:0;transform:translateX(50%)}
.dim-bottom .term{bottom:6px}
.dim-bottom .term.l{left:0}.dim-bottom .term.r{right:0}
.dim-bottom .val{position:absolute;bottom:6px;left:50%;transform:translate(-50%,50%);z-index:2;font-family:'JetBrains Mono',monospace;font-size:.7rem;line-height:1;color:var(--color-dark);background:var(--color-bg);padding:1px 8px;letter-spacing:.5px;opacity:0;transition:opacity .3s ease .3s;white-space:nowrap}

/* horizontal dim value sitting completely OUTSIDE the end tick (add .vl or .vr to the
   .val span) — beside the line, vertically centred on it, not breaking it (no mask) */
.dim-top .val.vl{left:auto;right:calc(100% + var(--overshoot) + 6px);transform:translateY(-50%);background:none;padding:0}
.dim-top .val.vr{left:calc(100% + var(--overshoot) + 6px);right:auto;transform:translateY(-50%);background:none;padding:0}
.dim-bottom .val.vl{left:auto;right:calc(100% + var(--overshoot) + 6px);transform:translateY(50%);background:none;padding:0}
.dim-bottom .val.vr{left:calc(100% + var(--overshoot) + 6px);right:auto;transform:translateY(50%);background:none;padding:0}

/* ---------- vertical dimension (height) ---------- */
.dim-left{top:0;bottom:0;left:calc(-1*var(--dim-offset-side));width:var(--dim-offset-side)}
.dim-left .line{position:absolute;top:calc(-1*var(--overshoot));bottom:calc(-1*var(--overshoot));left:calc(6px - var(--dim-weight)/2);width:var(--dim-weight);background:var(--dim);transform:scaleY(0);transform-origin:center;transition:transform .5s ease .05s}
.dim-left .wit{position:absolute;height:var(--dim-weight);left:calc(6px - var(--overshoot));right:var(--wit-gap);background:var(--dim);opacity:0;transition:opacity .3s ease}
.dim-left .wit.t{top:0;transform:translateY(-50%)}.dim-left .wit.b{bottom:0;transform:translateY(50%)}
.dim-left .val{position:absolute;left:6px;top:50%;transform:translate(-50%,-50%) rotate(-90deg);z-index:2;font-family:'JetBrains Mono',monospace;font-size:.7rem;line-height:1;color:var(--color-dark);background:var(--color-bg);padding:1px 8px;letter-spacing:.5px;opacity:0;transition:opacity .3s ease .3s;white-space:nowrap}

/* ---------- vertical dimension on the RIGHT (mirror of dim-left; rightmost card) ---------- */
.dim-right{top:0;bottom:0;right:calc(-1*var(--dim-offset-side));width:var(--dim-offset-side)}
.dim-right .line{position:absolute;top:calc(-1*var(--overshoot));bottom:calc(-1*var(--overshoot));right:calc(6px - var(--dim-weight)/2);width:var(--dim-weight);background:var(--dim);transform:scaleY(0);transform-origin:center;transition:transform .5s ease .05s}
.dim-right .wit{position:absolute;height:var(--dim-weight);right:calc(6px - var(--overshoot));left:var(--wit-gap);background:var(--dim);opacity:0;transition:opacity .3s ease}
.dim-right .wit.t{top:0;transform:translateY(-50%)}.dim-right .wit.b{bottom:0;transform:translateY(50%)}
.dim-right .term{right:6px}
.dim-right .term.t{top:0}.dim-right .term.b{bottom:0}
.dim-right .val{position:absolute;right:6px;top:50%;transform:translate(50%,-50%) rotate(-90deg);z-index:2;font-family:'JetBrains Mono',monospace;font-size:.7rem;line-height:1;color:var(--color-dark);background:var(--color-bg);padding:1px 8px;letter-spacing:.5px;opacity:0;transition:opacity .3s ease .3s;white-space:nowrap}

/* vertical dim value sitting completely OUTSIDE the end tick (add .vt or .vb to the
   .val span) — above/below the line, centred on it, KEEPS the vertical bottom-to-top
   orientation of the inline value (writing-mode instead of rotate, so the box's layout
   height is the text length and pure-CSS positioning works), no mask */
.dim-left .val.vt{top:auto;bottom:calc(100% + var(--overshoot) + 4px);transform:translateX(-50%);writing-mode:sideways-lr;background:none;padding:0}
.dim-left .val.vb{top:calc(100% + var(--overshoot) + 4px);transform:translateX(-50%);writing-mode:sideways-lr;background:none;padding:0}
.dim-right .val.vt{top:auto;bottom:calc(100% + var(--overshoot) + 4px);transform:translateX(50%);writing-mode:sideways-lr;background:none;padding:0}
.dim-right .val.vb{top:calc(100% + var(--overshoot) + 4px);transform:translateX(50%);writing-mode:sideways-lr;background:none;padding:0}

/* ---------- tick terminator (0x0 anchor + ::before slash) ---------- */
.term{position:absolute;width:0;height:0;opacity:0;transition:opacity .3s ease .3s}
.dim-top .term{top:6px}
.dim-top .term.l{left:0}.dim-top .term.r{right:0}
.dim-left .term{left:6px}
.dim-left .term.t{top:0}.dim-left .term.b{bottom:0}
.term-tick::before{content:'';position:absolute;left:0;top:0;width:var(--tick-len);height:var(--dim-weight);background:var(--dim);transform:translate(-50%,-50%) rotate(var(--tick-angle))}

/* ---------- spacing dimension (in the gap, below the two cards) ---------- */
.dim-gap{left:100%;top:calc(100% + var(--gap-drop));width:var(--card-gap);height:0}
.dim-gap .line{position:absolute;left:calc(-1*var(--overshoot));right:calc(-1*var(--overshoot));top:calc(0px - var(--dim-weight)/2);height:var(--dim-weight);background:var(--dim);transform:scaleX(0);transform-origin:center;transition:transform .5s ease .05s}
.dim-gap .wit{position:absolute;width:var(--dim-weight);top:calc(-1*var(--gap-drop) + var(--wit-gap));height:calc(var(--gap-drop) - var(--wit-gap) + var(--overshoot));background:var(--dim);opacity:0;transition:opacity .3s ease}
.dim-gap .wit.l{left:0;transform:translateX(-50%)}.dim-gap .wit.r{right:0;transform:translateX(50%)}
.dim-gap .term{position:absolute;top:0;width:0;height:0;opacity:0;transition:opacity .3s ease .3s}
.dim-gap .term.l{left:0}.dim-gap .term.r{right:0}
.dim-gap .val{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);z-index:2;font-family:'JetBrains Mono',monospace;font-size:.7rem;line-height:1;color:var(--color-dark);background:var(--color-bg);padding:1px 8px;letter-spacing:.5px;opacity:0;transition:opacity .3s ease .3s;white-space:nowrap}
/* gap dim value OUTSIDE the end tick — the gap is usually too narrow for a mask break */
.dim-gap .val.vl{left:auto;right:calc(100% + var(--overshoot) + 6px);transform:translateY(-50%);background:none;padding:0}
.dim-gap .val.vr{left:calc(100% + var(--overshoot) + 6px);right:auto;transform:translateY(-50%);background:none;padding:0}

/* ---------- corner angle (arc + end ticks + masked label, inside a corner) ---------- */
.dim-angle{right:0;bottom:0;width:0;height:0}
.dim-angle .ext-h,.dim-angle .ext-v{display:none}   /* extension lines hidden */
.dim-angle .arc{position:absolute;right:0;bottom:0;width:var(--angle-d);height:var(--angle-d);border:var(--dim-weight) solid var(--dim);border-radius:50%;transform:translate(50%,50%);clip-path:polygon(0 0,50% 0,50% 50%,0 50%);opacity:0;transition:opacity .3s ease .3s}
.dim-angle .term.h{right:calc(var(--angle-d)/2);bottom:0}
.dim-angle .term.v{right:0;bottom:calc(var(--angle-d)/2)}
.dim-angle .aval{position:absolute;right:calc(var(--angle-d)*0.19);bottom:calc(var(--angle-d)*0.19);transform:translate(50%,50%);z-index:2;font-family:'JetBrains Mono',monospace;font-size:.64rem;line-height:1;color:var(--color-dark);background:var(--color-surface);padding:1px 2px;letter-spacing:.5px;opacity:0;transition:opacity .3s ease .3s;white-space:nowrap}

/* 270° reflex (comparative) angle — three-quarter arc drawn OUTSIDE the same corner as the
   90°, with its value out in the exterior. Reuses .dim-angle's corner centring + ticks. */
.dim-angle.reflex .arc{clip-path:polygon(50% 0,100% 0,100% 100%,0 100%,0 50%,50% 50%)}
.dim-angle.reflex .aval{right:calc(-1*var(--angle-d)*0.42);bottom:calc(-1*var(--angle-d)*0.42);background:var(--color-bg)}

/* ---------- reveal (at rest when .show-dims, else on hover/focus) ---------- */
.dims-host.show-dims .dim-top .line,.dimframe:hover .dim-top .line,.dimframe:focus-within .dim-top .line,
.dims-host.show-dims .dim-bottom .line,.dimframe:hover .dim-bottom .line,.dimframe:focus-within .dim-bottom .line{transform:scaleX(1)}
.dims-host.show-dims .dim-left .line,.dimframe:hover .dim-left .line,.dimframe:focus-within .dim-left .line,
.dims-host.show-dims .dim-right .line,.dimframe:hover .dim-right .line,.dimframe:focus-within .dim-right .line{transform:scaleY(1)}
.dims-host.show-dims .dim-gap .line,.dimframe:hover .dim-gap .line,.dimframe:focus-within .dim-gap .line{transform:scaleX(1)}
.dims-host.show-dims .wit,.dimframe:hover .wit,.dimframe:focus-within .wit{opacity:1}
.dims-host.show-dims .val,.dimframe:hover .val,.dimframe:focus-within .val{opacity:1}
.dims-host.show-dims .term,.dimframe:hover .term,.dimframe:focus-within .term{opacity:1}
.dims-host.show-dims .arc,.dims-host.show-dims .aval,.dimframe:hover .arc,.dimframe:hover .aval,.dimframe:focus-within .arc,.dimframe:focus-within .aval{opacity:1}

/* (card hover highlight intentionally omitted — the live homepage has none) */

@media (prefers-reduced-motion:reduce){
  .dim-top .line,.dim-bottom .line,.dim-left .line,.dim-right .line,.dim-gap .line{transform:none!important;transition:none}
  .wit,.val,.term,.arc,.aval{opacity:1!important;transition:none}
}
/* single-column: the horizontal spacing dim has no gap to measure, so drop it.
   Smaller offset so the side (vertical) dims don't run off a narrow screen. */
@media (max-width:768px){
  .dim-gap{display:none}
  :root{ --dim-offset:17px; --dim-offset-side:21px }   /* side strip 21px → ~15px visible gap (line sits 6px in) */
}

/* ============================================================
   CONTROL PANEL
   ============================================================ */
.panel{position:fixed;top:16px;right:16px;z-index:50;width:250px;background:var(--color-surface);border:2px solid var(--color-dark);font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--color-text);box-shadow:0 8px 30px rgba(30,41,59,.18)}
.panel-h{display:flex;justify-content:space-between;align-items:center;background:var(--color-dark);color:#fff;padding:.55rem .75rem;font-weight:700;letter-spacing:.5px;font-size:.68rem}
.panel-h button{background:none;border:0;color:#fff;font-size:1rem;line-height:1;cursor:pointer;padding:0 .25rem}
.panel-body{padding:.85rem .8rem;display:flex;flex-direction:column;gap:.7rem;max-height:82vh;overflow:auto}
.panel.collapsed .panel-body{display:none}
.panel label{display:flex;flex-direction:column;gap:.3rem;text-transform:uppercase;letter-spacing:.4px;color:var(--color-text-light);font-size:.64rem}
.panel label.row{flex-direction:row;align-items:center;gap:.5rem;text-transform:none;color:var(--color-text);font-size:.7rem}
.panel input[type=range]{width:100%;accent-color:var(--color-accent)}
.panel input[type=checkbox]{accent-color:var(--color-accent);width:15px;height:15px}
.panel .val-b{color:var(--color-dark);font-weight:700}
.panel hr{border:0;border-top:1px dashed var(--color-border);margin:.1rem 0}
.panel .act{background:var(--color-dark);color:#fff;border:0;padding:.5rem;cursor:pointer;font-family:inherit;font-size:.68rem;letter-spacing:.5px;text-transform:uppercase}
.panel #readout{background:var(--color-bg);border:1px solid var(--color-border);padding:.55rem;color:var(--color-dark);font-size:.66rem;line-height:1.5;white-space:pre;overflow:auto}
@media (max-width:768px){ .panel{position:static;width:auto;margin:1rem} }

/* Dimension VALUES use a plain-zero font — JetBrains Mono's dotted zero reads as an 8 at
   small sizes (e.g. 90° looking like 98°). Placed last so it wins over every value rule
   above; the mono labels elsewhere are untouched. */
.dim-top .val,.dim-bottom .val,.dim-left .val,.dim-right .val,.dim-gap .val,.dim-angle .aval{font-family:'Plus Jakarta Sans',sans-serif}

/* Dims inside the dark "Still Have Questions" section (help page) — its background is
   var(--color-dark) #1E293B. Use light lines + a dark mask that matches so the value
   break blends in, and light value text so it stays readable on the dark. */
.contact-section{ --dim:rgba(255,255,255,.55) }
.contact-section .val,.contact-section .aval{ background:var(--color-dark); color:rgba(255,255,255,.92) }
/* reflex value has its own (higher-specificity) background rule — re-override it here so the
   270° mask is the dark panel colour, not the light page colour */
.contact-section .dim-angle.reflex .aval{ background:var(--color-dark) }

/* ---------- homepage-only overlays (drawn by js/dims-home.js) ---------- */
/* #hero-dim / #btn-gap only exist on the homepage; the .tagline / .cta-row tweaks are
   gated behind .dims-home (set on <body> by dims-home.js) so this shared file can't
   restyle those classes on other pages. */
#hero-dim{position:absolute;inset:0;pointer-events:none;z-index:1}
#hero-dim span{position:absolute;background:var(--dim,#64748B)}
#hero-dim .hd-line{height:var(--dim-weight,1px);transform:translateY(-50%)}
#hero-dim .hd-wit{width:var(--dim-weight,1px);transform:translateX(-50%)}
#hero-dim .hd-tick{width:var(--tick-len,11px);height:var(--dim-weight,1px);transform:translate(-50%,-50%) rotate(var(--tick-angle,45deg))}
#btn-gap{position:absolute;inset:0;pointer-events:none;z-index:1}
#btn-gap span{position:absolute;background:var(--dim,#64748B)}
#btn-gap .l{height:var(--dim-weight,1px);transform:translateY(-50%)}
#btn-gap .w{width:var(--dim-weight,1px);transform:translateX(-50%)}
#btn-gap .t{width:var(--tick-len,11px);height:var(--dim-weight,1px);transform:translate(-50%,-50%) rotate(var(--tick-angle,45deg))}
#btn-gap .v{background:none;font-family:'Plus Jakarta Sans',sans-serif;font-size:.62rem;color:var(--color-dark);letter-spacing:.5px;white-space:nowrap;transform:translate(0,-50%)}
.dims-home .cta-row{position:relative}
/* tagline: inline-block so its box hugs the text (places the line's break); z-index above
   the line but NO background, so the line shows through/behind it */
.dims-home .tagline{position:relative;z-index:2;display:inline-block}

/* annotations are screen decoration — never print them */
@media print{.anno,#hero-dim,#btn-gap{display:none !important}}