/* ============================================================
   Component · CAD viewport overlay
   Selection marquee + tracking crosshair + live X/Y readout for
   any card carrying [data-cad]. Injected by card-cad.js, which
   only runs for hover-capable pointers outside reduced-motion —
   so everything here is gated the same way, and no rule may
   depend on the overlay existing.

   Per-card knobs (set on the card, not here):
     --cad-inset      how far the corner brackets sit inside
     --cad-len        bracket arm length
     --cad-line       hairline colour
     --cad-read-top / --cad-read-right   readout position
   ============================================================ */

@media (hover: hover) and (pointer: fine) {

  [data-cad] { position: relative; }

  .cad {
    position: absolute;
    inset: 0;
    /* Above a card's hover wash, below its text — the hairlines must
       pass behind the headline, not strike through it. Cards that
       raise their content above z-index 1 need no change; cards that
       do not should set `> * { position: relative; z-index: 2 }`. */
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    --len: var(--cad-len, 14px);
    --inset: var(--cad-inset, 10px);
    --edge: var(--cad-edge, var(--color-accent));
    background:
      linear-gradient(var(--edge), var(--edge)) top    var(--inset) left  var(--inset) / var(--len) 1px no-repeat,
      linear-gradient(var(--edge), var(--edge)) top    var(--inset) left  var(--inset) / 1px var(--len) no-repeat,
      linear-gradient(var(--edge), var(--edge)) top    var(--inset) right var(--inset) / var(--len) 1px no-repeat,
      linear-gradient(var(--edge), var(--edge)) top    var(--inset) right var(--inset) / 1px var(--len) no-repeat,
      linear-gradient(var(--edge), var(--edge)) bottom var(--inset) left  var(--inset) / var(--len) 1px no-repeat,
      linear-gradient(var(--edge), var(--edge)) bottom var(--inset) left  var(--inset) / 1px var(--len) no-repeat,
      linear-gradient(var(--edge), var(--edge)) bottom var(--inset) right var(--inset) / var(--len) 1px no-repeat,
      linear-gradient(var(--edge), var(--edge)) bottom var(--inset) right var(--inset) / 1px var(--len) no-repeat;
    transform: scale(1.04); /* start expanded, snap inward to the corners */
    transition:
      opacity var(--duration-fast) var(--ease-out),
      transform var(--duration-normal) var(--ease-out);
  }
  [data-cad]:hover > .cad { opacity: 1; transform: scale(1); }

  /* Tracking hairlines — 1px rules pinned to the pointer, faded out
     towards the card edges so the card never looks gridded over. */
  .cad__v,
  .cad__h {
    position: absolute;
    background: var(--cad-line, color-mix(in srgb, var(--color-accent) 48%, transparent));
  }
  .cad__v {
    top: 0;
    bottom: 0;
    width: 1px;
    left: var(--px, 50%);
    mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  }
  .cad__h {
    left: 0;
    right: 0;
    height: 1px;
    top: var(--py, 50%);
    mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
  }

  /* Live pointer coordinates, title-block style */
  /* Position with --cad-read-top, or set that to `auto` and use
     --cad-read-bottom on cards whose top-right corner is occupied. */
  .cad__read {
    position: absolute;
    top: var(--cad-read-top, var(--space-md));
    bottom: var(--cad-read-bottom, auto);
    right: var(--cad-read-right, var(--space-md));
    display: flex;
    gap: 0.75rem;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1;
    letter-spacing: 0.14em;
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
    opacity: 0;
    transform: translateY(-3px);
    transition:
      opacity var(--duration-fast) var(--ease-out),
      transform var(--duration-normal) var(--ease-out);
  }
  [data-cad]:hover > .cad .cad__read { opacity: 1; transform: translateY(0); }

  /* Narrow or short cards have no spare corner for a title block —
     they keep the brackets and hairlines and drop the readout. */
  [data-cad-read='off'] .cad__read { display: none; }

  /* Brackets only. For cards where the tracking crosshair is more
     activity than the surrounding section wants. */
  [data-cad-cross='off'] .cad__v,
  [data-cad-cross='off'] .cad__h { display: none; }

  /* Cards on ink sections: the accent reads hot against dark, so the
     hairlines lighten instead of saturating. */
  [data-cad-theme='dark'] {
    --cad-line: color-mix(in srgb, var(--color-accent) 60%, transparent);
  }
}