/* ==========================================================================
   TechRS — field.css · "signal field" hosts (design spec v4 §5)
   --------------------------------------------------------------------------
   PUBLIC CONTRACT
     [data-field="hero|band|panel"]  host: position:relative + isolation
                                     (own stacking context). field.js adds
                                     the canvas and the .is-live class.
     .field-canvas                   the canvas field.js inserts as the first
                                     child (absolute, inset 0, z-index 0,
                                     pointer-events none, aria-hidden).
     .is-live                        on the host once the canvas has drawn;
                                     hides the static CSS fallback.
     Tokens (read here, never set)   --field-tick --field-accent
                                     --field-accent-2 (defined by core.css per
                                     scope; fallbacks below if missing).
     Optional knobs (on the host or an ancestor, px only)
                                     --field-cell  grid pitch (default 22px,
                                                   18px under 600px)
                                     --field-len   tick length (default 11px,
                                                   9px under 600px)
     data-field-seed="<int>"         (attribute) another stream layout.
   NOTES
     • The host's ::before is reserved for the static tick fallback (no JS,
       before the first canvas frame).
     • Direct children of a host are lifted above the field
       (position:relative; z-index:1) at zero specificity, so any class
       rule that positions them still wins.
     • A host is a positioned stacking context: an element from OUTSIDE that
       overlaps it (e.g. a card pulled up over the hero with a negative
       margin) must be positioned itself (position:relative; z-index:1+),
       or the host paints over it.
     • --_cell / --_len are internal (resolved knobs read by field.js).
   ========================================================================== */

[data-field] {
  position: relative;
  isolation: isolate;
  --_cell: var(--field-cell, 22px);
  --_len: var(--field-len, 11px);
}
@media (max-width: 599.98px) {
  [data-field] {
    --_cell: var(--field-cell, 18px);
    --_len: var(--field-len, 9px);
  }
}

/* Content sits above the field (zero specificity: any class rule wins) */
:where([data-field]) > :where(:not(.field-canvas)) {
  position: relative;
  z-index: 1;
}

/* Static fallback: upright ticks on the grid the canvas uses (columns
   centered, rows from the top): a 1px line per cell column, masked to a
   centered band in each cell row. */
[data-field]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image: repeating-linear-gradient(90deg,
      transparent 0 calc(var(--_cell) / 2),
      var(--field-tick, #dcd2c5) calc(var(--_cell) / 2) calc(var(--_cell) / 2 + 1px),
      transparent calc(var(--_cell) / 2 + 1px) var(--_cell));
  background-size: var(--_cell) var(--_cell);
  background-position: 50% 0;
  -webkit-mask-image: repeating-linear-gradient(180deg,
      transparent 0 calc((var(--_cell) - var(--_len)) / 2),
      #000 calc((var(--_cell) - var(--_len)) / 2) calc((var(--_cell) + var(--_len)) / 2),
      transparent calc((var(--_cell) + var(--_len)) / 2) var(--_cell));
  mask-image: repeating-linear-gradient(180deg,
      transparent 0 calc((var(--_cell) - var(--_len)) / 2),
      #000 calc((var(--_cell) - var(--_len)) / 2) calc((var(--_cell) + var(--_len)) / 2),
      transparent calc((var(--_cell) + var(--_len)) / 2) var(--_cell));
  -webkit-mask-size: var(--_cell) var(--_cell);
  mask-size: var(--_cell) var(--_cell);
  -webkit-mask-position: 50% 0;
  mask-position: 50% 0;
  /* stays up until the canvas has faded in, so there is no dip */
  transition: visibility 0s linear 0.5s;
}
[data-field="panel"]::before {
  background-image: repeating-linear-gradient(90deg,
      transparent 0 calc(var(--_cell) / 2),
      var(--field-tick, #2a2e33) calc(var(--_cell) / 2) calc(var(--_cell) / 2 + 1px),
      transparent calc(var(--_cell) / 2 + 1px) var(--_cell));
}
[data-field].is-live::before {
  visibility: hidden;
}

.field-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.45s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.is-live > .field-canvas {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  [data-field]::before,
  .field-canvas {
    transition: none;
  }
}

/* Windows high contrast / forced colors: no decoration */
@media (forced-colors: active) {
  [data-field]::before,
  .field-canvas {
    display: none;
  }
}